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.