Diagram Design: 39 Diagrammtypen gegen Mermaid-Slop im Technikcheck

Was ist Diagram Design?

Diagram Design ist ein kostenloser, unter der MIT-Lizenz veröffentlichter Agent-Skill von Cathryn Lavery. Er lässt sich in kompatible Coding-Agenten wie Claude Code, Codex und Pi integrieren. Das Repository enthält nicht nur eine Promptdatei, sondern ein Designsystem, Referenzen für Diagrammtypen, HTML-Beispiele sowie Python-Werkzeuge für Import und Qualitätsprüfung.

Die Projektbeschreibung grenzt sich mit dem Ausdruck „No Mermaid slop“ bewusst von generischen, automatisch erzeugten Kästen und Pfeilen ab. Das ist eine gestalterische Positionierung, kein technischer Benchmark. Die kuratierte Projektgalerie zeigt das Potenzial des Systems, aber nicht die durchschnittliche Qualität über verschiedene Modelle, Prompts und Wiederholungen hinweg.

Kerndatum	Stand
Projektklasse	Agent-Skill plus Designsystem und Prüfwerkzeuge
Ausgabe	einzelne HTML-Datei mit Inline-CSS und Inline-SVG, optional SVG oder PNG
Diagrammtypen	39 laut aktuellem README
Plugin-Version	2.6.1 im Manifest
Skill-Version	2.6 in `SKILL.md`
Lizenz	MIT
Releases und Tags	keine GitHub Releases und keine Git-Tags im geprüften Stand
Preis	Skillcode unter MIT kostenlos nutzbar; etwaige Client- und Modellkosten hängen vom Anbieter, Tarif oder lokalem Betrieb ab

Die Versionsabweichung zwischen Manifest und Skill-Datei ist klein, aber relevant: Ohne Tags und Releases fehlt ein eindeutig benannter, unveränderlicher Paketstand. Der aktuelle `main`-Branch ist faktisch ein Rolling Release.

Wie funktioniert der Agent-Skill?

Die zentrale `SKILL.md` weist den Coding-Agenten an, Regeln für Layout, Typografie, Farben, Accessibility, Animation, Export und Komplexitätsbudgets zu beachten und für den konkreten Auftrag die passende Typreferenz zu laden. Dieser dokumentierte Progressive-Disclosure-Pfad soll vermeiden, dass die gesamte Referenzbibliothek in den Modellkontext gelangt; ob jedes kompatible Client-/Modellpaar ihn zuverlässig befolgt, wurde hier nicht Ende-zu-Ende geprüft.

Die Komposition erfolgt in zwei Schritten:

1. Der Agent ordnet die Aussage einem semantischen Muster zu, etwa Datenfluss, Sicherheitsgrenze oder Engpass.
2. Danach wählt er ein visuelles Layout und erzeugt den HTML-/SVG-Code.

Das Designsystem arbeitet unter anderem mit einem 4-Pixel-Raster, begrenzten Akzentfarben sowie Budgets für Knoten, Pfeile und Verschachtelung. Diese Grenzen sollen verhindern, dass der Agent jeden Inhalt in eine überladene Gesamtübersicht presst.

Das Resultat ist üblicherweise eine einzelne HTML-Datei. CSS liegt im Dokument, das Diagramm als Inline-SVG. Ein Build-Schritt ist für die Anzeige nicht nötig. Vollständig offline-identisch ist die Standardausgabe trotzdem nicht: Die Vorlagen referenzieren Instrument Serif, Geist Sans und Geist Mono über Google Fonts. Ohne Netz greifen System-Fallbacks. Andere Schriftmetriken können Zeilenumbrüche und Abstände verändern.

Genau hier verläuft die Grenze zum Compiler: Die Regeln schränken den Lösungsraum ein, aber das Sprachmodell setzt sie um. Ein erneuter Lauf kann Koordinaten, Formulierungen oder Gruppierungen ändern. Diagram Design erhöht die Wahrscheinlichkeit eines konsistenten Ergebnisses; es garantiert weder identischen Output noch eine optimale Informationsarchitektur.

Welche Diagrammtypen unterstützt Diagram Design?

Das aktuelle README zählt 39 Typen. Dazu gehören klassische technische Diagramme, analytische Darstellungen und redaktionelle Layouts.

