How Mermaid diagrams work in Obsidian
I’m a sucker for features that are native to an app that I’m using and recently I’ve been learning how mermaid diagrams work in Obsidian. (I have been told about Excalidraw, but I draw horribly with my mouse and you need to download the Excalidraw plugin for it to work in Obsidian.)
Update Mar 2024: Added a time-saving trick when reusing nodes below. Look for “update point”.
Update Sep 2023: What if your mermaid diagram is too big? You can change its size dynamically using css code. More details in the comments for this story.
What’s Mermaid
It’s a way of creating diagrams using simple markup language. No drawing skills needed! No additional installation is needed either. Most useful for quickly jotting down a sequence of steps or a set of interconnected relationships.
Here are the two diagrams I use the most, as the syntax and variables they require are easy to remember.
A Simple flowchart / graph
The syntax used is:
The first thing to tell mermaid is that you want to create a flowchart. There are other types of charts, more on that below.
The second thing is to declare which direction the chart should progress. You have a choice of TB (Top-Bottom), LR (Left-Right) or their opposites, BT and RL.