SkillArchitecture Diagrammer
Verwandelt eine Klartext-Spezifikation aus Komponenten und Verbindungen in ein validiertes SVG-Architekturdiagramm — mit einem Bericht, der unbekannte Kanten verwirft, doppelte IDs ablehnt und isolierte Komponenten sowie Zyklen benennt.
Funktioniert mit: Claude Code, Codex, Cursor, Muse · Version 1.0.0 · Du brauchst: Eine Architekturspezifikation (spec.txt: [components] id: Label | Typ, [connections] a -> b: Label).
Diesen Skill mit Premium holen Pläne ansehen
Vorschau
Beispielergebnis
Ein Beispiel dafür, was dieser Skill produziert. Beispielinhalt, zur Veranschaulichung gezeigt.
Architecture Diagrammer report — sample Diagram report: Shop API Components: 5 | Edges drawn: 5 | Columns: 4 Components: Web App (client, column 0); API Server (service, column 1); Redis Cache (cache, column 2); Job Worker (service, column 2); Postgres (database, column 3). Edges: Web App -> API Server: HTTPS; API Server -> Redis Cache: GET; API Server -> Postgres: SQL; API Server -> Job Worker: Enqueue; Job Worker -> Postgres: SQL. Errors: none. Warnings: none. Messy draft check: 5 components, 3 edges drawn, 2 errors (duplicate api id; edge to unknown ghost dropped), 4 warnings (unknown type, 2 orphans, cycle api -> db -> api).
Das bekommst du
- Ein validiertes SVG-Diagramm: Abhängigkeitsspalten, beschriftete Pfeile, Zyklen unten herumgeführt
- Ein Diagrammbericht: Komponenten- und Kantentabellen plus alle Fehler und Warnungen
- Validierung vor dem Zeichnen: verwirft unbekannte Kanten und lehnt doppelte IDs ab
- Ein Spezifikationsformat, das du neben dem erzeugten Diagramm versionieren kannst
Über diesen Skill
Liest eine Klartext-Spezifikation ([components] mit ID, Label und Typ; [connections] mit beschrifteten Pfeilen) und erzeugt ein SVG-Diagramm in Abhängigkeitsspalten plus ein diagram-report.md: Komponenten- und Kantentabellen, eine Spalte pro Komponente sowie alle Fehler und Warnungen. Eine Verbindung zu einer unbekannten Komponente wird verworfen, nie zu einer erfundenen Box gezeichnet; eine doppelte ID behält ihre erste Definition; isolierte Komponenten und Zyklen werden gemeldet, nicht verborgen. Nur lokal, nur Standardbibliothek; das Diagramm zeigt nur, was die Spezifikation aufführt — nichts wird zur Vervollständigung erschlossen.
Ausprobieren
Zeichne das Architekturdiagramm für meine Shop API aus dieser Spezifikation.Gut geeignet für
- Ein System für ein README, ein Dokument oder ein PR-Review dokumentieren
- Eine handgeschriebene Architekturskizze vor dem Teilen prüfen
- Ein Diagramm ehrlich halten: Nur Gezeichnetes wird gezeichnet
Nicht geeignet für
- Ein Diagramm aus einer Codebasis rückwärts erzeugen — die Spezifikation schreibst du selbst
- Fehlende Komponenten, Speicher oder Verbindungen erfinden, um das Bild zu vervollständigen
- Beweisen, dass eine Architektur korrekt ist — ein sauberer Bericht heißt nur, dass sie zur Spezifikation passt, nicht zur Realität
Installation
- Kopiere den Installations-Prompt in deinen Agenten:
Read https://skillu.dev/install/agent.md, then install the Architecture Diagrammer skill (architecture-diagrammer). - Oder lade das Skill-Paket nach dem Start von dieser Seite herunter und lege seinen Ordner in das Skills-Verzeichnis deines Agenten.
- Rufe ihn per Slash-Befehl auf, z. B.
/architecture-diagrammer, und beschreibe in einfachen Worten, was du willst.
Häufige Fragen
Was passiert bei einem Fehler in meiner Spezifikation?
Das Diagramm wird trotzdem aus den gültigen Teilen erzeugt, und der Bericht listet alle Fehler und Warnungen: Unbekannte Kanten werden verworfen, doppelte IDs behalten ihre erste Definition, isolierte Komponenten und Zyklen werden benannt. Spezifikation korrigieren und erneut ausführen.
Zeichnet es etwas, das ich nicht aufgeführt habe?
Nein. Nur Komponenten und Kanten aus deiner Spezifikation erscheinen. Ein fehlender Cache oder Fallback-Pfad ist eine Lücke in der Spezifikation, die du beheben musst — die Skill füllt sie nicht auf.