Obsidian Stats logoObsidian Stats

Mermaid Flow

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

Description

This plugin has not been manually reviewed by Obsidian staff. Create and edit Mermaid flowcharts visually by dragging nodes and drawing connections. No Mermaid syntax required.

Reviews

No reviews yet.

Stats

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

Mermaid Flow for Obsidian

Obsidian Downloads License: GPL v3

Mermaid Flow is a visual WYSIWYG editor for Mermaid flowcharts directly inside Obsidian. Create, edit, and arrange diagrams by dragging nodes and drawing connections—no Mermaid syntax knowledge required.

Hero Image Placeholder

✨ Key Features

  • Visual Drag-and-Drop Editor: Move nodes and draw connections with your mouse.
  • Syntax-Free Editing: Focus on your ideas while the plugin handles the Mermaid code.
  • Persistent Layouts: Remembers node positions using specialized comments, so your manual adjustments are preserved.
  • Embedded or Modal Mode: Work in a side-pane alongside your note or in a focused popup.
  • Reading Mode Integration: Add "Edit" buttons directly to your rendered diagrams.
  • Live Preview Support: Seamlessly edit diagrams while typing in Live Preview.

🚀 Getting Started

Installation

  1. Search for Mermaid Flow in the Obsidian Community Plugins browser.
  2. Click Install, then Enable.

How to Use

  1. Insert a New Diagram:
    • Use the Ribbon icon (workflow icon).
    • Or use the command: Mermaid Flow: Insert visual Mermaid diagram.
  2. Edit an Existing Diagram:
    • Click the "Edit" button that appears on top of any Mermaid block in Reading Mode or Live Preview.
    • Or place your cursor inside a mermaid code block and use the command: Mermaid Flow: Edit Mermaid diagram visually.
  3. Saving:
    • Changes are saved back to your note automatically if "Auto-save" is enabled in settings.

⚙️ Settings

  • Open editor as: Choose between a centered Popup (Modal) or an Embedded Pane (Split).
  • Default Direction: Set your preferred flowchart direction (Top-Bottom, Left-Right, etc.).
  • Remember node positions: (Recommended) Saves manual layouts within hidden Mermaid comments.

🔒 Advanced syntax & safety

The editor focuses on flowchart structure. Advanced or unrecognized Mermaid syntax in an existing diagram (for example click, classDef, or linkStyle directives) is preserved verbatim when you edit and re-save, and is rendered by Obsidian's own Mermaid engine — Mermaid Flow never executes diagram code itself.

🤝 Contributing

We welcome contributions! Please see our Contribution Guide and Architecture Overview to get started.

📄 License

This project is licensed under the GNU General Public License v3.0 - see the LICENSE file for details.

Mohammed Thansheer

Sponsors