Obsidian Stats logoObsidian Stats

Beautiful Mermaid Renderer

by qiaoborui
5
4
3
2
1
Score: 35/100
New Plugin
Install Code

Description

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

Reviews

No reviews yet.

Stats

stars
downloads
0
forks
0
days
NaN
days
NaN
days
0
total PRs
0
open PRs
0
closed PRs
0
merged PRs
0
total issues
0
open issues
0
closed issues
0
commits

Latest Version

Invalid date

Changelog

See all version on GitHub

README file from

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.

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
Sponsors