draw.io¹ is a feature-rich and easy to use diagramming tool that lives in the browser.

Through a mix of features from draw.io² and an amazing Visual Studio Code (VSCode) extension³, the same diagram file can be edited in VSCode and referenced/imported as an image. This has made adding and updating diagrams a breeze and trackable with version control.

1. Create a diagram in draw.io⁴

2. Export the diagram as an SVG

   

   Be sure to check Include a copy of my diagram. This embeds draw.io metadata to enable editing of the diagram without needing to export.

   

   The resulting export should have a .drawio.svg extension.

3. Install the VSCode extension

   1. CMD + SHIFT + P to open the command palette⁵

   2. Search for the "Install Extensions" command

   3. Install the hediet.vscode-drawio³ extension

      

4. Open and edit the .drawio.svg using the embedded draw.io editor in VSCode

   

5. Import the .drawio.svg like any other image

   <img src="./sample.drawio.svg" alt="a drawio diagram" />
   

Notes

Change the theme

1. Open the command palette⁵

2. Find the "Preferences: Open settings (JSON)" command

3. Add/update the theme

   "hediet.vscode-drawio.theme": "Kennedy"
   

   • Kennedy

     

   • dark