Was ist diagram-design? Claude Code Skill erklärt

Stand: 17.08.2026. Die Angaben wurden am selben Tag anhand des offiziellen Repositorys, der Installationsdateien und der Claude-Code-Dokumentation geprüft.

Das offizielle Repository beschreibt derzeit 27 visuelle Diagrammtypen, während der Repository-Kopf zugleich 29 redaktionelle Diagrammtypen nennt. Diese Abweichung ist bereits ein wichtiges Prüfsignal: diagram-design ist ein Claude Code Skill für strukturierte, editierbare HTML- und SVG-Diagramme, aber die veröffentlichte Zahl der Vorlagen sollte nicht mit einer Qualitätsgarantie verwechselt werden. Der Skill kann die Erstellung eines brauchbaren Entwurfs beschleunigen; Architekturbeziehungen, Datenrichtigkeit, Lesbarkeit und Markenregeln müssen vor der Veröffentlichung von einer fachkundigen Person geprüft werden. Offizielles Repository und aktuelle README-Angaben

Diese Analyse richtet sich an:

• Entwickler, die mit Claude Code technische Dokumentation, Architekturübersichten oder Blogbeiträge erstellen;
• Redaktionsteams, die wiederkehrende Diagramme in einem konsistenten Stil benötigen;
• Designer und technische Mitarbeiter, die die Grenze zwischen AI-Entwurf und veröffentlichungsfähiger Grafik bewerten.

diagram-design übersetzt Struktur, nicht bloß Text

diagram-design ist kein klassisches Zeichenprogramm und kein Bildgenerator im engeren Sinn. Der Skill wird in eine Claude-Code-Arbeitsumgebung eingebunden und liefert Anweisungen, Vorlagen, Referenzdateien und Exportlogik für Diagramme. Claude Code erhält damit eine strukturierte Auswahlhilfe: Aus einer Beschreibung wie „Frontend ruft API auf, API validiert Token und schreibt Aufträge in die Datenbank“ soll nicht irgendeine Illustration entstehen, sondern ein Diagrammtyp, der Komponenten, Beziehungen und Richtung sichtbar macht.

Das ist für technische Inhalte relevant, weil die Qualität eines Diagramms zunächst von der Informationsstruktur abhängt. Ein Architekturdiagramm beantwortet eine andere Frage als eine Sequenzdarstellung:

• Architekturdiagramme zeigen Komponenten und ihre Verbindungen.
• Flussdiagramme erklären Entscheidungen und Prozesspfade.
• Sequenzdiagramme ordnen Nachrichten zeitlich.
• Zustandsdiagramme zeigen Zustände und Übergänge.
• ER-Diagramme strukturieren Entitäten und Felder.
• Zeitachsen ordnen Ereignisse entlang eines Zeitverlaufs.
• Swimlanes verteilen Verantwortlichkeiten auf Rollen oder Systeme.
• Layer-Stacks stellen Abstraktionsebenen übereinander dar.
• Datenfluss- und Sicherheitsmatrizen machen Rollen, Quellen, Empfänger und Zugriffsbeziehungen sichtbar.

Die offizielle Dateistruktur trennt den grundlegenden Skill von einzelnen Typreferenzen. Dadurch muss Claude Code nicht bei jeder Aufgabe sämtliche Vorlagen laden, sondern kann die für den gewählten Diagrammtyp relevanten Referenzen heranziehen. Das ist ein sinnvoller Ansatz für längere Dokumentationsaufgaben, weil die Anweisungen nicht vollständig im Arbeitskontext wiederholt werden müssen. Beschreibung der Claude-Code-Skill-Struktur

Für Architektur- und Datenflussdiagramme zählt die Vorarbeit

Die häufigste Fehlannahme bei AI-Diagrammen lautet: Eine unpräzise Beschreibung werde durch ein gutes Template automatisch zu einer korrekten Architektur. Das ist nicht der Fall. diagram-design kann Komponenten, Gruppierungen und Verbindungen visuell ordnen, aber es kennt die tatsächliche Systemrealität nur aus den bereitgestellten Informationen.

Vor dem Aufruf sollte deshalb eine kleine Strukturdefinition erstellt werden:

