編集 Lucid ドキュメント in Visual Studio Code

VS CodeをLucidアカウントに接続する

VS Code用のLucid拡張機能をインストールするには、以下の手順をフォローしてください:

1. VS Code アプリケーションを開きます。
2. ウィンドウの左端にあるアクティビティバーの拡張機能アイコン をクリックして拡張機能マーケットプレイスに移動します。
   • または、Ctrl + シフト + X(PC)や Cmd + シフト + X(Mac)を押してキーボードショートカットを使うこともできます。
3. VS Code マーケットプレイスで「Lucid」を検索してください。
4. 拡張カードの右側にある「インストール」をクリックしてください。
5. Lucidアカウントにサインインするためのプロンプトをフォローしてください。
6. コマンドパレットを開き、「Lucid」と入力します。
   • または、PCではCmd + シフト + P、MacではCtrl + シフト + Pを押すこともできます。
7. 既存のダイアグラムを開くか、新しく作成してください。
8. 図を編集します。
9. エディターの右上にある「 コードベースに保存 」をクリックします。
10. リポジトリフォルダを選択します。
11. デバイスのプロンプトに従って保存してください。

VS CodeでのLucid ダイアグラムの作業

Lucid ダイアグラムを作成して開く

ダイアグラムを作成または開くには、VS Code内の以下の手順をフォローしてください:

1. コマンドパレットを開きます。
   • または、Cmd + シフト + P(PC)または Ctrl + シフト + P(Mac)を押してキーボードショートカットを使えます。
2. 検索して「 Lucid: Open ドキュメント 」または「 Lucid: Create New Document」を選択してください。
3. ソースコードの横に開くドキュメントピッカーから、ドキュメントを選択するか「 新しいドキュメント」をクリックします。

既存のLucid ダイアグラムを更新する

Lucid ダイアグラムを編集していないときは、コードベースに静的な画像として保存されます。 既存のダイアグラムをVS Code内で直接編集するには、以下の手順をフォローしてください:

1. VS CodeでLucidのドキュメントを開きます。
2. エディター上部にある Lucidアイコンをクリックしてください。
3. VS CodeでLucid ドキュメントを編集してください。
4. 「コードベースに保存」をクリックしてください。
5. リポジトリフォルダを選択します。
6. デバイスのプロンプトに従って保存してください。

更新が正常に保存されていることを確認するには、以下の手順をフォローしてください:

1. 編集してLucidのドキュメントをVS Codeに保存してください。
2. Lucid エディター タブとダイアグラム プレビュー タブを閉じます。
3. ファイルエクスプローラーでダイアグラムのPNGファイルを選択して更新されたプレビューを開きます。

Mermaid構文をLucidオブジェクトに変換する

Claude Code、Cursor、Codex、その他のどこからMermaidを貼り付けて、Lucidドキュメントで編集可能な図形を得たいか、以下の手順をフォローしてください:

1. 生のマーメイドコードをコピーします。
2. コードをLucid拡張機能パネルの任意の場所に貼り付けてください。

この拡張機能はコードを標準的で編集可能なLucid図形と線に変換します。

プロジェクトファイル内の Mermaid コードを Lucid に変換します

Lucid for VS Code拡張機能はプロジェクトファイル内のMermaid ダイアグラムを検出し、Lucidのドキュメントに変換できます。 以下のファイル形式に対応しています。

• .mdおよび.mdx :この拡張機能は、ファイル内のすべてのMermaidコードブロックを検出し、処理します。ブロック数に制限はありません。
• .mmd: 拡張子はファイル全体を1つのダイアグラムとして扱います。

Mermaidをファイルから変換するには、VSコードの以下の手順をフォローしてください:

1. VS Codeで.mdファイルを開き、.mdx、または.mmdマーメイドのコードを含むファイル。
2. 「Lucidに変換」をクリックしてください。
   • .mdファイルではまたは.mdxファイル内では、各マーメイドコードブロックのすぐ上にインラインで表示されます。
   • .mmdファイルではファイルの場合、ファイルの先頭に表示されます。

この拡張機能は、エクスポート前にMermaid構文を検証します。エラーが検出された場合、問題点を強調表示し、Lucidへの転送をキャンセルします。構文エラーを解決してから、もう一度「Lucid形式に変換」をクリックしてください。

検証されると、その拡張機能はダイアグラム用の新しいLucid ドキュメントを作成し、ソースファイルと同じフォルダ内に2つのローカルファイルも保存します。

• 選んだフォーマット(PNG、SVG、またはJSON)でエクスポートされたダイアグラム

• .lucid参照ファイル

変換は個別に処理されます。各 Mermaid コード ブロックまたは .mmdファイルは独自のLucid ドキュメントを生成します。 同じファイルから複数のダイアグラムをエクスポートするには、変換したいダイアグラムの上にある「 Convert to Lucid 」をクリックしてください。

ファイルの取り扱い方法

• ローカル検出：対応ファイルを開くと、拡張機能がデバイス上でファイル全体をスキャンし、Mermaidコードブロックを検出します。この手順では、データがコンピュータから外部に送信されることはありません。
• オンデマンド処理：エクスポートを開始するまで、ファイルの内容は完全にローカルに保持されます。データは、ユーザーが明示的に「Lucidに変換」をクリックした後にのみLucidに送信されます。
• アップロード前の検証：この拡張機能は、サポートされているすべてのファイルタイプにおいて、ローカルでMermaid構文を検証します。構文にエラーが含まれている場合、処理は直ちに停止し、何も送信されません。

LucidのウェブエディターからVS Codeへの同期変更

Lucidで最新の編集を反映させるために、以下のステップをフォローしてください:

1. VS CodeでLucidのドキュメントを開きます。
2. エディター上部の外部リンクアイコン を開くボタンをクリックしてください。
3. Lucidのウェブ版を開くためのプロンプトをフォローしてください。
4. Lucidのウェブ版のポップアップウィンドウから、編集 your ダイアグラム。
5. ウェブ版を閉じます。
6. VS Codeに戻る。
7. VS Code ファイルのエクスプローラーで、他のファイルを選択し、ダイアグラムのPNGファイルを戻してビューを更新します。
8. エディター左下の「 Update Lucid PNG 」をクリックすると、最新バージョンをレンダリングできます。

ダイアグラムをコードベースに保存してください

PNG画像と軽量の参照ファイル(.lucid)を直接ローカルリポジトリに保存し、コードと一緒にコミットできるようにします。方法は以下のとおりです。

1. VS Code内でキャンバスを直接編集してください。
2. 拡張機能メニューの右上にある「コードベースに保存」を選択してください。
3. リポジトリフォルダを選択します。
4. デバイスのプロンプトに従って保存してください。

VS Code エディターの制限

編集者内の経験では、ウェブベースのLucid Editorの一つの集中したサブセットを手に入れ、コードと並行して素早く閲覧・更新できるよう最適化されています。 下のテーブルに記載されている機能を含む全機能にアクセスするには、Lucidのウェブ版でドキュメントを開きます。

まだ助けが必要ですか？

よくある質問 (FAQ)

リソース

この機能の詳細については、以下の追加リソースを参照してください。これらのリソースは英語でのみご利用いただけます。

コミュニティの投稿

LucidがVS Code内で動作するようになりました

この記事へのフィードバックをお寄せください