Flowchart fiend? Let Quarto’s mermaid integration cast its spell
R
Quarto
Mermaid
Author
Luke Morris
Published
August 28, 2022
For anybody who makes tons of flowcharts, mermaid.js may be the siren song that draws you to Quarto.
The Quarto’s documentation and functionality is extremely robust, so there are bound to be pieces we’ve all missed. The built-in mermaid.js functionality is quickly growing into a can’t-miss feature for me and likely anybody who spends a lot of time creating flowcharts – hi other healthcare folx!
flowchart LR
A((Can I <br> have pizza?))
A --> B{What time <br> of day is it?}
B --> C(Morning)
B --> D(Evening)
B --> E(Supper Time)
C --> F{Is said pizza <br> on a bagel?}
D --> F
E --> F
F -->|Yes| G[YOU CAN EAT <br> PIZZA <br> ANYTIME!]
F -->|NO| H[NO PIZZA <br> FOR YOU!]
And it’s not just flowcharts you can make with mermaid. They’ve got sequence diagrams, user journey diagrams, entity relationship diagrams, git graphs that look like Metro rail maps, and Gantt diagrams, aka swimlane diagrams in healthcare parlance.
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Data Prep
Extract Data :a1, 2023-01-01, 1w
Clean Data :a2, 2023-01-01, 3w
Split Dataset :a3, 2023-01-22, 1w
Score Training Dataset :a4, 2023-01-29, 3w
section NLP
Construct Model :b1, 2023-02-19, 2w
Refine Model :b2, 2023-03-05, 2w
QA :b3, 2023-03-19, 3w
section Summarize
Write Report :c1, 2023-04-09, 2w
Make Slides :c2, 2023-04-16, 1w
Let’s take a look at what’s behind a couple samples I was able to get to work:
Code
```{mermaid}classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet-canEat() } class Zebra{ +bool is_wild +run() }```
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
I highly recommend using Mermaid Live for a WYSIWYG look at your changes on the fly. However, I don’t copy their specific Markdown output. Instead I just copy what I’ve been tweaking into a new Quarto mermaid block.
flowchart TD
A[Patient has <br> acute symptoms] --> B{Triage in ER: <br> Evidence of MI?}
B --> |Yes| C[Early anti-ischemia <br> /infarction therapy]
B --> |No| D[Ambulatory care: <br> Initial evaluation]
C --> E[Inpatient evaluation <br> and therapy]
C --> F[Ambulatory care: <br> Follow-up care]
F --> G{Invasive <br> evaluation done?}
G --> |No| H[Ambulatory care: <br> Rehab and follow-up]
G --> |Yes| I{Procedure <br> initiated?}
I --> |No| H
I --> |Yes| J[Revascularization <br> procedure]
J --> H
Even with all the hiccups of mermaid and Quarto not playing nice together, I think this can be a huge boon in my workday, and that of many others I imagine.