1. Komponenten vollständig benennen: Dazu gehören nicht nur sichtbare Anwendungen, sondern auch Datenbanken, Warteschlangen, Identitätsdienste, externe Schnittstellen und manuelle Übergaben.
2. Richtung festlegen: Jede Verbindung sollte eine klare Quelle und ein klares Ziel besitzen.
3. Beziehung beschreiben: „Liest“, „schreibt“, „authentifiziert“, „publiziert“ und „ruft auf“ sind fachlich unterschiedliche Beziehungen.
4. Verantwortungsgrenzen markieren: Ein System kann technisch verbunden sein, ohne für die Verarbeitung fachlich verantwortlich zu sein.
5. Ausnahmen aufnehmen: Fehlerpfade, Wiederholungen, Fallbacks und manuelle Freigaben verschwinden schnell, wenn nur der Hauptpfad beschrieben wird.
6. Detailgrad bestimmen: Ein Diagramm für Entwickler darf andere Beschriftungen enthalten als eine Übersicht für Führungskräfte oder Kunden.

Ein gutes Eingabeformat kann beispielsweise aus einer Tabelle mit den Spalten „Element“, „Rolle“, „Eingang“, „Ausgang“ und „Sicherheitsgrenze“ bestehen. Erst danach sollte Claude Code entscheiden, ob Architektur-, Prozess-, Datenfluss- oder Sicherheitsdarstellung angemessen ist.

Bei komplexen Systemen ist die visuelle Reduktion zugleich Vorteil und Risiko. Das Repository beschreibt für bestimmte Import- und Redraw-Szenarien Detailstufen wie „faithful“, „balanced“ und „simplified“. Werden Knoten zusammengefasst oder ausgelassen, muss die resultierende Grafik als bewusst vereinfachte Darstellung gekennzeichnet werden. Ein sauber aussehender Pfeil ersetzt keine Vollständigkeitsprüfung. Aktuelle Angaben zu Detailstufen und Ausgaben

Technische Artikel profitieren von editierbaren Zwischenformaten

Für Blogbeiträge und technische Dokumente ist HTML oft der beste erste Liefergegenstand. Die Diagramme sind als eigenständige Dateien vorgesehen und enthalten typischerweise HTML, CSS und eingebettete SVG-Strukturen. Dadurch kann eine Redaktion Beschriftungen, Abstände, Farben oder die Reihenfolge einzelner Elemente direkt im Quelltext ändern, ohne das Diagramm komplett neu zu zeichnen.

Diese Eigenschaft unterscheidet die Ausgabe von einem reinen KI-Rasterbild:

• Texte bleiben im HTML beziehungsweise SVG grundsätzlich zugänglich.
• Farben und Linien können im Editor angepasst werden.
• Die Datei lässt sich in einer Versionsverwaltung neben dem Artikel speichern.
• Das Diagramm kann für eine Webansicht oder einen späteren Export erneut gerendert werden.
• Eine redaktionelle Änderung muss nicht zwangsläufig eine vollständige Neugenerierung auslösen.

SVG ist besonders geeignet, wenn eine Grafik in mehreren Größen benötigt wird oder anschließend in einem Vektorprogramm weiterbearbeitet werden soll. PNG ist dagegen zweckmäßig, wenn ein abgeschlossenes Bild für Folien, Vorschaubilder oder Plattformen mit eingeschränkter SVG-Unterstützung benötigt wird. Der offizielle Exportpfad sieht für PNG eine Rasterisierung über Playwright vor; für den Export ist daher eine zusätzliche Browser-Komponente erforderlich. Exportbeschreibung im Repository

Markenstil, externe Webseiten und Datenschutz gehören zusammen

Eine bemerkenswerte Funktion von diagram-design ist das sogenannte Onboarding: Der Skill kann eine Webseite einlesen, daraus Farbwerte und Schriftfamilien ableiten und diese Werte auf Diagrammrollen wie Hintergrund, Primärtext, Sekundärtext und Akzent abbilden. Für ein Redaktionsteam kann das die Wiedererkennbarkeit mehrerer Grafiken verbessern.

Dieser Komfort sollte jedoch nicht ohne Prüfung eingesetzt werden. Beim Einlesen einer Webseite können unter anderem folgende Informationen verarbeitet werden:

• öffentlich sichtbare Farbwerte;
• CSS-Definitionen und Schriftstapel;
• externe Schriftquellen;
• URLs und Ressourcennamen;
• gegebenenfalls Inhalte, die nur über eine zugängliche Vorschau sichtbar sind.

