Hello Mermaid 🧜‍♀️

Mermaid is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

Obsidian supports Mermaid rendering out of the box using fenced code blocks marked mermaid. So convenient and useful, both for personal (eg. weekly routine flow) and technical notes.

Update Feb 2022: GitHub Markdown now supports Mermaid out of the box!!! W00t!

Examples

From the docs: https://mermaid-js.github.io/mermaid/#/flowchart

graph TD;
Start --> Stop;

graph LR;
Start --> Stop;

graph TD;
  A --> B;
  A --> C;
  B --> D[This is the text in the box];
  C --> D;

graph TD
    A[Start] --> B{Is it?};
    B -->|Yes| C[OK];
    C --> D[Rethink];
    D --> B;
    B ---->|No| E[End];

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 ←> C2: Cool label

Syntax notes

Links variations

Text on links
- https://mermaid-js.github.io/mermaid/#/flowchart?id=text-on-links
Text on links with arrow
- https://mermaid-js.github.io/mermaid/#/flowchart?id=a-link-with-arrow-head-and-text

These render the same chart.

flowchart LR
  A-- This is the text! ---B

flowchart LR
  A---|This is the text|B

So do these.

flowchart LR
  A-->|text|B

flowchart LR
  A-- text -->B

Spaces

Spaces don't seem to matter.

flowchart LR
  A-- This is the text! ---B

flowchart LR
  A--This is the text!---B

The codes above render identical results, so do other commands.