Modudraft for VS Code

Open, edit, and save .modudraft system-design diagrams directly inside VS Code.

Features

• Native file integration — .modudraft files open in the diagram editor by default (double-click in the Explorer)
• Dirty tracking & save — Cmd/Ctrl+S saves through VS Code's standard save pipeline; unsaved changes show in the title bar
• Full editor — same canvas as the web app: add nodes, edges, boundaries, notes; auto-layout; export

Usage

Double-click any .modudraft file in the Explorer to open it. Or run Modudraft: New Diagram from the Command Palette to create one.

Install

Search for Modudraft in the VS Code Extensions panel, or:

ext install modudraft.modudraft-vscode

Development

Prerequisites: Node.js ≥ 20, the modudraft monorepo cloned as a sibling directory.

git clone https://github.com/modudraft/modudraft-vscode
git clone https://github.com/modudraft/modudraft   # sibling dir
cd modudraft-vscode
npm install
npm run build

Press F5 in VS Code to launch the Extension Development Host with the extension loaded.