Für interne Projekte sollten keine geschützten Webseiten, nicht öffentliche Markenrichtlinien oder vertrauliche Design-Assets ohne Freigabe an einen Agenten übergeben werden. Besonders bei Kundenprojekten müssen Zuständigkeit, Speicherung, externe Netzwerkzugriffe und die Weiterverwendung von Schriftdateien geklärt sein. Hinweise zu Datenschutz, Auftragsverarbeitung und Datenflüssen sollten in der eigenen Arbeitsumgebung dokumentiert und vor dem ersten externen Zugriff mit den internen Datenschutzanforderungen abgeglichen werden. Als zusätzliche Orientierung für diese Prüfung können die Datenschutzinformationen von Zilmac herangezogen werden.

Die Style-Datei ist außerdem nicht bloß Dekoration. Sie beeinflusst Kontrast, Lesbarkeit, Schriftzuordnung und die visuelle Hierarchie. Ein automatischer Farbtreffer kann formal korrekt sein, aber auf einem Projektor, in einer gedruckten Dokumentation oder bei kleinen Beschriftungen schlecht lesbar werden. Das Repository verweist auf Kontrastprüfungen nach WCAG-AA-Kriterien; die endgültige Prüfung sollte trotzdem im tatsächlichen Veröffentlichungsformat erfolgen. Kontrastanforderungen der WCAG

Erste Schritte: Installation und kontrollierter Test

Erster Schritt: Installationsform auswählen

Für einen kurzen Test ist die Plugin-Installation die einfachere Variante. Die offizielle Anleitung verwendet in Claude Code folgende Befehle:

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

Die Plugin-Variante ist bequem, aber Änderungen an direkt eingebundenen Referenzdateien können bei späteren Aktualisierungen überschrieben werden. Wer den Stil regelmäßig anpassen, eigene Vorlagen pflegen oder die Entwicklung nachvollziehen möchte, sollte stattdessen das Repository klonen und den inneren Skill-Ordner verknüpfen:

git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-design
ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design

Claude Code unterstützt Skills grundsätzlich aus Projektverzeichnissen und aus persönlichen Skill-Verzeichnissen. Die genaue Priorität hängt von der Umgebung und dem Installationsort ab. Dokumentation zu Skill-Verzeichnissen und Plugins

Zweiter Schritt: Projektgrenzen festlegen

Der Skill sollte zunächst in einem Testprojekt und nicht direkt im wichtigsten Redaktionsrepository aktiviert werden. Legen Sie fest:

• welche Dateien gelesen werden dürfen;
• ob Webseiten abgerufen werden dürfen;
• welche Exportskripte ausgeführt werden dürfen;
• wo erzeugte HTML-, SVG- und PNG-Dateien gespeichert werden;
• wer Änderungen an Style-Dateien freigibt.

Claude-Code-Skills können zusätzliche Dateien, Skripte und Werkzeuge enthalten. Deshalb sollten Skill-Inhalte vor der Ausführung wie Quellcode behandelt und insbesondere Berechtigungen, Shell-Aufrufe und Netzwerkzugriffe geprüft werden. Leitfaden zur sicheren Skill-Struktur

Dritter Schritt: Mit einer bekannten Prozessbeschreibung beginnen

Verwenden Sie keine neue, unklare Systemarchitektur als ersten Test. Besser geeignet ist ein bereits geprüfter Ablauf mit fünf bis zehn klaren Schritten, zum Beispiel:

Zeigen Sie den Ablauf einer dokumentierten Anmeldung:
Browser → Gateway → Identitätsdienst → Sitzungstoken → geschützte API.
Kennzeichnen Sie Fehler bei ungültigem Token und verwenden Sie eine reduzierte, technische Darstellung.

Der Test soll nicht beweisen, dass der Skill jedes Diagrammproblem löst. Er soll sichtbar machen, ob die relevanten Elemente, Richtungen und Ausnahmewege erhalten bleiben.

Vierter Schritt: HTML im Browser prüfen

Öffnen Sie die generierte HTML-Datei lokal und kontrollieren Sie zuerst die Struktur, nicht die Ästhetik. Sind alle Knoten vorhanden? Sind Pfeile eindeutig? Werden lange Begriffe abgeschnitten? Ist die Legende verständlich? Ist die Schriftgröße auch bei der vorgesehenen Darstellung noch lesbar? Erst danach sollten Farben, Abstände und visuelle Gewichtung bewertet werden.

Fünfter Schritt: SVG und PNG getrennt bewerten

