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:

graph TD;

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


There’s also the live editor that you can try and get a feel of how it works:


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.


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


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