Wenn Coding-Agenten Diagramme zeichnen, kommt meist dasselbe heraus: abgerundete Kästen, beliebige Farben, keine Hierarchie. Das Projekt diagram-design von cathrynlavery setzt dagegen auf ein redaktionelles Designsystem — und ist damit zum Trend-Repository auf GitHub geworden.
Die Erweiterung bringt 39 Diagrammtypen mit, von Architektur, Sequenz und Zustandsmaschine über Quadrant, Swimlane und Wardley-Map bis Sankey, Treemap, Fischgräte und Datenbankschema. Jeder Typ erscheint in drei statischen Varianten — minimal hell, minimal dunkel und voll redaktionell — und wird als eigenständiges HTML mit eingebettetem SVG ausgegeben: kein Build-Schritt, kein JavaScript, keine externen Bilder. Installiert wird sie als Plugin für Claude Code, Codex, Factory Droid, Pi und weitere Agent-Skills-kompatible Hosts.
Das eigentliche Argument ist die Anpassung an die eigene Marke. Der Befehl "onboard diagram-design to https://yoursite.com" liest die Startseite, entzieht ihr Palette und Schriftstapel und übersetzt sie in semantische Rollen — Papier, Tinte, Akzent, gedämpft, Link. Der Nutzer bestätigt einen vorgeschlagenen Diff, und die Tokens landen in der Style-Guide-Referenz des Skills. Dazu gibt es einen "Fidelity Receipt": gesampelte URLs, exakte Farbrollen, Schriftfamilien, Schriftquellen und Fallbacks. Ein First-Run-Gate verhindert, dass Standard-Optik unbemerkt in ein gebrandetes Projekt rutscht.
Interessant ist auch, was das Projekt über Design-Disziplin kodiert. Ein Akzent, ein bis zwei Fokuselemente pro Diagramm, 1px-Haarlinien, keine Schatten, maximale Eckenrundung 10px — und alle Koordinaten, Breiten und Abständer durch 4 teilbar. Die drei Schriftrollen (Instrument Serif für Titel, Geist für Knotennamen, Geist Mono für technische Sublabels) sind fixiert. Die Begründung ist nicht ästhetische Vorliebe, sondern die Vermeidung des Look-and-feel, an dem man KI-generierte Grafik erkennt.
Bemerkenswert nüchtern ist die Qualitätssicherung. Die eigene CI rendert jede Vorlage in headless Chromium und misst Beschneidung per Pixel-Differenz statt geometrisch, weil `getBoundingClientRect()` Strichstärken, Marker und `clip-path` nicht kennt. Flächengetriebene Diagrammtypen bekommen eigene Gates: Treemaps scheitern, wenn der Flächenanteil nicht zum eingetragenen Wert passt, Wasserfall-Diagramme, wenn Anfangs-, Delta- und Endwert nicht aufgehen, Sankeys, wenn Mengen nicht konserviert werden. Die Import-Pfade akzeptieren `.drawio`, Mermaid und Excalidraw — und zeichnen lieber neu, statt die Quellgeometrie zu übernehmen.
Ob das ein Nischenprojekt bleibt oder die Art verändert, wie Agenten Dokumentation bebildern, ist offen. Aber es zeigt, wie weit die Skill-Ökonomie inzwischen reicht: nicht mehr einzelne Prompts, sondern gepflegte Design- und Test-Standards, die als Paket in sechs Werkzeuge installiert werden können.
