Create Diagrams In VS Code With Draw.io
Tags: drawio, vscode, diagrams
Published: 2020-10-06 16:49:47

---
title: Create Diagrams In VS Code With Draw.io
published: true
description: Ever wanted to document the architecture of your code visually, without even leaving your favorite editor? Then this article is for you!
tags: drawio, vscode, diagrams
---


Diagrams are a great way to communicate ideas visually and can be used to extend or sometimes even replace textual documentations of software projects. This article describes how you can create diagrams without ever leaving VS Code.

## Use Cases

Here are some use cases for diagrams. Maybe they inspire you to use diagrams more often!
* Documentation of how large scale components depend on each other:
![Documentation of how large scale components](https://dev-to-uploads.s3.amazonaws.com/i/wt0i6qmrsyavs50mpw0t.png)
* Highlighting relationships between classes:
![Class Diagram](https://dev-to-uploads.s3.amazonaws.com/i/dbsltpxgqj2la9lcjzbv.png)
* Wireframes:
![Wireframe](https://dev-to-uploads.s3.amazonaws.com/i/jw9qkfkmkla7vcckfqt7.png)
* Page Transitions using Screenshots:
![Page Transition Diagram](https://dev-to-uploads.s3.amazonaws.com/i/4ik6tq9jq7yht5zj9uku.png)

You can use diagrams for much more!

All those diagrams have been created with [Draw.io](https://app.diagrams.net/) in [VS Code](https://code.visualstudio.com/).

## Create Diagrams in VS Code

To create such diagrams in VS Code without ever leaving your editor, you just need to install the [Draw.io Integration extension](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio) from the Marketplace:

![Installation](https://dev-to-uploads.s3.amazonaws.com/i/b502uws62jpblaftvhsl.png)

After installation, you can simply create a `*.drawio` file in the explorer view:

![Create Diagrams](https://dev-to-uploads.s3.amazonaws.com/i/x234pol9r56eikt1m9xr.gif)

From there you get the typical Draw.io interface where you can draw your diagrams:

![Edit Diagrams](https://dev-to-uploads.s3.amazonaws.com/i/s0zcbcrpo6vpc3c06lqz.gif)

You can even use git to track changes of your Draw.io files!

## Themes

Draw.io offers multiple themes that you can use in VS Code:

![Themes Demo](https://dev-to-uploads.s3.amazonaws.com/i/c3pymbk1x03h24ykb7v4.gif)

## Create Editable SVG Diagrams

You can either directly create a `*.drawio.svg` file instead of `*.drawio` or convert any existing diagram to an SVG file. Such SVG files are still editable Draw.io diagrams! You can embed such diagrams in Markdown files and even [view them on github](https://github.com/hediet/visualization/tree/b358a5a7b5e937e4c4eae27b074e7b8c4a2f0bf2/visualization-core#architecture). Conversion to PNG is also possible!

![SVG/PNG Conversion](https://dev-to-uploads.s3.amazonaws.com/i/ualw15hxfj45zpjzrwtb.gif)

## Code Links

With code links, you can associate code with your nodes or edges by just naming the node like the name of a class or function and prepending the name with `#`. So if you class is `MyClass`, the node should be called `#MyClass`. You also need to activate code links in the status bar. When you double click on a node with such a name, you jump to the class!

![Code Links Demo](https://dev-to-uploads.s3.amazonaws.com/i/fu7ds6eco9u7csr77sbm.gif)

## Collaborative Editing

With Liveshare, you can even edit diagrams collaboratively!

![Collaborative Editing Demo](https://dev-to-uploads.s3.amazonaws.com/i/swxt32rsms066ps69rff.gif)

## Much More

Draw.io has much more to offer. You can use LaTeX for formulas, add free-hand drawings or paste screenshots from your clipboard right into the diagram!
All these features are also available for Draw.io in VS Code!