Online version ：https://app.diagrams.net/
Computer version ：Releases · jgraph/drawio-desktop · GitHub
vdcode Support ： This unofficial expansion will Draw.io（ Also known as diagrams.net） Integrated into the VS Code in . In official diagrams.net Blog
I mentioned .

features

• stay Draw.io Editor   edit 、 or .drawio file ..dio.drawio.svg.drawio.png
  • To create a new chart , Just create an empty *.drawio,*.drawio.svg or *.drawio.png File and open it .
  • .drawio.svg.svg Can be embedded into Github Valid files in Readme ！ No need to export .
  • .drawio.png Is effective .png file ！ No need to export . You should .svg Use them whenever possible - They look much better ！
  • To convert between different formats , Please use Draw.io: Convert To... command .
• By default Draw.io The offline version of .
• Multiple Draw.io Themes are available .
• Use Liveshare Collaborate with others to edit charts .
• node / Edges can be linked to code spans .

demonstration

Uploading … Re upload cancel

Do you like it so far ？ You may also like my Open source  Chrome Expand , It enhances Github Price reduction editor ！

edit .drawio.svg/.drawio.png file

You can directly edit and save .drawio.svg file .drawio.png. These files contain embedded files Draw.io The complete validity of the chart svg/png Images . Whenever you edit such a file , Of the document svg/png Parts will be kept up to date .

The sign of this extension is such a .drawio.png Files created with the extension itself ！

Uploading … Re upload cancel

If differences are important to you , You should prefer .drawio And avoid using .drawio.png Chart .

Collaborative editing or presentation of charts

Extended here 1.0 Version of the , Added right VS Code Liveshare Broad support for . You can now edit or display your Draw.io Chart , View the cursor and selection of each participant at the same time ！ This can be used to discuss 、 Review or brainstorm . With the help of Draw.io Hand drawn tools and integrated LaTeX Support , This extension becomes an advanced whiteboard solution for remote code interviews ！

Uploading … Re upload cancel

In the internal , This extension will Draw.io The chart is synchronized with the text document . These text documents are composed of Liveshare share . because Liveshare Don't know the text , Therefore, modification conflicts may occur when modifying at the same time .

Code link function

In the status bar , You can enable or disable code linking . If it is enabled and you double-click the label to The starting node #, You will perform a workspace search to find symbols that match the rest of the label .

If you have a node tag #MyClass And a class name MyClass, If you double-click the node , You will jump to its source ！

Please note that , You must open at least one project file containing the symbol .  otherwise ,VS Code This item will not be considered when searching for symbols . however , The file itself does not have to contain symbols .

Thanks for my latest github sponsors , This feature is open source , Now you can use it for free .

Tips ： If you open the... On the right draw.io Editor （ The second editor column ） And navigate to a symbol , The chart will remain visible .

Uploading … Re upload cancel

The theme

Usable Draw.io The theme

take .svg File with the Draw.io Editor Association

By default , This extension only handles *.drawio.svg file .settings.json If you want to associate it with a file , Please add it to VS Code In file .svg：

“workbench.editorAssociations”：{ “*.svg”：“ hediet.vscode-drawio-text ”, }

however , You will not be able to edit any SVG file - Only those who use Draw.io Or files created by this extension ！

Edit the chart and its... Side by side XML

You can *.drawio Use Draw.io Editor and xml File open the same file . They are synchronized , So you can switch between them as needed . If you want to use find / Replace to rename VS Code Text or other features to speed up chart creation / Editing process , It's very practical . Use this View: Reopen Editor With... Command in text or Draw.io Switch between editors . You can open multiple editors for the same file . however , This is right SVG The document doesn't make much sense , because draw.io Charts are stored in their metadata .

Uploading … Re upload cancel

contributor

• Henning Dieterichs, Github Upper hediet（ Key contributors / author ）
• Vincent Rouillé,Github Upper Speedy37

See also / Similar extensions

• Draw.io - This extension depends on Draw.io Great work . Their embedding function enables this extension ！ This extension is bundled with the latest version of Draw.io.
• vscode-drawio Eight hundred .

Other cool extensions

If you like this extension , You may also like My other extensions ：

• Debug Visualizer： Extensions for visualizing data structures during debugging .
• Real time debugging ： This extension visualizes how your code is executed .
• link ：GitHub - hediet/vscode-drawio: This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.