# MermaidMaker for Obsidian > Inline GUI editor for Mermaid diagrams. Drag nodes, click `[[wikilinks]]` inside them, edit visually β€” all without leaving your note. [![beta](https://img.shields.io/badge/status-beta-orange)](https://github.com/Akitaroh/obsidian-mermaid-maker) [![license](https://img.shields.io/badge/license-MIT-blue)](LICENSE) This plugin turns Mermaid code blocks into a **visual canvas** where you can drag nodes, add/delete/connect them, and edit labels β€” without switching to an external tool. Node labels render as real Obsidian markdown, so `[[wikilinks]]`, `#tags`, `$math$` and bold/italic all work inside the diagram. The world's first inline GUI Mermaid editor for Obsidian.

Canvas overview

--- ## Features - πŸ–± **Drag nodes** on a visual canvas, positions are saved as a Mermaid comment so the file stays portable Mermaid - βž• **Add / remove nodes and edges** with a toolbar button or Delete key - ✏️ **Edit labels** by double-clicking a node - πŸ”— **`[[wikilinks]]` clickable inside nodes** β€” Obsidian's standard link click / hover preview / unresolved styling all work - `#tags`, `$math$`, `**bold**` etc. render inside nodes - πŸ“ **dagre auto-layout** for newly added nodes - πŸ’Ύ **Two-way sync**: edits write back to the Mermaid block, external Mermaid text edits flow back into the canvas

Rich labels: wikilinks, tags, math, bold inside nodes
Node labels are rendered through Obsidian's MarkdownRenderer, so wikilinks, tags, math and bold all work inside the diagram.

The plugin is **opt-in**: regular ` ```mermaid ` blocks are untouched, only ` ```mermaid-maker ` blocks are processed. --- ## Quick start ```mermaid-maker %%editable%% graph LR A[Start] --> B[Auth] B --> C[End] ``` 1. Add `%%editable%%` as the first line inside a ` ```mermaid-maker ` block. 2. Switch the note to **Reading view** (`cmd+e` / `ctrl+e`). 3. The diagram becomes an editable canvas. Drag, double-click, use the `+ Node` button (currently labeled in Japanese β€” i18n pending).

Editable canvas with + Node button

4. Saved automatically (500 ms debounced). Without `%%editable%%` the block is rendered read-only with rich labels (wikilinks etc. still work). --- ## Install ### Via BRAT (recommended for now) The plugin is in **beta**. The fastest way to try it is via [BRAT](https://github.com/TfTHacker/obsidian42-brat): 1. Install the BRAT plugin from Obsidian Community Plugins. 2. Open BRAT settings β†’ **Add Beta plugin**. 3. Enter `Akitaroh/obsidian-mermaid-maker` and click **Add Plugin**. 4. Enable **MermaidMaker** under Community plugins. ### Manual install 1. Download `main.js`, `manifest.json` and `styles.css` from the [latest release](https://github.com/Akitaroh/obsidian-mermaid-maker/releases). 2. Create `/.obsidian/plugins/mermaid-maker/` and drop the three files in. 3. Enable in Settings β†’ Community plugins. ### Official Community Plugin store Submission planned for **late May 2026** after a short beta. Watch the repo for updates. --- ## Usage notes ### Special characters in labels If your label contains `[`, `]`, `(`, `)`, `{`, `}`, `|` or `"` (e.g. wikilinks), use **quoted form** in your Mermaid source: ``` A["[[note]]"] βœ… A[[[note]]] ❌ β€” Mermaid parses [[..]] as subroutine shape ``` The plugin **auto-quotes** when you edit via the GUI β€” but if you write markdown directly, follow this convention. ### Where positions are stored After dragging, the plugin appends a comment line like: ``` %% mm-pos: A=10,20 B=200,30 ``` This is invisible to other Mermaid renderers (it's a comment), so your diagrams remain portable. ### Reading view vs Live Preview GUI editing is **Reading view only**. In Live Preview (the default editor mode), you'll see a hint `✏️ GUI 編集はθͺ­γΏε–γ‚Šγƒ“γƒ₯γƒΌγ§εˆ©η”¨γ§γγΎγ™`. This is intentional β€” Live Preview's CodeMirror widget doesn't sandbox React mounts well. --- ## Known limitations (beta) - Edge labels (`A -->|label| B`) display but can't be edited via GUI yet - Node shape selector is not yet in the UI; shape is preserved from Mermaid source (`[box]` / `(rounded)` / `((circle))` / `(((double)))`) - Mermaid `flowchart` variants beyond `graph LR` / `graph TD` are not supported - File rename detection isn't optimal yet (resolved links update, but surrounding logic can lag) --- ## Architecture Source code in [`src/`](https://github.com/Akitaroh/obsidian-mermaid-maker/tree/main/src). Implemented with [Zettel-driven development](https://github.com/Akitaroh): - `atoms/quote-extractor.ts` β€” find `"..."` labels in Mermaid source - `atoms/markdown-renderer.ts` β€” Obsidian `MarkdownRenderer.render` adapter - `atoms/label-measurer.ts` β€” measure rendered HTML for Mermaid layout - `atoms/placeholder-injector.ts` β€” splice placeholders into Mermaid source - `atoms/mermaid-loader.ts` β€” load Obsidian's bundled Mermaid - `atoms/dagre-layout.ts` β€” auto layout for new nodes - `atoms/xyflow-mounter.tsx` β€” React + xyflow GUI canvas mount - `atoms/markdown-write-back.ts` β€” debounced safe write back to editor - `atoms/label-edit-modal.ts` β€” Obsidian modal for label editing - `arrows/mm-codeblock-render.ts` β€” Stage 2b: rich labels in Mermaid SVG - `arrows/mm-editable-flow.ts` β€” Stage 3: full GUI editor flow --- ## Inspirations - [Mehrmaid](https://github.com/huterguier/obsidian-mehrmaid) β€” pioneered rich-markdown labels inside Mermaid nodes inside Obsidian (read-only) - [Excalidraw for Obsidian](https://github.com/zsviczian/obsidian-excalidraw-plugin) β€” the canonical embedded React canvas plugin pattern - [obsidian-enhancing-mindmap](https://github.com/MarkMindCkm/obsidian-enhancing-mindmap) β€” bidirectional markdown ⇄ visual sync inside Obsidian --- ## Contributing Issues and PRs welcome. Please open an issue first for discussion of larger changes. --- ## License MIT β€” see [LICENSE](LICENSE).