Diagram Design: Ein Agent-Skill mit echtem Designsystem

Jedes KI-generierte Diagramm sieht gleich aus. Man kennt den Look: abgerundete Kästen, irgendwo ein Lila-zu-Blau-Verlauf, Schlagschatten auf allem, Pfeile, die knapp neben der Kastenkante enden, und eine Schrift, die „Standard“ schreit. Das ist die visuelle Entsprechung einer Pressemitteilung. Technisch transportiert es Information. Lesen will es niemand.

Diagram Design, ein Agent-Skill von Cathryn Lavery, greift genau diesen Look frontal an. Der Claim ist für ein README ungewöhnlich deutlich: eine in sich geschlossene HTML-plus-SVG-Datei, im eigenen Brand, 45 Diagrammtypen, keine Schatten, kein Mermaid-Schlamassel.

Der letzte Halbsatz ist die These. Das Projekt will das Generieren von Diagrammen nicht klüger machen. Es will, dass das Ergebnis aussieht, als hätte jemand mit Geschmack daran gesessen.

Was tatsächlich herauskommt

Man beschreibt das gewünschte Diagramm, der Agent schreibt eine einzige HTML-Datei mit Inline-SVG, und man doppelklickt sie. Kein Build-Schritt, keine Render-Pipeline, keine Abhängigkeit von einem Dienst. Die Datei öffnet sich offline und sieht in fünf Jahren noch genauso aus.

Die Bibliothek deckt ein wirklich breites Spektrum ab: Architektur- und Architektur-Delta-Diagramme, Deployment, Abhängigkeitsgraphen, UML-Klassendiagramme, Datenbankschemata, Flussdiagramme, Sequenzdiagramme, Zustandsmaschinen, Swimlanes, Datenfluss, dazu ein komplettes Chart-Sortiment (Balken, Linie, Streudiagramm, Treemap, Radar, Polar, Wasserfall, Heatmap, Sankey) und strukturelle Formen (Bäume, Organigramme, Layer-Stacks, Venn, Pyramiden, Medaillons). Für Strategie und Planung gibt es Quadranten-Charts, Wardley-Maps, Gantt, Timelines, Kanban, Story Maps und User Journeys. Sogar eine explodierte Axonometrie für räumliche Themen ist dabei.

Jeder Typ kommt in drei statischen Varianten: minimal hell, minimal dunkel und eine vollständige redaktionelle Ausarbeitung. Eine kleine Unstimmigkeit sei erwähnt — der Repository-Titel spricht von 44 Typen, der Fließtext von 45, und die Galerie ist von 01 bis 44 durchnummeriert. Ein Projekt, das derart besessen von seinem eigenen Raster ist, hat einen Tippfehler. Passiert.

Der Teil, der es funktionieren lässt: die Regeln

Die Arbeit steckt im Designsystem, und es wird in Zahlen formuliert, nicht in Adjektiven.

Eine Akzentfarbe pro Diagramm. Der Akzent lenkt die Aufmerksamkeit auf ein oder zwei Elemente. Alles andere ist Tinte, Papier und gedämpftes Grau. Diese eine Regel beseitigt den größten Teil des visuellen Lärms, der KI-Diagramme wie ein Dashboard von 2016 wirken lässt.

Drei Schriften, jede mit einer Aufgabe. Instrument Serif für Titel und kursive Anmerkungen. Geist Sans für Knotennamen. Geist Mono für technische Unterlabels — Ports, URLs, Feldtypen. Die Regel, technisches Detail in Monospace zu setzen, ist das, was ein arbeitender Designer instinktiv tut und ein Generator nie.

Ein 4-Pixel-Raster. Jede Koordinate, jede Breite, jeder Abstand und jedes Padding muss durch vier teilbar sein. Die Autorin nennt das den Schlüssel dafür, dass das Ergebnis nicht nach KI aussieht. Sie hat recht, und der Grund ist subtil: Die Fehlausrichtung ist der Verräter. Man bemerkt nicht, dass ein Kasten 137 Pixel breit ist. Man bemerkt, dass etwas nicht stimmt, und kann nicht sagen, was.

Haarlinien, keine Schatten, Radius maximal 10px. Ränder übernehmen die Arbeit, die sonst Schatten machen, und sie tun es, ohne so zu tun, als sei das Diagramm ein physisches Objekt auf einer Oberfläche.

Ziel-Informationsdichte: 4 von 10. Das ist die Regel, gegen die die meisten Teams sich sträuben werden und für die ihnen die meisten Leser danken werden. Das formulierte Prinzip: Der hochwertigste Zug ist meistens das Löschen.

Auch Barrierefreiheit ist kein nachträglicher Gedanke. Die SVG-Ausgabe trägt role="img", aria-labelledby und title/description-Elemente; Einstellungen für reduzierte Bewegung werden respektiert; WCAG-AA-Kontrast (4.5:1 für Text, 3:1 für zentrale Markierungen) wird in der CI erzwungen. Die Standardpalette: Tiefschwarz und Mandarin auf rauchigem Weiß.

Brand-Onboarding ist der unterschätzte Teil

Man gibt die URL der eigenen Website an. Das Tool zieht Farben und Schriften und ordnet sie semantischen Rollen zu: paper, ink, muted, accent, link. Dann gibt es eine Treuequittung aus, die sagt, was es abgeleitet hat und wo es geraten hat.

