This post tries the site's rendering: admonitions, Mermaid diagrams, and both together. It lives in _test, so nobody sees it unless they have the address.

How this post is drawn

The server renders the Markdown when the post is saved. Each mermaid block becomes an SVG, measured in IBM Plex Sans, and the source stays under it.

A Flowchart

How a post reaches readersA draft is written, reviewed, and either published or sent back.yesnoWrite a draftReviewed?PublishReviseReaders
Diagram source
flowchart LR
  accTitle: How a post reaches readers
  accDescr: A draft is written, reviewed, and either published or sent back.
  A[Write a draft] --> B{Reviewed?}
  B -->|yes| C[Publish]
  B -->|no| D[Revise]
  D --> B
  C --> E([Readers])
Tip

Open Diagram source under a diagram to see the text it was drawn from.

A Sequence Diagram

loop[each label]Save the postrender(diagram)width(text)advance in IBM PlexSVGSavedEditorServerPeleEditorServerPele
Diagram source
sequenceDiagram
  participant E as Editor
  participant S as Server
  participant P as Pele
  E->>S: Save the post
  S->>P: render(diagram)
  loop each label
    P->>S: width(text)
    S-->>P: advance in IBM Plex
  end
  P-->>S: SVG
  S-->>E: Saved

Inside an Admonition

A diagram in a warning

Diagrams work inside admonitions too.

Where the time goes50%30%20%WritingReviewingFixing diagrams
Diagram source
pie title Where the time goes
  "Writing" : 50
  "Reviewing" : 30
  "Fixing diagrams" : 20
A collapsed one

This admonition starts closed.

Labels That Test the Font

WAVE AVAILABLECafé déjà vu, naïve façademinimum illuminatiÜnïcödé Größe
Diagram source
flowchart TD
  W[WAVE AVAILABLE] --> X[Café déjà vu, naïve façade]
  X --> Y[minimum illuminati]
  Y --> Z[Ünïcödé Größe]

A Diagram That Won't Draw

Expected to fail

The next block is broken on purpose. It should show its source and say why.

flowchart LR
  A -->
This diagram wasn't drawn: Parse error on line 3: Expecting 'NODE_STRING', got 'EOF'