Exportieren Sie die Grafik in die Zielkanäle:

/diagram-design:export pfad/zum/diagramm.html --svg-only
/diagram-design:export pfad/zum/diagramm.html --png-only --scale=3

Prüfen Sie, ob sich das SVG in der vorgesehenen Weiterverarbeitung korrekt öffnet und ob das PNG bei der tatsächlich benötigten Größe lesbar bleibt. Besonders bei technischen Abkürzungen und kleinen Knoten können Export und Browserdarstellung voneinander abweichen.

Sechster Schritt: Fachliche Abnahme dokumentieren

Speichern Sie neben der Grafik eine kurze Prüfnotiz:

• Quelle der Systeminformationen;
• Datum der fachlichen Prüfung;
• geprüfte Komponenten und Beziehungen;
• bewusst ausgelassene Details;
• verwendete Style-Version;
• Zielkanal und Exportformat.

Damit wird aus einem einmaligen AI-Ergebnis ein nachvollziehbarer Dokumentationsschritt.

Entscheidungshilfe für die passende Einsatzform

Die folgende Bedingungsliste eignet sich für die Erstbewertung:

• Wenn der Inhalt eine klare Struktur, wenige Ausnahmewege und wiederkehrende visuelle Regeln besitzt, dann ist diagram-design für einen schnellen ersten Entwurf geeignet.
• Wenn die Grafik in HTML eingebettet, versioniert oder später textlich angepasst werden soll, dann sollte HTML als Ausgangsformat gewählt werden.
• Wenn eine Vektorweiterbearbeitung in einer Designumgebung geplant ist, dann sollte SVG exportiert und anschließend geprüft werden.
• Wenn nur eine fertige Grafik für eine Präsentation benötigt wird, dann reicht PNG, sofern Schriftgröße und Auflösung kontrolliert wurden.
• Wenn die Eingabe nur aus einer vagen Beschreibung besteht, dann sollte zuerst eine Komponenten- und Beziehungsliste erstellt werden.
• Wenn die Grafik eine Sicherheitsarchitektur, Compliance-Anforderung oder verbindliche Betriebsdokumentation beschreibt, dann darf der AI-Entwurf nur als Arbeitsgrundlage dienen.
• Wenn vertrauliche Webseiten, interne Schriften oder nicht öffentliche Markenwerte verarbeitet werden, dann sollte die externe Zugriffskette vor dem Onboarding freigegeben werden.
• Wenn ein langfristig eigener Stil gepflegt werden soll, dann ist die lokale Installation der Plugin-Variante vorzuziehen.

Vergleich der Ausgabeformate

diagram-design im Vergleich zu klassischen Arbeitsweisen

Typische Grenzen vor der Veröffentlichung

Die Anzahl der mitgelieferten Vorlagen sagt wenig darüber aus, ob ein Diagramm zur jeweiligen Aussage passt. Ein Sicherheitskonzept kann technisch als Layer-Stack gezeichnet werden, obwohl eine Rollenmatrix oder ein Datenfluss die Zugriffslogik besser erklärt. Umgekehrt kann ein Prozessdiagramm zwar vollständig aussehen, aber Verantwortlichkeiten nicht ausreichend trennen.

Besonders kritisch sind:

1. Präzise Messwerte: Prozentwerte, Kapazitäten, Latenzen und Durchsatzangaben müssen aus geprüften Quellen stammen.
2. Sicherheits- und Netzwerktopologien: Falsch dargestellte Vertrauensgrenzen oder Datenwege können operative Fehlentscheidungen begünstigen.
3. Compliance-Dokumente: Formale Nachweise benötigen eine nachvollziehbare Quelle und eine verantwortliche Freigabe.
4. Offizielle Architekturunterlagen: Eine visuell plausible Grafik darf keine veraltete Systembeschreibung ersetzen.
5. Markenfertige Designs: Farbähnlichkeit bedeutet nicht automatisch, dass Logo-, Schrift- oder Markenrichtlinien eingehalten wurden.
6. Sehr dichte Systeme: Sobald viele Knoten auf kleinem Raum liegen, ist eine Aufteilung in mehrere Diagramme meist besser als eine überfüllte Gesamtansicht.

