# 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