Diagramm-Gestalter

Was macht Diagramm-Gestalter?

Erstelle Diagramme als Artefakte, nicht als Prosa. Wähle einen Ausgabemodus:

• clean-svg: pädagogische Konzepte, physikalische Systeme, Prozesse, Lebenszyklus, einfacher Datenfluss.
• architecture-svg: Software-/Cloud-/Infrastruktur-Topologie, Dienste, Datenbanken, Warteschlangen, Vertrauenszonen.
• excalidraw: bearbeitbares handgezeichnetes Whiteboard, Flussdiagramm, Sequenz, Architekturskizze.

Routing

• Benutzer wünscht bearbeitbar/kollaborativ: wähle Excalidraw.
• Benutzer wünscht polierte eigenständige Browser-Ausgabe: wähle SVG/HTML.
• Softwarearchitektur mit Infrastrukturkomponenten: wähle Architecture-SVG.
• Wissenschaft, Produkt, Prozess, Konzeptkarte, physisches Objekt: wähle Clean-SVG.
• Unsicher: Stelle nur eine kurze Frage, wenn das Ausgabeformat relevant ist; andernfalls wähle Clean-SVG.

Arbeitsablauf

1. Extrahiere Knoten, Gruppen, Labels und gerichtete Beziehungen.
2. Wähle zuerst ein Layout: links-nach-rechts, top-down, Hub-Spoke, Swimlanes, geschichteter Stapel, Sequenz.
3. Halte Labels kurz. Bevorzuge 5–9 Hauptelemente gegenüber dichten Diagrammen.
4. Erzeuge die Datei unter dem angeforderten Pfad, oder ./diagram.html / ./diagram.excalidraw.
5. Überprüfe die Syntax durch Öffnen/Parsen, sofern möglich.

SVG/HTML-Regeln

• Einzelne eigenständige .html-Datei mit inline CSS und inline SVG.
• Keine externen Schriftarten, JS, Bilder, Verläufe, Glühen, dekorative Kleckse oder entfernte Ressourcen.
• Verwende semantische Farben, keine Regenbogen-Sequenzen: neutral, Eingabe, Verarbeitung, Speicher, extern, Risiko.
• Zeichne Verbindungen vor Knoten, damit Pfeile hinter Boxen liegen.
• Jeder Verbindungspfad hat fill="none" und einen Marker-Pfeil, wenn er gerichtet ist.
• Lasse 24px Textabstand innerhalb der Boxen; Text darf nicht die Ränder berühren.
• Legende nur, wenn Symbole/Farben nicht offensichtlich sind.

SVG-Vorlage

Verwende references/svg-template.md als Hülle und ersetze <!-- SVG -->.

Excalidraw-Regeln

• Speichere .excalidraw-JSON mit type, version, source, elements und appState.
• Verwende gebundenen Text für Form-Labels. Verwende keine nicht standardmäßige label-Eigenschaft.
• Setze gebundenen Text unmittelbar nach seinem Container im Elements-Array.
• Minimale beschriftete Form: 120×60. Minimaler Haupttext: 16px.
• Verwende Rauheit 1, fontFamily: 1 und einfache Füllungen.

Für genaue Excalidraw-Element-Ausschnitte lese references/excalidraw-patterns.md.