Mermaid Diagrams

August 4, 2026
2 min read
Hewel
#demo

Mermaid code blocks render as hand-drawn inline SVG at build time — no client JavaScript involved. Unsupported diagram types stay plain code blocks.

Pie

What powers the blogWhat powers the blogCoffee (45)Pastel colors (30)Rubber ducks (15)Actual sleep (10)

Flowchart

Flowchart diagramWake upCoffee?Write postsNapyesno

State diagram

State diagramDraftingReviewingPublishedsubmitchanges requestedapproved

Radar

What a blog needsWhat a blog needsWritingCodingDesignSEOPatienceMeAI assistant

XY chart

Cups of coffee per weekdayCups of coffee per weekday02468montuewedthufriCupsBar 1Line 1

Sequence

Sequence diagramOpen postWhere's the diagram?Baked in at build timeNo client JavaScriptHand-drawn SVGReaderBlogGenerator

Swimlanes

Swimlanes diagramAuthorBuildReaderWrite markdownHappy with it?deno task genInline SVGEnjoy diagramnoyes