Using Draw.io in VSCode

Sometimes flowcharts and diagrams can be helpful for documenting your code. A great solution for editing diagrams in VS Code is Draw.io.

There is a VS Code plugin for Draw.io that allows you to edit diagrams in VS Code. You can install it by going to Extensions in the File menu and searching for Draw.io for VS Code.

The best image format to use is .svg. If you are using a Mac, you can use the File > Export Image menu item to export the diagram to a .svg file. Save the file into your project folder. Then you will be able to edit the file in VS Code using the Draw.io plugin.

The following diagram shows an example that was created using Draw.io.

Steps

1. Install Draw.io
2. Install the Draw.io plugin for VS Code
3. Create a blank diagram
4. Save the diagram as a .svg file in your VS Code project folder
5. Open the .svg file in VS Code and make changes to the diagram
6. Include a reference to the .svg file in your markdown file like this:

![diagram01](./diagram01.drawio.svg)