Friday, January 28, 2022 workflow inside Visual Studio Code

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

Through a mix of features from draw.io2 and an amazing Visual Studio Code (VSCode) extension3, 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.io4

  2. Export the diagram as an SVG

    export as svg

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

    include copy

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

  3. Install the VSCode extension

    1. CMD + SHIFT + P to open the command palette5

    2. Search for the "Install Extensions" command

    3. Install the hediet.vscode-drawio3 extension

      install hediet.vscode-drawio
  4. Open and edit the .drawio.svg using the embedded editor in VSCode

    embedded inside vscode
  5. Import the .drawio.svg like any other image

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


Change the theme

  1. Open the command palette5

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

  3. Add/update the theme

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

      kennedy (light) theme
    • dark

      dark theme




  3. 2


  5. 2