diagram-design: KI-Diagramme in Claude Code

Symptom: Ihre KI erzeugt zwar ein Diagramm, aber das Ergebnis ist schwer editierbar, nicht markenkonform oder schlecht in eine Webseite einzubetten.
Schnellste Lösung: Nutzen Sie diagram-design in Claude Code für wiederholbare technische Grafiken als selbstständiges HTML mit eingebettetem SVG – nicht als Ersatz für jedes Whiteboard.

Das Projekt dokumentiert derzeit 27 visuelle Typen und liefert statische Diagramme ohne Build-Schritt, externe Bilddateien oder notwendige Mermaid-Laufzeit. Diese Angaben stammen aus dem offiziellen Repository von diagram-design und wurden am 14.08.2026 anhand von README, Skill-Dateien, Referenzen und Export-Dokumentation geprüft.

Diese Anleitung ist für drei Gruppen gedacht: Entwickler, die Claude Code direkt technische Diagramme erzeugen lassen möchten; Content-Teams mit wiederkehrenden Blog- und Dokumentationsgrafiken; sowie technische Verantwortliche, die Agent Skills unter realen Betriebsbedingungen bewerten.

Last updated und Prüfstand

Zuletzt aktualisiert: 14.08.2026. Geprüft wurden das Repository, die aktuelle README, die Verzeichnisse skills/diagram-design, references und commands sowie die dokumentierten Installations- und Exportpfade. Da sich ein externes Skill unabhängig von Claude Code weiterentwickeln kann, sollten Sie vor einer produktiven Einführung insbesondere Plugin-Befehle, unterstützte Diagrammtypen und Browseranforderungen erneut kontrollieren.

Wichtig ist die Einordnung: diagram-design ist keine offizielle, fest eingebaute Claude-Code-Funktion. Claude Code unterstützt grundsätzlich eigene Skills und Plugins. Ein Skill besteht aus einer SKILL.md und kann zusätzliche Vorlagen, Referenzen und Skripte enthalten. Claude Code lädt solche Inhalte bei Bedarf und kann sie entweder automatisch erkennen oder über einen Slash-Befehl aufrufen. Die offizielle Claude-Code-Dokumentation zu Skills beschreibt diesen Mechanismus. Ergänzend erläutert die offizielle Dokumentation zu Claude-Code-Plugins die Trennung zwischen Plugin-Verzeichnis, Marketplace und installierbaren Erweiterungen.

Warum herkömmliche KI-Bilder für technische Dokumentation scheitern

Ein generiertes Bild kann auf den ersten Blick überzeugend aussehen und trotzdem für einen technischen Blog ungeeignet sein. In der Praxis treten mindestens vier Probleme auf:

• Schlechte Änderbarkeit: In einem Rasterbild lassen sich Beschriftungen, Pfeile und Beziehungen nicht zuverlässig einzeln korrigieren.
• Uneinheitliche Gestaltung: Jede neue Anfrage kann andere Farben, Abstände, Schriftgrößen und Formen erzeugen.
• Schwache Einbettung: Ein Bild benötigt oft eine zusätzliche Datei, eine Medienverwaltung oder eine Umwandlung in ein für die Webseite passendes Format.
• Inhaltliche Überladung: Sprachmodelle versuchen häufig, jede Einzelheit abzubilden. Das führt zu kleinen Beschriftungen, überkreuzten Verbindungen und einer unklaren visuellen Hierarchie.

Genau hier setzt diagram-design an. Das Projekt behandelt eine Grafik nicht als dekoratives Bild, sondern als strukturiertes Artefakt: Komponenten, Beziehungen, semantische Rollen, Layoutregeln und Ausgabemedium werden getrennt betrachtet. Der Wert entsteht also nicht nur durch die erste Ausgabe, sondern durch die Möglichkeit, denselben Stil und dieselben Regeln in weiteren Diagrammen wiederzuverwenden.

Hinweis: „Am stärksten“ ist in diesem Zusammenhang keine objektiv gemessene Leistungsangabe. diagram-design ist besonders stark, wenn Sie redaktionelle, einbettbare und wiederholbar gestaltete technische Diagramme benötigen. Für spontane Skizzen oder kollaborative Whiteboards gilt diese Aussage nicht.

Technische Dokumentation und Bloggrafiken

