Air Diagrams for VS Code

Edit PlantUML and Mermaid diagrams with a live preview beside your code. Works offline. No rendering server required.

Quick start

1. Install Air Diagrams from Visual Studio Marketplace, then open a diagram file in VS Code.
2. Check that the status bar says PlantUML (Air) or Mermaid (Air). Click the language name to change it if needed.
3. Start editing. The preview opens automatically for the first diagram in each VS Code window and updates as you type.

Sidebar and examples

Open Air Diagrams from the Activity Bar. New diagram in the header creates an empty Mermaid or PlantUML document. It stays unsaved until you save it.

Search Examples and choose a language tab. Search accepts diagram aliases such as erd, fishbone, and wbs, including queries like erd blog. Click an example to open an editable copy, or set Examples > Click Action to Preview. The matching example is highlighted while its unchanged copy or example preview is active. Editing the copy clears the highlight; switching back to an unchanged copy restores it. Monochrome schematics identify diagram types; Simple and Complex labels use secondary text color without a background and appear at the right edge of the row where those variants are available. An untouched unsaved copy is reused for each language; edited copies stay intact. A matching empty diagram created from the header can be used too.

Right-click an example for Preview Diagram, Open Example, Open New Copy, or Copy Source. Open New Copy always creates a separate document. Shift+F10 opens the same menu from the keyboard. Examples and thumbnails work offline.

Hover over a diagram type's header to reveal its information icon; hovering the icon brightens it and highlights its background. Click it to open that type's documentation in your browser, at the selected language's example. Keyboard focus also reveals the link. Documentation requires an internet connection.

Drag the language tabs to reorder them, or use Alt+Left/Right. Search history keeps the last 20 queries after a typing pause or leaving the field, including searches with no results. Up/Down recalls history; Down past the newest entry clears the search. Alt+Down focuses results. Tab order and history survive Reload Window. Switching to another sidebar panel and back preserves the current search, scroll position, language tab and expanded sections. Reopening with Examples expanded focuses search and selects its query for replacement. Collapsed Examples stays collapsed. Reload Window resets the current search and scroll. The Diagrams list is temporarily hidden.

The More Actions... menu contains Settings, Documentation, and Open in Extensions. Documentation opens in your browser.

Edit a diagram

Navigate the preview

• Open or close: click the Air Diagrams button above the editor, or run Air Diagrams: Toggle Diagram Preview.
• Keyboard shortcut: with the editor focused, press Ctrl+Shift+V on Windows/Linux or Cmd+Shift+V on macOS.
• Source to diagram: move the cursor in the source to highlight its diagram element.
• Diagram to source: click a diagram element to jump to its source.
• Pan and zoom: use the preview controls.

The preview follows diagrams already opened with Air Diagrams, even if another extension changes their language mode. If you close it, switching files keeps it closed until you reopen it.

Export an image

1. Open Diagram actions in the preview.
2. Choose Export image and select PNG or SVG and your export options.
3. Save the image to your chosen location.

Settings

Open More Actions... > Settings in the sidebar. Settings use VS Code's native editor, grouped as Diagrams, Examples, and Preview.

Default Diagram Language starts with the last language used unless you choose Mermaid or PlantUML. Explicit New Mermaid diagram and New PlantUML diagram actions always use their named language.

New diagrams and example copies open untitled with the chosen language, without a location prompt. Choose the filename and destination on Save; VS Code offers language-based file types. All supported extensions remain available.

File associations

Use the language selector in the status bar or VS Code's Files: Associations to choose which extension handles your diagrams. Air Diagrams respects explicit associations. If another extension conflicts, a notification offers Manage Extensions; it never disables extensions or changes your associations for you.

{
  "files.associations": {
    "*.puml": "air-plantuml",
    "*.plantuml": "air-plantuml",
    "*.wsd": "air-plantuml",
    "*.pu": "air-plantuml",
    "*.mmd": "air-mermaid",
    "*.mermaid": "air-mermaid"
  }
}

Help and privacy

Read the documentation or contact support@air-diagrams.com for help or to report a security issue. Include the extension version and steps to reproduce; remove private diagram content before sending a sample.

Diagrams render locally. Opening documentation or sending support email uses external services; see the privacy notice.

License

Licensed under the Business Source License 1.1. The installed extension includes the full license in LICENSE.md and dependency licenses in dist/THIRD-PARTY-NOTICES.txt.