Obsidian Stats logoObsidian Stats

Draw a Mermaid

by yaye.work
5
4
3
2
1
Score: 35/100
New Plugin
Install Code

Description

This plugin has not been manually reviewed by Obsidian staff. Build mermaid flowcharts visually — drag blocks and connectors on a canvas, rename inline, and get live-generated mermaid code. Adds an editor to mermaid code blocks and a ribbon button.

Reviews

No reviews yet.

Stats

stars
22
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

Draw a Mermaid

Build mermaid flowcharts visually inside Obsidian: drag blocks and connectors on a canvas, rename them inline, and let the plugin generate the mermaid code for you. A live preview renders as you build.

demo

Features

  • Visual-first canvas: the canvas is the source of truth; mermaid code is generated from it.
  • Add blocks by clicking a shape (rectangle, rounded, diamond, circle).
  • Connect blocks by dragging the ● handle onto another block. Drop on empty space to spawn a new connected block; drop onto an existing arrow to splice a block into that connection.
  • Rename a block by double-clicking it, or a connector by double-clicking the arrow.
  • Multi-select with a rubber-band marquee (or Shift-click) for bulk move, reshape, duplicate, and delete.
  • ⌥/Alt-drag to duplicate a block or a whole selection.
  • Live output: rendered diagram and generated mermaid code update in real time.
  • Layout persistence: your block positions are stored in a %% mv: comment in the block, so reopening restores the canvas.

Usage

  • Click the ribbon icon ("Draw a Mermaid") to start a blank diagram; on save it's inserted into the active note (or a new note).
  • Hover any rendered mermaid block in a note and click the pencil button to edit it visually.
  • Command palette: "Edit mermaid diagram at cursor" and "Insert mermaid diagram (visual editor)".

Direction TD = top-down, LR = left-to-right; this only affects how the rendered diagram is auto-laid-out.

Installation

From Community Plugins (once approved)

Settings → Community plugins → Browse → search "Draw a Mermaid".

Manual

Copy main.js, manifest.json, and styles.css into <vault>/.obsidian/plugins/mermaid-visual/, then enable it in Settings → Community plugins.

Development

npm install
npm run dev    # watch build
npm run build  # production build (type-check + bundle)

About

I'm a designer main, so when I realised I have write code for a visual chart, I almost deleted Obsidian(/s). Alas, I got claude's help to build this visual mermaid tool, hope it can help people like me who are looking for a tool like this.

Who are you any ways?

I am whoever you want me to be! (I'm a Designer) Find me here: www.yaye.work [email protected]

License

MIT © yaye.work

Sponsors