Export Mermaid Diagrams

An Obsidian plugin to copy or save rendered Mermaid diagrams as SVG or PNG.

Useful when you (or some magical AI) write Mermaid in notes and you need to paste the diagram somewhere that doesn’t render Mermaid.

Privacy

This plugin runs fully offline. Copy as SVG/PNG uses the system clipboard only to place the diagram you explicitly export — it does not read other clipboard contents or send data anywhere.

Real Examples

Features

• Left-side export button on rendered diagrams
• Right-click menu on rendered diagrams and Mermaid code blocks
• Copy the original Mermaid source or save it as a renderable Markdown note
• Copy as SVG / PNG
• Save as SVG / PNG
• Save every diagram in the active note to the vault as PNG, SVG, or Markdown
• Smart filenames based on the note name and nearest heading
• Readable light export mode (default) so dark Obsidian themes don’t produce hard-to-read images
• Optional “as shown in Obsidian” theme-matched export
• Configurable PNG scale (1×–4×)

Install (manual)

1. Create a folder: <vault>/.obsidian/plugins/export-mermaid-diagrams/
2. Copy main.js, manifest.json, and styles.css from the latest release into that folder
3. Reload Obsidian → Settings → Community plugins → enable Export Mermaid Diagrams

Folder name must match the plugin id: export-mermaid-diagrams.

Develop

npm install
npm run dev

Symlink or work directly in .obsidian/plugins/export-mermaid-diagrams, then reload the plugin in Obsidian.

npm run build   # production build → main.js

Usage

1. Render a ```mermaid block (Live Preview or Reading view)
2. Click the copy button on the left of the diagram, or right-click the diagram
3. Choose Copy/Save as SVG or PNG

Settings

Setting	Default	Description
Primary click action	Show export menu	What the diagram export button does on click
After primary action	Perform action only	When a direct export is selected, whether to also open the menu
Default save folder	mermaid-diagram-exports	Vault folder for Save to vault actions
Open location after save	Off	Desktop only. Reveals vault saves in finder or file explorer
Export appearance	Readable light	High-contrast light export, or match Obsidian theme
PNG scale	2×	Resolution multiplier
PNG background	White	Used when appearance is “As shown”

Support

Report a problem · Request a feature

If this plugin helps you, you can buy me a coffee.

License

MIT © Ameer Jamal — free to use; please keep the copyright notice.