Mermaid v11.3.0

The diagrams are encoded in blocks marked class='mermaid'. The specific token is queried by mermaid.js and matches textContent is interpreted as a diagram encoding, replaced by the result. In this page, pre is used for this purpose. The original element remains, with , with an svg tag within. is fitting. Syntax errors are recognizable by aria-roledescription='error' appearing on the inner svg. A YAML front-matter is available to parameterize some customization options.

The script activation appends to the body a div with class='mermaidTooltip', hidden until needed.

Graphs and Flowcharts

---
config:
  look: handDrawn
  theme: neutral
---
flowchart LR
  A[Start] --> B{Decision}
  B -->|Yes| C[Continue]
  B -->|No| D[Stop]

Entity Relationships

---
config:
  look: handDrawn
  theme: neutral
---
erDiagram
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER {
      int customerID
      string name
    }
    ORDER ||--|{ LINE-ITEM : contains
    ORDER {
      int orderID
      string address
    }
    LINE-ITEM {
      int productID
      int quantity
    }

State Diagrams

---
config:
  look: handDrawn
  theme: neutral
---
stateDiagram-v2
  %% // comments are prefixed with %%
  %% // I also add slashes (comment vs. disable)
  %% direction LR

  %% // styling classDef (but I use std css)
  %% classDef positive fill:#7f7
  %% classDef negative fill:#f77

  state P <<choice>>
  state "Success" as Success
  state "Failure" as Failure

  [*] --> P: &[data-processed]
  P --> Success: &>svg
  P --> Failure: &>div
  Success --> [*]
  Failure --> [*]

Pie Diagrams

The opening declaration with keyword pie showData displays each item cardinality after their legend label. The look: handDrawn appears unsupported. The theme: neutral being monochrome is not fitting for more than a couple of items, since color is essentially the only differentiating feature of this kind of diagram. The theme: forest also is too green-centric, slightly better than the monochrome, and theme: default is too saturated for my taste. I ended up using theme: base unconfigured. 

    ---
    config:
      theme: base
    ---
    %% The handDrawn look seems not supported
    %% The neutral theme will not show proper
    %%   differentiation of more than 3-4 items
    %%   (due to being monochrome => all gray)
    pie showData title HTML Element Groups
      "Document" : 6
      "Sections" : 14
      "Grouping" : 15
      "Text-Level" : 31
      "Embedded" : 15
      "Tables" : 10
      "Forms" : 17
      "Scripting" : 7

Sankey Diagrams

The sankey: showValues flag display counts. Values are inserted as unspaced CSV triplets, the first pair being the edge, the third item the quantity represented. Flows add-up when targeting the same node. Good for budgets, cash-flows, repartitions with intermediate aggregates of notable interest. 

  sankey-beta
    Source1,MidA,6
    Source1,MidB,4
    Source1,MidC,2

    Source2,MidA,4
    Source2,MidB,8
    Source2,MidC,12

    MidA,Sink1,2
    MidB,Sink1,3
    MidC,Sink1,5

    MidA,Sink2,2
    MidB,Sink2,3
    MidC,Sink2,5