Diagrams with Mermaid

Mermaid turns a fenced code block into a diagram. You write the relationships in text; the browser draws them. A project render hook (render-codeblock-mermaid) loads Mermaid only on pages that use it, and the diagrams follow your light/dark setting.

A flowchart

graph TD
  A[Write Markdown] --> B{crofty build}
  B -->|ok| C[Static site]
  B -->|error| D[Fix and retry]
  C --> E[Deploy to your domain]

A sequence diagram

sequenceDiagram
  participant You
  participant crofty
  participant Cloudflare
  You->>crofty: crofty deploy
  crofty->>Cloudflare: upload built site
  Cloudflare-->>You: live URL

A pie chart

pie title Where the words live
  "Plain Markdown" : 92
  "Front matter" : 6
  "Everything else" : 2

The source stays plain text in your post, so a diagram is as portable — and as diff-able — as the prose around it.