--- title: 'Diagramme im eigenen Branding erstellen mit diagram-design: Skill-Abo #10' description: Der Skill diagram-design zeichnet mit Claude 44 Diagrammtypen als HTML und SVG, übernimmt Farben und Schriften deiner Website und räumt alte Mermaid-Grafiken auf. slug: skill-abo-10-diagram-design date: '2026-10-15' author: Gerhard Schröder tags: - skill-abo-newsletter - ki primary_tag: skill-abo-newsletter excerpt: Claude versteht deinen Inhalt, zeichnet aber Kästchen mit runden Ecken und Schatten. diagram-design schreibt den Geschmack auf, den das Modell nicht hat, und holt sich deine Markenfarben direkt von der Website. canonical: https://visales.de/skill-abo-10-diagram-design.html --- - **diagram-design bringt Claude bei, wie ein gutes Diagramm aussieht: eine Akzentfarbe, feine Linien, keine Schatten, alles auf einem 4-Pixel-Raster. 44 Diagrammtypen, eine HTML-Datei, kein Grafikprogramm.** - **Ein Satz mit deiner Website-Adresse reicht, und der Skill übernimmt Farben und Schriften deiner Marke für jedes weitere Diagramm, inklusive Kontrastprüfung.** - **Alte Grafiken aus Mermaid, draw.io oder Excalidraw zeichnet er im selben Stil neu, passend für Blog, Folie oder Social Post. Open Source, MIT-Lizenz.**    
In der letzten Ausgabe: KI-Bereitschaft deiner Website prüfen mit claude-rank Skill-Abo #9: **claude-rank** Dein robots.txt aus 2019 sperrt vielleicht gerade GPTBot und ClaudeBot aus. Ein Befehl in Claude Code zeigt es dir in fünf Minuten, inklusive Fix. → [Skill-Abo #9 lesen](https://visales.de/skill-abo-9-claude-rank.html)
Zuletzt bei Visual Sales: Produktkonfigurator vs. Angebotskonfigurator Drei Abteilungen, ein Wort, drei verschiedene Systeme gemeint: Marketing will Variantenvisualisierung, Vertrieb braucht Preislogik, Konstruktion ein Regelwerk. Der Unterschied zwischen Produktkonfigurator (zeigt gültige Varianten, unverbindlich) und Angebotskonfigurator (erzeugt ein verbindliches Angebot mit Preisen & Lieferzeiten) entscheidet, welches System du wirklich brauchst. → [Artikel lesen](https://visales.de/produktkonfigurator-angebotskonfigurator-unterschied.html)
  Bitte Claude um ein Diagramm deines Vertriebsprozesses, und du bekommst bunte Kästchen mit runden Ecken, Schatten und fünf Farben, die nichts bedeuten. Inhaltlich stimmt es meistens. Es sieht aber aus wie jede zweite KI-Grafik. [Cathryn Lavery](https://www.linkedin.com/in/cathryn-lavery/) ging es genauso. Für ihre Blogartikel bekam sie von Claude immer dasselbe generische Kästchenbild, und entweder kämpfte sie eine halbe Stunde mit Figma oder ließ das Diagramm weg. Ihre Schlussfolgerung: Das Modell versteht den Inhalt. Was ihm fehlt, ist Geschmack. Also hat sie den Geschmack aufgeschrieben. **Ich hatte mir aus genau den gleichen Gründen vor ein paar Monaten einen Skill für meine eigenen, langen Infografiken erstellt, aber dieser Skill ist VIEL besser!** Ihr Ergebnis heißt [diagram-design](https://github.com/cathrynlavery/diagram-design), und es passt gut zu einem Thema, das ich in [Skill-Abo #4](https://visales.de/skill-abo-4-design-md-brand-konsistenz.html) angefangen habe: Gestaltungsregeln gehören in eine Datei, nicht in den Kopf. ## Diagramme mit Claude erstellen, die nicht nach KI aussehen Der Kern des Skills ist ein kurzes Regelwerk, an das sich der Agent bei jedem Diagramm hält: 1. **Eine Akzentfarbe**, und die nur für ein oder zwei Elemente, auf die der Blick zuerst fallen soll. 2. **Feine Linien von einem Pixel**, keine Schatten, Ecken mit höchstens 10 Pixel Rundung. 3. **Jede Koordinate auf einem 4-Pixel-Raster.** Laut Entwicklerin nimmt genau diese Regel dem Diagramm den KI-Look. 4. **Drei Schriften mit klarer Aufgabe:** eine Serifenschrift für Titel, eine serifenlose für Beschriftungen, eine Monospace nur für technische Angaben. 5. **Dichte vier von zehn.** Jedes Element muss seinen Platz verdienen. Der wichtigste Satz im Regelwerk lautet sinngemäß: Der beste Schritt ist meistens Streichen. Vor dem Zeichnen sagt der Agent, welchen Diagrammtyp er wählt, in welcher Größe und was er weglässt. Erst dann rendert er. Heraus kommt eine einzige HTML-Datei, die du per Doppelklick öffnest. ## Welche Diagrammtypen diagram-design zeichnet 44 Typen, jeweils in drei Fassungen: hell, dunkel und redaktionell mit Erläuterungskarten. Für Vertrieb und Marketing sind diese besonders brauchbar: - **Ablaufdiagramm und Swimlane** für Prozesse mit mehreren Beteiligten, etwa vom Erstkontakt bis zum Angebot - **Customer Journey** mit Phasen, Aktionen und Stimmung - **Quadrant** für Positionierung, zum Beispiel Wirkung gegen Aufwand - **Pyramide und Trichter** für Prioritäten oder den Vertriebstrichter - **Zeitstrahl und Gantt** für Projektpläne im Angebot - **Architektur und Ebenenstapel** für technische Produkte - **Explosionsdarstellung** für Produkte, deren Teile du zeigen willst Die Galerie mit allen Typen liegt online unter [cathrynlavery.github.io/diagram-design](https://cathrynlavery.github.io/diagram-design/). ![Online-Galerie von diagram-design mit der Liste der Diagrammtypen und einem Architekturdiagramm im hellen Stil mit einer Akzentfarbe](/assets/images/2026/10/diagram-design-galerie-diagrammtypen-architekturdiagramm.jpg) *Die Galerie von diagram-design: oben die Diagrammtypen, unten ein Architekturdiagramm im Standardstil. Eine Akzentfarbe, feine Linien, keine Schatten. Screenshot: [cathrynlavery.github.io/diagram-design](https://cathrynlavery.github.io/diagram-design/)*
Wann besser kein Diagramm? Der Skill sagt dir auch, wann du ihn nicht nutzen solltest: Für Diagramme, die in Git liegen und sich jede Woche ändern, ist [Mermaid](https://mermaid.live/) die bessere Wahl. Es ist Text, lässt sich vergleichen und GitHub zeigt es direkt an. Für Aufzählungen und Vorher-Nachher-Vergleiche ist eine Tabelle besser. Für ein einzelnes Kästchen mit Beschriftung schreibst du einfach den Satz. Die Prüffrage vor jedem Diagramm: Lernen deine Leser daraus mehr als aus einem gut geschriebenen Absatz? Wenn nicht, lass das Diagramm weg.
## diagram-design in Claude Code installieren Am einfachsten über den Plugin-Marktplatz in Claude Code: ```text /plugin marketplace add cathrynlavery/diagram-design /plugin install diagram-design@diagram-design ``` Für andere Agenten wie Cursor, Codex, GitHub Copilot oder Gemini CLI gibt es einen gemeinsamen Befehl: ```bash npx skills add cathrynlavery/diagram-design ``` Die Slash-Befehle für Import und Export weiter unten bekommst du nur über die Plugin-Installation. Mit `npx` fragst du stattdessen in normalen Worten. Das funktioniert auch sonst am besten, zum Beispiel: „Zeichne mir ein Swimlane-Diagramm unseres Angebotsprozesses mit Vertrieb, Technik und Kunde." **Du willst reale Fotos, Videos oder interaktive 3D-Grafiken, die dein Produkt im Vertrieb erklären, und keine Zeit für das Terminal?** Schreib uns über die [Kontaktseite](https://visales.de/kontakt.html). Wir klären, ob ein Diagramm reicht oder ob dein Produkt eine 3D-Visualisierung braucht.
Und in Claude Cowork? Cowork installiert nun Plugins einfach aus dem Marktplatz deiner Organisation. Der Weg laut Anleitung: das öffentliche Repository in ein privates GitHub-Repository deiner Organisation spiegeln, in den Organisationseinstellungen unter Plugins einbinden und automatisch synchronisieren lassen. Für Teams ist das sauber, weil alle dieselbe Fassung bekommen. Für Einzelpersonen ist Claude Code der kürzere Weg.
## Diagramme in eigenen Markenfarben erstellen Das Standardaussehen ist Schwarz mit einem dunklen Orange. Brauchbar, aber nicht deine Marke. Dafür gibt es das Onboarding: ```text Onboard diagram-design to https://deine-website.de ``` Der Agent liest deine Startseite und ordnet die gefundenen Werte festen Rollen zu: Hintergrund, Textfarbe, Nebentext, Akzentfarbe aus deinen Buttons und Links, dazu die Schriften für Titel und Beschriftungen. Bevor er speichert, zeigt er dir die geplanten Änderungen und prüft den Kontrast nach WCAG AA. Fällt eine Farbe bei kleiner Schrift durch, schlägt er einen angepassten Wert vor und sagt, warum. Arbeitest du für mehrere Kunden, speicherst du jede Marke als eigenes Profil. Eine kleine Markierungsdatei im Projektordner sagt dem Skill dann, welches Profil gilt. So zeichnest du für zwei Kunden parallel, ohne dass sich die Farben vermischen. Hast du schon eine eigene Design-Datei mit Farben und Schriften, brauchst du das Onboarding nicht. Dann trägst du deine Werte direkt im Style-Guide des Skills ein (`references/style-guide.md`) oder legst sie als Profil ab. Deine Datei bleibt die Quelle, der Skill liest nur daraus. ## Mermaid- und draw.io-Diagramme umwandeln Wahrscheinlich hast du schon Diagramme irgendwo liegen: in draw.io, als Mermaid-Block in einer Dokumentation oder als Excalidraw-Skizze aus einem Workshop. diagram-design liest diese Dateien und zeichnet sie im eigenen Stil neu: ```text /diagram-design:import-drawio prozess.drawio --size=slide-16x9 --detail=simplified /diagram-design:import-mermaid README.md --diagram=all /diagram-design:import-excalidraw workshop.excalidraw --size=slide-16x9 ``` Zwei Regler entscheiden über das Ergebnis. Die Größe bestimmt nicht nur das Format, sondern auch die Schriftgröße: Eine Folie für den Beamer bekommt größere Beschriftungen als eine Grafik im Blog. Der Detailgrad bestimmt, wie viel vom Original übrig bleibt, von vollständig bis vereinfacht mit höchstens sieben Elementen. Ein dritter Regler passt die Wortwahl an die Zielgruppe an, etwa für die Geschäftsführung. Zum Schluss exportierst du das Diagramm als SVG für Figma oder als PNG für PowerPoint: ```text /diagram-design:export-diagram angebotsprozess.html ``` ## Mein Take: Geschmack ist eine Datei Das Modell kann zeichnen, es weiß nur nicht, was gut aussieht. Also schreibst du es auf, so knapp und so verbindlich, dass der Agent nicht ausweichen kann. Genau so arbeiten wir bei viSales: Unsere eigene design.md im Warm-Tech-Stil ist die einzige verbindliche Quelle für alle Grafiken, von der Infografik bis zur Präsentation. Wie das aufgebaut ist, steht in [Skill-Abo #4](https://visales.de/skill-abo-4-design-md-brand-konsistenz.html). diagram-design würde ich deshalb nicht über die Website einrichten, sondern unsere design.md als Style-Guide hinterlegen. Das Onboarding ist die Abkürzung für alle, die noch keine eigene Datei haben. Zwei Grenzen dabei...Erstens sagt die Entwicklerin selbst: Die Qualität hängt vom Modell ab, und derselbe Prompt kann zweimal unterschiedlich aussehen. Zweitens ist das Ergebnis keine Datei zum Weiterschieben wie in draw.io. Änderungen machst du, indem du den Agenten erneut fragst oder das SVG von Hand bearbeitest. Und eine dritte Grenze ist für unsere Kunden die wichtigste: Die Explosionsdarstellung im Skill ist eine gezeichnete 2D-Grafik. Wenn ein Vertriebler ein Produkt aus echten CAD-Daten zerlegen, drehen und konfigurieren will, braucht er echte 3D-Visualisierung. Was 3D im B2B-Vertrieb wirklich bringt, habe ich in [diesem Artikel](https://visales.de/was-bringt-3d-visualisierung-im-b2b-wirklich-bvdw-studie-2025-und-openusd-praxis.html) aufgeschrieben. Der Skill ist MIT-lizenziert und liegt auf [GitHub](https://github.com/cathrynlavery/diagram-design). Und bevor du ihn installierst: Wie du einen Skill vorher auf Risiken prüfst, zeige ich dir in der nächsten Ausgabe. Bis dahin hilft der Prompt Injection Scanner aus [Skill-Abo #1](https://visales.de/skill-abo-1-prompt-injection-scanner.html), versteckte Anweisungen in Skill-Dateien zu finden. Viele Grüße aus Velbert, Gerhard Schröder PS: Wenn du ein Diagramm hast, das im Kundentermin mehr verwirrt als erklärt, schick es mir über die [Kontaktseite](https://visales.de/kontakt.html). Ich sage dir, ob ein besseres Diagramm reicht oder ob dein Produkt eine andere Form der Darstellung braucht, etwa eine [interaktive 3D-Infografik](https://visales.de/interaktive-infografik-messe-3d-zielgruppen.html).