Mermaid Integration

[masonlr]

I would make heavy use of this feature.

[aaronmyster]

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

[exobrainer]

I’d love this feature as well

[VictorGrycuk]

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.

[kognise]

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

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.

[VictorGrycuk]

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.

[kognise]

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.

[kimstacks]

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

Much gratitude

[Shamama]

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?

[Klaas]

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

[scmwiz]

You have to use it like so :

```mermaid
stateDiagram
        a --> b
        a --> c
        b --> d
        c --> d
```

[Klaas]

@scmwiz

```mermaid
stateDiagram
        a --> b
        a --> c
        b --> d
        c --> d

Thanks for your reply. This is what I get:

[scmwiz]

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:

[Klaas]

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

[kimstacks]

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

Do you have a plugin for obsidian?

[scmwiz]

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

[icouto]

+1 for built-in Mermaid support

[WhiteNoise]

done!

[sol]

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?

[WhiteNoise]

we haven’t added the latest version because it’s still buggy