explaingit

hediet/vscode-drawio

9,434TypeScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

A VS Code extension that brings the Draw.io diagramming tool into your code editor, letting you create flowcharts and architecture diagrams that can be embedded directly in GitHub READMEs.

Mindmap

mindmap
  root((vscode-drawio))
    What it does
      Edit diagrams in VS Code
      No internet required
    File formats
      .drawio standard
      .drawio.svg embeddable
      .drawio.png embeddable
    Features
      Code linking
      XML sync view
      Liveshare collab
    Diagram types
      Architecture diagrams
      Flowcharts
      Network maps
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Create architecture diagrams and flowcharts inside VS Code without switching to a separate tool

USE CASE 2

Save diagrams as .drawio.svg files and embed them directly in GitHub READMEs as images with no export step

USE CASE 3

Collaborate on diagrams in real time with a teammate using VS Code Liveshare

USE CASE 4

Link diagram nodes to code classes so double-clicking a node jumps to the matching code symbol

Tech stack

TypeScriptVS Code

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

This is an unofficial extension that brings Draw.io, a free diagramming tool, directly into Visual Studio Code. Draw.io (also called diagrams.net) is a web-based tool many people use to create flowcharts, architecture diagrams, network maps, and other visual layouts. With this extension, you can open and edit those diagrams without leaving your code editor. The extension supports several file formats. The standard format is .drawio, but you can also save diagrams as .drawio.svg or .drawio.png. The clever part is that these files are valid image files at the same time. A .drawio.svg can be dropped directly into a GitHub README and will render as an image, with no separate export step needed. The same applies to .drawio.png. The diagram data is embedded inside the image file itself. A feature called code linking lets you connect diagram nodes to actual code symbols. If you label a node in your diagram with something like #MyClass, double-clicking that node in the editor will jump directly to the matching class in your codebase. This can be useful for keeping architecture diagrams connected to the code they describe. The extension also works with VS Code Liveshare, which is a tool for real-time collaborative editing. Two people can work on the same diagram at the same time, with each person's cursor visible to the other. The README mentions this can serve as a whiteboard for remote code interviews or team brainstorming. Additionally, you can open the same diagram file in two panels side by side: one showing the visual editor and one showing the underlying XML. Both stay in sync, so edits in one view immediately appear in the other. The extension runs Draw.io in an offline mode by default, so it does not require an internet connection.

Copy-paste prompts

Prompt 1
How do I create an architecture diagram in VS Code using the Draw.io extension and save it as a .drawio.svg I can embed in my GitHub README?
Prompt 2
Show me how to use the vscode-drawio code-linking feature to connect a diagram node labeled MyClass to its TypeScript source file
Prompt 3
How do I set up real-time collaborative diagram editing between two developers using VS Code Liveshare and the Draw.io extension?
Prompt 4
Create a Draw.io XML flowchart that shows the user login flow for a web app, from form submission through JWT token generation
Prompt 5
How do I open both the visual Draw.io editor and its raw XML side by side in VS Code to edit either view simultaneously?
Open on GitHub → Explain another repo

← hediet on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.