Diagramm-Design
Bei koreanischen Anfragen werden alle Texte im Diagramm (Titel, Labels, Hilfstexte, Legenden) auf Koreanisch geschrieben. Englische Hilfslabels werden nur bei notwendigen Eigennamen beibehalten. Wenn nach dem Brand-Style gefragt wird, wird standardmäßig der Basisschritt ausgeführt, wenn der Benutzer keinen festgelegt hat. (Koreanische Version: 방구석프로 bangpro.ai.kr · Original: github.com/cathrynlavery/diagram-design, MIT License)
Erstelle Diagramme als eigenständige HTML-Dateien mit Inline-SVG und einem redaktionellen Designsystem.
Fünfundvierzig visuelle Typen. Semantische Muster beschreiben das Verhalten; Typreferenzen beschreiben das Layout.
0. Ersteinrichtung – Style-Guide-Gate
Bevor Sie Ihr erstes Diagramm in einem neuen Projekt generieren, überprüfen Sie, ob der Style-Guide angepasst wurde.
Versenden Sie nicht stillschweigend Diagramme mit Standard-Skin in ein Markenprojekt.
Lösen Sie zuerst einen Projekt-.diagram-design-Marker gemäß references/profiles.md auf; ein erfolgreich aufgelöster Marker wählt sein Profil aus und umgeht dieses Gate. Diese Referenz verwaltet Fehler, die geschützte Vorgabe und das Speicherverhalten.
Öffnen Sie references/style-guide.md und überprüfen Sie die Standard-Tokens. Wenn sie noch die ausgelieferten Standardwerte sind (Papier #f5f5f5, Tinte #2d3142, Akzent #bf4520), halten Sie inne und fragen Sie den Benutzer:
„Dies ist Ihr erstes Diagramm in diesem Projekt und der Style-Guide ist noch Standard. Jetzt anpassen? Optionen: (a) Website-URL, (b) installierte Skill, (c) lokaler Ordner/Designsystem, (d) Tokens einfügen, (e) Standard beibehalten, (f) gespeichertes Profil laden.“
Verzweigen Sie dann gemäß dem passenden Abschnitt von references/onboarding.md; für (f) folgen Sie references/profiles.md.
Sobald der Style-Guide angepasst wurde (oder der Benutzer explizit den Standard gewählt hat), überspringen Sie dieses Gate bei späteren Durchläufen. Ein führender Profilkopf benennt das kopierte aktive Profil. Ohne Kopf bedeutet ein von den ausgelieferten Standardwerten abweichender semantischer Rollenwert oder eine abweichende Typografiefamilie benutzerdefiniert-nicht gespeichert: überspringen Sie das Gate und bieten Sie an, es als Profil zu speichern. Alle Standard-Tokens ohne Marker/Kopf lösen das Gate aus. Nach dem Onboarding bieten Sie an, es als benanntes Kundenprofil gemäß references/profiles.md zu speichern.
1. Philosophie
Der qualitativ hochwertigste Schritt ist meist die Löschung.
Angewandt auf Schemata:
- Jeder Knoten stellt eine eigenständige Idee dar. Zwei Knoten, die immer zusammen auftreten, sind ein Knoten.
- Jede Verbindung trägt Informationen. Wenn die Beziehung aus dem Layout offensichtlich ist, entfernen Sie die Linie.
- Koralle ist redaktionell, kein Kennzeichen. 1–2 Fokusknoten pro Diagramm. Die Verwendung auf 5 Knoten löscht das Signal.
- Das Schema ist nicht fertig, wenn alles hinzugefügt wurde. Es ist fertig, wenn nichts mehr entfernt werden kann.
Zieldichte: 4/10. Genug, um technisch vollständig zu sein. Nicht so dicht, dass es einen Führer braucht. Über 9 Knoten sind es wahrscheinlich zwei Diagramme.
2. Wann verwenden
Verwenden Sie es für jeden der 45 visuellen Typen (§3), wenn ein Leser aus einer Visualisierung mehr lernt als aus Prosa, einer Tabelle oder einer Aufzählungsliste.
Nicht verwenden für:
- Schnelle Unicode-Diagramme → ein separates Textwerkzeug wie wiretext. Diese Skill liefert keines.
- Listen von Dingen → Tabelle oder Aufzählungspunkte.
- Attribut-nur Vorher/Nachher → Tabelle; Topologieänderungen → Architektur-Delta.
- Ein-Form-„Diagramme“ → schreiben Sie einfach den Satz.
Fragen Sie vor dem Zeichnen: Würde der Leser aus dieser Visualisierung mehr lernen als aus einem gut geschriebenen Absatz? Wenn nein, zeichnen Sie nicht.
3. Auswahl: semantisches Muster, dann visueller Typ
Wenn Verhalten, Zustand, Durchsetzung oder Risiko die Bedeutung trägt, laden Sie zuerst references/semantic-patterns.md und wählen Sie ein primäres Muster. Wählen Sie dann den nächstgelegenen visuellen Typ für das Layout. Wenn kein Muster passt, wählen Sie den Typ direkt.
| Verhaltensauslöser | Semantisches Muster → nächstgelegener Typ |
|---|---|
| Fan-In, Warteschlangentiefe, endliche Kapazität, Engpass | Fan-In-Warteschlange/Engpass → Datenfluss |
| Wiederholte Frage/Eingabe/Governance/Ausgabe-Slots über Phasen hinweg | Phasenrahmen mit semantischen Slots → Prozess |
| Konversation oder lockere Eingabe wird zu einem strukturierten, dauerhaften Artefakt | Unstrukturierte Eingabe → Strukturiertes Artefakt → Datenfluss |
| Zwei Regelspuren benötigen bestanden/nicht bestanden/übersprungen/nicht erreicht und erste Abweichung | Gepaarte Richtlinienbewertungsspuren → Flussdiagramm |
| Vertrauensgrenzen plus erlaubte/verbotene Eingangs- oder Bereitstellungspfade | Sicherer gebahnter Weg → Architektur |
| Steuerelemente gruppiert nach ihrem Durchsetzungsort | Governance/Steuerungskatalog → Schichtenstapel |
| Abwehrmaßnahmen kompensieren vorherige Lücken, und Restrisiko breitet sich aus | Kompensierende Sicherheitsschichten → Schichtenstapel |
| Hierarchische, ID-adressierbare Zerlegung, die pro Block E/A, Einschränkungen und einen Code-Link benötigt | Nachverfolgbare Blockzerlegung → Baum |
| Ein Thema durchläuft Phasen, Wartezeiten, Wiederholungen, Abbrüche und Endzustände | Lebenszyklus-Phasenkarte → Zustandsmaschine |
Das Muster besitzt die semantischen Primitive und sein engeres Budget; der Typ besitzt die Layout-Grammatik. Verwenden Sie references/animation.md nur, wenn Bewegung angefordert wird oder geordnete Änderung wesentlich verdeutlicht; statisch bleibt die Vorgabe.
Leitfaden für visuelle Typen (45)
| Wenn Sie zeigen … | Verwenden Sie | Referenz |
|---|---|---|
| Komponenten + Verbindungen in einer Ansicht; verschachtelte Admin- vs. Traffic-Bereiche | Architektur | type-architecture.md |
| Strukturelle Änderung zwischen synchronisierten Vorher/Nachher-Topologien mit einem Änderungsprotokoll | Architektur-Delta | type-architecture-delta.md |
| Legacy-IT-Landschaft nach Phase oder Abteilung; zeigt den Vorher-Zustand | IT-Aktuellzustand | type-it-state.md |
| Entscheidungslogik mit Verzweigungen | Flussdiagramm | type-flowchart.md |
| Zeitlich geordnete Nachrichten zwischen Akteuren | Sequenz | type-sequence.md |
| Zustände + Übergänge + Wächter | Zustandsmaschine | type-state.md |
| Entitäten + Felder + Beziehungen | ER/Datenmodell | type-er.md |
| Zeitlich positionierte Ereignisse | Zeitleiste | type-timeline.md |
| Funktionsübergreifender Prozess mit Übergaben | Schwimmbahn | type-swimlane.md |
| Zwei-Achsen-Positionierung/Priorisierung | Quadrant | type-quadrant.md |
| Mehrere Entitäten über 3–5 quantitative Kriterien bewertet | Radar/Spinne | type-radar.md |
| Eine quantitative Reihe über zyklische Kategorien; Winkel=Kategorie, Radius=Größe | Polardiagramm | type-polar.md |
| Verstärkender Kreislauf; der letzte Schritt speist den ersten, und ein Hub sammelt Zustand | Schleife | type-loop.md |
| Hierarchie durch Enthaltung/Bereich | Verschachtelt | type-nested.md |
| Eltern → Kind-Beziehungen | Baum | type-tree.md |
| Mensch/Agent/Team-Zuständigkeit, Berichtswege, Routing, Eskalation | Organigramm | type-org-chart.md |
| Gestapelte Abstraktionsebenen | Schichtenstapel | type-layers.md |
| Teile eines Objekts entlang einer Achse auseinandergezogen: Zerlegung, Auspacken, Montage-Reihenfolge | Explodierte axonometrische Ansicht | type-exploded.md |
| Ein Stockwerk oder Gelände von oben schräg gesehen: Räume mit Möbeln, Gebäude nach Phasen | Axonometrischer Plan | type-axonometric-plan.md |
| Überlappung zwischen Mengen | Venn | type-venn.md |
| Ranghierarchie oder Konversionsabfall | Pyramide/Trichter | type-pyramid.md |
| Quantitativer Vergleich über Kategorien | Balkendiagramm | type-bar.md |
| Ein Startbetrag, der durch signierte Beiträge (Budget-Brücke, Headcount-Deltas) mit einem Endbetrag verbunden ist | Wasserfall | type-waterfall.md |
| Teil-vom-Ganzen, wobei die relativen Größen die Geschichte sind | TreeMap | type-treemap.md |
| Kreuztabellierte Daten; Füllung kodiert Wert pro Zelle | Heatmap | type-heatmap.md |
| Kontinuierliche Trends über Zeit, Änderung zwischen genau zwei Zuständen (Slopegraph), eine Verteilung pro Reihe (Ridgeline) oder Rangbewegung über mehrere Schnappschüsse (Bump) | Liniendiagramm | type-line.md |
| Aufgaben und Phasen auf einer Zeitleiste | Gantt | type-gantt.md |
| Korrelation oder Verteilung von zwei Variablen; Blasen- (drei Variablen) und Beeswarm-Varianten (eine Variable, Punkt pro Element) | Streudiagramm | type-scatter.md |
| End-to-End-Datenstack auf einem Container-Cluster | High-Level | type-high-level.md |
| Multi-Akteur-Sequenzprozess mit Datenübergaben | Prozess | type-process.md |
| Mehrstufige Datenspeicherung mit Qualitätsstufen und Zugriffsrichtlinien | Medaillon | type-medallion.md |
| Rollenbezogener Datenfluss: wer tut was bei jedem Pipeline-Schritt | Datenfluss | type-data-flow.md |
| Integrationstopologie einer Datenplattform – Quellen → Kern → Verbraucher | DP-Integration | type-dp-integration.md |
| Pro-Rolle/Pro-Komponente Zugriffsberechtigungsmatrix | DP-Sicherheitsmatrix | type-dp-security-matrix.md |
| Eine Menge, die sich über Phasen aufteilt und wieder vereint, Bandbreite = Menge | Sankey | type-sankey.md |
| Ursachen einer beobachteten Wirkung, gruppiert nach Kategorie (Ursachenanalyse) | Fischgrät | type-fishbone.md |
| Wertschöpfungskette gegen Evolution – was zu bauen, zu kaufen und was sich bewegt | Wardley-Karte | type-wardley.md |
| Work-in-Progress nach Status, mit WIP-Limits und blockierten Elementen | Kanban | type-kanban.md |
| Was eine Person in Phasen einer Erfahrung tut und wie es sich anfühlt | User Journey | type-journey.md |
| Was der Kunde tut vs. was der Dienst verbirgt, über Phasen hinweg, mit einer Sichtbarkeitslinie | Service Blueprint | type-service-blueprint.md |
| Wo Software läuft – Zonen, Hosts, Artefakte, Replikate, Ports | Bereitstellung | type-deployment.md |
| Was von was abhängt, mit Fan-In und Zyklen, die ein Baum nicht ausdrücken kann | Abhängigkeitsgraph | type-dependency.md |
| Klassen mit Operationen, Vererbung, Komposition (andere UML-Pfade woanders) | UML-Klasse | type-uml-class.md |
| Narratives Rückgrat, auf Releases aufgeteilt, mit der Schnittlinie | Story Map | type-story-map.md |
| Physische Tabellen: SQL-Typen, Constraints, Indizes, Spalten-FKs | Datenbankschema | type-db-schema.md |
Faustregeln:
- Wenn eine 3-spaltige Tabelle dasselbe kommuniziert, wählen Sie die Tabelle.
- Wenn zwei Typen nützlich erscheinen, wählen Sie die dominante Achse; ein semantisches Muster kann verhaltensspezifische Primitive hinzufügen, keine zweite Layout-Grammatik.
- Wenn Sie über dem Komplexitätsbudget (§7) liegen, teilen Sie es in eine Übersicht und Details auf.
Laden Sie immer die im Leitfaden verlinkte gewählte Typreferenz, bevor Sie zeichnen. Wenn Sie oben weitergeleitet wurden, laden Sie auch semantic-patterns.md; wenn Animation gewählt wurde, laden Sie animation.md.
Vor dem Zeichnen bestätigen
Geben Sie vor dem Rendern den Plan in einer kurzen Nachricht an: den gewählten visuellen Typ (und das semantische Muster, falls weitergeleitet), die Größenvorgabe und alles, was das Komplexitätsbudget (§7) ausschließt. Wenn der Benutzer erreichbar ist, lassen Sie ihn umleiten, bevor Sie zeichnen; wenn nicht, fahren Sie fort und notieren Sie die Annahmen neben dem Ergebnis. Überspringen Sie die Pause nur, wenn die Anfrage Typ, Größe und Inhalt bereits genau festlegt.
4. Universelle Anti-Patterns
Diese kennzeichnen „KI-Schrott“-Schemata jeglicher Art:
| Anti-Pattern | Warum es fehlschlägt |
|---|---|
| Dunkelmodus + Cyan/Lila-Glühen | Sieht „technisch“ aus ohne Designentscheidungen |
| JetBrains Mono als pauschale „Dev“-Schriftart | Mono ist für technische Inhalte – Ports, Befehle, URLs. Namen kommen in Geist sans. |
| Identische Boxen für jeden Knoten | Löscht die Hierarchie |
| Legende schwebt im Diagrammbereich | Kollidiert mit Knoten |
| Pfeilbeschriftungen ohne Maskierungs-Rechteck | Blut durch die Linie |
Vertikaler writing-mode-Text auf Pfeilen | Unlesbar |
| 3 gleich breite Zusammenfassungskarten als Standard | Generisches Raster – variieren Sie die Breiten |
| Schatten auf jedem Element | Schatten sind raus. Ränder sind drin. |
rounded-2xl auf Boxen | Maximaler Radius 6–10px oder keiner |
| Koralle auf jedem „wichtigen“ Knoten | Koralle ist 1–2 redaktionelle Akzente, kein Signalsystem |
| Nachbildung des Renderer-Layouts von Mermaid | Importiert automatischen Abstand und Routing, anstatt ein redaktionelles Layout zu erstellen |
| Jegliche Verletzung der sechs §6-Verbinderregeln | Automatischer Fehler: diagonale Schrägen, Labels, die ihren Strich berühren, Masken, die von einem späteren Knoten beschnitten werden, überlappende Pfade, geteilte Anschlusspunkte, Transit hinter einer Nicht-Endpunkt-Box |
Typspezifische Anti-Patterns befinden sich in jeder im Leitfaden verlinkten Typreferenz.
5. Designsystem
Das Designsystem ist anpassbar. references/style-guide.md ist die einzige Quelle der Wahrheit für Farben, Typografie, Tokens und die Standardpalette; diese Datei benennt semantische Rollen (paper, ink, muted, accent, link, …). Um eine Marke anzuwenden, bearbeiten Sie style-guide.md oder führen Sie den URL-basierten Ablauf in references/onboarding.md aus.
Wenn Spezifikationen unten oder in Typreferenzen „ink“, „accent“, „muted“ usw. erwähnen, schlagen Sie den aktuellen Hex-Wert in
style-guide.mdnach.
Typreferenz-Ausschnitte schreiben Rollen als Platzhalter: {ink}, {ink @ 0.40} für eine Rolle mit einer Deckkraft, und {node-name}, {sublabel}, {eyebrow}, {arrow-label}, {title}, {callout} für Schriften. Lösen Sie jeden Platzhalter gegen style-guide.md auf, bevor Sie ausgeben.
…
[gekürzt für die Übersetzung]