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.

Real Examples

Features

• Left-side export button on rendered diagrams
• Right-click menu on rendered diagrams and Mermaid code blocks
• Copy as SVG / PNG
• Save as SVG / PNG
• 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
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

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

License

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