Mermaid

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

These are just a few Mermaid tests within Obsidian and Quartz.

You can find the code for each of the diagrams in its own section below.

Sequence diagram

sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?

---

Pie Chart

pie title NETFLIX
    "Time spent looking for movie" : 90
    "Time spent watching it" : 10

---

LR Flow Diagram

Note: this one is rendered perfectly fine in Obsidian, but not in Quartz (as of v4.5.0). Adding a screenshot below so that it can be seen in the statically-generated site.

graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D

(screenshot)

---

Code

Here’s the code for each of the diagrams. Notice I’ve added a dash between the first three backticks and “mermaid”, and you’ll need to remove it if you want for the charts/diagrams to be rendered under Obsidian and Quartz.

sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
 
    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?

pie title NETFLIX
    "Time spent looking for movie" : 90
    "Time spent watching it" : 10

graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D