mermaid,How does it work?

[zhl]

I don’t know how to enable it in Obsidian

[Meins]

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;

[Silver]

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

[flyeagles]

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.

[symmetry]

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

[Meins]

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.

[gberthiaume]

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

[naseer]

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.

[Royi]

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?