Beautiful Mermaid Renderer

approved

by qiaoborui

This plugin has not been manually reviewed by Obsidian staff. Render Mermaid diagrams with beautiful-mermaid SVG output and theme variables.

↓ 283 downloadsUpdated 10d agoApache-2.0
Install in ObsidianView on GitHub

Beautiful Mermaid Renderer for Obsidian

An Obsidian plugin that renders Mermaid diagrams with beautiful-mermaid SVG output and Obsidian theme variables.

Inspired by Craft's Beautiful Mermaid gallery and powered by lukilabs/beautiful-mermaid.

Theme-aware Mermaid flowchart rendered in Obsidian
Theme-aware diagrams 		XY bar chart rendered with Beautiful Mermaid
XY bar charts
Combined bar and line chart rendered with Beautiful Mermaid
Bar + line combinations 		Horizontal XY bar chart rendered with Beautiful Mermaid
Horizontal charts

Usage

Use a mermaid code block:

```mermaid
graph LR
  A[API emitEvent] --> B[Fanout exchange]
  B --> C[Gateway session A]
  B --> D[Gateway session B]
```

Aliases are supported:

  • mermaid
  • mermaid-beautiful
  • beautiful-mermaid
  • bmmd

Build

bun install
bun run build

Install Into A Vault

Copy these files into:

<vault>/.obsidian/plugins/beautiful-mermaid-renderer/

Required files:

  • manifest.json
  • main.js
  • styles.css

Enable Beautiful Mermaid Renderer from Obsidian settings.

Reading view and Live Preview are both supported. In Live Preview, move the cursor outside the code block to see the rendered diagram; use the hover Edit button to reveal the source again.

Inline diagrams fit to the editor width by default so the whole diagram is visible. Disable Fit diagrams to width in plugin settings to use readable-height scaling with horizontal scrolling.

Preview

Redis Pub/Sub Mermaid preview

The preview SVGs are generated locally from Mermaid source:

bun run assets

Release Files

Manual install needs:

  • main.js
  • manifest.json
  • styles.css

Development

bun run dev

For plugin developers

Search results and similarity scores are powered by semantic analysis of your plugin's README. If your plugin isn't appearing for searches you'd expect, try updating your README to clearly describe your plugin's purpose, features, and use cases.