Mermaid Integration

Feature archive
1

Hi, is there any plan to integrate Mermaid Markdown plugin to Obsidian?

For those not familiar with Mermaid, it allows creating and rendering of different diagrams using markdown syntax.

Thanks!

36 Likes
2

I would make heavy use of this feature.

2 Likes
3

I’ve already imported my mermaid graphs in hopes that the plugin comes soon. :slight_smile:
I was just talking to a friend who mentioned he had a lot of mermaid graphs in his notes as well.

3 Likes
4

I’d love this feature as well

5

Since this is similar to latex, I am wondering if I should move this to features requests.

I initially posted this here because it is related to a third party product, but it is something already built that just needs to be integrated and does not need an interface.

1 Like
6

I just wanted to share that I hacked together a mermaid integration!

916×132 9.34 KB

802×760 31.5 KB

DISCLAIMER: I’m only posting this to share an accomplishment and one possible way an integration might work. It has not been added to Obsidian, and it’s not meant for the average user especially since installation is highly technical. This is just something I made.

6 Likes
7

That’s awesome!
Its dark theme is adaptive? The last time I used Mermaid on Joplin on a dark theme it still rendered the image with a white background.

8

Yeppers, the dark theme is adaptive! I wrote my own mermaid theme that uses Obsidian’s CSS variables.

It doesn’t look great in light mode but it’s not bad.

778×734 30.7 KB

5 Likes
9

I am technical. I write web apps for a living. Can do a tutorial of how to install your plugin pls?

Much gratitude :pray:

3 Likes
10

I am very visual when it comes to notetaking. Like Typora, I like to have obsidian adding this plugin too. Is there any plan about this stuff?

4 Likes
11

I use Typora on a Mac, and have enabled Mermaid but it does not render the diagrams.

12

You have to use it like so :

```mermaid
stateDiagram
        a --> b
        a --> c
        b --> d
        c --> d
```
2 Likes
13

Thanks for your reply. This is what I get:
merm

14

In typora 0.9.9.33.2 (on a mac)there is no explicit enable mermaid option but in markdown options I have all of the syntax support turned on. This is what I get:

image
image1628×1038 37 KB

1 Like
15

Thanks, I got that too.
I think the problem was I copy/pasted your code, instead of typing it out.
One learns every day.

16

I got it to render in typora. But it doesn’t render in obsidian.

Do you have a plugin for obsidian?

17

I don’t have a plugin. I was just helping @Klaas a bit with the syntax for typora!

18

+1 for built-in Mermaid support :+1:

19

done!

9 Likes
20

What version of Mermaid was implemented? Because from what I can tell there’s a bunch of missing features, such as arrow length ---> and shapes such as {{triangle}}.

Where can I find this information?

1 Like