Obsidian Stats logoObsidian Stats

Mermaid Tools

by dartungar
5
4
3
2
1
Score: 82/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

338
stars
375,170
downloads
15
forks
1,412
days
6
days
39
days
23
total PRs
1
open PRs
0
closed PRs
22
merged PRs
50
total issues
6
open issues
44
closed issues
6
commits

Latest Version

1.4.3
a month ago

Changelog

🐞 Various fixes based on Obsidian's code review

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.
Templater
6 years ago by SilentVoid
A template plugin for obsidian
Excalidraw Extras
5 months ago by zsviczian
Companion Obsidian.md plugin hosting extra add-on optional features for the main Excalidraw-Obsidian plugin
draw.io
5 months ago by somesanity
A plugin for Obsidian that integrates the draw.io editor into Obsidian.
Mehrmaid
3 years ago by huterguier
Rendering Obsidian Markdown inside Mermaid diagrams.
Wechat Converter
5 months ago by davidlam-oss
Obsidian 公众号排版（支持自定义 CSS和公众号贴图）、飞书云同步与多平台（小红书、知乎等）发布插件。Markdown 转微信文章 / Feishu docs / 知乎、小红书、今日头条等草稿，支持数学公式、本地图片、GIF 和 Mermaid。
Mermaid Popup
2 years ago by ChenPengyuan
Fix Require Modules
3 years ago by mnaoumov
Plugin for Obsidian that allows to do a lot of things with JavaScript/TypeScript scripts from inside the Obsidian itself
Mermaid Themes
3 years ago by jvsteiner
mermaid themes for obsidian
Mermaid Zoom
3 months ago by xiaozhuang0433
A plugin that adds zoom functionality to Mermaid charts in Obsidian.
Export Graph View
2 years ago by Sean McGhee
Plugin to export your vault's graph view.
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.
JavaScript Init
5 years ago by ryanpcmcquen
Run custom JavaScript in Obsidian.
Mermaid Icons
9 months ago by toshs
Obsidian plugin enabling the use of icons in Mermaid diagrams.
Meld Build
4 years ago by meld-cp
Write and execute (sandboxed) JavaScript to render templates, query DataView and create dynamic notes.
Run
3 years ago by Hananoshika Yomaru
Generate markdown from dataview query and javascript.
Tabsdown
3 months ago by grafanakibana
Create accessible, theme-native tabbed blocks for Markdown-renderable content in Obsidian.
Auto Replacer
a year 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 Beauty
2 months ago by theChildinus
Make Mermaid diagrams clearer in Obsidian, with automatic layouts, coordinated colors, and per-diagram controls. Works offline and preserves your source.
Plugin REPL
2 years ago by readwithai
An in-note Read Evaluate Print Loop to execute JavaScript within Obsidian
Mermaid Link Navigator
2 months ago by w-java123
ICOR for Life - Interface
2 months ago by Paperless Movement S.L.
The vault's chrome in one place: hide the ribbon and Obsidian's own controls, and give any folder a colour, an icon and a label. Writes no CSS; the INKLINE theme draws it. Part of the ICOR for Life suite.
Sponsors