Gruppe	Beispiele
Systeme und Software	Architektur, Deployment, Dependency Graph, UML Class, Database Schema, ER-Diagramm
Abläufe und Verhalten	Flowchart, Sequence, State Machine, Swimlane, User Journey, Kanban
Hierarchien und Beziehungen	Tree, Org Chart, Venn, Loop, Story Map
Daten und Analyse	Bar, Line, Scatter, Radar, Polar, Treemap, Sankey
Strategie und Ursachen	Quadrant, Funnel, Fishbone, Wardley Map, Timeline, Gantt

„Diagrammtyp“ bedeutet hier überwiegend Layout- und Ausgabeziel. Hinter den Typen stehen nicht jeweils eigenständige Parser-Grammatiken. Das ist wichtig, weil die Fähigkeit, ein neues Gantt-Diagramm zu komponieren, nicht automatisch bedeutet, eine vorhandene Mermaid-Gantt-Datei korrekt importieren zu können.

Ältere Artikel und Repository-Flächen nennen teilweise weniger Typen. Das ist vor allem ein Symptom des schnellen Rolling-Release-Modells. Für den Funktionsumfang zählt der aktuelle Quellstand; für reproduzierbare Produktion sollte dagegen ein geprüfter Commit fixiert werden.

Wie installierst du Diagram Design?

Die folgenden Befehle stammen aus dem aktuellen Projekt-README. Ich habe die Paketstruktur und die strikte Claude-Plugin-Validierung geprüft, aber nicht jede Installation in jedem Client Ende-zu-Ende ausgeführt.

Für Claude Code werden die Kommandos innerhalb der Anwendung eingegeben:

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

Bei Drittanbieter-Marketplaces muss Auto-Update anschließend einmal aktiviert werden.

Für Codex dokumentiert das Projekt diese Befehle:

codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-design

Ein sofortiges Marketplace-Update lässt sich laut README so anstoßen:

codex plugin marketplace upgrade diagram-design

Für Pi erfolgt die Installation direkt aus dem GitHub-Repository:

pi install https://github.com/cathrynlavery/diagram-design

Dieser ungetaggte Git-Install aktualisiert sich laut Projektdokumentation nicht automatisch. Dafür ist folgender Befehl vorgesehen:

pi update --extensions

Für produktive Umgebungen würde ich keinen beweglichen Repository-Stand blind aktualisieren. Sinnvoller ist ein intern geprüfter Commit oder ein eigener Mirror, der erst nach bestandenen Tests weitergezogen wird.

Was kann der Mermaid- und draw.io-Import wirklich?

Diagram Design stylt nicht einfach das Bild eines bestehenden Renderers um. Die mitgelieferten Python-Skripte lesen Mermaid-Text beziehungsweise draw.io-XML, extrahieren Knoten und Beziehungen und übergeben diese Struktur dem Agenten zur Neukomposition. Quellkoordinaten, Farben und Fonts werden bewusst nicht eins zu eins übernommen.

Der `mermaid_extract.py` unterstützt im geprüften Stand diese Mermaid-Familien:

• `flowchart` beziehungsweise `graph`
• `sequenceDiagram`
• `stateDiagram-v2`
• `erDiagram`

Gantt, Timeline, Journey und Class Diagram gehören nicht zu diesen Import-Grammatiken. Der Skill kann eine entsprechende Grafik neu erstellen, aber nicht zwingend eine vorhandene Mermaid-Datei dieser Familien strukturerhaltend einlesen. „Unterstützter Diagrammtyp“ und „unterstütztes Importformat“ sind deshalb zwei verschiedene Aussagen.

Beim Redraw lassen sich Ausgabeformat, Größe, Detailgrad und Zielgruppe steuern. Ein dokumentiertes Beispiel für Claude Code lautet:

/diagram-design:import-mermaid architecture.mmd --size=slide-16x9 --detail=simplified

Der Import soll außerdem ein Fidelity Ledger ausgeben: Es dokumentiert, welche Elemente zusammengeführt, vereinfacht oder entfernt wurden. Das ist sinnvoll, weil ein redaktionelles Redesign keine verlustfreie Konvertierung verspricht.

Für PNG reicht die portable HTML-Datei nicht aus. Der Exportweg im Repository benötigt Playwright und Chromium:

pip install playwright
playwright install chromium

HTML und SVG sind damit deutlich einfacher zu erzeugen und weiterzugeben als ein reproduzierbar gerendertes PNG.

Was zeigen die eigenen Tests?

