dartungar / obsidian-mermaid

Tools for improved Mermaid.js experience in Obsidian.md

Mermaid Tools for Obsidian.md

About Mermaid

Mermaid.js lets you create diagrams and visualizations using text:

Start ---> Stop

will render as:

Obsidian supports Mermaid.js natively, via mermaid codeblocks.

⚠️ Please note that rendering Mermaid is Obsidian's feature, and not implemented by this plugin. This plugin has no control over how Mermaid is rendered. All bugs concerning rendering of diagrams should be posted to official forums.

Mermaid Tools

This plugin adds a toolbar with common Mermaid.js elements, so you won't have to remember them.

Use ribbon icon or Mermaid: Open Toolbar View command to open the toolbar.

Click on an element to paste it into editor.

A small demo:

Note: in toolbar panel, all elements are wrapped as complete diagrams for rendering purposes.

Create & Manage elements

You can create, delete, edit & reorder elements in settings tab:

Roadmap:

• ✅ add / edit elements in settings
• ✅ reorder elements in settings
• UX improvements