DrawIt for VS Code
A lightweight, local viewer for DrawIt diagrams with codebase intelligence quick actions. Drawing and interactive editing happen in the DrawIt Web editor or desktop app.
Install from VS Code MarketplaceOverview
View-Only Architecture
DrawIt for VS Code has been intentionally streamlined to a fast, read-only viewer. On-canvas drawing and node editing take place in the DrawIt Web editor (available to everyone at chamuka.ai) or the offline DrawIt Desktop app (currently in closed preview for early testers).
Hardware-Accelerated Viewer
Rendered via WebAssembly and PixiJS (WebGL2). Smooth pan, zoom, and inspection for diagrams of any size.
Codebase Quick Actions
Instantly generate codebase maps, module dependencies, route structures, DB schemas, and blast-radius impact diagrams.
Seamless Web Hand-Off
One click (Open in Web) uploads an editable preview copy straight to the DrawIt Web editor in your browser.
Desktop App Integration
Open directly in the native desktop app via deep links (for registered early testers with the desktop app installed).
Live Disk-Sync
Automatically updates when .drawit files change on disk from git, an AI agent, or external saves — without reloading.
Rich Exports
Export directly to PNG, SVG, Animated SVG, Print SVG, HTML, Mermaid, and Graphviz DOT.
Installation
Search DrawIt in your editor's Extensions panel, or install directly:
| Editor | Registry / Source |
|---|---|
| VS Code | VS Code Marketplace |
| Cursor | Open VSX Registry |
| Google Antigravity | Open VSX Registry |
Quick Start
- 1
Open or create a diagram
Click the DrawIt icon in the Activity Bar to open the Diagrams explorer, or run
DrawIt: New Diagram(⌘⌥N/Ctrl+Alt+N). - 2
Generate from your codebase
From the Command Palette, run
DrawIt: Generate Codebase Mapor right-click any.ts/.tsxfile and chooseDrawIt: Show Impact of This File. - 3
Inspect properties
Click any element in the diagram viewer to inspect its coordinates, dimensions, colors, and typography in the read-only Properties sidebar.
- 4
Edit in DrawIt Web or Desktop
Click the globe icon in the editor toolbar or run
DrawIt: Open in Webto launch an editable copy in the DrawIt Web editor at chamuka.ai. Early testers with the desktop app installed can selectDrawIt: Open in Desktop Appfor offline editing.
Codebase Quick Actions
Quick actions analyze your project and output a .drawit diagram file immediately using the DrawIt CLI (@chamuka-labs/drawit-cli):
| Command | What it produces |
|---|---|
| DrawIt: Generate Codebase Map | Visual monorepo package and app architecture diagram. |
| DrawIt: Generate Dependencies | Module-level import/export graph of workspace code. |
| DrawIt: Generate Routes | Next.js App Router and API route hierarchy map. |
| DrawIt: Generate DB Schema Diagram | Database relational entity diagram from Drizzle ORM schema. |
| DrawIt: Generate Data Flow | End-to-end flowchart from UI actions down to database queries. |
| DrawIt: Show Impact of This File | Reverse dependency analysis showing all files affected by changing the active file. |
AI Agent Integration (MCP)
MCP Server Architecture
The VS Code extension does NOT bundle an MCP server. It provides a connection helper (DrawIt: Connect this diagram to your AI agent (MCP)) that helps you link your AI agents (Claude Desktop, Cursor, Antigravity) to edit your diagrams.
- Without the desktop app: Install the CLI (
npm install -g @chamuka-labs/drawit-cli) and rundrawit serve(or use stdio:drawit serve --stdio). - With the desktop app (early preview): The desktop app runs an embedded MCP server on port
3847. - Cloud MCP: DrawIt Web offers a hosted MCP endpoint at
https://chamuka.ai/api/mcpwith your personal API key.
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 |
Commands
Available from the Command Palette (⌘⇧P / 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 | Generate architecture diagram from project packages. |
| DrawIt: Generate Dependencies | Generate import dependency graph. |
| DrawIt: Generate Routes | Generate Next.js route hierarchy diagram. |
| DrawIt: Generate DB Schema Diagram | Generate schema diagram from Drizzle ORM definitions. |
| DrawIt: Generate Data Flow | Generate UI-to-database data flow diagram. |
| DrawIt: Show Impact of This File | Blast-radius reverse-dependency diagram for the active file. |
| DrawIt: Export as PNG / SVG / rich formats | Export diagram to image, vector, or code formats. |
| DrawIt: Zoom to Fit | Fit the entire diagram into the viewport. |
| DrawIt: Open in Web | Upload an editable preview copy and open it in DrawIt Web. |
| 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). |
| DrawIt: Connect this diagram to your AI agent (MCP) | Generate MCP client configuration for external AI agents. |
| DrawIt: Create Git Branch | Create a git branch scoped to diagram files. |
| DrawIt: Switch Git Branch | Switch the active diagram git branch. |
| DrawIt: Merge Git Branch | Merge diagram branches. |
Settings
| Setting | Default | Description |
|---|---|---|
| chamuka-drawit.autoCommitOnSave | false | Automatically create a git commit when a .drawit file changes on disk (e.g. from an MCP agent). |
Requirements
- Visual Studio Code 1.85 or later (or compatible Open VSX editor)
- Interactive Editing: Available via the DrawIt Web editor. The standalone desktop app is in closed preview for early testers.
- Codebase Quick Actions: Require
@chamuka-labs/drawit-cli(npm install -g @chamuka-labs/drawit-cli).
License & Privacy
Viewing, zooming, and inspecting diagrams in VS Code runs 100% locally on your machine. No diagram data is sent to external servers unless you explicitly click DrawIt: Open in Web to open an editable copy in the web editor.
DrawIt for VS Code is proprietary software developed by Chamuka Labs. Use is subject to the Chamuka Terms of Service.
Need help or want to report a bug?
dev@chamuka.ai