Diagramix
Export selected Mermaid or PlantUML diagram text to PNG or SVG — fully local, no external requests.
Features
- Preview any Mermaid or PlantUML diagram in a side panel — no file saved
- Switch Mermaid color themes live inside the preview panel and see the result instantly
- Save as PNG or SVG directly from the preview panel toolbar
- Export commands also available via the Command Palette for direct file save without preview
- PNG renders at 2× resolution for crisp output on retina/HiDPI screens
- SVG output is lossless and scalable — ideal for documentation and presentations
- Everything runs locally — no internet connection required
Requirements
| Diagram type |
Requirement |
| Mermaid |
None — bundled inside the extension |
| PlantUML |
Java (JRE 8 or later) + plantuml.jar |
Download plantuml.jar from plantuml.com/download.
How to Use
Preview (recommended)
- Select your diagram source text in the editor.
- Right-click → Mermaid/PlantUML: Preview Diagram (or run it from the Command Palette).
- A side panel opens showing the rendered diagram.
- For Mermaid: use the Theme dropdown in the toolbar to switch themes live.
- Click Save as PNG or Save as SVG in the toolbar to export the file.
Export directly (no preview)
Use the Command Palette (Ctrl+Shift+P) and run:
- Mermaid/PlantUML: Export Selection to PNG
- Mermaid/PlantUML: Export Selection to SVG
A save dialog appears immediately — no preview panel is opened.
These export commands can optionally be added to the right-click context menu via the diagramix.showExportInContextMenu setting.
Preview Panel
The preview panel toolbar contains:
| Control |
Description |
| Save as PNG |
Saves the current diagram as a 2× PNG |
| Save as SVG |
Saves the current diagram as a vector SVG |
| Theme (Mermaid only) |
Switches the Mermaid color theme and re-renders live |
| Open settings ↗ |
Opens extension settings |
PlantUML note: Color themes do not apply to PlantUML diagrams. Use skinparam directives inside your diagram source to control PlantUML styling.
PlantUML Setup
The extension looks for plantuml.jar in this order:
- The
diagramix.plantumlJarPath VS Code setting (highest priority)
- The
PLANTUML_JAR environment variable
- Common install paths (
/usr/share/plantuml, /usr/local/lib, C:\ProgramData\chocolatey\lib\plantuml, etc.)
If Java or the jar file is not found, the extension shows an error message with instructions.
Setting the jar path manually
Open Settings (Ctrl+,) and search for diagramix:
"diagramix.plantumlJarPath": "C:\\tools\\plantuml.jar"
Supported Mermaid Diagram Types
All diagram types supported by Mermaid work, including:
- Flowcharts (
graph TD, flowchart LR, …)
- Sequence diagrams
- Class diagrams
- State diagrams
- Entity-relationship diagrams
- Gantt charts
- Pie charts
Extension Settings
| Setting |
Default |
Description |
diagramix.plantumlJarPath |
"" |
Absolute path to plantuml.jar. Leave empty to auto-detect. |
diagramix.mermaidTheme |
"default" |
Default Mermaid color theme. Choices: default, base, dark, forest, neutral, neo, neo-dark. |
diagramix.showExportInContextMenu |
false |
Show export PNG/SVG commands in the editor right-click menu. Preview is always shown. |
Building from Source
npm install
npm run build # production build → dist/
Press F5 in VS Code to open an Extension Development Host for manual testing.
License
MIT
