Editing diagrams in VSCode

Thibaut -

Naz, a colleague at Ghost, gave me a cool hack when explaining some Ghost internal processes. And I'm sure it's the kind of tool that will help you!

My requirements for a schem-editing tool are simple:

  1. Edit the schemas with a nice graphical interface
  2. Save the schemas in git for collaboration and versioning
  3. Bonus: edit the schemas offline!

Until today, I had never found a great solution.

Enter Draw.io Integration, a Visual Studio Code plugin. It enables you to create and edit your schemas offline, and save it locally so that they can be shared via git.

A screenshot of the interface

Tutorial

Download the extension

If you're already using VS Code, then you can direclty download the following extension.

Draw.io Integration - Visual Studio Marketplace
Extension for Visual Studio Code - This unofficial extension integrates Draw.io into VS Code.

Create your file

If you want to trigger the extension, you need to create a *.drawio file, and then open it.

If it didn't work, you might need to close and re-open the file.

Enjoy

Hopefully this was helpful, feel free to give me feedback and to share this to others who might need it!