Was ist Diagram Design?
Diagram Design ist ein Agent Skill von Cathryn Lavery, veröffentlicht unter ihrer Firma LittleMight, der eine Anfrage in einfacher Sprache in ein Diagramm verwandelt, geschrieben als einzelne HTML-Datei mit Inline-SVG. Er deckt 45 Diagrammtypen ab, von Architektur, Flussdiagrammen, Sequenz- und Zustandsdiagrammen bis zu Quadranten, Treemaps und axonometrischen Explosionszeichnungen, jeweils in den Varianten minimal hell, minimal dunkel und voll redaktionell. Der Hausstil steht fest: Haarlinien mit 1px, keine Schatten, eine Akzentfarbe für die ein oder zwei Dinge, auf die es ankommt, und jede Koordinate auf einem 4px-Raster.
Bittest du ihn, sich auf eine Website einzustellen, ruft der Agent die Startseite ab, entnimmt Farbpalette und Font-Stack, prüft den Kontrast nach WCAG AA und schreibt die Tokens in einen Styleguide, den jedes spätere Diagramm liest; benannte Profile halten die Marken mehrerer Kunden auseinander. Er zeichnet auch bestehende Dateien aus draw.io, Mermaid und Excalidraw neu und exportiert SVG für Figma oder PNG für Folien.
Installiert wird er mit `npx skills add cathrynlavery/diagram-design` in jeden Host für Agent Skills oder als Plugin für Claude Code, Codex, GitHub Copilot, Factory Droid, Qoder, Pi und Claude Cowork.
Lohnt sich Diagram Design?
Diagram Design ist der Diagramm-Skill, an dem sich alles messen muss, was du veröffentlichen willst, und der Grund zeigt sich eher in seiner Galerie als in seiner Funktionsliste. Das Repository wurde im April 2026 angelegt und hat rund 62.200 GitHub-Sterne; skills.sh zählt 21.200 Installationen über seine CLI, die Plugin-Marketplaces nicht eingerechnet. Es gibt keine getaggten Releases, aber die Pflege ist täglich: Das Plugin-Manifest erreichte am 27. Oktober 2026 Version 2.6.136.
Die Gestaltungsregeln leisten die Arbeit. Laverys Prämisse ist, dass das Modell den Inhalt bereits versteht und ihm nur der Geschmack fehlt, also schreibt der Skill diesen Geschmack auf: eine Zieldichte von 4 von 10, eine reservierte Akzentfarbe und ein 4px-Raster, mit CI-Prüfungen auf überlappende und abgeschnittene Elemente. Das Einstellen auf die Marke zählt mehr, als es klingt. Jedes spätere Diagramm nutzt Hintergrund, Call-to-Action-Farbe und Schriften deiner Website, und die Kontrastprüfung schlägt einen dunkleren Wert vor, wenn eine Markenfarbe bei Beschriftungsgrößen von 9 bis 12px durchfällt.
Die Importbefehle sind der praktische Gewinn für Teams mit alten Diagrammen. Eine Datei aus draw.io, Mermaid oder Excalidraw wird in einer von drei Detailstufen neu gezeichnet (getreu bis 24 Knoten, ausgewogen bis 12, vereinfacht bis 7), und jeder Import endet mit einer Aufstellung dessen, was zusammengelegt oder weggelassen wurde. Die README ist offen über den Preis: Die Ausgabe hängt vom Modell ab, derselbe Prompt kann zweimal unterschiedlich angeordnet werden, und es gibt keine editierbare Quelle, die sich in einem Pull Request prüfen ließe. Für Architekturdokumentation, die sich jeden Sprint ändert, ist Mermaid weiterhin das bessere Werkzeug, wie die README selbst sagt.
Etwas Reibung ist eingebaut. Beim ersten Lauf hält eine Abfrage in jedem neuen Projekt an, um nach dem Einstellen auf die Marke zu fragen, was zu einem Menschen passt, unbeaufsichtigte Läufe aber blockiert (Issue #262 schlägt einen Ausweg vor). Der PNG-Export braucht Playwright und Chromium, und Diagramme laden standardmäßig Schriften von Google Fonts, die einzige Netzanfrage, die sie stellen, sofern du nicht Systemschriften verlangst. Neben fireworks-tech-graph, das auf technische Architekturdiagramme zielt, deckt Diagram Design weit mehr Typen ab und gestaltet sie nach der Marke; anatomy geht bei einer einzigen isometrischen, interaktiven Form tiefer.
Wo es sich lohnt
Eine Gründerin, die wöchentlich einen Firmenblog schreibt
Beiträge mit Diagrammen ergänzen, die wie der Rest der Website aussehen statt wie generische abgerundete Kästen
Stelle den Skill einmal auf die URL des Blogs ein, bitte dann pro Beitrag um einen Quadranten oder eine Pyramide und binde das HTML oder das exportierte SVG ein. Kostet nur Modell-Tokens und ersetzt die 30-minütigen Figma-Sitzungen, die Lavery beschreibt.
Ein Solution Architect in einer Beratung mit mehreren Kunden
Die alten draw.io-Diagramme jedes Kunden in Folien in dessen Farben verwandeln
Speichere ein Profil pro Kunde und lege in jedes Projekt eine Markierung `.diagram-design`, dann führe `/diagram-design:import-drawio file.drawio --size=slide-16x9 --detail=simplified --audience=executive` aus. Die Aufstellung zur Detailtreue listet, was zusammengelegt wurde, und sollte geprüft werden, bevor ein Kunde sie sieht.
Ein Teamleiter Plattform, der ein System für ein Engineering-Handbuch dokumentiert
Ein ausgefeiltes Architekturdiagramm für eine veröffentlichte Handbuchseite erstellen
Bitte in einfachen Worten um ein Architektur- oder Sequenzdiagramm und exportiere SVG mit `/export-diagram --svg-only`. Behalte die Mermaid-Quelle für Diagramme, die das Team jeden Sprint ändert; eine Neugenerierung kann das Layout ändern, und es gibt nichts zu diffen.
Bevor du dich festlegst
- Einrichtung
- `npx skills add cathrynlavery/diagram-design` für jeden Host für Agent Skills oder in Claude Code `/plugin marketplace add cathrynlavery/diagram-design` und dann `/plugin install diagram-design@diagram-design` für Slash-Befehle und Updates. Der PNG-Export braucht `pip install playwright && playwright install chromium`.
- Integrationen
- Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, Qoder, Pi, Gemini CLI, Cline, Windsurf, Amp, Kiro, OpenCode und Claude Cowork. Importiert draw.io, Mermaid und Excalidraw; exportiert HTML, SVG und PNG in Größen für Folien, Dokumente, Social Media und Druck.
- Daten und Datenschutz
- Laut Datenschutzrichtlinie kein Server, keine Konten, keine Analyse und keine Telemetrie. Erzeugte Dateien laden standardmäßig Google Fonts, was die IP-Adresse der Betrachter an Google sendet; die Option für Systemschriften entfernt alle Netzanfragen. Das Einstellen auf die Marke ruft nur die Website ab, die du nennst. MIT-Lizenz.
- Kosten im großen Maßstab
- Kostenlos für jede Teamgröße. Die Kosten sind Modell-Tokens für jedes Diagramm und jede Neuzeichnung; ein Team, das darauf standardisiert, zahlt nichts über die Agenten-Lizenzen hinaus, die es schon hat.
- Grenzen
- Rund 45 offene Issues und Pull Requests, meist neue Diagrammtypen und Korrekturen am Mermaid-Import und an den Layout-Prüfern. Die Qualität der Ausgabe hängt vom Modell ab, und Änderungen am installierten Styleguide können durch Updates überschrieben werden, sofern du keine gespeicherten Profile oder einen editierbaren Klon nutzt.
Was gut ist
- 45 Diagrammtypen in einheitlichem redaktionellem Stil
- Übernimmt Farbpalette und Schriften von deiner Website, mit Kontrastprüfung
- Zeichnet Dateien aus draw.io, Mermaid und Excalidraw neu
- Eigenständiges HTML mit barrierearmem SVG; MIT-Lizenz
Was nicht
- Keine editierbare Quelle zum Diffen oder Verschieben
- Derselbe Prompt kann unterschiedliche Layouts erzeugen
- Die Stil-Abfrage beim ersten Lauf unterbricht unbeaufsichtigte Läufe
- Der PNG-Export braucht Playwright und Chromium
Am besten für
Autoren, Gründer und Entwickler, die Diagramme in Beiträgen, Präsentationen und Dokumentation veröffentlichen und sie passend zu ihrer Marke wollen.
Alternativen zu Diagram Design
Diagram Design: häufige Fragen
- Lohnt sich Diagram Design?
- Diagram Design gibt Agenten den Geschmack, der ihnen fehlt, und seine Diagramme wirken veröffentlicht statt generiert, um den Preis einer Ausgabe, die du weder diffen noch per Maus verschieben kannst. Wir bewerten es mit 4.3 von 5.
- Was kostet Diagram Design?
- Kostenlos und Open Source (MIT). Du bezahlst nur die Modellnutzung deines Agenten.
- Welche Nachteile hat Diagram Design?
- Keine editierbare Quelle zum Diffen oder Verschieben; Derselbe Prompt kann unterschiedliche Layouts erzeugen; Die Stil-Abfrage beim ersten Lauf unterbricht unbeaufsichtigte Läufe; Der PNG-Export braucht Playwright und Chromium.
- Für wen eignet sich Diagram Design?
- Autoren, Gründer und Entwickler, die Diagramme in Beiträgen, Präsentationen und Dokumentation veröffentlichen und sie passend zu ihrer Marke wollen.
- Was kostet Diagram Design für ein Team oder im Produktivbetrieb?
- Kostenlos für jede Teamgröße. Die Kosten sind Modell-Tokens für jedes Diagramm und jede Neuzeichnung; ein Team, das darauf standardisiert, zahlt nichts über die Agenten-Lizenzen hinaus, die es schon hat.
- Ist Diagram Design sicher für Firmendaten?
- Laut Datenschutzrichtlinie kein Server, keine Konten, keine Analyse und keine Telemetrie. Erzeugte Dateien laden standardmäßig Google Fonts, was die IP-Adresse der Betrachter an Google sendet; die Option für Systemschriften entfernt alle Netzanfragen. Das Einstellen auf die Marke ruft nur die Website ab, die du nennst. MIT-Lizenz.
- Was sind die besten Alternativen zu Diagram Design?
- Die nächsten Alternativen, die wir getestet haben, sind fireworks-tech-graph, Anatomy und Anthropic Skills.
Antworten geprüft am 28. Okt. 2026.