Obsidian Stats logoObsidian Stats

Mermaid Tools

by dartungar
5
4
3
2
1
Score: 80/100
Install Code

Description

Category: Data Visualization
#mermaid#javascript

The Mermaid Tools plugin for Obsidian.md brings a convenient toolbar to your editing experience, making it easier to create diagrams and visualizations using Mermaid.js. With this plugin, you can quickly access common Mermaid.js elements, such as shapes, arrows, and more, without having to remember their syntax. Simply click on an element in the toolbar, and it will be inserted into your editor for further customization. The plugin also includes a settings panel where you can create, edit, delete, and reorder your custom elements, giving you greater control over your diagram-making process. Whether you're creating flowcharts, sequence diagrams, or other types of visualizations, Mermaid Tools simplifies the process and streamlines your workflow.

Reviews

No reviews yet.

Stats

311
stars
274,513
downloads
13
forks
1,224
days
280
days
280
days
21
total PRs
0
open PRs
0
closed PRs
21
merged PRs
48
total issues
6
open issues
42
closed issues
2
commits

Latest Version

1.3.0
9 months ago

Changelog

✨ Add custom categories ✨ Reorder & delete any category ✨ Settings UI overhaul

See all version on GitHub

README file from

Github

Mermaid Tools for Obsidian.md

About Mermaid

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

Similar Plugins

info
• Similar plugins are suggested based on the common tags between the plugins.
Meld Build
3 years ago by meld-cp
Write and execute (sandboxed) JavaScript to render templates, query DataView and create dynamic notes.
Mermaid Themes
3 years ago by jvsteiner
mermaid themes for obsidian
RunJS
3 years ago by eoureo
Let's run JavaScript easily and simply in Obsidian.
Modules
3 years ago by polyipseity
Load JavaScript and related languages like TypeScript modules from the vault and the Internet.
Run
2 years ago by Hananoshika Yomaru
Generate markdown from dataview query and javascript.
Fix Require Modules
2 years ago by mnaoumov
Plugin for Obsidian that allows to do a lot of things with JavaScript/TypeScript scripts from inside the Obsidian itself
Mehrmaid
2 years ago by huterguier
Rendering Obsidian Markdown inside Mermaid diagrams.
JavaScript Init
5 years ago by ryanpcmcquen
Run custom JavaScript in Obsidian.
Mermaid Popup
2 years ago by ChenPengyuan
Plugin REPL
a year ago by readwithai
An in-note Read Evaluate Print Loop to execute JavaScript within Obsidian
Export Graph View
a year ago by Sean McGhee
Plugin to export your vault's graph view.
Auto Replacer
10 months ago by Alecell
A live text replacement plugin that applies automatic formatting, corrections, or custom replacements in real-time. Define your own regex-based rules and transformation logic to modify text dynamically as you type.
Mermaid Icons
3 months ago by toshs
Obsidian plugin enabling the use of icons in Mermaid diagrams.
Sponsors