Ich habe den unveränderten Commit `5538b35116bf5392cabe2cd68bdbc3cf3d09cc9a` geprüft. Die quellbasierte Testsuite, der Plugin-Pakettest und die strikte Claude-Plugin-Validierung liefen erfolgreich. Der Mermaid-Extraktor verarbeitete die mitgelieferte Fixture, und `self_check.py` akzeptierte ein Repository-Beispiel.

Der Playwright-Selbsttest bestand 25 von 25 Fällen. Im vollständigen Sweep wurden 141 HTML-Dateien ohne Finding gerendert. Auch der jüngste geprüfte GitHub-Actions-Lauf auf diesem Stand war erfolgreich.

Die technische Substanz geht damit deutlich über „guter Prompt plus schöne Beispiele“ hinaus:

Qualitätsgate	Was es prüft
Quell-Linter	Design-, Struktur- und Accessibility-Regeln
Browser-Linter	tatsächlich gerenderten Inhalt, Überlauf, Clipping und Scriptfehler
Geometrieprüfung	überdeckte Beschriftungen und problematische Anordnung
Treemap-Prüfung	Flächentreue und Label-Überlauf
Sankey-Prüfung	Erhaltung der dargestellten Flüsse
Dokumentationsprüfung	Konsistenz von Routing, Referenzen und Paketinhalt
`self_check.py`	formale Prüfung neu generierter Artefakte beim Anwender

Der CI-Workflow testet Parser, Linter, Browser-Rendering und Paketkonsistenz. Er misst aber nicht, ob Leser eine Grafik schneller verstehen oder als ästhetisch besser bewerten. Dafür wären kontrollierte Vergleichsläufe und Blindbewertungen nötig.

Mein Test belegt daher: Die mitgelieferten Artefakte und Prüfer funktionieren im getesteten Stand. Er belegt nicht, dass jedes Modell mit dem Skill bessere Diagramme erzeugt oder dass die Erstellung schneller als mit Mermaid oder Figma ist.

Diagram Design vs. Mermaid und manuelle Editoren

Diagram Design und Mermaid lösen unterschiedliche Probleme. Der sinnvolle Vergleich lautet nicht „welches Tool kann Kästen und Pfeile“, sondern „welcher Arbeitsgegenstand soll dauerhaft gepflegt werden“.

Kriterium	Diagram Design	Mermaid	draw.io/Figma
Primärziel	redaktionell komponierte Einzelgrafik	reproduzierbares Diagram-as-Code	manuelle Gestaltung
Quelle	generiertes HTML/SVG	kompakte Textsyntax	Editor- beziehungsweise Designdatei
Determinismus	niedrig bis mittel, modellabhängig	hoch bei gleicher Renderer-Version und Konfiguration	manuell fixiert
Git-Diffs	möglich, aber durch SVG-Koordinaten unübersichtlich	sehr gut lesbar	schwach bis ungeeignet
Häufige Änderungen	Regeneration plus Review	kleine Textänderung plus Rendern	manuelle Nacharbeit
Markenlook	regelbasiert und agentisch anpassbar	über Themes begrenzt	vollständig kontrollierbar
Qualitätskontrolle	umfangreiche automatische Gates plus Review	Parser- und Renderer-Prüfung plus Review	überwiegend menschliches Review
Geeigneter Einsatz	Blog, Präsentation, einmalige Architektur- oder Prozessgrafik	codegekoppelte Dokumentation	hochwertige Einzelanfertigung mit manueller Kontrolle

Mermaid gewinnt, wenn Diagramme nah am Code liegen, häufig geändert und in Pull Requests geprüft werden. Diagram Design gewinnt an Attraktivität, wenn eine einzelne Grafik zum visuellen Stil eines Artikels oder einer Präsentation passen soll und ein manueller Review ohnehin vorgesehen ist.

Der Import kann beide Ansätze verbinden: Mermaid bleibt die wartbare Quelle, Diagram Design erzeugt daraus einen redaktionellen Export. Dieser Export ist dann aber ein abgeleitetes Artefakt und sollte nicht zur neuen Quelle der Wahrheit werden.

Welche Einschränkungen und Risiken gibt es?

Ästhetik bleibt subjektiv

Die Beispiele zeigen klare Hierarchien, konsistente Typografie und großzügige Abstände. Kleine Labels können bei verkleinerter Darstellung trotzdem schwer lesbar werden. Zudem kann die einheitliche Editorial-Sprache selbst zu einem wiedererkennbaren Template-Look werden. Ohne Blindtest ist „sieht besser aus“ ein visuelles Urteil, keine gemessene Wirkung.

