Mermaid Flowchart

The following diagram is rendered to an inline <svg> at build time by rehype-mermaid. No client-side JavaScript runs.

Author writes markdown

Build time

rehype-mermaid spawns headless Chromium

Mermaid renders SVG

Inline SVG in built HTML

Crawlable, no CLS, no JS

Bar Chart

The <Chart> component calls renderChart() at build time and emits an inline SVG plus a hidden accessible <table>.

Monthly Organic Visitors Monthly Organic Visitors 05001000150020002500 JanFebMarAprMay 12401580139017202010
Table: Monthly Organic Visitors
Monthly Organic Visitors
LabelVisitors
Jan1240
Feb1580
Mar1390
Apr1720
May2010

Line Chart

Revenue Trend (USD) Revenue Trend (USD) 4400460048005000520054005600580060006200 Q1Q2Q3Q4
Table: Revenue Trend (USD)
Revenue Trend (USD)
LabelRevenue ($)
Q14500
Q25200
Q34900
Q46100

Excalidraw Diagram

The SVG below was exported from diagrams/pipeline-overview.excalidraw and committed alongside it. No build-time browser or Excalidraw runtime is needed — the template just embeds the pre-exported SVG.

Content pipeline: Raw Content → Astro Build → Static HTML

Excalidraw convention: keep both the .excalidraw source and the exported .svg in version control. When the diagram changes, re-export from Excalidraw and commit both files.