Für technische Blogs ist die wichtigste Eigenschaft die Selbstständigkeit der Ausgabe. Laut Projektdokumentation erzeugt diagram-design HTML-Dateien, in denen das SVG direkt enthalten ist. Dadurch müssen Sie nicht zwingend eine React-Anwendung, einen laufenden Mermaid-Renderer oder ein zusätzliches JavaScript-Paket ausliefern. Das vereinfacht die Übergabe an ein CMS, eine statische Webseite oder eine Dokumentationsplattform.

Ein typischer Ablauf sieht so aus:

1. Sie geben Claude Code den erklärenden Text und das gewünschte Zielmedium.
2. Das Skill ordnet den Inhalt einem passenden Diagrammtyp zu.
3. Claude Code erzeugt eine HTML-Datei mit Struktur, Beschriftungen und SVG.
4. Sie öffnen die Datei lokal im Browser und prüfen Lesbarkeit sowie Reihenfolge.
5. Bei Bedarf exportieren Sie zusätzlich SVG oder PNG.

Für einen Blogbeitrag über eine Webanwendung ist ein Architekturdiagramm meist sinnvoller als ein generisches Schaubild. Beschreiben Sie deshalb nicht nur „Erzeuge eine Grafik“, sondern nennen Sie Frontend, API-Schicht, Datenbank, Cache, externe Dienste und die Richtung der wichtigsten Datenflüsse. Je präziser Ihre inhaltliche Begrenzung, desto weniger muss Claude Code aus unvollständigen Angaben ableiten.

Die Ausgabe eignet sich besonders für:

• Architekturübersichten in technischen Tutorials
• Ablaufdiagramme für API-Aufrufe
• Sequenzdiagramme für Authentifizierung und Fehlerpfade
• Zustandsdiagramme für Jobs, Bestellungen oder Agenten
• Entscheidungsbäume und Vergleichsgrafiken
• redaktionelle Abbildungen für Produkt- und Entwicklerdokumentation

Ein weiterer Vorteil ist die Auswahl des Ausgabeformats. Die Projektdokumentation nennt html, svg, png und html+png als mögliche Formate. Für Webseiten ist HTML praktisch, für Vektoreditoren SVG und für Präsentationen oder soziale Vorschaukarten PNG.

Szenarien mit unterschiedlichem Nutzen

Softwarearchitektur

Architekturdiagramme profitieren von einer festen visuellen Grammatik. Komponenten werden als Einheiten dargestellt, Verbindungen zeigen Abhängigkeiten oder Datenflüsse. Das funktioniert gut, solange Sie die Abstraktionsebene festlegen.

Beschreiben Sie vor der Generierung:

• Zielgruppe: Entwickler, gemischtes Publikum oder Führungsebene
• maximale Anzahl sichtbarer Komponenten
• Richtung des Hauptflusses
• interne und externe Vertrauensgrenzen
• Elemente, die bewusst weggelassen werden sollen

Das Projekt dokumentiert für Importe drei Detailstufen: simplified mit bis zu 7 Knoten, balanced mit bis zu 12 und faithful mit bis zu 24 Knoten. Diese Grenzen sind keine allgemeine Gesetzmäßigkeit für jedes neu erstellte Diagramm, aber sie zeigen die zentrale Entscheidung: Komplexität muss durch ein Budget begrenzt werden.

Prozesse und Sequenzen

Für Prozessbeschreibungen sollten Sie zwischen einem Flussdiagramm, einer Swimlane und einem Sequenzdiagramm unterscheiden. Ein Flussdiagramm zeigt Entscheidungen und Reihenfolgen. Eine Swimlane ordnet Schritte Rollen oder Systemen zu. Eine Sequenz fokussiert Nachrichten über die Zeit.

Ein Beispiel: Wenn ein Nutzer eine Datei hochlädt, ist ein Flussdiagramm geeignet, um Validierung, Fehler und Wiederholung zu erklären. Eine Swimlane ist besser, wenn Browser, API, Warteschlange und Worker beteiligt sind. Ein Sequenzdiagramm zeigt dagegen, wann genau Token, Upload-Anfrage und Statusantwort zwischen den Beteiligten ausgetauscht werden.

Wenn Sie diese Unterschiede nicht im Prompt festlegen, kann das Skill einen formal korrekten, aber redaktionell unpassenden Typ auswählen. Prüfen Sie deshalb nicht nur die Farben, sondern auch, ob die gewählte Geometrie die eigentliche Aussage unterstützt.

