Med tillägget Lucid for Visual Studio Code (VS Code) kan du skapa, öppna, förhandsgranska och redigera Lucid-diagram sida vid sida med din kodbas, utan att behöva byta till en webbläsare. Varje diagram stöds av ett dynamiskt Lucid-dokument som förblir synkroniserat med ditt arkiv. Detta gör att diagrammen är granskningsbara i dina pull requests samtidigt som det ger teammedlemmar och AI-agenter omedelbar systemarkitekturkontext.
Plantillgänglighet: Free, Individual, Team och Enterprise.
- Inte tillgängligt på FedRAMP- konton.
- Läs artikeln Lucid Plans för mer information om vad som är tillgängligt på ditt konto eller artikeln Uppgradera ditt Lucid-konto för instruktioner om hur du uppgraderar.
Koppla VS Code till ditt Lucid-konto
För att installera Lucid-tillägget för VS Code, följ dessa steg:
- Öppna VS Code-applikationen.
- Navigera till Extensions Marketplace genom att klicka på
ikonen Tillägg i aktivitetsfältet längst till vänster i fönstret.
- Eller tryck Ctrl + Shift + X (PC) eller Cmd + Shift + X (Mac) för att använda ett kortkommando.
- Sök efter "Lucid" på VS Code Marketplace.
- Klicka på Installera på höger sida av tilläggskortet.
- Följ anvisningarna för att logga in på ditt Lucid-konto.
- Öppna kommandopaletten och skriv "Lucid".
- Eller tryck på Cmd + Skift + P (PC) eller Ctrl + Skift + P (Mac).
- Öppna ett befintligt diagram eller skapa ett nytt.
- Redigera ditt diagram.
- Klicka på Spara till kodbasen längst upp till höger i redigeraren.
- Välj din arkivmapp.
- Följ anvisningarna på din enhet för att spara.
Obs: VS Code använder inte cookies. Det här innebär att aktiva Lucid-sessioner inte finns kvar efter att VS Code har stängts.
Arbeta med Lucid-diagram i VS Code
Skapa och öppna ett Lucid-diagram
För att skapa eller öppna diagram, följ dessa steg i VS Code:
- Öppna kommandopaletten.
- Eller tryck Cmd + Shift + P (PC) eller Ctrl + Shift + P (Mac) för att använda kortkommandot.
- Sök efter och välj Lucid: Öppna dokument eller Lucid: Skapa nytt dokument.
- Från dokumentväljaren som öppnas bredvid din källkod väljer du ditt dokument eller klickar på Nytt dokument.
Uppdatera ett befintligt Lucid-diagram
När du inte redigerar ett Lucid-diagram visas det som en statisk bild som sparats i din kodbas. För att redigera ett befintligt diagram direkt i VS Code, följ dessa steg:
- Öppna ett Lucid-dokument i VS Code.
- Klicka på
Lucid-ikonen högst upp i redigeraren.
- Redigera ditt Lucid-dokument i VS Code.
- Klicka på Spara till kodbas.
- Välj din arkivmapp.
- Följ anvisningarna på din enhet för att spara.
För att bekräfta att dina uppdateringar har sparats, följ dessa steg:
- Redigera och spara ditt Lucid-dokument i VS Code.
- Stäng fliken Lucid-redigeraren och fliken för förhandsgranskning av diagram.
- I Utforskaren väljer du diagrammets PNG-fil för att öppna den uppdaterade förhandsgranskningen.
Konvertera Mermaid-syntax till Lucid-objekt
För att klistra in Mermaid från Claude Code, Cursor, Codex eller någon annanstans och få redigerbara former i ett Lucid-dokument, följ dessa steg:
- Kopiera rå Mermaid-kod.
- Klistra in koden var som helst i Lucid-tilläggspanelen.
Tillägget konverterar koden till vanliga, redigerbara Lucid-former och linjer.
Läs mer: För mer information om hur du använder Mermaid-syntax i Lucid, kolla in vår artikel Diagram som kod med Mermaid i Lucidchart.
Synkronisera ändringar från Lucids webbredigerare till VS Code
För att säkerställa att din VS Code-förhandsgranskning återspeglar dina senaste redigeringar i Lucid, följ dessa steg:
- Öppna ett Lucid-dokument i VS Code.
- Klicka på den öppna
ikonen för extern länk högst upp i redigeraren.
- Följ anvisningarna för att öppna webbversionen av Lucid.
- Redigera ditt diagram från popup-fönstret som visas i Lucids webbversion.
- Stäng av webbversionen.
- Återgå till VS-kod.
- I VS Code File Explorer väljer du en annan fil och klickar sedan tillbaka på diagrammets PNG-fil för att uppdatera vyn.
- Klicka på Uppdatera Lucid PNG längst ner till vänster i redigeraren för att rendera den senaste versionen.
Spara diagram i din kodbas
Spara en PNG-bild och en lätt referensfil (.lucid) direkt till ditt lokala arkiv så att du kan spara dem med din kod. Så här gör du:
- Redigera arbetsytan direkt i VS Code.
- Välj Spara till kodbas längst upp till höger i tilläggsmenyn.
- Välj din arkivmapp.
- Följ anvisningarna på din enhet för att spara.
Begränsningar för VS Code-redigeraren
Med inbyggda redigeringspaket får du en fokuserad delmängd av den webbaserade Lucid-redigeraren, skräddarsydd för snabb visning och uppdateringar direkt tillsammans med din kod. För att få tillgång till alla funktioner, inklusive de som anges i tabellen nedan, öppna ditt dokument i webbversionen av Lucid.
| Funktioner som inte stöds i VS Code-tillägget | Ytterligare detaljer och rekommendationer | |
| Lucid AI | Lucid AI-prompter och Mermaid-kodgenerering | För att få tillgång till alla AI-funktioner, klicka på ikonen för extern länk högst upp i redigeraren och öppna Lucid i din webbläsare. |
| Exporter | Direkt export till SVG, PDF, CSV, JSON eller PowerPoint | Export i tillägget är begränsad till PNG. |
| Delning | Delningsmodal i redigeraren | För att redigera behörigheter och dela länkar, klicka på ikonen för extern länk högst upp i Lucid-redigeraren. |
| Mallar och inbäddningar | Mallbibliotek och inbäddningsfunktioner | Klicka på Spara i kodbas för att lagra visuella resurser lokalt. |
| Enterprise | Enterprise med inaktiverade anonyma användare | Stöds inte. |
Vanliga frågor
Vilken version av VS Code är Lucid kompatibel med?
Lucid för VS Code är kompatibelt med alla standardinstallationer av VS Code som stöder VS Code-motorversion 1.82.0 eller senare.
Behöver jag ett Lucid-konto för att använda VS Code-tillägget?
Ja, du behöver ett aktivt Lucid-konto. Användningen av tillägget omfattas av Lucids användarvillkor och sekretesspolicy, vilka gäller för din användning av tillägget men inte för din användning av någon icke-Lucid-applikation (enligt definitionen i våra användarvillkor) i samband med tillägget.
Resurser
Ge feedback på den här artikeln
Har du feedback om den här artikeln? Berätta om din erfarenhet här.