Diagrams

Mermaid

The default theme is set in the mermaid key of the document metadata.

Flowchart

(Documentation)

This flowchart has links and tooltips on the boxes.

--- title: t-doc.org site structure config: flowchart: curve: linear nodeSpacing: 20 padding: 10 --- flowchart LR; root(t-doc.org) common(common) maths(maths) informatique(informatique) root --> common & maths & informatique click root "https://t-doc.org/" "Home page" click common "https://common.t-doc.org/" "Theme & extension" click maths "https://maths.t-doc.org/" "Math course" click informatique "https://informatique.t-doc.org/" "Computer science course"

This flowchart has labels on the edges and sets the theme in the frontmatter.

--- title: How to repair a lamp config: theme: default look: handDrawn --- flowchart TD A(["Lamp doesn't work"]) --> B{"Lamp<br>plugged in?"} B -->|No| C(["Plug in lamp"]) B -->|Yes| D{"Bulb<br>burned out?"} D -->|Yes| E(["Replace bulb"]) D -->|No| F(["Repair lamp"])

Entity relationship diagram

(Documentation)

erDiagram direction LR customer ||--o{ order : places customer { string name integer custNumber string sector } order ||--|{ item : contains order { integer orderNumber string deliveryAddress } item { string productCode integer quantity real pricePerUnit }

Pie chart

(Documentation)

--- width: 100 config: pie: useWidth: 10 --- pie title Pets adopted by volunteers "Dogs" : 386 "Cats" : 85 "Rats" : 15

XY chart

(Documentation)

--- config: xyChart: height: 400 xAxis: labelPadding: 10 yAxis: labelPadding: 20 themeVariables: xyChart: backgroundColor: transparent --- xychart title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis 0 --> 11000 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

Graphviz