Redaktionelles Diagrammdesign
Erstelle saubere, publikationsreife Diagramme als einzelne, eigenständige HTML-Dateien (inline SVG + CSS). Verwende niemals generische dunkel-cyan Glüheffekte, Standard-Mermaid-Layouts oder diagonale Verbindungslinien.
Visuelle DNA & Farbpalette
- Papier (Hintergrund):
#f5f5f5(flache Leinwand). - Tinte (Text & dominante Striche):
#2d3142. - Dezent (Sekundärtext & Standardlinien):
#4f5d75. - Rahmen & Trennlinien:
rgba(45, 49, 66, 0.12). - Akzent (Engpässe / kritischer Fokus):
#eb6c36(korallen/terrakotta; max. 1–2 Fokusknoten pro Diagramm). - Extern / lose Grenzen: Gestrichelte Linie (
stroke-dasharray="4,4").
Typografie (Google Fonts)
Im HTML-Header einbetten:
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
- Diagrammtitel:
Instrument Serif, 28px, normale Stärke. - Knotennamen:
Geist(serifenlos), 12px, Gewicht 600. - Unterbeschriftungen & Metadaten:
Geist Mono, 9px (Ports, Protokolle, Batch-Intervalle). - Verbinder-Badges / Überkopftexte:
Geist Mono, 7–8px, Großbuchstaben, gesperrt (letter-spacing: 0.08em).
SVG-Geometrie & Layout-Standards
- 4px-Raster-Disziplin: Alle Koordinaten (
x,y), Maße (width,height), Abstände und Lücken müssen Vielfache von 4 sein. - Nur orthogonale Verbinder: Zeichne niemals diagonale schräge Linien zwischen nicht achsenausgerichteten Knoten. Jeder Knick muss ein rechtwinkliger Ellenbogen mit abgerundeter Ecke (
r=8) sein. Reservegerade <line>strikt für Knoten, die identische Achsen teilen. - Maskierte Verbinder-Badges: Platziere Protokoll-/Datenbeschriftungen (z. B.
CSV,XLSX,LOAD) in einem undurchsichtigen<rect>gefüllt mit#f5f5f5(rx=2). Halte einen sichtbaren Abstand von 6px–10px zum Linienstrich ein, sodass die Beschriftung niemals den Pfeil durchschneidet. - Zonen & funktionale Container: Gruppiere Schritte in breiten Spalten/Bereichen (z. B.
COLLECTION,PROCESSING,DISSEMINATION). Verwende einen 1px Rahmen (rgba(45,49,66,0.12)), abgerundete Ecken (rx=8) und einen Großbuchstaben-Mono-Titel-Tab oben links. - Knotenhierarchie:
- Standard:
#ffffff-Füllung, 1px#2d3142-Strich, 6px Radius (rx=6). - Engpass / Schmerzpunkt:
#fbeee8-Füllung (rgba(235,108,54,0.08)),#eb6c36-Strich. - Extern: Transparente oder weiße Füllung, gestrichelter Rahmen (
stroke-dasharray="4,4").
- Standard:
- Horizontale untere Legende: Platziere einen horizontalen Legendenstreifen unterhalb der Diagrammknoten, getrennt durch eine vollbreite haarfeine Linie.
Strukturelle SVG-Vorlage
Lade references/template.md, bevor du das SVG schreibst (Marker, Zonen, Verbinder, maskierter Badge, Knotenbox).