Die Lucid for Visual Studio Code (VS Code)-Erweiterung ermöglicht es Ihnen, Lucid Diagramm parallel zu Ihrer Codebasis zu erstellen, zu öffnen, Vorschau zu bearbeiten und zu bearbeiten, ohne in einen Browser umzusteigen. Jedes Diagramm wird von einem dynamischen Lucid-Dokument unterstützt, das mit deinem Repository synchronisiert bleibt. Dadurch bleibt Diagramm in Ihren Pull Requests überprüfbar und bietet Teamkollegen und KI-Agenten sofortigen Systemarchitektur-Kontext.
Verfügbare Abos: Free, Individual, Team und Enterprise.
- Nicht verfügbar für FedRAMP-Konten.
- Weitere Informationen zu den in Ihrem Konto verfügbaren Optionen finden Sie im Artikel Lucid-Pläne oder Anweisungen zum Upgrade im Artikel Lucid-Konto upgraden.
Verbinde VS Code mit deinem Lucid-Konto
Um die Lucid-Erweiterung für VS Code zu installieren, folgen Sie diesen Schritten:
- Öffnen Sie die VS Code-Anwendung.
- Navigiere zum Marktplatz der Erweiterungen, indem du auf das Erweiterungs-Symbol in der Aktivitätsleiste ganz links im Fenster klickst
.
- Oder drücken Sie Strg + verschieben + X (PC) oder Cmd + verschieben + X (Mac), um eine Tastenkombination zu verwenden.
- Suche nach "Lucid" im VS Code Marktplatz.
- Klicken Sie auf der rechten Seite der Erweiterungskarte auf Installieren .
- Folgen Sie der Aufforderung, sich bei Ihrem Lucid -Konto anzumelden.
- Öffnen Sie die Befehlspalette und geben Sie "Lucid" ein.
- Oder drücken Sie Cmd + verschieben + P (PC) oder Strg + verschieben + P (Mac).
- Öffne ein bestehendes Diagramm oder erstelle ein neues.
- Bearbeiten Sie Ihr Diagramm.
- Klicke oben rechts im Editor auf 'Speichern' zur Codebasis .
- Wählen Sie Ihren Repository-Ordner aus.
- Folge den Aufforderungen auf deinem Gerät zum Speichern.
Hinweis: VS Code verwendet keine Cookies. Das bedeutet, dass aktive Lucid-Sitzungen nach dem Schließen von VS Code nicht mehr bestehen bleiben.
Arbeiten Sie mit Lucid Diagramm in VS Code
Erstellen und öffnen Sie ein Lucid -Diagramm
Um Diagramm zu erstellen oder zu öffnen, folgen Sie diesen Schritten innerhalb von VS Code:
- Öffne die Kommandopalette.
- Oder drücken Sie Cmd + verschieben + P (PC) oder Strg + verschieben + P (Mac), um die Tastenkombination zu verwenden.
- Suchen Sie nach und wählen SieLucid: Dokument öffnen oder Lucid: Neues Dokument erstellen.
- Wählen Sie im Dokument Picker, der neben Ihrem Quellcode geöffnet wird, Ihr Dokument aus oder klicken Sie auf Neues Dokument.
Aktualisieren Sie ein bestehendes Lucid-Diagramm
Wenn du kein Lucid-Diagramm bearbeitest, erscheint es als statisches Bild, das in deinem Code gespeichert ist. Um ein bestehendes Diagramm direkt innerhalb von VS Code zu bearbeiten, folgen Sie diesen Schritten:
- Öffne ein Lucid-Dokument in VS Code.
- Klicken Sie auf das
Lucid-Symbol oben im Editor.
- Bearbeiten dein Lucid Dokument in VS Code.
- Klicken Sie auf Speichern im Codebase.
- Wählen Sie Ihren Repository-Ordner aus.
- Folge den Aufforderungen auf deinem Gerät zum Speichern.
Um sicherzustellen, dass Ihre Updates erfolgreich gespeichert wurden, folgen Sie diesen Schritten:
- Bearbeiten und dein Lucid Dokument in VS Code speichern.
- Schließen Sie den Lucid Editor Registerkarte und das Diagramm Vorschau Registerkarte.
- Wählen Sie in der Datei Explorerdie PNG-Datei Ihres Diagramms aus, um die aktualisierte Vorschau zu öffnen.
Meerjungfrauensyntax in Lucid-Objekte umwandeln
Um Mermaid aus Claude Code, Cursor, Codex oder irgendwo anders einzufügen und eine editierbare Form in einem Lucid Dokument zu erhalten, folgen Sie diesen Schritten:
- Kopiere rohen Meerjungfrauencode.
- Fügen Sie den Code überall im Lucid-Erweiterungspanel ein.
Die Erweiterung wandelt den Code in standardisierte, editierbare Lucid Form und Linien um.
Erfahren Sie mehr: Für weitere Informationen zur Verwendung der Meerjungfrauensyntax in Lucid lesen Sie unseren Artikel "Diagramm als Code mit Meerjungfrau in Lucidchart".
Synchronisieren Sie Änderungen vom Webeditor von Lucidauf VS Code
Um sicherzustellen, dass Ihr VS Code Vorschau Ihre neuesten Arbeiten in Lucidwiderspiegelt, folgen Sie diesen Schritten:
- Öffne ein Lucid-Dokument in VS Code.
- Klicken Sie oben im Editor auf das Symbol für
den externen Link.
- Folgen Sie den Aufforderungen, die Webversion von Lucidzu öffnen.
- Aus dem Pop-up-Fenster der Lucid-Webversion, das erscheint, bearbeiten Sie Ihr Diagramm.
- Schließen Sie die Webversion.
- Zurück zu VS Code.
- In der VS-Code-Datei Explorerwählen Sie eine beliebige andere Datei aus und klicken Sie dann zurück auf die PNG-Datei Ihres Diagramms, um die Ansichten zu aktualisieren.
- Klicken Sie unten links im Editor auf Update Lucid PNG, um die neueste Version zu rendern.
Speichere das Diagramm in deinem Codebase
Speichere ein PNG-Image und eine Lightweight-Referenzdatei (Lucid) direkt in deinem lokalen Repository, damit du sie mit deinem Code committen kannst. So läuft das:
- Bearbeiten Sie die Leinwand direkt in VS Code.
- Wähle oben rechts im Erweiterungsmenü 'Speichern in Codebasis '.
- Wählen Sie Ihren Repository-Ordner aus.
- Folge den Aufforderungen auf deinem Gerät zum Speichern.
Einschränkungen des VS Code Editor
Mit dem In-Editor-Erlebnis erhalten Sie eine fokussierte Teilmenge des webbasierten Lucid Editor, der für schnelles Ansehen und Updates direkt neben Ihrem Code optimiert ist. Um auf die vollständigen Funktionen zugreifen zu können, einschließlich derjenigen, die unten in den Tabellen aufgeführt sind, öffnen Sie Ihr Dokument in der Webversion von Lucid.
| Nicht unterstützte Funktionen in der VS Code-Erweiterung | Weitere Details und Empfehlungen | |
| Lucid AI | Lucid AI Prompts und Meerjungfrauencode-Generierung | Um auf die vollständigen KI-Funktionen zuzugreifen, klicken Sie auf das externe Link-Symbol oben im Editor und öffnen Sie Lucid in Ihrem Browser. |
| Exporte | Direkter Export zu SVG, PDF, CSV, JSON oder PowerPoint | Der native Export in der Erweiterung ist auf PNG beschränkt. |
| Teilen | In-Editor teilen modal | Um Berechtigungen zu bearbeiten und Links zu teilen, klicken Sie auf das externe Link-Symbol oben im Lucid-Editor. |
| Vorlage und Einbettungen | Vorlagenbibliothek und Einbettungsfunktionen | Klicken Sie auf 'In Codebase speichern', um visuelle Assets lokal zu speichern. |
| Enterprise Sicherheit | Enterprise Konten mit Anonymous Nutzende deaktiviert | Nicht unterstützt. |
FAQ
Mit welcher Version von VS Code ist Lucid kompatibel?
Lucid für VS Code ist mit allen Standardinstallationen von VS Code kompatibel, die die VS Code Engine Version 1.82.0 oder höher unterstützen.
Brauche ich ein Lucid-Konto, um die VS Code-Erweiterung zu nutzen?
Ja, du brauchst ein aktives Lucid-Konto. Die Nutzung der Erweiterung unterliegt den Nutzungsbedingungen und der Datenschutzrichtlinie von Lucid, die für Ihre Nutzung der Erweiterung gelten, jedoch nicht für die Nutzung einer nicht-Lucid-Anwendung (wie in unseren Nutzungsbedingungen definiert) im Zusammenhang mit der Erweiterung.
Ressourcen
Geben Sie Feedback zu diesem Artikel
Haben Sie Feedback zu diesem Artikel? Erzählen Sie uns hier von Ihren Erfahrungen.