Mermaid Tools

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

Start ---> Stop

will render as:

👁 image

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.

👁 image

A small demo: 👁 obsidian-mermaid-demo-updated

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: 👁 mermaid-toolbar-settings

Roadmap:

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