VS Code Integration

DrawMotive provides a VS Code extension that lets you create and edit diagrams directly in your code editor.

Overview

The VS Code extension registers a custom editor for .draw.png files. These are standard PNG images that embed the full DrawMotive diagram data inside the file. This means:

• Diagrams are version-controlled alongside your code in Git
• They display as normal images in GitHub, GitLab, and any image viewer
• Double-clicking opens the full DrawMotive editor inside VS Code

Installation

1. Open VS Code
2. Go to the Extensions view (Ctrl+Shift+X)
3. Search for "DrawMotive"
4. Click Install

The extension activates automatically when you open a .draw.png file.

Creating a Diagram

1. Create a new file with the .draw.png extension (e.g., architecture.draw.png)
2. Open the file — VS Code launches the DrawMotive editor
3. Create your diagram
4. Save the file (Ctrl+S) — the diagram is saved as a PNG image with embedded data

Editing a Diagram

1. Open any .draw.png file in VS Code
2. The DrawMotive editor appears in the editor tab
3. Make your changes
4. Save (Ctrl+S) to update the file

Workflow with Git

Since .draw.png files are just PNG images:

• git add architecture.draw.png — Stage the diagram
• git diff shows the file as changed (binary diff)
• GitHub/GitLab renders the PNG in pull requests, READMEs, and file browsers
• Git LFS is recommended for repositories with many large diagrams

Recommended .gitattributes

*.draw.png binary

Or with Git LFS:

*.draw.png filter=lfs diff=lfs merge=lfs -text

File Format

A .draw.png file is a valid PNG image with additional metadata stored in PNG chunks. The embedded data includes:

• Serialized graphics objects (all shapes, lines, text, connectors)
• Constraint definitions
• Canvas state (viewport position, zoom level)

Any image viewer or browser displays the PNG normally. Only the DrawMotive editor and VS Code extension can read the embedded diagram data for re-editing.

Limitations

• The VS Code extension operates locally — no real-time collaboration with other users
• Large diagrams produce larger PNG files (the embedded data can increase file size)
• The editor runs in a VS Code webview using the same Blazor WebAssembly technology as the web app