Create and edit SVG in vscode
Create and edit SVG files nativly in VSCoode with Draw.io with a draw.io extension:
- Install the Draw.io Integration for Visual Studio Code by Henning Dieterichs
- Create a new file called whatever.drawio.svg
- Open the file in VScode and the draw.io extension should pop-up an enable editing.
- Link the SVG file to e.g. a markdown or web document
Example file showing the process:
Create a mockup
Draw.io 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.