DrawIt for VS Code

View .drawit diagrams and generate them from your codebase, without leaving your editor.

DrawIt for VS Code is a lightweight, fully local viewer for Chamuka DrawIt diagrams — rendered by the same WebAssembly + WebGL2 engine that powers the Chamuka platform.

[!NOTE] View-Only Mode: This extension is a dedicated, high-performance read-only viewer (pan, zoom, inspect element properties, and export). Full visual diagramming and interactive editing happen in the DrawIt Web editor, which is openly available today. The offline DrawIt Desktop app is currently in closed preview for early testers and users.

Features

A fast, read-only viewer

WebAssembly + PixiJS (WebGL2) rendering — smooth, hardware-accelerated canvas at any scale
Pan, zoom, and click-to-inspect elements — inspect element geometry and styles in the read-only Properties sidebar
Pixel-perfect export to PNG, SVG, Animated SVG, Print SVG, HTML, Mermaid, and DOT
Live-updates when the file changes on disk — from web downloads, git, or an external AI agent — with no manual reload
Open in Web — one click (DrawIt: Open in Web or the globe icon) uploads an editable copy straight to the DrawIt Web editor at chamuka.ai
Open in Desktop App — one click opens the current file in the Chamuka DrawIt desktop app for interactive offline editing (for users with early tester desktop access)

Codebase quick actions

Generate a diagram straight from your code via the DrawIt CLI (@chamuka-labs/drawit-cli):

Command	What it shows
`DrawIt: Generate Codebase Map`	Monorepo package/app dependency architecture
`DrawIt: Generate Dependencies`	Module-level import dependency graph
`DrawIt: Generate Routes`	Next.js App Router endpoint map
`DrawIt: Generate DB Schema Diagram`	Drizzle ORM schema diagram
`DrawIt: Generate Data Flow`	UI → state → API → DB layer flowchart
`DrawIt: Show Impact of This File`	Right-click a `.ts`/`.tsx` file to see everything that transitively depends on it

Each quick action writes a .drawit file and opens it in the viewer.

Connect an AI agent (MCP)

DrawIt: Connect this diagram to your AI agent (MCP) helps connect external AI agents (like Claude Desktop, Cursor, or Antigravity) to edit your local diagrams:

The extension does NOT bundle an MCP server itself. It acts as a connector helper, detecting whether a local DrawIt MCP server is already active on your machine (127.0.0.1:3847).
If you do not have the desktop app installed: You can run a local MCP server using the DrawIt CLI:
```
npm install -g @chamuka-labs/drawit-cli
drawit serve
```
Or configure your agent with command: "drawit", args: ["serve", "--stdio"].
If you have desktop app preview access: The desktop app runs an embedded local MCP server listening on 127.0.0.1:3847.
Cloud MCP: DrawIt also supports a hosted cloud MCP server at https://chamuka.ai/api/mcp using your personal Chamuka API key.

Once connected, your AI agent edits the .drawit file directly (open_diagram_file), and this VS Code viewer picks up and renders the changes live.

VS Code-native UX

Activity Bar panel with a diagrams explorer and a read-only properties inspector
Diagrams explorer showing all .drawit files in the workspace
Git branch management for diagram files — create, switch, merge branches directly from the panel

Getting Started

1. Install

Search DrawIt in the Extensions panel, or install from the VS Code Marketplace or Open VSX Registry.

Install on Cursor or Antigravity

Both Cursor and Google Antigravity use the Open VSX Registry by default.

IDE	Install
Cursor	Extensions panel → search `DrawIt`, or install from Open VSX
Antigravity	Extensions panel → search `DrawIt`, or install from Open VSX
VS Code	VS Code Marketplace

The same extension package works across VS Code, Cursor, and Antigravity.

2. View or create a diagram

Open any .drawit file, or click the DrawIt icon in the Activity Bar and press + in the Diagrams panel to create one.

3. Generate one from your code

Run a quick action from the Command Palette (Cmd/Ctrl+Shift+P) — try DrawIt: Generate Codebase Map — or right-click a source file and choose DrawIt: Show Impact of This File.

4. Edit your diagram

Because this extension is a focused viewer, visual diagramming and editing happen in our dedicated editors:

DrawIt Web (Available now): Click the globe icon in the diagram viewer's title bar, right-click any file in the Diagrams explorer, or run DrawIt: Open in Web to open an editable copy in the DrawIt Web editor.
DrawIt Desktop App (Closed preview): Early testers with the desktop app installed can click the external-link icon (DrawIt: Open in Desktop App) to edit the local file directly offline.

Keyboard Shortcuts

Action	Mac	Windows / Linux
Zoom to Fit	`0` / `⌘⇧0`	`0` / `Ctrl+Shift+0`
Zoom in / out	`+` / `-`	`+` / `-`
Select tool	`V`	`V`
Pan tool	`H`	`H`
New Diagram	`⌘⌥N`	`Ctrl+Alt+N`
Refresh Diagrams	`⌘⌥R`	`Ctrl+Alt+R`

Settings

Setting	Default	Description
`chamuka-drawit.autoCommitOnSave`	`false`	Automatically create a git commit when a `.drawit` file changes on disk. Note: with an MCP agent driving edits, each agent save creates its own commit.

Commands

All commands are available from the Command Palette (Cmd/Ctrl+Shift+P) with the prefix DrawIt:.

Command	Description
`DrawIt: New Diagram`	Create a new `.drawit` file with a template picker
`DrawIt: Generate Codebase Map` / `Dependencies` / `Routes` / `DB Schema Diagram`	Generate a diagram from your code via the DrawIt CLI
`DrawIt: Show Impact of This File`	Reverse-dependency ("blast radius") analysis for the selected source file
`DrawIt: Export as PNG` / `SVG` / rich formats	Export the active diagram
`DrawIt: Zoom to Fit`	Fit the entire diagram into the viewport
`DrawIt: Open in Web`	Upload an editable copy and open it in the DrawIt Web editor
`DrawIt: Open in Desktop App`	Open the current file in the Chamuka DrawIt desktop app (early testers)
`DrawIt: Open Folder in Desktop App`	Open the workspace folder in the desktop app (early testers with desktop installed)
`DrawIt: Connect this diagram to your AI agent (MCP)`	Get a ready-to-paste MCP config for a local agent
`DrawIt: Create Git Branch` / `Switch Git Branch` / `Merge Git Branch`	Git branch management scoped to diagram files

Requirements

Visual Studio Code 1.85 or later
Interactive Editing: Available openly on the DrawIt Web editor. (The standalone desktop app is currently in closed preview for early testers and users).
Codebase Quick Actions & Local MCP Server: Provided by @chamuka-labs/drawit-cli (npm install -g @chamuka-labs/drawit-cli).

Viewing diagrams, panning, zooming, inspecting properties, and exporting from VS Code work fully locally without needing an account or API key.

License

DrawIt for VS Code is proprietary software developed and maintained by Chamuka Labs.

Use of this extension is subject to the Chamuka Terms of Service. By installing or using this extension you agree to the terms of that agreement.

Support

Documentation: chamuka.ai/docs/vscode
Support & Bug Reports: dev@chamuka.ai
Product Updates: Follow @chamuka for release announcements