diagram-design: 44 redaktionelle Diagrammtypen, vom Agenten im eigenen Markenstil gezeichnet
diagram-design ist ein Agenten-Skill, der Diagramme als eine eigenständige HTML- und SVG-Datei im eigenen Markenstil zeichnet. Er bietet 44 Typen, importiert draw.io und Excalidraw, exportiert PNG und SVG und steht unter der MIT-Lizenz.
Wenn ein Entwickler seinen Coding-Agenten bittet, ein Architekturdiagramm zu zeichnen, ist das übliche Ergebnis ein Block Mermaid-Code, der als graue Kästen mit Schatten und zufälligen Schriften gerendert wird. Das Repository cathrynlavery/diagram-design zielt genau auf dieses kleine, aber reale Ärgernis. Es ist ein Agenten-Skill (Agent Skill): Er bringt dem Agenten bei, jedes Diagramm als eine einzige, eigenständige HTML- und SVG-Datei zu zeichnen, die sich per Doppelklick öffnen lässt und der eigenen Marke folgt. Das Projekt nennt 44 Diagrammtypen, und sein Slogan ist deutlich: keine Schatten, kein Mermaid-Matsch. Das README zeigt außerdem ein Trendshift-Abzeichen, ein Zeichen für das Interesse der Entwickler.
Der Ablauf ist bewusst schlank. Der Nutzer fragt in normaler Sprache, etwa nach einem Architekturdiagramm mit Frontend, Backend, Datenbank und Redis-Cache oder nach einem Quadranten der Projekte des zweiten Quartals nach Wirkung und Aufwand. Der Agent wählt den Diagrammtyp, nennt seinen Plan und schreibt eine .html-Datei. Die Installation ist ein einziger Befehl, npx skills add cathrynlavery/diagram-design. Der Skill richtet sich an jeden Host, der Agent Skills liest, und das README nennt Cursor, Claude Code, Codex, GitHub Copilot, Gemini CLI, Cline, Windsurf und Amp. Dieses Design über mehrere Hosts hinweg bindet den Skill nicht an einen Anbieter, und das ist der erste Grund, ihm Aufmerksamkeit zu schenken.
Der zweite Grund ist das Marken-Onboarding. Ein Nutzer kann den Agenten bitten, diagram-design auf die eigene Website einzurichten, und der Skill liest Palette und Schriften dieser Seite aus, sodass jedes spätere Diagramm dazu passt. Damit wird der Diagrammstil von einer Wegwerf-Anweisung in jedem Chat zu einer dauerhaften Einstellung. Für Content- und Designteams ist das weit verlässlicher, als Farben immer wieder im Prompt zu beschreiben. Das README beschreibt zudem Importwege aus draw.io, Mermaid und Excalidraw sowie Exportwege nach PNG und SVG. Alte Bestände müssen nicht verworfen werden, und fertige Diagramme lassen sich in Dokumente und Folien übernehmen.
Auch die Verteilung verdient einen genauen Blick. In Claude Code liefert der Weg über den Plugin-Marktplatz Updates und Slash-Befehle wie /export-diagram, /import-mermaid, /profile und /doctor. Die eigenständige Installation über die skills-CLI installiert nur den Agent Skill. Sie folgt den Marktplatz-Updates nicht, der Nutzer muss also npx skills update diagram-design von Hand ausführen. Verweisen die gewählten Host-Wurzeln auf mehr als ein Skills-Verzeichnis, empfiehlt die CLI symbolische Links: eine maßgebliche Kopie, in jede Wurzel verlinkt, sodass ein Update alle erreicht. Die Option --copy erzeugt stattdessen unabhängige Kopien. Wo Symlinks fehlen, etwa unter Windows ohne Entwicklermodus, fällt die CLI auf Kopien zurück und meldet die betroffenen Wurzeln. Diese Details zeigen, dass der Autor an Versionsdrift gedacht hat, den häufigsten Fehler in Umgebungen mit mehreren Hosts.
Bei Vertrauen und Herkunft bleibt das README zurückhaltend. Offizielle Builds stammen nur aus diesem Repository. LittleMight, das Unternehmen der Autorin Cathryn Lavery, veröffentlicht die Einträge in den Plugin-Verzeichnissen, und ein Eintrag unter anderem Namen ist eine inoffizielle Kopie. Eine Datei PRIVACY.md listet auf, was der Skill über das Netzwerk sendet. Das Projekt steht unter der MIT-Lizenz und zeigt Abzeichen für kontinuierliche Integration und Plugin-Version. Für einen Skill, den ein Agent in Ihrer Codebasis ausführt, sind eine klare Herkunftsangabe und die Offenlegung des Netzwerkverhaltens das Minimum, das ein Unternehmen vor dem Einsatz prüfen sollte.
Unsere Einschätzung: Der Wert von diagram-design liegt nicht in einem weiteren Zeichenwerkzeug. Er liegt darin, Gestaltungsregeln als Skill zu verpacken, den ein Agent aufrufen kann. Die Ausgabe ist eine einzige HTML- und SVG-Datei, sie passt in die Versionsverwaltung, erlaubt prüfbare Unterschiede und braucht keinen externen Rendering-Dienst. Die Risiken sind ebenso klar. Die tatsächliche Qualität der 44 Typen muss der Nutzer selbst in der Projektgalerie beurteilen. Das Marken-Onboarding hängt davon ab, wie sauber die Stile der Zielseite sind. Das Skill-Ökosystem verändert sich schnell, das Verhalten kann zwischen Hosts abweichen. Wir empfehlen einem Team, zuerst die zwei oder drei häufigsten Typen zu zeichnen, etwa Architektur und Sequenz, sie mit dem bisherigen Mermaid-Ablauf zu vergleichen und erst dann über einen breiteren Einsatz zu entscheiden.
Sources
FAQ
Was ist diagram-design und wie unterscheidet es sich von Mermaid?
Es ist ein Agenten-Skill und keine eigenständige Zeichen-App. Nachdem der Agent den Skill gelesen hat, schreibt er eine einzige, eigenständige HTML- und SVG-Datei, die sich per Doppelklick öffnen lässt. Das Projekt betont den Verzicht auf Schatten und die Markentreue und sieht die Standardausgabe im Mermaid-Stil als zu vermeiden an. Ein Importweg aus Mermaid ist vorhanden.
Welche Agenten-Hosts werden unterstützt und wie installiert man den Skill?
Laut README funktioniert er mit jedem Host, der Agent Skills liest. Genannt werden Cursor, Claude Code, Codex, GitHub Copilot, Gemini CLI, Cline, Windsurf und Amp. Der allgemeine Befehl lautet npx skills add cathrynlavery/diagram-design. In Claude Code liefert der Plugin-Marktplatz zusätzlich Updates und Slash-Befehle.
Was sollte ein Team vor dem Einsatz prüfen?
Zuerst Herkunft und Datenschutz: Offizielle Builds stammen nur aus dem Repository, und PRIVACY.md listet auf, was der Skill über das Netzwerk sendet. Danach zwei oder drei gängige Typen, etwa Architektur und Sequenz, gegen den bisherigen Ablauf testen. Die Qualität der 44 Typen beurteilt man selbst in der Projektgalerie.