vscode drawio

Draw.io vs Code -Integration

Diese inoffizielle Erweiterung integriert Draw.io (auch als Diagramme.net bekannt) in VS -Code.
Erwähnt im offiziellen Diagramm.NET -Blog.

Merkmale

• Bearbeiten .drawio , .dio , .drawio.svg oder .drawio.png -Dateien im Draw.io -Editor.
  • Um ein neues Diagramm zu erstellen, erstellen Sie einfach eine leere *.drawio , *.drawio.svg oder *.drawio.png -Datei und öffnen Sie es.
  • .drawio.svg sind gültige .svg -Dateien, die in GitHub ReadMe -Dateien eingebettet werden können! Kein Export benötigt.
  • .drawio.png sind gültige .png -Dateien! Kein Export benötigt. Sie sollten jedoch .svg verwenden, wann immer möglich - sie sehen viel besser aus!
  • Verwenden Sie zum Konvertieren zwischen verschiedenen Formaten das Draw.io: Convert To... Befehl.
• Verwendet standardmäßig eine Offline -Version von Draw.io.
• Multiple Draw.io -Themen sind verfügbar.
• Nutzen Sie Liveshare, um ein Diagramm mit anderen gemeinsam zu bearbeiten.
• Knoten/Kanten können mit Codespannen verknüpft werden.

Demo

Mag es so weit? Möglicherweise gefällt Ihnen auch meine Open -Source -Chrome -Erweiterung, die den GitHub -Markdown -Editor verbessert!

Bearbeitung .Drawio.svg/.drawio.png Dateien

Sie können .drawio.svg und .drawio.png -Dateien direkt bearbeiten und speichern. Diese Dateien sind perfekt gültig SVG/PNG-Images, die ein eingebettetes Draw.io-Diagramm enthalten. Wenn Sie eine solche Datei bearbeiten, wird der SVG/PNG -Teil dieser Datei auf dem neuesten Stand gehalten.

Das Logo dieser Erweiterung ist eine so .drawio.png -Datei, die mit der Erweiterung selbst erstellt wurde!

Wenn Diffs für Sie wichtig sind, sollten Sie .drawio bevorzugen und .drawio.png -Diagramme vermeiden.

Gemeinsam Diagramme bearbeiten oder präsentieren

Mit Version 1.0 dieser Erweiterung wurde eine umfassende Unterstützung für VS Code Liveshare hinzugefügt. Sie können jetzt Ihre Draw.io -Diagramme aus der Ferne bearbeiten oder präsentieren, während Sie den Cursor und die Auswahl jedes Teilnehmers sehen! Dies kann zum Erörterung, Überprüfungs- oder Brainstorming -Diagrammen verwendet werden. Mit dem Freihandwerkzeug von Draw.io und integrierter Latex -Unterstützung wird diese Erweiterung zu einer erweiterten Whiteboard -Lösung, die für Remote -Code -Interviews verwendet werden kann!

Innen synchronisiert diese Erweiterung Draw.io -Diagramme mit Textdokumenten. Diese Textdokumente werden von LiveShare geteilt. Da Liveshare keinen Verständnis des Textes hat, können Änderungenkonflikte bei gleichzeitigen Modifikationen auftreten.

Code -Link -Funktion

In der Statusleiste können Sie die Codelink -Funktion aktivieren oder deaktivieren. Wenn es aktiviert ist und Sie auf einen Knoten doppelklicken, dessen Etikett mit # beginnt, führen Sie eine Arbeitsbereichsuche nach einem Symbol durch, das dem Rest des Etiketts entspricht.

Wenn Sie einen Knoten mit #MyClass und eine Klasse von Namen MyClass haben, springen Sie zu seiner Quelle, wenn Sie auf den Knoten klicken!

Bitte beachten Sie, dass Sie mindestens eine Datei des Projekts öffnen müssen, die das Symbol enthält. Andernfalls berücksichtigt VS Code dieses Projekt bei der Suche nach Symbolen nicht. Diese Datei selbst muss jedoch nicht das Symbol enthalten.

Dank meiner neuesten Github -Sponsoren ist diese Funktion Open Source und jetzt frei verfügbar.

Tipp : Wenn Sie den Draw.io -Editor auf der rechten Seite öffnen (dh die zweite Editor -Spalte) und zu einem Symbol navigieren, bleibt das Diagramm sichtbar.

Themen

Verfügbare Draw.io -Themen

• Thema "Atlas"

  

• Thema "Kennedy"

  

• Thema "min"

  

• Thema "dunkel"

  

Assoziieren Sie .svg -Dateien mit dem Editor Draw.io

Standardmäßig werden diese Erweiterung nur *.drawio.svg -Dateien behandelt. Fügen .svg diese Ihrer Datei mit vs Code settings.json hinzu.

 "workbench.editorAssociations" : {
    "*.svg" : " hediet.vscode-drawio-text " ,
}

Sie können jedoch keine beliebigen SVG -Dateien bearbeiten - nur diejenigen, die mit Draw.io oder dieser Erweiterung erstellt wurden!

Bearbeiten des Diagramms und des XML nebeneinander

Sie können die gleiche *.drawio -Datei mit dem Editor Draw.io und als XML -Datei öffnen. Sie sind synchronisiert, sodass Sie zwischen ihnen wechseln können, wenn Sie es mögen. Dies ist super praktisch, wenn Sie Find/Ersatz verwenden möchten, um Text oder andere Funktionen von VS Code umzubenennen, um Ihren Diagrammerstellung/Bearbeitungsvorgang zu beschleunigen. Verwenden Sie die View: Reopen Editor With... Befehl, um zwischen dem Text oder dem Editor Draw.io zu wechseln. Sie können mehrere Redakteure für dieselbe Datei öffnen. Dies macht jedoch nicht viel Sinn für SVG -Dateien, da das Diagramm von Draw.io in seinen Metadaten gespeichert ist.

Mitwirkende

• Henning Dieterichs, Hediet über GitHub (Hauptbeitragsförderer / Autor)
• Vincent Rouillé, Speedy37 auf GitHub

Siehe auch / ähnliche Erweiterungen

• Draw.io - Diese Erweiterung beruht auf der riesigen Arbeit von Draw.io. Ihre Einbettungsfunktion ermöglicht diese Erweiterung! Diese Erweiterung bündelt eine aktuelle Version von Draw.io.
• VSCODE-DRAWIO um Achthundert.

Andere coole Erweiterungen

Wenn Ihnen diese Erweiterung gefällt, mögen Sie vielleicht auch meine anderen Erweiterungen:

• Debug -Visualizer : Eine Erweiterung zur Visualisierung von Datenstrukturen beim Debuggen.
• Echtzeit-Debugging : Diese Erweiterung zeigt, wie Ihr Code ausgeführt wird.