https://github.com/dartungar/obsidian-mermaid

Tools for improved Mermaid.js experience in Obsidian.md
https://github.com/dartungar/obsidian-mermaid

Last synced: 3 months ago
JSON representation

Tools for improved Mermaid.js experience in Obsidian.md

• Host: GitHub
• URL: https://github.com/dartungar/obsidian-mermaid
• Owner: dartungar
• License: mit
• Created: 2022-10-19T12:55:00.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2025-06-24T10:48:06.000Z (4 months ago)
• Last Synced: 2025-06-24T11:39:52.513Z (4 months ago)
• Language: TypeScript
• Size: 118 KB
• Stars: 247
• Watchers: 4
• Forks: 11
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• jimsghstars - dartungar/obsidian-mermaid - Tools for improved Mermaid.js experience in Obsidian.md (TypeScript)

README

          
# Mermaid Tools for Obsidian.md

## About Mermaid

[Mermaid.js](https://mermaid-js.github.io) lets you create diagrams and visualizations using text:

```

Start ---> Stop

```

will render as:

![image](https://user-images.githubusercontent.com/36126057/205342377-80dfeb9d-d720-4efd-8102-5a737a23ba89.png)

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](https://user-images.githubusercontent.com/36126057/205342717-a454097b-280e-4407-8029-a47fc45a80c8.png)

A small demo:

![obsidian-mermaid-demo-updated](https://user-images.githubusercontent.com/36126057/214052070-780d4aab-6325-4729-b07b-836b395160fc.gif)

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](https://user-images.githubusercontent.com/36126057/230771305-0f329ec5-f397-499b-99db-394249ff2316.gif)

### Roadmap:

- ✅ add / edit elements in settings

- ✅ reorder elements in settings

- UX improvements