Template
Architecture diagram template
An architecture overview as a single HTML file – inline SVG diagram, component table, and the decisions worth knowing. Publish it to a URL in one click, no account.
- free – no account
- a URL in seconds
- yours if you claim it
Publishing this from your own stack? See display.dev for architecture diagrams.
Preview
What it looks like published
Source – architecture-diagram.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Architecture overview – order platform</title>
<style>
:root {
color-scheme: light dark;
--bg: oklch(0.99 0.004 85);
--card: oklch(1 0 0);
--fg: oklch(0.16 0.006 85);
--muted: oklch(0.5 0.008 85);
--line: oklch(0.92 0.006 85);
--accent: oklch(0.48 0.18 145);
--box: oklch(0.97 0.006 85);
}
@media (prefers-color-scheme: dark) {
:root {
--bg: oklch(0.15 0.005 85);
--card: oklch(0.19 0.006 85);
--fg: oklch(0.97 0.004 85);
--muted: oklch(0.65 0.008 85);
--line: oklch(0.3 0.006 85);
--accent: oklch(0.68 0.18 145);
--box: oklch(0.24 0.006 85);
}
}
* { box-sizing: border-box; }
body {
margin: 0; background: var(--bg); color: var(--fg);
font-family: ui-sans-serif, system-ui, sans-serif; line-height: 1.6;
padding: clamp(1.5rem, 4vw, 3rem);
}
.wrap { max-width: 860px; margin: 0 auto; }
h1 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.meta { color: var(--muted); font-size: 0.9375rem; margin: 0.25rem 0 1.5rem; }
.diagram {
background: var(--card); border: 1px solid var(--line);
border-radius: 10px; padding: 1rem; overflow-x: auto;
}
svg { display: block; width: 100%; height: auto; min-width: 560px; }
svg .node { fill: var(--box); stroke: var(--line); rx: 8; }
svg .node-hot { stroke: var(--accent); stroke-width: 1.5; }
svg text { fill: var(--fg); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 13px; font-weight: 600; }
svg .sub { fill: var(--muted); font-size: 11px; font-weight: 400; }
svg .edge { stroke: var(--muted); stroke-width: 1.25; fill: none; marker-end: url(#arrow); }
svg .edge-hot { stroke: var(--accent); stroke-width: 1.5; }
svg .edge-label { fill: var(--muted); font-size: 10.5px; font-weight: 500; }
h2 { font-size: 1.125rem; font-weight: 650; margin: 2rem 0 0.5rem; }
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
th, td { text-align: left; padding: 0.5rem 0.625rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
tr:last-child td { border-bottom: 0; }
ul { padding-left: 1.25rem; margin: 0.5rem 0; }
footer { color: var(--muted); font-size: 0.8125rem; margin-top: 2rem; }
</style>
</head>
<body>
<div class="wrap">
<h1>Architecture overview – order platform</h1>
<p class="meta">Current production topology · last verified 21 July 2026 · owner: platform team · green marks the checkout hot path</p>
<div class="diagram">
<svg viewBox="0 0 720 330" role="img" aria-label="Architecture diagram: clients reach an API gateway; the gateway calls the order service on the checkout hot path and the catalog service; the order service writes to Postgres and emits events to a queue consumed by the billing worker and the notifications worker.">
<defs>
<marker id="arrow" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M0,0 L8,4 L0,8 z" fill="currentColor" opacity="0.55"/>
</marker>
</defs>
<rect class="node" x="20" y="130" width="120" height="56"/>
<text x="80" y="154" text-anchor="middle">Clients</text>
<text class="sub" x="80" y="170" text-anchor="middle">web · mobile · API</text>
<rect class="node node-hot" x="200" y="130" width="130" height="56"/>
<text x="265" y="154" text-anchor="middle">API gateway</text>
<text class="sub" x="265" y="170" text-anchor="middle">auth · rate limits</text>
<rect class="node node-hot" x="400" y="40" width="130" height="56"/>
<text x="465" y="64" text-anchor="middle">Order service</text>
<text class="sub" x="465" y="80" text-anchor="middle">checkout hot path</text>
<rect class="node" x="400" y="230" width="130" height="56"/>
<text x="465" y="254" text-anchor="middle">Catalog service</text>
<text class="sub" x="465" y="270" text-anchor="middle">read-heavy · cached</text>
<rect class="node node-hot" x="590" y="40" width="110" height="56"/>
<text x="645" y="64" text-anchor="middle">Postgres</text>
<text class="sub" x="645" y="80" text-anchor="middle">orders · primary</text>
<rect class="node" x="590" y="140" width="110" height="56"/>
<text x="645" y="164" text-anchor="middle">Event queue</text>
<text class="sub" x="645" y="180" text-anchor="middle">order events</text>
<rect class="node" x="590" y="240" width="110" height="56"/>
<text x="645" y="264" text-anchor="middle">Workers</text>
<text class="sub" x="645" y="280" text-anchor="middle">billing · notifications</text>
<path class="edge" d="M140,158 L198,158"/>
<path class="edge edge-hot" d="M330,146 C360,120 370,90 398,72"/>
<text class="edge-label" x="352" y="98">checkout</text>
<path class="edge" d="M330,170 C360,196 370,226 398,252"/>
<text class="edge-label" x="348" y="230">browse</text>
<path class="edge edge-hot" d="M530,68 L588,68"/>
<path class="edge" d="M530,90 C555,110 560,140 588,158"/>
<text class="edge-label" x="536" y="128">emits</text>
<path class="edge" d="M645,196 L645,238"/>
<path class="edge" d="M530,258 C550,230 560,200 588,180" stroke-dasharray="4 3"/>
</svg>
</div>
<h2>Components</h2>
<table>
<thead><tr><th>Component</th><th>Responsibility</th><th>Notes</th></tr></thead>
<tbody>
<tr><td>API gateway</td><td>Auth, rate limiting, routing</td><td>Stateless; scales horizontally</td></tr>
<tr><td>Order service</td><td>Checkout, order lifecycle</td><td>The hot path – p99 budget 250 ms</td></tr>
<tr><td>Catalog service</td><td>Product reads</td><td>95% cache hit rate; safe to degrade</td></tr>
<tr><td>Postgres</td><td>System of record for orders</td><td>Single writer; 7-day PITR window</td></tr>
<tr><td>Event queue</td><td>Order events fan-out</td><td>At-least-once; consumers are idempotent</td></tr>
<tr><td>Workers</td><td>Billing, notifications</td><td>Retry with backoff; dead-letter after 5</td></tr>
</tbody>
</table>
<h2>Decisions worth knowing</h2>
<ul>
<li>Catalog degrades before checkout does – load-shedding drops browse traffic first.</li>
<li>Billing is queue-consumer only: nothing on the checkout path waits on it.</li>
<li>Dashed edge = catalog cache warms from order events, eventual by design.</li>
</ul>
<footer>Diagram is inline SVG – edit coordinates in the source · sample system, replace with your own.</footer>
</div>
</body>
</html>
What this template is for
The architecture page every new engineer asks for: one diagram, a table of what each component actually does, and the three decisions that explain why the system looks like this. The diagram is inline SVG – nodes and edges are plain markup an agent can edit, no diagram tool, no export step, no stale PNG.
The green highlight marks the hot path, because the first question about any architecture is "which parts can't fail?"
How teams use it
- Generated from the codebase. The agent reads the services and deploy config, drafts the diagram and table, and flags what it couldn't verify; an engineer confirms the edges.
- Kept current at one URL. When topology changes, the agent updates the SVG and publishes a new version – the link in your onboarding doc never goes stale, and version history shows how the system evolved.
- Reviewed where it's read. "This edge is gone" lands as an inline comment on the diagram, not a message in a channel.
Publish your first artifact in 15 seconds.
Free tier. No credit card. One-time password auth on free, Google + Microsoft SSO on Pro (€49/month flat).