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;

8 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

2 Likes

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.

3 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?

Is there a way to theme the mermaid config - similar to https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor - it allows you to point to a config.json for mermaid.

Is there a way to customize the output of the block?
Maybe make it look like on GitHub? Or at least make sure it is scaled to the width of the preview?

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.