VS Codev0.2.0

DrawIt for VS Code

Create, edit, and AI-generate diagrams without leaving your editor. Full-fidelity diagramming with a built-in AI sidebar.

Install from VS Code Marketplace

Overview

Full Diagramming Engine

23 interaction tools — select, pan, zoom, resize, rotate, edge creation, freehand, text editing, path editing, and more.

AI Generation

Generate any of 11 diagram templates from a natural-language prompt. Elements stream onto the canvas in real time.

Multi-turn Editing

Refine diagrams with follow-up prompts: "make the API Gateway orange" or "add a load balancer between the clients and services."

VS Code-Native UX

Activity Bar panel, Diagrams Explorer with file stats, Git branch management, and Code-to-Diagram generation.

Pixel-Perfect Export

Export to PNG and SVG at any resolution directly from VS Code.

No Key Required (Chamuka Account)

Installation

Search DrawIt in the VS Code Extensions panel, or install directly from the marketplace:

ext install chamuka.chamuka-drawit-vscode

Or run from the Command Palette: ext install chamuka.chamuka-drawit-vscode

Quick Start

1
Install the extension
Search DrawIt in the Extensions panel, or use the marketplace link above.
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 (⌘⇧P / Ctrl+Shift+P).
3
Configure AI generation
Option A — Chamuka Account (recommended)
1. Open the AI Assistant panel in the Activity Bar
2. Click the settings icon → Sign In to Chamuka
3. Paste your Chamuka API token
Option B — Bring Your Own Key
1. Open the Command Palette → DrawIt: Configure AI API Key
2. Enter your OpenRouter or OpenAI API key
3. Set chamuka-drawit.apiMode to byok in VS Code Settings
4
Generate a diagram
Type a prompt in the AI Assistant panel and press ⌘↵ (Mac) or Ctrl+Enter (Windows/Linux). Elements stream onto the canvas in real time.

AI Generation

DrawIt supports 11 diagram templates out of the box:

General

Architecture

Flowchart

Sequence

Wireframe

Mind Map

ER Diagram

Slides

Infographic

Illustration

Publishing

Code-to-diagram: Open any source file and run DrawIt: Generate from Current File to automatically diagram its structure.

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 shortcuts

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

Commands

All commands are 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 from Current File	Analyse the active source file and generate a diagram of its structure.
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.

Settings

Setting	Default	Description
chamuka-drawit.apiMode	byok	chamuka to use your Chamuka account; byok to use your own API key.
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.

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.

DrawIt for VS Code is proprietary software. The source code is not publicly available. Use of this extension is subject to the Chamuka End User License Agreement.

Need help or want to report a bug?

dev@chamuka.ai