Diagramix

Export selected Mermaid or PlantUML diagram text to PNG or SVG — fully local, no external requests.

Features

• Select any Mermaid diagram source in the editor → right-click → Export Selection to PNG or Export Selection to SVG
• Select any PlantUML source (@startuml … @enduml) the same way
• 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

Download plantuml.jar from plantuml.com/download.

How to Use

Mermaid

1. Open any file and type (or paste) a Mermaid diagram:

   graph TD
       A[Start] --> B{Is it working?}
       B -- Yes --> C[Export to PNG]
       B -- No  --> D[Check the error]
       D --> B
   

2. Select all the diagram text with your cursor.

3. Right-click the selection → choose Mermaid/PlantUML: Export Selection to PNG or Export Selection to SVG.

4. A save dialog appears — choose a file name and location.

5. The file is written to disk.

PlantUML

1. Write or paste a PlantUML diagram (must start with @startuml):

   @startuml
   Alice -> Bob : Hello
   Bob --> Alice : Hi!
   @enduml
   

2. Select the text from @startuml to @enduml (inclusive).

3. Right-click → Export Selection to PNG or Export Selection to SVG.

4. Choose a save location in the dialog.

PlantUML Setup

The extension looks for plantuml.jar in this order:

1. The diagramix.plantumlJarPath VS Code setting (highest priority)
2. The PLANTUML_JAR environment variable
3. 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

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