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

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.