Skip to content

What Where
Windows choco install drawio
Ubuntu ``

Create and edit SVG in vscode

Create and edit SVG files nativly in VSCoode with with a extension:

  1. Install the Integration for Visual Studio Code by Henning Dieterichs
  2. Create a new file called whatever.drawio.svg
  3. Open the file in VScode and the extension should pop-up an enable editing.
  4. Link the SVG file to e.g. a markdown or web document

Example file showing the process:


Create a mockup enables quick an easy mockup creation for simple GUI interfaces. The possiblities are limited but it is an excellent first mockup draft method to figure out what you need.

Add the mockup shapes:

  • Open Shapes
  • click on "More Shapes"
  • Navigate to Software → Mockups
  • Add Mockups

Create your first page. Use that design as a template for further pages. Create a link to other pages for specific buttons.

Export as HTML to demo the mockup online/offline.

Drawio in VScode

Install using choco: choco install vscode-drawio