VS Code Integration

DrawMotive for VS Code edits .draw.png files inside your code editor. Each file is a normal PNG with an embedded editable diagram, so it can appear in documentation and remain editable.

Install

Install DrawMotive from the VS Code Marketplace, or download a VSIX from Releases and run Extensions: Install from VSIX….

The extension requires VS Code 1.95 or newer on Windows, macOS, or Linux. It works offline without an account.

Create a diagram

1. Open the Command Palette.
2. Run DrawMotive: New Diagram.
3. Choose a filename such as architecture.draw.png.
4. Draw and label your diagram.
5. Click Save diagram.

Use the command to create a valid editable PNG rather than creating an empty file with that extension.

Edit and save

Open an existing .draw.png file in VS Code. If it opens as an image, use Open With… and choose the DrawMotive editor. Make your changes, then use Save diagram before closing the tab.

The canvas supports Ctrl/Cmd+S while it has keyboard focus. The visible Save diagram action provides the explicit save workflow. If another tool changes the file on disk, review the editor's reload prompt before discarding unsaved changes.

Use diagrams with Git

Commit the .draw.png file alongside your code. It displays as an image in a README or an image-capable repository viewer, while Git treats it as a binary file. For many large diagrams, consider Git LFS.

A minimal .gitattributes entry is:

*.draw.png binary

For Git LFS repositories, use the attributes generated by your Git LFS configuration.

Start from TextGraph

Try a diagram in the TextGraph playground, or use TextGraph Markdown Preview for text diagrams in Markdown. The Markdown preview extension is a separate product from the editable PNG canvas.

The DrawMotive extension README includes a downloadable editable example. Canvas changes are saved in the drawing and do not rewrite TextGraph source.

Sharing and limits

Share the saved PNG as an image, and keep the original .draw.png for editing. Image tools may strip its embedded diagram data when rewriting it.

This host edits local files; it does not synchronize a live drawing between different users.