Diagramm-Design
Erstelle Diagramme als eigenständige HTML-Dateien mit Inline-SVG und einem redaktionellen Designsystem.
Fünfundvierzig visuelle Typen. Semantische Muster beschreiben Verhalten; Typreferenzen beschreiben das Layout.
0. Ersteinrichtung – Styleguide-Schleuse
Bevor du das erste Diagramm in einem neuen Projekt generierst, überprüfe, ob das Styleguide angepasst wurde.
Versende nicht stillschweigend Diagramme mit Standard-Skin in ein gebrandetes Projekt.
Löse zuerst einen etwaigen .diagram-design-Marker des Projekts gemäß references/profiles.md auf. Ein erfolgreich aufgelöster Marker wählt sein Profil aus und umgeht diese Schleuse. Diese Referenz verwaltet Fehler, das geschützte Standardprofil und das Speicherverhalten.
Öffne references/style-guide.md und überprüfe die Standard-Tokens. Wenn es sich noch um die ausgelieferten Standardwerte handelt (Papier #f5f5f5, Tinte #2d3142, Akzent #bf4520), pausiere und frage den Benutzer:
„Dies ist dein erstes Diagramm in diesem Projekt und das Styleguide hat noch die Standardwerte. Jetzt anpassen? Optionen: (a) Website-URL, (b) installierte Fertigkeit, (c) lokaler Ordner/Designsystem, (d) Tokens einfügen, (e) Standard beibehalten, (f) gespeichertes Profil laden.“
Verzweige dann gemäß dem entsprechenden Abschnitt von references/onboarding.md; für (f) folge references/profiles.md.
Sobald das Styleguide angepasst wurde (oder der Benutzer explizit die Standardwerte gewählt hat), überspringe diese Schleuse bei späteren Durchläufen. Ein führender Profilkopfzeile benennt das kopierte aktive Profil. Ohne Kopfzeile bedeuten alle von den ausgelieferten Standardwerten abweichenden semantischen Rollenwerte oder Schriftfamilien angepasst-ungespeichert: Überspringe die Schleuse und biete an, es als Profil zu speichern. Nur Standard-Tokens ohne Marker/Kopfzeile lösen die Schleuse aus. Nach dem Onboarding biete an, es als benanntes Kundenprofil gemäß references/profiles.md zu speichern.
1. Philosophie
Der hochwertigste Zug ist meist das Löschen.
Angewandt auf Schemata:
- Jeder Knoten repräsentiert eine eigenständige Idee. Zwei Knoten, die immer zusammen auftreten, sind ein Knoten.
- Jede Verbindung trägt Information. Wenn die Beziehung aus dem Layout offensichtlich ist, entferne die Linie.
- Koralle ist redaktionell, kein Signal. 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 eine Anleitung braucht. Bei mehr als 9 Knoten sind es wahrscheinlich zwei Diagramme.
2. Wann verwenden
Verwende 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 Klartext-Tool wie wiretext. Diese Fertigkeit liefert keines mit.
- Aufzählungen von Dingen → Tabelle oder Aufzählungsliste.
- Attribut-only Vorher/Nachher → Tabelle; Topologieänderungen → Architektur-Delta.
- Ein-Form-„Diagramme“ → schreibe einfach den Satz.
Frage vor dem Zeichnen: Würde der Leser aus diesem mehr lernen als aus einem gut geschriebenen Absatz? Wenn nein, zeichne nicht.
3. Auswahl: Semantisches Muster, dann visueller Typ
Wenn Verhalten, Zustand, Durchsetzung oder Risiko die Bedeutung tragen, lade zuerst references/semantic-patterns.md und wähle ein primäres Muster. Wähle dann den nächstgelegenen visuellen Typ für das Layout. Wenn kein Muster passt, wähle 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-/Ausgabeplätze über Phasen hinweg | Stufenframework mit semantischen Plätzen → Prozess |
| Konversation oder lockere Eingabe wird zu einem strukturierten dauerhaften Artefakt | Unstrukturierte Eingabe → strukturiertes Artefakt → Datenfluss |
| Zwei Regelnachverfolgungen benötigen Bestanden/Nicht bestanden/Übersprungen/Nicht erreicht und erste Abweichung | Gepaarte Policy-Evaluierungsnachverfolgungen → Flussdiagramm |
| Vertrauensgrenzen plus erlaubte/verbotene Eintritts- oder Bereitstellungspfade | Sicherer befestigter Weg → Architektur |
| Kontrollen gruppiert nach dem Ort ihrer Durchsetzung | Governance-/Kontrollkatalog → Schichtenstapel |
| Abwehrmaßnahmen kompensieren vorherige Lücken und Restrisiko pflanzt sich fort | Kompensierende Sicherheitsschichten → Schichtenstapel |
| Hierarchische, ID-adressierbare Zerlegung mit block-spezifischem I/O, Einschränkungen und einem Code-Link | Nachverfolgbare Blockzerlegung → Baum |
| Ein Subjekt durchläuft Phasen, wartet, wiederholt, bricht ab und erreicht terminale Ergebnisse | Lebenszyklus-Phasenkarte → Zustandsautomat |
Das Muster besitzt die semantischen Primitive und sein engeres Budget; der Typ besitzt die Layout-Grammatik. Verwende references/animation.md nur, wenn Bewegung angefordert wird oder zeitliche Abläufe wesentlich klärt; statisch bleibt der Standard.
Visueller Typen-Leitfaden (45)
| Wenn du zeigst… | Verwende | Referenz |
|---|---|---|
| Komponenten + Verbindungen in einer Momentaufnahme; verschachtelte Verwaltungs- vs. Verkehrsbereiche | Architektur | type-architecture.md |
| Strukturelle Änderung zwischen synchronisierten Vorher-/Nachher-Topologien mit einem Änderungsjournal | 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 |
| Zeitgeordnete Nachrichten zwischen Akteuren | Sequenzdiagramm | type-sequence.md |
| Zustände + Übergänge + Wächter | Zustandsautomat | type-state.md |
| Entitäten + Felder + Beziehungen | ER / Datenmodell | type-er.md |
| Ereignisse zeitlich positioniert | Zeitleiste | type-timeline.md |
| Funktionsübergreifender Prozess mit Übergaben | Swimlane | type-swimlane.md |
| Zwei-Achsen-Positionierung / Priorisierung | Quadrant | type-quadrant.md |
| Mehrere Entitäten bewertet über 3–5 quantitative Kriterien | 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 Enthaltensein / Geltungsbereich | Verschachtelt | type-nested.md |
| Eltern → Kind-Beziehungen | Baum | type-tree.md |
| Mensch-/Agenten-/Team-Eigentum, Berichtslinien, Routing, Eskalation | Organigramm | type-org-chart.md |
| Gestapelte Abstraktionsebenen | Schichtenstapel | type-layers.md |
| Teile eines Objekts entlang einer Achse auseinandergezogen: eine Demontage, ein Auspacken, Montagereihenfolge | Explodierte axonometrische Ansicht | type-exploded.md |
| Eine Etage oder ein Gelände schräg von oben gesehen: Räume mit Möbeln, Gebäude nach Phase | Axonometrischer Plan | type-axonometric-plan.md |
| Überschneidung zwischen Mengen | Venn | type-venn.md |
| Ranghierarchie oder Konversionsabfall | Pyramide / Trichter | type-pyramid.md |
| Quantitativer Vergleich über Kategorien hinweg | Balkendiagramm | type-bar.md |
| Ein Startwert, der durch positive und negative Beiträge mit einem Endwert verbunden ist (Budgetbrücke, Personalbestandsdeltas) | Wasserfall | type-waterfall.md |
| Teil des Ganzen, bei dem die relativen Größen die Geschichte erzählen | Treemap | type-treemap.md |
| Kreuztabellierte Daten; Füllung kodiert den Wert pro Zelle | Heatmap | type-heatmap.md |
| Kontinuierliche Trends über die Zeit, Änderung zwischen genau zwei Zuständen (Steigungsdiagramm), eine Verteilung pro Reihe (Kammdiagramm) oder Rangverschiebung über mehrere Schnappschüsse (Buckeldiagramm) | Liniendiagramm | type-line.md |
| Aufgaben und Phasen auf einer Zeitleiste | Gantt | type-gantt.md |
| Korrelation oder Verteilung von zwei Variablen; Blasen (drei Variablen), Bienenschwarm (eine Variable, Punkt pro Element) und Boxplot (Fünf-Zahlen-Zusammenfassung pro Gruppe) Varianten | Streudiagramm | type-scatter.md |
| End-to-End-Datenstapel auf einem Container-Cluster | High-Level | type-high-level.md |
| Sequentieller Prozess mit mehreren Akteuren und Datenübergaben | Prozess | type-process.md |
| Mehrstufige Datenspeicherung mit Qualitätsstufen und Zugriffsrichtlinien | Medaillon | type-medallion.md |
| Rollenspezifischer Datenfluss: wer macht 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 Stufen 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 bauen, kaufen und was sich bewegt | Wardley-Karte | type-wardley.md |
| In Arbeit nach Zustand, mit WIP-Limits und blockierten Elementen | Kanban | type-kanban.md |
| Was eine Person in den 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, aufgeteilt in Releases, mit der Schnittlinie | Story-Map | type-story-map.md |
| Physische Tabellen: SQL-Typen, Constraints, Indizes, spaltenbezogene FKs | Datenbankschema | type-db-schema.md |
Faustregeln:
- Wenn eine 3-spaltige Tabelle dasselbe vermittelt, wähle die Tabelle.
- Wenn zwei Typen nützlich erscheinen, wähle die dominante Achse; ein semantisches Muster kann verhaltensspezifische Primitive hinzufügen, nicht eine zweite Layout-Grammatik.
- Wenn du über dem Komplexitätsbudget (§7) liegst, teile in einen Überblick und ein Detail auf.
Lade immer die gewählte Typreferenz, die im Leitfaden verlinkt ist, bevor du zeichnest. Wenn oben weitergeleitet, lade auch semantic-patterns.md; wenn Animation gewählt wurde, lade animation.md.
Vor dem Zeichnen bestätigen
Gib vor dem Rendern den Plan in einer kurzen Nachricht an: den gewählten visuellen Typ (und das semantische Muster, falls weitergeleitet), die Größenvoreinstellung und alles, was das Komplexitätsbudget (§7) ausschließen wird. Wenn der Benutzer erreichbar ist, lass ihn umleiten, bevor du zeichnest; wenn nicht, fahre fort und notiere die Annahmen neben dem Ergebnis. Überspringe die Pause nur, wenn die Anfrage bereits Typ, Größe und Inhalt genau festlegt.
4. Universelle Anti-Patterns
Diese kennzeichnen „KI-Schrott“-Schemata jeglichen Typs:
| Anti-Pattern | Warum es scheitert |
|---|---|
| Dunkelmodus + Cyan/Lila-Glow | Sieht „technisch“ aus ohne Designentscheidungen |
| JetBrains Mono als pauschale „Dev“-Schriftart | Mono ist für technischen Inhalt – Ports, Befehle, URLs. Namen gehören in Geist Sans. |
| Identische Boxen für jeden Knoten | Löscht die Hierarchie |
| Legende schwebend innerhalb des Diagrammbereichs | Überschneidet sich mit Knoten |
| Pfeilbeschriftungen ohne Maskierungsrechteck | Blut durch die Linie |
Vertikaler writing-mode-Text auf Pfeilen | Unlesbar |
| 3 gleich breite Zusammenfassungskarten als Standard | Generisches Raster – variiere die Breiten |
| Schatten auf irgendeinem Element | Schatten sind out. Rahmen sind in. |
rounded-2xl auf Boxen | Maximaler Radius 6–10px oder gar keiner |
| Koralle auf jedem „wichtigen“ Knoten | Koralle ist 1–2 redaktionelle Akzente, kein Signalsystem |
| Nachbildung des Mermaid-Renderer-Layouts | Importiert automatische Abstände und Routing anstatt ein redaktionelles Layout zu erstellen |
| Jeder Verstoß der sechs §6-Verbindungsregeln | Automatischer Fehler: diagonale Schrägen, Beschriftungen berühren ihre Linie, Masken werden von einem späteren Knoten abgeschnitten, überlappende Pfade, gemeinsame Befestigungspunkte, Durchgang 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 alleinige 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, bearbeite style-guide.md oder führe den URL-basierten Ablauf in references/onboarding.md aus.
Wenn Spezifikationen unten oder in Typreferenzen „ink“, „accent“, „muted“ usw. erwähnen, suche den aktuellen Hex-Wert in
style-guide.mdnach.
Typreferenz-Auszüge 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 Schriftarten. Löse jeden Platzhalter gegen style-guide.md auf, bevor du etwas ausgibst.
Semantische Rollen (auf einen Blick)
| Rolle | Zweck |
|---|---|
paper, paper-2 | Seitenhintergrund und Containerhintergrund |
ink | Primärtext / Strich |
muted, soft | Sekundärtext |
...