Für technische Redaktionen empfiehlt sich daher ein zweistufiges Verfahren: Erst erzeugt der Skill einen strukturierten Entwurf, danach prüft ein Fachautor die Aussage und ein zweiter Blick die visuelle Lesbarkeit. Für die organisatorische Einordnung eines verwalteten Mac-Arbeitsplatzes sollten vorab Zuständigkeiten, Zugriffsmodelle und Anforderungen an die Arbeitsumgebung im Team festgelegt werden. Allgemeine Angaben zum Anbieter und seiner Arbeitsweise können dabei in der Unternehmensdarstellung von Zilmac nachgelesen werden, ohne daraus eine technische Freigabe für diagram-design abzuleiten.

Häufige Fragen

Welche Diagramme kann diagram-design erzeugen?

diagram-design unterstützt unter anderem Architekturdiagramme, Flussdiagramme, Sequenzdiagramme, Zustandsmodelle, ER-Diagramme, Zeitachsen, Swimlanes, Quadranten, Layer-Stacks, Datenflüsse und Sicherheitsmatrizen. Die offizielle Dokumentation weist aktuell unterschiedliche Typzahlen aus. Für die Auswahl ist daher die Beziehung zwischen Inhalt und Diagrammtyp wichtiger als die veröffentlichte Gesamtzahl.

Wie wird diagram-design in Claude Code installiert?

Für einen schnellen Test wird diagram-design über den Plugin-Marktplatz von Claude Code installiert. Wer Referenzdateien und Style-Regeln langfristig anpassen möchte, klont das Repository und verknüpft den inneren Ordner skills/diagram-design mit dem persönlichen Skill-Verzeichnis. Nach der Installation sollte geprüft werden, ob Claude Code den Skill in einer neuen Sitzung erkennt.

Sind die Ausgaben nachträglich bearbeitbar?

Ja. Die HTML-Datei enthält die Diagrammstruktur und kann im Editor angepasst werden. Zusätzlich lässt sich der enthaltene SVG-Anteil separat exportieren. SVG ist für skalierbare und vektorbasierte Nachbearbeitung geeignet, während PNG als fertiges Rasterbild gedacht ist. Redaktionelle Karten oder Kopfbereiche können beim Diagrammexport je nach Variante ausgeschlossen werden.

Brauchen AI-generierte Architekturdiagramme eine manuelle Prüfung?

Ja. Die KI kann fehlende Beziehungen ergänzen, Knoten zusammenlegen oder aus einer unklaren Beschreibung eine falsche Richtung ableiten. Vor der Veröffentlichung müssen deshalb mindestens Komponenten, Pfeilrichtungen, Datenwege, Sicherheitsgrenzen, Beschriftungen und ausgelassene Details geprüft werden. Für sicherheitskritische oder formale Unterlagen ist eine dokumentierte fachliche Freigabe erforderlich.

Wer Claude Code für technische Inhalte regelmäßig nutzt, sollte diagram-design nicht isoliert betrachten. Die Qualität hängt ebenso vom Arbeitsverzeichnis, den Zugriffsrechten, der Versionierung und der verfügbaren Rechenumgebung ab. Für längere Sessions oder automatisierte Dokumentationsaufgaben sollten deshalb zunächst die Anforderungen an Zugriff, Datenschutz und Reproduzierbarkeit festgelegt werden. Eine eigene Datenschutzdokumentation und eine klar definierte Freigabekette helfen dabei, externe Zugriffe und die Verarbeitung von Marken- oder Projektdaten nachvollziehbar zu begrenzen.

Gegenüber einer rein lokalen Lösung entstehen sonst typische Nachteile: Die Einrichtung muss auf jedem Rechner separat gepflegt werden, Exporte können sich zwischen unterschiedlichen Softwareständen unterscheiden und gemeinsam genutzte Style- oder Skill-Dateien bleiben ohne klare Ablage schwer nachvollziehbar. Eine lokale Arbeitsweise bleibt für dauerhaftes, vertrauliches Arbeiten mit physischen Schnittstellen sinnvoll; für zeitlich begrenzte Tests und gemeinsam bearbeitete Dokumentationsaufgaben sollte dagegen eine klar abgegrenzte, reproduzierbare Entwicklungsumgebung gewählt werden. Entscheidend ist, dass der gewählte Arbeitsplatz die benötigten Zugriffsrechte, Datenschutzvorgaben und Exportwerkzeuge nachvollziehbar abbildet.

• Grundlagen, Installation und Pflege von Skills für Coding-Agenten
• AI-Flowchart-Generatoren für technische Diagramme und Prozesse im Vergleich