Markenbezogene Content-Produktion

diagram-design bringt zwar ein eigenes Standardschema mit, doch das ist keine fertige Unternehmensmarke. Das Repository beschreibt einen Onboarding-Prozess, der Farben und Schriftfamilien einer Webseite analysieren und in semantische Rollen wie paper, ink, muted, accent und link übertragen kann. Anschließend werden diese Rollen in einer Style-Guide-Datei gespeichert.

Für ein Content-Team bedeutet das:

• Die erste Einrichtung benötigt eine bewusste Prüfung.
• Die erkannten Farben müssen gegen Ihre Markenrichtlinien validiert werden.
• Schriftdateien und Fallbacks sollten auf dem Zielsystem verfügbar sein.
• Kontrast und Lesbarkeit dürfen nicht zugunsten einer exakten Farbübereinstimmung verloren gehen.
• Die Style-Guide-Datei sollte versioniert und vor automatischen Updates geschützt werden.

Die Dokumentation nennt außerdem eine WCAG-AA-Kontrastprüfung für bestimmte Text- und Hintergrundrollen. Das ist hilfreich, ersetzt aber keine redaktionelle Kontrolle auf verschiedenen Bildschirmgrößen. Die W3C-Erklärung zu den WCAG-Erfolgskriterien für Kontrast beschreibt, warum Textkontrast unabhängig vom verwendeten Diagrammwerkzeug geprüft werden muss. Besonders kleine Diagrammbeschriftungen können in einem Desktop-Browser lesbar sein und auf einer mobilen Seite trotzdem unbrauchbar wirken.

Vergleich der geeigneten Werkzeuge

Die Entscheidung lässt sich einfach formulieren:

• Wählen Sie diagram-design, wenn die Grafik in mehreren Artikeln gleichartig aussehen und direkt eingebettet werden soll.
• Wählen Sie Mermaid, wenn Diagrammlogik, Pull-Request-Änderungen und schnelle Textpflege wichtiger sind als eine stark redaktionelle Gestaltung. Die offizielle Mermaid-Dokumentation zeigt die breite Syntaxabdeckung von Fluss-, Sequenz-, Zustands-, ER-, Gantt- und weiteren Diagrammen.
• Wählen Sie Excalidraw, wenn Sie frei zeichnen, Formen verschieben oder mit mehreren Personen an einer Skizze arbeiten möchten.

Installation und Aufruf in Claude Code

Die aktuelle Repository-Dokumentation beschreibt die Installation als Plugin. Der dort genannte Ablauf verwendet einen Marketplace-Befehl und anschließend die Installation des Plugins:

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

Danach können Sie in Claude Code eine natürliche Anweisung geben, zum Beispiel:

Erstellen Sie ein Architekturdiagramm für Frontend, API, Datenbank
und Cache. Verwenden Sie eine klare Leserichtung von links nach rechts
und geben Sie eine selbstständige HTML-Datei mit eingebettetem SVG aus.

Für ein belastbares Ergebnis gehen Sie in fünf Schritten vor:

1. Arbeitsverzeichnis vorbereiten: Starten Sie Claude Code im Projekt, in dem die Diagrammdatei und zugehörige Referenzen gespeichert werden sollen.
2. Skill-Verfügbarkeit prüfen: Öffnen Sie die Skill-Übersicht oder verwenden Sie den qualifizierten Plugin-Befehl, damit Sie nicht versehentlich eine gleichnamige lokale Konfiguration aufrufen.
3. Inhalt begrenzen: Legen Sie Zielgruppe, Diagrammtyp, Hauptbeziehungen, maximale Komplexität und gewünschtes Format fest.
4. Referenzen laden: Hinterlegen Sie bei Markenprojekten die Style-Guide-Datei und bei wiederkehrenden Diagrammen Beispiele oder Benennungsregeln.
5. Ausgabe kontrollieren: Öffnen Sie die HTML-Datei, prüfen Sie Pfeilrichtungen und Beschriftungen und exportieren Sie erst danach SVG oder PNG.

