thuan1412 / 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 this plugin has no control over how Mermaid is rendered - this is up to Obsidian itself. 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