Diagram Design

Dieser Skill hilft Lösungsarchitekten, Ingenieuren und technischen Redakteuren, innerhalb weniger Sekunden professionelle Diagramme im Erscheinungsbild ihrer Marke zu erstellen. Er unterstützt 39 Diagrammtypen, von Datenmodellen und Bereitstellungsarchitekturen bis zu Wardley Maps und User-Journey-Abläufen. Jedes Diagramm wird als optimierte, eigenständige HTML-Datei mit eingebettetem SVG und CSS ausgegeben und benötigt keine externen Abhängigkeiten.

Highlights

• Extrahiert Markenparameter automatisch aus deiner Website oder deinem lokalen Designsystem
• Unterstützt 39 Diagrammtypen, darunter Ablaufdiagramme, Sequenzdiagramme, Zustandsautomaten, ER-Modelle, Gantt-, Sankey- und UML-Klassendiagramme
• Zeichnet bestehende draw.io- und Mermaid-Dateien in individuellen Größen und Detailstufen neu
• Setzt redaktionelle Qualitätsstandards für geringe Knotendichte, eindeutige Beschriftungen und vollständige Barrierefreiheit durch
• Gibt für Web, Druck und Dokumentation optimierte HTML-Diagramme als einzelne Dateien aus
• Unterstützt helle und dunkle Designs sowie optional einen skizzenhaften oder terminalähnlichen Stil

Das System priorisiert Klarheit durch konsequente Vereinfachung – jedes Element muss einen erkennbaren Zweck erfüllen. Es erzwingt die Ausrichtung an einem verbindlichen 4-Pixel-Raster und nutzt sechs Verbindungsregeln, um visuelle Mehrdeutigkeit zu vermeiden. Überschreitet die Komplexität festgelegte Grenzen, werden Diagramme automatisch in Übersichts- und Detailansichten aufgeteilt. Geeignet für Systemarchitekten, Produktteams und technische Dokumentationsabläufe, die schnell markengerechte visuelle Inhalte ohne externe Werkzeuge erstellen möchten.