In den eigenen Worten des Skills
Ein Skill zum Erstellen, Bearbeiten und Validieren von draw.io-Diagrammdateien (.drawio, .drawio.svg, .drawio.png) durch Generierung korrekter mxGraph-XML. Es behandelt Flussdiagramme, Systemarchitekturen, Sequenzdiagramme, ER-Diagramme und UML-Klassendiagramme über Vorlagen in assets/templates/, während Netzwerktopologien, BPMN und Mindmaps auf Shape-Bibliotheken oder manuelle Arbeit zurückfallen.
Der Agent erhält einen sechsstufigen Workflow, eine semantische Farbpalette mit einsatzbereiten Style-Strings, eine Validierungscheckliste vor der Auslieferung und optionale Python-Skripte (validate-drawio.py, add-shape.py). Es richtet sich an Agenten, die in einem Repository arbeiten, in dem Diagramme neben dem Code liegen, den sie dokumentieren, und generierte Dateien sollen sofort in der VS-Code-Erweiterung hediet.vscode-drawio geöffnet werden können.
Was er erzeugt
- Die .drawio-Datei selbst, geschrieben an den angeforderten Pfad.
- Eine Ein-Satz-Zusammenfassung dessen, was das Diagramm zeigt.
- Validierungsstatus, der angibt, ob das Validierungsskript ausgeführt wurde und bestanden hat.
- Bearbeitungshinweise für den Fall, dass Sie das Diagramm wahrscheinlich anpassen: Klicken Sie auf eine Form, um sie auszuwählen, doppelklicken Sie, um die Beschriftung zu bearbeiten, ziehen Sie, um sie neu zu positionieren.
So funktioniert es
- 01Die Anfrage präzisieren
Der Workflow beginnt damit, Diagrammtyp, Entitäten oder Akteure, Beziehungen, Ausgabepfad und ob die Datei neu ist oder bearbeitet wird, festzulegen.
- 02Eine Vorlage oder das minimale Grundgerüst wiederverwenden
Wenn der Diagrammtyp einer Vorlage unter assets/templates/ entspricht, kopieren Sie diese Struktur und ersetzen Sie die Platzhalterwerte; für neuartige Layouts beginnen Sie mit dem minimal gültigen mxfile-Grundgerüst mit den zwei Root-Zellen.
- 03Das Layout planen, bevor Sie XML schreiben
Skizzieren Sie zunächst Zeilen oder Ebenen und platzieren Sie die Formen dann im Raster – 40–60 px horizontaler Abstand zwischen Formen in derselben Zeile, 80–120 px zwischen den Ebenenzeilen, auf einer Standard-A4-Querformat-Leinwand von 1169 x 827 px.
- 04Die mxGraph-XML generieren
Schreiben Sie Vertex- und Edge-Zellen mit eindeutigen IDs und übereinstimmenden Parent-Referenzen, und maskieren Sie XML-Sonderzeichen in Labels, damit die Datei wohlgeformt bleibt.
- 05Stile aus der Palette anwenden
Style-Strings stammen aus einer festen semantischen Palette – primary/info #dae8fc mit #6c8ebf, warning/decision #fff2cc mit #d6b656, error/end #f8cecc mit #b85450 –, damit derselbe Zweck im gesamten Projekt dieselbe Farbe behält.
- 06Speichern, validieren, übergeben
Schreiben Sie die Datei unter dem angeforderten Pfad mit der Endung .drawio, führen Sie optional den Validator aus und erklären Sie dem Nutzer anschließend, wie er sie öffnen kann, mit einer Zusammenfassung des Diagramminhalts.