Experimental page

Mermaid SVG lab.

This page compares the current runtime Mermaid path with a prerendered SVG version of the same diagram. The goal is simple: make the tradeoff visible before we decide whether to move diagram rendering into the build pipeline.

Back to the starter postView sample Mermaid sourceOpen generated SVG
Current approach

Runtime Mermaid block

This is what the blog does today. The markdown fence reaches the browser, Mermaid parses it, and the diagram is drawn on the client.

MermaidDiagram
Rendering
Rendering diagram...
Strength: flexible and easy to author because no extra build step is needed.
Cost: more client JavaScript, a render step in the browser, and potential layout shift before the SVG appears.
Experimental path

Static SVG output

This version is already rendered ahead of time. The page only has to load an SVG asset, so there is no diagram parsing work left for the reader’s browser.

Static SVG rendering of the flow from idea to markdown note to rendered post to shared understanding.
Strength: zero client-side diagram rendering, more predictable layout, and easier indexing outside JS-heavy contexts.
Cost: we need a preprocessing step that extracts Mermaid fences and regenerates SVGs during build.
Advanced demo

Static architecture diagram

The bigger win shows up on heavier diagrams. This architecture example is the kind of chart that benefits most from being rendered before the page reaches the browser.

Static SVG architecture diagram showing authoring, content, edge delivery, and the flow between writer workstation, git repo, build pipeline, worker, and reader browser.
Why this matters: advanced Mermaid types pull in more code and do more layout work, so prerendering becomes more attractive as diagrams get richer.
What this proves

A practical migration shape

Authoring can stay the same: write Mermaid fences in markdown exactly as now.
Build can do the hard part: convert fences to SVG assets with Mermaid CLI or its Node API, then inject figure markup into rendered posts.
UX gets simpler: the reader downloads a finished graphic instead of a renderer.

Recommendation

Keep runtime Mermaid for fast iteration while we experiment, but move posts toward build-time SVG output once the authoring format feels stable. This page is the proof-of-concept surface for that transition.