Tuesday 12 May 2020

Draw diagrams in VS Code

This is another great Visual Studio Code extension and it allows you to draw diagrams using Draw.io. This makes it easy to include a diagram in a project folder and maintain it in just the same way as you would create and maintain JavaScript, HTML or CSS files (or indeed any other language file) using VS Code.

The image shows the extension in action.

You can use the extensions feature of VS Code to download and install Draw.io integration. Search for "draw.io" and select the Henning Dieterichs offering from any presented.

Once installed, restart VS Code and you are ready to go. To create a diagram, start with a new file and then save it as an XML file but with the .drawio extension. [VS code might attach .xml onto the end but you can rename it directly in the VS Code explorer view.] Now if you click on your xml/drawio file the newly installed extension will load and you can start adding drawing objects.

There is more information to be found at the project GitHub repository.