Claude Code unterstützt bei Skills unter anderem eine persönliche Ablage unter ~/.claude/skills/ und projektspezifische Skills unter .claude/skills/. Diese Trennung ist für Teams relevant: Eine persönliche Installation ist bequem, aber nicht automatisch reproduzierbar. Für ein gemeinsames Dokumentationsprojekt ist eine versionierte Projekt- oder Plugin-Konfiguration nachvollziehbarer.

FAQ für die praktische Auswahl

Was ist diagram-design genau?

diagram-design ist kein eigenständiges Zeichenprogramm und keine standardmäßig eingebaute Claude-Code-Funktion. Es handelt sich um ein externes Agent Skill, das Claude Code Anweisungen, Referenzdateien und Vorlagen für technische Diagramme bereitstellt. Der Schwerpunkt liegt auf selbstständigem HTML mit eingebettetem SVG, das ohne Mermaid-Laufzeit oder React in Dokumentationen und Webseiten eingebettet werden kann.

Welche Diagrammarten kann diagram-design erzeugen?

Das Projekt unterstützt unter anderem Architekturdiagramme, Flussdiagramme, Sequenzdiagramme, Zustandsautomaten, ER-Modelle, Zeitachsen, Swimlanes, Quadranten, Bäume, Venn-Diagramme, Trichter, Balken- und Liniendiagramme. Die Auswahl sollte vom Inhalt abhängen: Abläufe brauchen eine andere Struktur als Systemgrenzen, Rollenverteilungen oder zeitliche Ereignisse.

Wie wird diagram-design in Claude Code aufgerufen?

Nach der Installation als Plugin können Sie diagram-design über einen qualifizierten Slash-Befehl oder eine natürliche Anweisung verwenden. Für einen neuen Entwurf genügt etwa eine präzise Beschreibung der Komponenten und Beziehungen. Für Exporte stellt das Projekt einen Befehl bereit, der eine vorhandene HTML-Datei als SVG oder PNG ausgibt.

Kann ich das von diagram-design erzeugte SVG bearbeiten?

Ja. Das SVG wird als eigenständiger Vektorinhalt aus dem HTML-Diagramm extrahiert und kann in geeigneten Vektoreditoren weiter angepasst werden. Sie sollten jedoch zwischen visueller Nachbearbeitung und struktureller Änderung unterscheiden: Wenn sich Beziehungen, Beschriftungen oder Layoutregeln ändern, ist eine erneute Generierung meist sauberer als manuelles Verschieben einzelner Elemente.

Worin unterscheidet sich diagram-design von Mermaid?

Mermaid beschreibt Diagramme primär als Textsyntax und rendert sie über eine entsprechende Laufzeit oder Integrationsumgebung. diagram-design erzeugt dagegen selbstständige HTML- und SVG-Dateien mit stärker kontrollierter Gestaltung. Mermaid ist oft besser für versionierbare, schnell aktualisierte Diagrammlogik; diagram-design passt besser zu wiederverwendbaren redaktionellen Grafiken mit festen Layout- und Markenregeln.

SVG-, PNG- und Browser-Export

Der SVG-Export extrahiert laut Projektdokumentation den SVG-Knoten und ergänzt Schriftinformationen, damit die Datei eigenständiger in Browsern und Vektoreditoren verwendet werden kann. Der PNG-Export rastert das Diagramm über Playwright standardmäßig mit 2-facher Skalierung. Für diesen Pfad werden die Python-Bibliothek und Chromium benötigt.

Der dokumentierte Installationspfad lautet:

pip install playwright
playwright install chromium

Die offizielle Playwright-Dokumentation zur Python-Bibliothek bestätigt, dass nach der Installation die Browser-Binärdateien separat eingerichtet werden und Chromium, Firefox oder WebKit gesteuert werden können.

Das führt zu drei betrieblichen Grenzen:

1. Browserabhängigkeit: Fehlt Chromium oder passt die Playwright-Version nicht zur installierten Browserumgebung, kann der PNG-Export scheitern.
2. Schriftabhängigkeit: Ein HTML-Diagramm kann auf einem System korrekt aussehen und auf einem anderen wegen fehlender Fonts anders umbrechen.
3. Remote-Ausführung: Für Batch-Aufgaben brauchen Sie stabile Dateirechte, eine verlässliche Browserinstallation und eine kontrollierte Ablage der Ergebnisse.

