Draw.io Integration installs statistics

Draw.io VS Code Integration

This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.
Mentioned in the official diagrams.net blog.

Features

• Edit .drawio, .dio, .drawio.svg or .drawio.png files in the Draw.io editor.
  • To create a new diagram, simply create an empty *.drawio, *.drawio.svg or *.drawio.png file and open it.
  • .drawio.svg are valid .svg files that can be embedded in Github readme files! No export needed.
  • .drawio.png are valid .png files! No export needed. You should use .svg though whenever possible - they look much better!
  • To convert between different formats, use the Draw.io: Convert To... command.
• .drawio files are plain XML: they diff cleanly in git, and AI assistants can read, edit and review diagram changes like any other code.
• Uses an offline version of Draw.io by default.
• Multiple Draw.io themes are available.
• Use Liveshare to collaboratively edit a diagram with others.
• Nodes/edges can be linked with code spans.

Demo

Editing .drawio.svg/.drawio.png Files

You can directly edit and save .drawio.svg and .drawio.png files. These files are perfectly valid svg/png-images that contain an embedded Draw.io diagram. Whenever you edit such a file, the svg/png part of that file is kept up to date.

The logo of this extension is such a .drawio.png file that has been created with the extension itself!

If you want readable diffs, for your reviewers and your AI tools alike, prefer .drawio over .drawio.png diagrams.

Collaboratively Edit Or Present Diagrams

With version 1.0 of this extension, extensive support for VS Code Liveshare has been added. You can now edit or present your Draw.io diagrams remotely, while seeing each participant's cursor and selection! This can be used for discussing, reviewing or brainstorming diagrams. With Draw.io's freehand drawing tool and integrated LaTeX support, this extension becomes an advanced whiteboard solution that can be used for remote code interviews!

Internally, this extension synchronizes Draw.io diagrams with text documents. These text documents are shared by Liveshare. As Liveshare has no understanding of the text, modification conflicts might occur on simultaneous modifications.

Code Link Feature

In the status bar, you can enable or disable the code link feature. If it is enabled and you double click on a node whose label starts with #, you will perform a workspace search for a symbol matching the rest of the label.

If you have a node labeled #MyClass and a class of name MyClass, you will jump to its source if you double click the node!

Please note that you have to open at least one file of the project that contains the symbol. Otherwise, VS Code will not consider this project when searching for symbols. This file itself does not have to contain the symbol though.

Thanks to my latest github sponsors, this feature is open source and freely available now.

TIP: If you open the draw.io editor to the right side (i.e. the second editor column) and navigate to a symbol, the diagram will stay visible.

Themes

<details> <summary><b>Available Draw.io Themes</b></summary> <!-- Please use HTML syntax here so that it works for Github and mkdocs --> <ul> <li><p>Theme "atlas"</p><img src="https://github.com/hediet/vscode-drawio/raw/HEAD/docs/theme-atlas.png" alt="atlas" width="800"></li> <li><p>Theme "Kennedy"</p><img src="https://github.com/hediet/vscode-drawio/raw/HEAD/docs/theme-Kennedy.png" alt="Kennedy" width="800"></li> <li><p>Theme "min"</p><img src="https://github.com/hediet/vscode-drawio/raw/HEAD/docs/theme-min.png" alt="min" width="800"</li> <li><p>Theme "dark"</p><img src="https://github.com/hediet/vscode-drawio/raw/HEAD/docs/theme-dark.png" alt="dark" width="800"></li> </ul> </details>

Associate .svg Files With The Draw.io Editor

By default, this extension only handles *.drawio.svg files. Add this to your VS Code settings.json file if you want to associate it with .svg files:

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

You won't be able to edit arbitrary SVG files though - only those that have been created with Draw.io or this extension!

Light and Dark .drawio.svg Files

By default, .drawio.svg files are saved with light colors, whatever theme the editor uses. Set hediet.vscode-drawio.svgAppearance to auto to make them adapt to the color scheme of the page that shows them, for example a README on GitHub in dark mode, or to dark to always save them with dark colors. The setting applies the next time a diagram is saved. Add it to the workspace settings so that everyone on a team saves the same file.

Inline Diagrams in VS Code's Markdown Editor (Experimental, Insiders only)

VS Code Insiders ships an experimental WYSIWYG Markdown editor (View: Reopen Editor With... > Markdown Editor). In that editor, every fenced code block tagged drawio is replaced by a live, resizable Draw.io editor:

```drawio
<mxfile>...</mxfile>
```
````…