mermaid,How does it work?

I don’t know how to enable it in Obsidian

1 Like

You just need to place the mermaid code in a code block (starting with 3 backticks followed by mermaid and ending with 3 backticks) like this:

```mermaid
graph TD;
A–>B;
A–>C;
B–>D;
C–>D;
```

Edit: The arrows should be like --> and you need to add a Tab before each A-->B;

5 Likes

There’s also the live editor that you can try and get a feel of how it works: https://mermaid-js.github.io/mermaid-live-editor

1 Like

Thanks for providing the sample.
Unfortunately the sample is not quite working due to the auto formatting.
To make it work, you need use “- - >” (removing the space in editor) in the code block instead of “->” as shown in the sample.

2 Likes

Perhaps this video can be useful: Obsidian Basics: Diagrams
It covers a few examples.

2 Likes

Ups completely missed that sorry!
Tried to escape the code blocks and got myself another problem xd
There’s what you said and the Tab before each A-->B; which also doesn’t show in my other post.

1 Like

Quick question:
Do you know if font-awsome icon is supported by obsidian?