Obsidian Stats logoObsidian Stats

Export Mermaid Diagrams

by Ameer Jamal
5
4
3
2
1
Score: 51/100
Install Code

Description

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

Reviews

No reviews yet.

Stats

0
stars
2,059
downloads
0
forks
67
days
38
days
38
days
0
total PRs
0
open PRs
0
closed PRs
0
merged PRs
0
total issues
0
open issues
0
closed issues
11
commits

Latest Version

1.0.5
a month ago

Changelog

Changes

  • Fix Save all so every Mermaid block exports, including diagrams not mounted in Live Preview
  • Add copy and save Mermaid source as renderable Markdown
  • Add batch PNG, SVG, and Markdown export with smart filenames
  • Add save-folder selection and use mermaid-diagram-exports by default
  • Add configurable primary-click behavior and optional reveal-after-save
  • Add separate bug report and feature request forms
  • Improve export reliability, error handling, mobile compatibility, and test coverage

Full Changelog: https://github.com/Ameer-Jamal/obsidian-export-mermaid-diagrams/compare/1.0.4...1.0.5

See all version on GitHub

README file from

Github

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.

Sponsors