Diagramme im eigenen Branding erstellen mit diagram-design: Skill-Abo #10

• 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.

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 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, und es passt gut zu einem Thema, das ich in Skill-Abo #4 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.

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

diagram-design in Claude Code installieren

Am einfachsten über den Plugin-Marktplatz in Claude Code:

/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:

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. Wir klären, ob ein Diagramm reicht oder ob dein Produkt eine 3D-Visualisierung braucht.

Diagramme in eigenen Markenfarben erstellen

Das Standardaussehen ist Schwarz mit einem dunklen Orange. Brauchbar, aber nicht deine Marke. Dafür gibt es das Onboarding:

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:

/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:

/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. 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 aufgeschrieben.

Der Skill ist MIT-lizenziert und liegt auf GitHub. 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, 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. Ich sage dir, ob ein besseres Diagramm reicht oder ob dein Produkt eine andere Form der Darstellung braucht, etwa eine interaktive 3D-Infografik.