Connect Lucid to Visual Studio Code

Connect VS Code to your Lucid account

To install the Lucid extension for VS Code, follow these steps:

1. Open the VS Code application.
2. Navigate to the Extensions Marketplace by clicking the Extensions icon on the Activity Bar on the far left side of the window.
   • Or press Ctrl + Shift + X (PC) or Cmd + Shift + X (Mac) to use a keyboard shortcut.
3. Search "Lucid" in the VS Code Marketplace.
4. Click Install on the right side of the extension card.
5. Follow the prompt to sign in to your Lucid account.
6. Open the Command Palette and type “Lucid”.
   • Or press Cmd + Shift + P (PC) or Ctrl + Shift + P (Mac).
7. Open an existing diagram or create a new one.
8. Edit your diagram.
9. Click Save to codebase in the upper-right of the editor.
10. Select your repository folder.
11. Follow the prompts on your device to save.

Work with Lucid diagrams in VS Code

Create and open a Lucid diagram

To create or open diagrams, follow these steps within VS Code:

1. Open the Command Palette. 
   • Or press Cmd + Shift + P (PC) or Ctrl + Shift + P (Mac) to use the keyboard shortcut.
2. Search for and select Lucid: Open Document or Lucid: Create New Document.
3. From the document picker that opens next to your source code, select your document or click New Document.

Update an existing Lucid diagram

When you’re not editing a Lucid diagram, it appears as a static image saved to your codebase. To edit an existing diagram directly within VS Code, follow these steps:

1. Open a Lucid document in VS Code.
2. Click the Lucid icon at the top of the editor.
3. Edit your Lucid document in VS Code.
4. Click Save to Codebase.
5. Select your repository folder.
6. Follow the prompts on your device to save.

To confirm your updates were saved successfully, follow these steps:

1. Edit and save your Lucid document in VS Code.
2. Close the Lucid editor tab and the diagram preview tab.
3. In the File Explorer, select your diagram's PNG file to open the updated preview.

Convert Mermaid syntax to Lucid objects

To paste Mermaid from Claude Code, Cursor, Codex, or anywhere else and get editable shapes in a Lucid document, follow these steps:

1. Copy raw Mermaid code.
2. Paste the code anywhere in the Lucid extension panel.

The extension converts the code into standard, editable Lucid shapes and lines.

Sync changes from Lucid’s web editor to VS Code

To ensure your VS Code preview reflects your latest edits in Lucid, follow these steps:

1. Open a Lucid document in VS Code.
2. Click the open the external link icon at the top of the editor.
3. Follow the prompts to open the web version of Lucid.
4. From the pop-up window of Lucid’s web version that appears, edit your diagram.
5. Close out of the web version.
6. Return to VS Code.
7. In the VS Code File Explorer, select any other file, then click back onto your diagram's PNG file to refresh the view.
8. Click Update Lucid PNG at the bottom-left of the editor to render the latest version.

Save diagrams to your codebase

Save a PNG image and a lightweight reference file (.lucid) directly to your local repository so you can commit them with your code. Here’s how:

1. Edit the canvas directly inside VS Code.
2. Select Save to Codebase from the top-right of the extension menu.
3. Select your repository folder.
4. Follow the prompts on your device to save.

VS Code editor limitations

With the in-editor experience, you get a focused subset of the web-based Lucid editor, tailored for quick viewing and updates directly alongside your code. To access full capabilities, including the ones listed in the table below, open your document in the web version of Lucid.

FAQ

What version of VS Code is Lucid compatible with?
Lucid for VS Code is compatible with all standard VS Code installations supporting VS Code engine version 1.82.0 or higher.

Do I need a Lucid account to use the VS Code extension?
Yes, you need an active Lucid account. Use of the extension is subject to Lucid’s Terms of Service and Privacy Policy, which apply to your use of the extension but not to your use of any Non-Lucid Application (as defined in our Terms of Service) in connection with the extension.

Resources

Lucid now works inside VS Code

Give feedback on this article