This unofficial extension integrates Draw.io into VS Code.

• 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.
• Uses an offline version of Draw.io by default.
• You can select a theme.

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 diffs are important for you, you should prefer .drawio and avoid .drawio.png diagrams.

This extension contributes the following settings:

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": [
    {
        "viewType": "hediet.vscode-drawio-text",
        "filenamePattern": "*.svg"
    }
]

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

You can open the same *.drawio file with the Draw.io editor and as xml file. They are synchronized, so you can switch between them as you like it. This is super pratical if you want to use find/replace to rename text or other features of VS Code to speed up your diagram creation/edit process. Use the File: Reopen With... command to toggle between the text or the Draw.io editor. You can open multiple editors for the same file.

• Henning Dieterichs, hediet on Github (Main Contributor / Author)
• Vincent Rouillé, Speedy37 on Github

• Draw.io - This extension relies on the giant work of Draw.io. Their embedding feature enables this extension! This extension bundles a recent version of Draw.io.
• vscode-drawio by eightHundreds.

If you like this extension, you might like my other extensions too:

• Real-Time Debugging: This extension visualizes how your code is being executed.
• Debug Visualizer: An extension for visualizing data structures while debugging.
• Tasks Statusbar: This extension adds buttons to the status bar to quickly start and kill tasks.