DrawIt for VS Code
Create, edit, and AI-generate diagrams without leaving your editor.
DrawIt brings Chamuka's professional diagramming engine directly into Visual Studio Code — powered by a high-performance WebAssembly + WebGL2 rendering core and an integrated AI generation sidebar.
Features
Full-Fidelity Diagramming Engine
- WebAssembly + PixiJS (WebGL2) rendering — smooth, hardware-accelerated at any scale
- 23 interaction tools: select, pan, zoom, resize, rotate, edge creation, freehand drawing, text editing, path editing, and more
- Snap-to-grid, multi-select, group/ungroup, undo/redo history
- Pixel-perfect export to PNG and SVG
AI Generation — Two Modes
Chamuka Account — sign in once, use Chamuka's hosted AI with no API key required.
Bring Your Own Key (BYOK) — connect your own OpenRouter or OpenAI API key.
Generate any of 11 diagram templates from a plain-text prompt:
| Template |
Template |
Template |
| General |
Architecture |
Flowchart |
| Sequence |
Wireframe |
Mind Map |
| ER Diagram |
Slides |
Infographic |
| Illustration |
Publishing |
|
Multi-turn editing lets you refine diagrams with follow-up prompts — "make the API Gateway orange" or "add a load balancer between the clients and the services".
VS Code-Native UX
- Activity Bar panel with AI chat sidebar and properties editor
- Diagrams explorer showing element counts and last-modified times for all
.drawit files in the workspace
- Git branch management for diagram files — create, switch, merge branches directly from the panel
- Code-to-diagram: open any source file and run
DrawIt: Generate from Current File to diagram its structure automatically
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 |
Primary install |
Manual fallback |
| Cursor |
Extensions panel → search DrawIt |
Download the .vsix from GitHub Releases → Extensions: Install from VSIX… or cursor --install-extension drawit.vsix |
| Antigravity |
Extensions panel → search DrawIt |
Download the .vsix from GitHub Releases → antigravity --install-extension drawit.vsix --force |
| VS Code |
VS Code Marketplace |
Same .vsix from GitHub Releases |
The same extension package works across VS Code, Cursor, and Antigravity.
2. Create your first diagram
Click the DrawIt icon in the Activity Bar, then press + in the Diagrams panel — or run DrawIt: New Diagram from the Command Palette (Cmd/Ctrl+Shift+P).
Option A — Chamuka Account (recommended)
- Open the AI Assistant panel in the Activity Bar
- Click the settings icon → Sign In to Chamuka
- Paste your Chamuka API token
Option B — Bring Your Own Key
- Open the Command Palette → DrawIt: Configure AI API Key
- Enter your OpenRouter or OpenAI API key
- Set
chamuka-drawit.apiMode to byok in VS Code Settings
4. Generate a diagram
Type a prompt in the AI Assistant panel and press Cmd+Enter (Mac) or Ctrl+Enter (Windows/Linux). Elements stream onto the canvas in real time as the AI generates them.
Keyboard Shortcuts
Canvas (when diagram editor is focused)
| Action |
Mac |
Windows / Linux |
| Save |
⌘S |
Ctrl+S |
| Undo |
⌘Z |
Ctrl+Z |
| Redo |
⌘Y |
Ctrl+Y |
| Select All |
⌘A |
Ctrl+A |
| Duplicate selected |
⌘D |
Ctrl+D |
| Group selected |
⌘G |
Ctrl+G |
| Delete selected |
Delete / Backspace |
Delete / Backspace |
| Zoom to Fit |
0 |
0 |
| Zoom in / out |
+ / - |
+ / - |
| Tool |
Key |
Tool |
Key |
| Select |
V |
Pan |
H |
| Rectangle |
R |
Ellipse |
E |
| Diamond |
D |
Edge / Connector |
L |
| Text |
T |
Freehand |
F |
| Pen |
P |
|
|
Panel shortcuts
| Action |
Mac |
Windows / Linux |
| New Diagram |
⌘⌥N |
Ctrl+Alt+N |
| Zoom to Fit |
⌘⇧0 |
Ctrl+Shift+0 |
| Refresh Diagrams |
⌘⌥R |
Ctrl+Alt+R |
| Send AI prompt |
⌘↵ |
Ctrl+Enter |
Settings
| Setting |
Default |
Description |
chamuka-drawit.apiMode |
byok |
chamuka, byok, or cli for AI provider selection |
chamuka-drawit.defaultTemplate |
general |
Default template for new AI-generated diagrams |
chamuka-drawit.gridEnabled |
true |
Snap elements to grid during AI generation |
chamuka-drawit.autoCommitOnSave |
false |
Automatically create a git commit when a .drawit file is saved |
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 from Current File |
Analyse the active source file and generate a diagram of its structure |
DrawIt: Generate Codebase Map |
Generate a codebase architecture map via the DrawIt CLI |
DrawIt: Export as PNG |
Export the active diagram to a PNG image |
DrawIt: Export as SVG |
Export the active diagram to an SVG file |
DrawIt: Zoom to Fit |
Fit the entire diagram into the viewport |
DrawIt: Undo |
Undo the last action |
DrawIt: Redo |
Redo the last undone action |
DrawIt: Sign In to Chamuka |
Authenticate with your Chamuka account |
DrawIt: Configure AI API Key |
Store an OpenRouter or OpenAI API key |
DrawIt: Create Git Branch |
Create a git branch scoped to diagram files |
DrawIt: Switch Git Branch |
Switch the current diagram git branch |
DrawIt: Merge Git Branch |
Merge a diagram branch |
Requirements
- Visual Studio Code 1.85 or later
- An internet connection for AI generation features
- A Chamuka account or an OpenRouter / OpenAI API key for AI generation
Privacy & Data
AI generation sends your diagram prompt and any existing element data to the configured AI provider (Chamuka cloud or your own API endpoint). No diagram content is stored by Chamuka unless you are signed in to a Chamuka account and have explicitly opted in to cloud sync.
Refer to the Chamuka Privacy Policy for full details.
License
DrawIt for VS Code is proprietary software developed and maintained by Chamuka.
This extension is not open source. The source code is not publicly available. All rights reserved.
Use of this extension is subject to the Chamuka End User License Agreement. By installing or using this extension you agree to the terms of that agreement.
Support
© 2026 Chamuka, Inc. All rights reserved.