Für einzelne Diagramme reicht Ihr lokales System. Wenn Sie jedoch täglich mehrere Dokumentationsgrafiken erzeugen, HTML rendern und PNG-Dateien für ein CMS vorbereiten, ist eine dauerhafte Remote-Umgebung organisatorisch oft sauberer. Ein gemieteter Mac kann dabei sinnvoll sein, wenn Ihr Team bereits auf macOS-Werkzeuge, SSH, Browserautomation und reproduzierbare Projektverzeichnisse setzt. Für Datenschutzanforderungen sollten Sie vorab klären, welche Quelltexte, Markeninformationen und Dokumentationsdaten die Umgebung verlassen. Die Datenschutzhinweise von Kvmzen sollten Sie vor einer geschäftlichen Nutzung ebenfalls prüfen.

Erfahrung aus der Beschaffung: Kaufen Sie keine dauerhafte Hardware nur für gelegentliche Diagrammexporte. Wenn der Bedarf unregelmäßig ist, vergleichen Sie zuerst Nutzungsdauer, Browserwartung, Zugriffsverwaltung und Datenlöschung mit einer temporären Remote-Umgebung.

Grenzen und typische Fehlentscheidungen

diagram-design ist nicht die beste Wahl, wenn Sie eine der folgenden Anforderungen haben:

• mehrere Personen müssen gleichzeitig frei auf einer Zeichenfläche arbeiten;
• das Ergebnis soll primär eine handgezeichnete Workshop-Skizze sein;
• Sie benötigen ein proprietäres Editierformat statt HTML oder SVG;
• die Diagrammlogik ändert sich mehrmals täglich und soll ausschließlich als kompakter Quelltext gepflegt werden;
• das Ergebnis muss ohne jede manuelle Prüfung in sicherheitskritische Dokumentation übernommen werden.

Auch ein SVG ist nicht automatisch semantisch oder inhaltlich korrekt. Ein Vektoreditor kann Elemente verändern, ohne die zugrunde liegende Systemlogik zu verstehen. Prüfen Sie deshalb nach jeder Generierung mindestens die Komponentenliste, Pfeilrichtungen, Beschriftungen, Vertrauensgrenzen und das Verhalten bei kleinen Bildschirmbreiten.

Für Teams mit DSGVO-Anforderungen kommt ein weiterer Punkt hinzu: Wenn Claude Code Webseiten zur Markenanalyse abruft oder Projektdaten in einer externen Umgebung verarbeitet, müssen Sie Datenflüsse und Berechtigungen dokumentieren. Verwenden Sie keine vertraulichen Architekturdetails in einem öffentlichen Beispielprojekt und speichern Sie generierte Dateien nicht länger als notwendig.

Aktuelle Lösung und Mac-Umgebung im Vergleich

Wenn Sie Diagramme bisher auf einem lokalen Windows- oder Linux-Rechner erzeugen, sind die typischen Nachteile weniger die reine Rechenleistung als die Betriebsdetails: Browser-Binärdateien werden nicht einheitlich gepflegt, Fonts unterscheiden sich zwischen Teammitgliedern und Batch-Exporte laufen nur, wenn ein bestimmter Rechner eingeschaltet und erreichbar ist. Zusätzlich entstehen bei lokalen Einzelinstallationen schwer nachvollziehbare Unterschiede bei Claude-Code-Skills, Playwright-Versionen und Projektpfaden.

Eine dauerhaft gemietete Mac-Umgebung löst diese Punkte nicht automatisch, kann aber für wiederkehrende Claude-Code- und Browser-Workflows eine besser kontrollierbare Basis schaffen: ein fester Projektpfad, ein definierter Export-Stack und ein klarer SSH-Zugang. Für sporadische Einzelgrafiken bleibt die lokale Ausführung günstiger und einfacher. Für kontinuierliche technische Content-Produktion können Sie dagegen die verfügbaren Mac-mini-Mietoptionen von Kvmzen prüfen und die tatsächliche Laufzeit gegen Kauf, Wartung und Ausfallrisiko abwägen.

Wenn Sie diagram-design nur testen möchten, starten Sie lokal mit einem kleinen Architekturdiagramm und einem SVG-Export. Sobald daraus ein wiederkehrender Veröffentlichungsprozess mit Browser-Rendering, mehreren Zielgrößen und festen Zugriffsregeln wird, lohnt sich der Vergleich mit einer stabilen Remote-Mac-Umgebung von Kvmzen.