DrawIt Diagram Viewer for VS Code

View .drawit diagram files directly in Visual Studio Code and open them in the DrawIt web app for full editing.

Install from VS Code Marketplace →

Features

• Native Viewer — Opens .drawit files in a custom editor with canvas rendering
• Interactive — Pan, zoom, and select elements directly in VS Code
• Open in App — One-click to open any diagram in the DrawIt web app for full AI-powered editing
• Export — Export diagrams as PNG, SVG, or .drawit format from within VS Code
• File Explorer — Sidebar panel listing all .drawit files in your workspace
• Multi-format — Supports both NDJSON and JSON .drawit file formats

Usage

Opening Diagrams

Simply open any .drawit file in VS Code — the extension automatically renders it in the custom viewer.

Navigation

Editing in the DrawIt App

The VS Code extension is a read-only viewer. For full editing (AI generation, drag-and-drop, resizing):

1. Click "Open in DrawIt App" in the editor toolbar
2. Your browser opens drawit.chamuka.ai
3. Import your .drawit file via File > Import or drag-and-drop
4. Edit with full AI-powered features
5. Export and save back to your project

Commands

Access via the Command Palette (Cmd+Shift+P / Ctrl+Shift+P):

Toolbar Buttons

When a .drawit file is active, three buttons appear in the editor toolbar:

• Open in DrawIt App — external link icon
• Export as PNG — image icon
• Zoom to Fit — full-screen icon

Supported File Formats

The extension handles both .drawit formats automatically:

NDJSON format (generated by the CLI and Claude Code skill):

{"width":1920,"height":1080,"background":"#ffffff","metadata":{...}}
{"type":"node","id":"node-1","position":{"x":100,"y":100},...}
{"type":"edge","id":"edge-1","source":"node-1","target":"node-2",...}

JSON format (generated by the web app):

{
  "width": 1920,
  "height": 1080,
  "elements": [
    {"type":"node","id":"node-1",...},
    {"type":"edge","id":"edge-1",...}
  ]
}

Requirements

Visual Studio Code 1.80.0 or higher.

Known Limitations

• Read-Only Viewer — Editing is done in the DrawIt web app, not directly in VS Code
• Large Diagrams — Very large diagrams (1000+ elements) may take a moment to load
• Icon Shapes — Icon elements render as labeled placeholders in the VS Code viewer

Related Tools

• Web App — drawit.chamuka.ai — AI-powered diagram creation and editing
• CLI — @chamuka-labs/drawit-cli — validate, inspect, and export .drawit files from the terminal

Roadmap

• [ ] Element property inspector
• [ ] Search and filter elements
• [ ] Minimap / overview panel
• [ ] Direct import/export sync with DrawIt web app

License

Proprietary — © 2026 Chamuka Inc. All rights reserved. Unauthorized copying, distribution, or modification is strictly prohibited. For licensing inquiries contact hello@chamuka.ai.