LLM-Ausgabe ist variabel

Ein Sprachmodell entscheidet über Typ, Gruppierung, Textkürzung und Koordinaten. Die Linter erkennen viele formale Fehler, aber keine missverständliche Schwerpunktsetzung. Jede fachlich relevante Grafik braucht deshalb ein inhaltliches Review.

Rolling Release erschwert Reproduktion

Im geprüften Stand gab es keine Releases und keine Tags. Gleichzeitig weichen Manifest-Version 2.6.1 und `SKILL.md`-Version 2.6 voneinander ab. Wer reproduzierbare Ergebnisse benötigt, sollte einen Commit pinnen oder das Paket intern spiegeln.

Webfonts beeinflussen Offline-Betrieb und Datenschutz

Die Standardvorlagen laden Google Fonts. Beim Online-Aufruf kann dadurch eine Verbindung zu Google entstehen. In Air-Gap-, Datenschutz- oder strikten CSP-Umgebungen sollten die Fonts lokal eingebunden oder konsequent durch getestete Systemfonts ersetzt werden. Ein bloßer Offline-Fallback garantiert kein pixelgleiches Layout.

Generiertes HTML ist Code

Die Importparser arbeiten textbasiert; der `drawio_extract.py` enthält Schutzmechanismen für die XML-Verarbeitung. Die ausgelieferten HTML-Assets können jedoch Scripts für Interaktion oder Animation enthalten. Agentisch erzeugte HTML-Dateien gehören daher vor dem Öffnen in privilegierten Browserkontexten oder vor dem Einbetten in eine Website geprüft.

Der Datenfluss bleibt beim Coding-Agenten

Diagram Design selbst enthält keinen eigenen KI-Backend-Aufruf. Im dokumentierten Importpfad parsen lokale Python-Skripte die Quelldatei; anschließend verarbeitet der Coding-Agent den ausgegebenen Strukturdigest und die Promptinhalte. Welche Teile davon an einen externen Modellprovider gesendet, gespeichert oder zum Training genutzt werden, hängt vom konkreten Client, dem verwendeten Cloud- oder lokalen Modell, Vertrag beziehungsweise Tarif und den jeweiligen Einstellungen ab – nicht von der MIT-Lizenz des Skills.

Für wen lohnt sich Diagram Design?

Zielgruppe	Einschätzung
Technische Blogger	interessant für einzelne, hochwertige Erklärgrafiken
Dokumentationsteams	ergänzend zu Mermaid, wenn Editorial-Exports gebraucht werden
Entwickler mit vielen Mermaid-Dateien	Importumfang vorab an echten Dateien testen
Präsentations- und Enablement-Teams	sinnvoll, wenn SVG-/PNG-Export in den Workflow passt
Enterprise und Air-Gap	nur gepinnt oder gespiegelt, mit lokalen Fonts und Sicherheitsprüfung
Teams mit eigenem Designsystem	Style-Regeln anpassen und Ergebnisse nicht ungeprüft übernehmen

Quellen

• Diagram Design auf GitHub
• Aktuelle `SKILL.md`
• CI-Workflow
• Security Policy
• GitHub Releases
• Live-Galerie
• Geprüfter GitHub-Actions-Lauf
• NotebookLM mit den Recherchequellen

FAQ: Häufig gestellte Fragen zu Diagram Design

Fazit

Diagram Design ist eines der technisch substanzielleren Beispiele dafür, wie ein Agent-Skill Designregeln, Referenzmaterial und automatisierte Qualitätsgates bündeln kann. Für Blogartikel, Präsentationen und sorgfältig geprüfte Einzelgrafiken würde ich es testen und wahrscheinlich als Exportwerkzeug einsetzen.

Als pauschalen Mermaid-Ersatz würde ich es nicht verwenden. Häufig geänderte Systemdiagramme sollten in einer kompakten, versionierbaren Quelle bleiben; Diagram Design kann daraus bei Bedarf einen redaktionellen Export erzeugen. Wer den Skill produktiv einsetzt, sollte außerdem einen Commit pinnen, Fonts lokalisieren und generiertes HTML wie Code behandeln. Der verwandte Artikel Superpowers für Coding-Agenten ordnet ein, warum Skills und Harnesses trotz guter Demos klare Beleggrenzen brauchen.