Skip to main content

04.12Diagramming

SVG diagrams: Claude Code skill for architecture diagrams

Claude Code skill for SVG architecture and agent-flow diagrams, built at AR Labs: hand-positioned, editable text, light and dark themes, one file.

Engraved plate: a French curve and ruling pen on a sheet with a small hand-drawn diagram, and a half-light, half-dark disc.An engraved French curve and ruling pen rest on a sheet with a small hand-drawn diagram of labelled boxes and an arrow; a split half-light, half-dark disc sits in the corner.AR LABS · INSTRUMENT CABINET · DRAWER 04CALL NO. 04.120123456789AGENTTOOLSSTATEABCDFIG. 12 · SVG DIAGRAMSFRENCH CURVE& RULING PENPARTSAEvery elementplaced by handBLabels stayreal textCLight and darkbuilt inDOne file,no build stepHAND-POSITIONED VECTOR DIAGRAMS
On this page
  1. How it works
  2. The judgement it encodes
  3. What exists today
  4. Example

The SVG diagram skill is a Claude Code skill, built at AR Labs, that has an agent draw architecture, pipeline and agent-flow diagrams as single SVG files, with every element positioned by hand rather than by a layout engine. Every label stays as real text, so it can be edited and searched; the file carries its own styles for light and dark mode; and nothing else is needed to display it. It is for diagrams in published writing, where control over placement matters more than speed, and we reach for Mermaid-based C4 diagrams when the subject is a system at a defined zoom level.

We built the skill. Its reference standard is the set of diagrams in OpenAI's engineering article "Delivering Low-Latency Voice AI at Scale" (May 2026), its icons come from the open-source Lucide icon set, and its grammar for agent graphs is adapted from a diagram set by @0xwhrrari, credited below.

How it works

The skill defines a visual grammar, which we call Schema D, and a workflow for applying it.

FIG. 01
flowchart LR
  P["Parse nodes and connections"] --> L["Plan layout on a grid"]
  L --> G["Write the SVG"]
  G --> I["Place icons from the sprite"]
  I --> V["Render and check both themes"]
  1. Parse the request into nodes, connections, a layout direction (left to right or top to bottom), and at most three kinds of connection.
  2. Plan positions on a grid: standard nodes are 120 by 40 units, wide ones 160 by 40, with 60 to 80 units between nodes across and 50 to 60 down, 40 units of padding, and 60 more at the top for a title and legend.
  3. Write the SVG: a style block with colour variables and a dark-mode media query, arrow markers, the title, our mark in the top-right corner, a legend, the nodes and the connections.
  4. Place icons from a sprite of 87 Lucide outline icons. Only the symbols a diagram uses are copied into it, with the licence line, so the file stays self-contained.
  5. Check by rendering the file in a headless browser and looking at it in both themes: nodes readable, arrows meeting their targets, spacing balanced.

For agent graphs and pipelines with branches, joins and loops, an extension of the grammar (Schema D.2) makes node shape carry meaning: a stacked rectangle for a unit of work or an agent, a circle for a check or transform every item passes through, a diamond for a decision, and a bare icon for an endpoint where input enters or output leaves. Fan-out and fan-in use rounded elbows, a small open circle marks a split where only one branch runs, every edge out of a decision is labelled, and a strip along the foot holds shared state that no arrow carries. Schema D.2 was adapted from the "Graph Engineering" diagram set published by @0xwhrrari on X in August 2026; we kept its shapes and connectors and replaced its colours and typography with our own.

The judgement it encodes

Text stays text. Labels are never converted to paths, so a diagram can be corrected in a text editor and found by search.

Monochrome structure, one accent. Nodes, labels and title are drawn in ink; colour appears only on connections, in a single orchid accent. Nodes have no fill, which keeps attention on the flow.

At most three connection types, and every one in the legend. A diagram that needs more is too complex and should be split.

Lines leave flush and arrive with a gap. A connection starts on the edge of its source and stops ten units short of its target, where the arrowhead sits. A line that floats off its source reads as detached from it.

Scale with the page. Diagrams use a viewBox rather than a fixed width and height, so they resize cleanly.

No auto-layout and no image generation. The output is deterministic vector art, placed deliberately.

Sets look like sets. Diagrams shown together share a normalised 1,100-unit width, a split title in the style of our wordmark, and faint role tints: green for a person, purple for an external system, nothing for our own systems.

What exists today

The skill is in use for the hand-drawn diagrams on our website. It shares its ink colours and orchid accent with the paper-and-ink theme; C4 diagrams in our neo-brutalist style are made by the C4 skill. It is not released as a separate package.

Example

Illustrative example. The skeleton of a two-node diagram, abridged (the legend, our mark and the arrow marker definition are omitted):

<svg viewBox="0 0 1100 260" xmlns="http://www.w3.org/2000/svg">
  <style>
    :root { --stroke: #2c1810; --accent: #b088c0; }
    @media (prefers-color-scheme: dark) { :root { --stroke: #E7DFD4; } }
    text { font-family: 'JetBrains Mono', monospace; fill: var(--stroke); }
    .node { fill: none; stroke: var(--stroke); stroke-width: 1; }
    .edge { stroke: var(--accent); fill: none; }
  </style>
  <text x="40" y="44" class="title">How a voice turn reaches the model</text>
  <g><rect class="node" x="40" y="120" width="160" height="40" rx="3"/>
     <text x="80" y="145">BROWSER</text></g>
  <g><rect class="node" x="300" y="120" width="160" height="40" rx="3"/>
     <text x="340" y="145">VOICE BACKEND</text></g>
  <path class="edge" d="M200 140 H290" marker-end="url(#arrow)"/>
</svg>

The connection leaves the browser node flush at x=200 and stops ten units before the backend node at x=300.