Watch 3 Star 20 Fork 7

码云极速下载 / vscode-drawioTypeScriptGPL-3.0

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
此仓库是为了提升国内下载速度的镜像仓库,每日同步一次。 原始仓库:
vscode-drawio 是一个 VS Code 扩展,它可以在 VS Code 上集成图表工具 spread retract

Clone or download
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading... VS Code Integration

This unofficial extension integrates into VS Code.


  • Edit .drawio, .dio, .drawio.svg or .drawio.png files in the 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 Convert To... command.
  • Uses an offline version of by default.
  • You can select a theme.


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 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.

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!

Pleaes 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 editor to the right side (i.e. the second editor column) and navigate to a symbol, the diagram will stay visible.


This extension contributes the following settings:

Available Themes
  • Theme "atlas"

  • Theme "Kennedy"

  • Theme "min"

  • Theme "dark"


Associate .svg Files With This 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": [
        "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 or this extension!

Editing the Diagram and its XML Side by Side

You can open the same *.drawio file with the 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 editor. You can open multiple editors for the same file.


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

See Also / Similar Extensions

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

Other Cool Extensions

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.

Comments ( 0 )

Sign in for post a comment



231008 48f1a665 1899542 231017 9a6720c6 1899542