DrawIO Diagrams

[rtkelly13]

This isn't really a feature request, the idea works out of the box. This is just a prompt to say if you would like to promote it within the template as a feature. It is VSCode specific though.

Typically the workflow for building diagrams is as follows, go into an external tool/website modify a proprietary format like XML then export into the image format needed for visualising on the web. This is tedious and repetitive work and requires storing two versions of essentially the same thing which can get out of sync.

Solution

DrawIO VSCode Extension
By using the above extension you can edit .drawio.svg files and save them which creates a valid SVG file which the image component can load and display correctly.

This is how I've integrated it so far.

<Image alt="HeaderImage" src="/static/diagrams/map-reduce.drawio.svg" width={350} height={120} />

I also wanted to say this project is fantastic thank you for your work on it!

[timlrx]

This is a very handy integration, will be using it for subsequent projects. Much better than modifying and exporting from the drawio. Thanks for sharing!