Der zweite Teil ist wichtiger als das Scraping. Brand-Extraktionswerkzeuge geben einem meist eine Palette und schweigen. Die Inferenz offenzulegen ist genau das, was einem erlaubt zu korrigieren, bevor man vierzig Diagramme im falschen Orange produziert.

Es gibt auch einen Importweg: auf eine Mermaid-, draw.io- oder Excalidraw-Datei zeigen, und das Diagramm wird im Designsystem neu gezeichnet, mit vier Reglern — Format, Größe, Detailtiefe, Zielgruppe — und einem Treueprotokoll. Ein komplettes Wiki voller Mermaid-Charts zu migrieren ist genau der Anwendungsfall, für den das gebaut wurde.

Wo es passt und wo nicht

Die Installation ist bewusst langweilig. npx skills add cathrynlavery/diagram-design für alles, was Agent Skills liest; Plugin-Marketplace-Befehle für Claude Code, Codex, GitHub Copilot und Factory Droid; Symlinks oder Unterverzeichnis-Importe für Cursor, Cline, Gemini CLI, Windsurf, Amp, Zed, Kiro und OpenCode. Es gibt Slash-Befehle für Export, Import, Profiling und einen Doctor-Check.

Die Autorin ist erfrischend klar über die Grenzen, und es sind die richtigen Grenzen.

Die Qualität hängt vom Modell ab. Derselbe Prompt kann zwei verschiedene Layouts erzeugen, weil man generierte Geometrie bekommt und keine gefüllte Vorlage. Es gibt keine editierbare Quelle: keine Leinwand zum Ziehen, keinen Text, den man in einem Pull Request diffen könnte. Für Dokumentation, die wöchentlich wechselt, empfiehlt sie Mermaid — es ist diffbar, GitHub rendert es nativ, und das ist mehr wert als Schönheit.

Sie stellt außerdem eine Frage, die mehr Tool-Autoren stellen sollten: Zieht ein Leser aus diesem Diagramm mehr als aus einem Absatz? Wenn das „Diagramm“ ein beschrifteter Kasten ist, schreib den Satz. Wenn zwei Listen verglichen werden, nimm eine Tabelle. Wenn du ASCII-Art für ein Terminal willst, ist das nicht das Werkzeug.

Das Ergebnis ist eine Datei, kein Dienst

Eine Designentscheidung hier wird mit jedem Jahr klüger wirken: Das Ergebnis ist eine einzelne HTML-Datei mit Inline-SVG, und sie öffnet sich offline. Kein Konto, kein Embed-Skript, keine Abhängigkeit von einem Anbieter, der nächsten Quartal seine API-Preise ändern könnte. Ab ins Repository, an ein Ticket hängen, ausdrucken, einem Kunden mailen, der ein gesperrtes Notebook benutzt.

Für alle, die mitansehen mussten, wie ein Diagramm-SaaS übernommen wurde und danach Stück für Stück verfiel, ist das kein kleines Feature. Es ist der Unterschied zwischen einem Artefakt und einem Abo.

Der Kompromiss: Man kann es nicht bearbeiten wie eine Leinwand. Kein Drag-and-drop, kein Ebenenpanel, kein Undo-Stack. Stimmt das Layout nicht, generiert man neu oder schreibt die Koordinaten von Hand um — und weil alles auf einem 4px-Raster sitzt, ist Handarbeit überlebbar, was sie in einem freien Dokument nicht wäre.

Wie man einen Diagramm-Skill in zehn Minuten beurteilt

Verlang etwas mit unbequemer Form: ein System mit einem offensichtlich wichtigen Knoten, drei unterstützenden Services und einer Datenbank, die alle vergessen. Gute Ausgabe nutzt den einen Akzent, um den wichtigen Knoten zu markieren, und lässt den Rest zurücktreten. Schlechte Ausgabe färbt alles ein, denn alles einzufärben ist das, was Generatoren tun, wenn sie keine Prioritäten haben.

Dann verlange dasselbe Diagramm zweimal. Identische Ausgabe heißt: Man schaut auf eine Vorlage. Unterschiedliche Ausgabe heißt: Man schaut auf Generierung, was ehrlicher ist und auch der Grund, warum das Modell eine Rolle spielt.

Und dann schau auf die Zahlen. Zähl die Abstände. Sind sie keine Vielfachen von vier, werden die Constraints ignoriert — und der Rest des Designsystems vermutlich auch.

Das eigentliche Argument

Es gibt eine Version dieses Projekts, die nur ein Style-Prompt gewesen wäre. „Mach es redaktionell, keine Schatten, minimalistisch.“ Diese Version hätte inkonsistenten Müll produziert, weil Prompts den Kontakt mit einem Architekturdiagramm mit vierzig Knoten nicht überleben.

Interessant macht Diagram Design, dass es Geschmack als Constraints kodiert, die eine Maschine prüfen kann: durch vier teilbar, ein Akzent, drei Schriften, Kontrastverhältnis, kein Schatten. Die Ästhetik steckt nicht im Modell. Sie steckt in der Spezifikation.

Das ist eine übertragbarere Idee als der Skill selbst. Womit auch immer man Visuals erzeugt — Diagramme, Slides, Cover, Thumbnails — der Unterschied zwischen Ausgabe, die gestaltet wirkt, und Ausgabe, die generiert wirkt, ist meistens eine kurze Liste von Regeln, die sich jemand die Mühe gemacht hat aufzuschreiben.