Diagrams with Mermaid

Mermaid turns plain text into diagrams. Wrap the source in the mermaid component and it renders in the browser, themed to match the code blocks.

Flowchart

flowchart LR
  A[Write Markdown] --> B{Mermaid block?}
  B -- yes --> C[Render diagram]
  B -- no --> D[Render prose]
  C --> E[Publish]
  D --> E

Sequence

sequenceDiagram
  participant R as Reader
  participant S as Site
  participant M as Mermaid
  R->>S: Request page
  S-->>R: HTML + diagram source
  R->>M: Run on load
  M-->>R: Rendered SVG

Class

classDiagram
  class Page {
    +String title
    +String body
    +render()
  }
  class Article
  class Gallery
  Page <|-- Article
  Page <|-- Gallery

Pie

pie showData
  title Time spent
  "Writing" : 5
  "Diagrams" : 3
  "Tweaking CSS" : 8