Lucidを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図形と線に変換します。

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に対応していますか？
Lucid for VS Codeは、VS Codeエンジンバージョン1.82.0以降をサポートするすべての標準的なVS Codeインストールと互換性があります。

VS Code拡張機能を使用するには、Lucidアカウントが必要ですか？
はい、有効なLucidアカウントが必要です。拡張機能の利用はLucidの 利用規約 および プライバシーポリシーの対象となりますが、拡張利用規約に関連した非Lucidアプリケーション(利用規約で定義されている)の使用には適用されません。

リソース

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

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