draw-io

Überblick über das draw-io Skill

Das draw-io Skill ist ein fokussierter Workflow, um .drawio-Diagramme als XML zu erstellen, zu bearbeiten und zu prüfen und sie anschließend als .drawio.png für Doku oder Slides zu exportieren. Es eignet sich besonders für Entwickler, Technical Writer, Solution Architects und AI-Nutzer, die Diagramme wiederholbar aktualisieren möchten, ohne sich jedes Mal manuell durch die draw.io-Oberfläche zu klicken.

Wofür draw-io am besten geeignet ist

Dieses draw-io skill spielt seine Stärken vor allem aus, wenn Sie:

• bestehende .drawio-Dateien sicher bearbeiten möchten
• präzise Layout-Anpassungen über XML-Koordinaten vornehmen müssen
• Diagrammstandards wie Schrift-Einstellungen durchsetzen wollen
• hochauflösende PNGs mit transparentem Hintergrund erzeugen möchten
• AWS-Architektur-Icons mit den korrekten mxgraph.aws4.*-Bezeichnern verwenden müssen

Die eigentliche Aufgabe, die draw-io löst

Die meisten Nutzer brauchen nicht abstrakt gesprochen „Diagrammgenerierung“. Sie brauchen einen Agenten, der Architekturdiagramme zuverlässig aktualisiert, das Styling konsistent hält und exportfertige Assets erzeugt, die in eine Dokumentations-Pipeline passen. draw-io ist hier nützlich, weil daraus ein konkreter Workflow wird statt eines vagen Prompts.

Was draw-io von einem generischen Prompt unterscheidet

Ein normaler Prompt kann vielleicht eine Diagrammidee liefern. Dieses Skill ergänzt dafür praktische Betriebsregeln:

• .drawio-XML bearbeiten, nicht das generierte .drawio.png
• PNGs mit bekannten CLI-Einstellungen exportieren
• explizite font-family-Einstellungen für Slide-Kompatibilität setzen
• Layout-Hinweisen für Gruppierung, Flussrichtung und Lesbarkeit folgen
• AWS-Icons aus einer lokalen Referenz nachschlagen, statt Icon-Namen zu erraten

Wer draw-io wahrscheinlich installieren sollte

Installieren Sie draw-io, wenn Sie bereits mit draw.io-Dateien in Git arbeiten, Docs oder Slides aus Quellformaten erzeugen oder Architekturdiagramme programmgesteuert aktualisieren müssen. Wenn Sie nur einmalig in einer GUI ein visuelles Brainstorming machen wollen, ist das wahrscheinlich mehr Prozess, als Sie brauchen.

So verwenden Sie das draw-io Skill

Das draw-io Skill installieren

Verwenden Sie Ihren Skill-Manager, um es aus dem Repository hinzuzufügen:

npx skills add softaworks/agent-toolkit --skill draw-io

Wenn Ihre Umgebung einen anderen Installer nutzt, ist vor allem der Skill-Pfad skills/draw-io in softaworks/agent-toolkit entscheidend.

Lokale Voraussetzungen für draw-io prüfen

Bevor Sie sich auf draw-io install verlassen, prüfen Sie, ob Ihre Umgebung Folgendes mitbringt:

• eine verfügbare drawio-CLI für den Export
• bash für das Konvertierungsskript
• git, falls generierte PNGs automatisch gestaged werden sollen
• optional mise und pre-commit, wenn Ihr Repository so arbeitet

Das mitgelieferte Konvertierungsskript ruft Folgendes auf:

drawio -x -f png -s 2 -t -o output.drawio.png input.drawio

Das bedeutet: Export-Modus, PNG-Format, 2x-Skalierung, transparenter Hintergrund und ein expliziter Ausgabepfad.

Diese Dateien sollten Sie zuerst lesen

Für den schnellsten Einstieg sehen Sie sich diese Dateien in dieser Reihenfolge an:

1. skills/draw-io/SKILL.md
2. skills/draw-io/README.md
3. skills/draw-io/references/layout-guidelines.md
4. skills/draw-io/references/aws-icons.md
5. skills/draw-io/scripts/convert-drawio-to-png.sh
6. skills/draw-io/scripts/find_aws_icon.py

Diese Reihenfolge ist wichtig, weil das Skill stärker operativ als konzeptionell ist: Regeln, Layout-Konventionen und Hilfsskripte machen hier den größten Mehrwert aus.

Die zentrale Betriebsregel von draw-io zuerst verstehen

Die wichtigste Nutzungseinschränkung ist einfach:

• .drawio-Dateien bearbeiten
• .drawio.png-Dateien nicht direkt bearbeiten

Das PNG gilt als generiertes Artefakt. Wenn Ihr Repository sowohl Quelle als auch Export versioniert, sollte Ihr Agent die XML-Quelle ändern und danach das PNG neu erzeugen.

Welche Eingaben das draw-io Skill braucht

Die Qualität der draw-io usage hängt stark von den Informationen ab, die Sie liefern. Gute Eingaben enthalten in der Regel:

• den Ziel-Dateipfad
• ob Sie neu erstellen oder bearbeiten
• den Diagrammtyp: Architektur, Flowchart, sequence-artiger Ablauf usw.
• die gewünschte Leserichtung: von links nach rechts oder von oben nach unten
• benötigte Services, Nodes, Labels und Verbindungen
• eventuelle Vorgaben für Slides oder Dokumentation
• ob offizielle AWS-Icons erforderlich sind
• ob jetzt direkt ein PNG-Export gebraucht wird

Ohne diese Details muss der Agent Struktur, Abstände und Benennung erraten.

Ein grobes Ziel in einen starken draw-io Prompt verwandeln

Schwacher Prompt:

„Update our AWS diagram.“

Besserer Prompt:

„Edit assets/system.drawio. Add Amazon S3 on the left as the ingestion source, route data to AWS Lambda, then to Amazon RDS. Keep a left-to-right flow. Preserve existing group structure. Use official AWS icons, avoid crossing arrows, and regenerate assets/system.drawio.png.”

Warum das besser funktioniert:

• die Datei ist benannt
• die neuen Komponenten sind konkret angegeben
• die Flussrichtung ist festgelegt
• Icon-Treue wird ausdrücklich verlangt
• ein Layout-Ziel ist enthalten
• das Export-Artefakt wird direkt mit angefordert

draw-io für präzise Bearbeitungen nutzen, nicht nur für Neugenerierung

Dieses Skill ist besonders nützlich, wenn bereits ein Diagramm existiert und Sie gezielte Änderungen brauchen, zum Beispiel:

• einen Cluster verschieben, um Linienüberlappungen zu vermeiden
• Service-Boxen horizontal ausrichten
• ein generisches Label durch einen offiziellen AWS-Servicenamen ersetzen
• Schriftarten für Slide-Kompatibilität anpassen
• nach XML-Änderungen das PNG neu generieren

Genau hier ist direkte XML-Bearbeitung oft schneller und reproduzierbarer als manuelle Arbeit in der UI.

Schrift-Einstellungen beachten, wenn Slides wichtig sind

Wenn das Diagramm in Quarto-Slides oder in Umgebungen mit Font-Rendering-Problemen verwendet wird, empfiehlt das Skill folgende Einstellungen:

• defaultFontFamily auf mxGraphModel
• fontFamily auf einzelnen Textelementen

Im Repository wird Noto Sans JP ausdrücklich als empfohlene Schrift für Japanisch-Unterstützung genannt. Selbst wenn Sie kein Japanisch brauchen, ist die eigentliche Lehre allgemeingültig: Geben Sie Schriftarten explizit an, wenn Sie konsistente Ergebnisse über verschiedene Rechner und Export-Schritte hinweg brauchen.

Die Exportpfade verwenden, die zu Ihrem Repository passen

Das Skill unterstützt mehrere Wege, PNGs zu exportieren:

• alle Dateien per pre-commit: mise exec -- pre-commit run --all-files
• eine Datei per pre-commit: mise exec -- pre-commit run convert-drawio-to-png --files assets/my-diagram.drawio
• direkte Skript-Nutzung: bash ~/.claude/skills/draw-io/scripts/convert-drawio-to-png.sh assets/diagram1.drawio

Wählen Sie den Weg passend zu Ihrem Repo-Workflow. Wenn Ihr Projekt bereits pre-commit nutzt, nehmen Sie diesen Pfad. Wenn Sie nur einmal lokal exportieren wollen, ist das Skript am schnellsten.

Die AWS-Icon-Referenz nutzen, statt Namen zu erraten

Wenn Sie draw-io for Design Implementation in AWS-lastigen Diagrammen einsetzen, ist die Icon-Referenz einer der wertvollsten Teile des Skills. Sie dokumentiert:

• offizielle Service-Namen wie Amazon ECS und AWS Lambda
• aktuelle Icon-Stilkonventionen mit mxgraph.aws4.*
• Muster für Resource- und Product-Icons

Das mitgelieferte Hilfsskript kann die Referenz durchsuchen:

python ~/.claude/skills/draw-io/scripts/find_aws_icon.py lambda

Das ist deutlich sicherer, als sich resIcon-Namen aus dem Kopf auszudenken.

Die Layout-Hinweise bewusst anwenden

Die Layout-Richtlinien im Repository sind kein Füllmaterial. Sie liefern praxistaugliche Standards, die die Ausgabequalität verbessern:

• Cloud-Grenzen und Subnetze klar gruppieren
• den Hauptfluss nach Möglichkeit von links nach rechts führen
• unterschiedliche Linienstile für unterschiedliche Flusstypen verwenden
• zusammengehörige Elemente nah beieinander halten
• Pfeilkreuzungen reduzieren
• genug Weißraum für gute Lesbarkeit lassen

Wenn Sie einen brauchbaren ersten Entwurf wollen, sagen Sie dem Agenten, welche dieser Prinzipien für Ihr Diagramm am wichtigsten sind.

draw-io Skill FAQ

Ist draw-io auch für Einsteiger gut geeignet?

Ja, wenn Sie bereits draw.io-Dateien haben und Hilfe bei der Bearbeitung möchten. Das Skill reduziert Rätselraten durch konkrete Regeln und Skripte. Weniger ideal ist es für komplette Einsteiger, die nur ohne dateibasierten Workflow erste Diagramm-Konzepte erkunden möchten.

Wann ist draw-io besser als ein normaler AI-Prompt?

draw-io ist klar im Vorteil, wenn Sie reproduzierbare Änderungen, sauberes Datei-Handling, Export-Schritte oder korrekte AWS-Icons brauchen. Ein normaler Prompt kann ein Diagramm gut beschreiben, erzwingt aber in der Regel weder .drawio-Quellbearbeitung noch Export-Kommandos, Font-Einstellungen oder den Einsatz von Hilfsskripten.

Braucht draw-io die draw.io-GUI?

Nicht zwingend. Das Skill ist auf Quelltextbearbeitung und CLI-basierten PNG-Export ausgelegt. Dadurch ist es besonders nützlich in code-zentrierten Workflows, bei überprüfbaren Diffs und in Dokumentations-Pipelines.

Wann sollte ich draw-io nicht verwenden?

Überspringen Sie diesen draw-io guide, wenn Sie Folgendes brauchen:

• freies Whiteboarding
• ausgefeilte Design-Mockups außerhalb von draw.io
• rein visuelle Bearbeitung in einer GUI
• Diagrammgenerierung für Formate, die nichts mit .drawio zu tun haben

Dieses Skill ist auf draw.io-XML und Export-Operationen spezialisiert, nicht auf allgemeines Grafikdesign.

Kann draw-io bei AWS-Architekturdiagrammen helfen?

Ja. Das ist eine seiner klarsten Stärken. Die AWS-Icon-Referenz und das Lookup-Skript helfen Ihnen dabei, offizielle Namen und mxgraph.aws4.*-Icons zu verwenden, was besonders wichtig ist, wenn Konsistenz und Wiedererkennbarkeit zählen.

Behebt draw-io automatisch schlechtes Layout?

Nicht automatisch im magischen Sinn. Das Skill liefert eine Methode, um Koordinaten und Layout bewusst anzupassen. Es verbessert Ergebnisse dann deutlich, wenn Sie klare Platzierungsabsichten angeben, etwa zu Gruppierung, Flussrichtung, Abständen und Prioritäten bei Überlappungen.

So verbessern Sie das draw-io Skill

Dem draw-io Skill stärkere strukturelle Vorgaben geben

Der schnellste Weg, draw-io usage zu verbessern, ist Struktur statt Adjektive. Sagen Sie also nicht „mach es sauberer“, sondern zum Beispiel:

• die Datenbank unter die App-Schicht verschieben
• alle Ingestion-Quellen in der linken Spalte halten
• Pfeile nach Möglichkeit ohne Kreuzungen führen
• Ressourcen in Public und Private Subnets getrennt gruppieren
• Labels kurz genug halten, damit sich Boxen nicht unnötig verbreitern

Solche Anweisungen lassen sich direkt in XML- und Layout-Entscheidungen übersetzen.

Wenn möglich, von einem bestehenden Diagramm ausgehen

Das Skill arbeitet am besten, wenn es eine vorhandene .drawio-Datei bearbeiten kann, statt alles von Grund auf neu zu erfinden. Bestehende Dateien liefern ihm:

• aktuelle Element-IDs
• vorhandene Layout-Muster
• bestehende Stilkonventionen
• die Gruppierungsstruktur
• bekannte Export-Ziele

Für Teams führt das meist zu verlässlicheren Ergebnissen, als jedes Mal ein komplett neues Diagramm anzufordern.

Benennung und Icon-Treue explizit vorgeben

Ein typischer Fehler ist vage Service-Benennung wie „ECS“ oder „Lambda“, ohne festzulegen, ob Labels die vollständigen offiziellen Service-Namen verwenden sollen. Wenn AWS-Diagramme wichtig sind, geben Sie beides an:

• Anzeige-Labels: Amazon ECS, AWS Lambda, Amazon RDS
• Icon-Vorgabe: offizielle mxgraph.aws4.*-Service-Icons verwenden

So vermeiden Sie gemischte Benennungsstile und falsche Icon-Zuordnungen.

Bearbeiten und Export in einem Schritt anfordern

Wenn Sie direkt brauchbare Ergebnisse wollen, fordern Sie Quellenbearbeitung und Export gemeinsam an. Beispiel:

“Update docs/arch.drawio, then regenerate docs/arch.drawio.png with the skill’s standard PNG export settings.”

Das schließt die häufige Lücke, bei der zwar das XML geändert wurde, das Vorschaubild aber veraltet bleibt.

Auf die typischen Fehlerquellen achten

Häufige draw-io-Probleme sind meist praktischer, nicht konzeptioneller Natur:

• das PNG statt der .drawio bearbeiten
• Font-Einstellungen vergessen und dadurch inkonsistentes Text-Rendering bekommen
• erratene AWS-Icon-Identifier verwenden
• Nodes zu dicht packen, sodass Labels kollidieren
• gekreuzte Verbindungen erzeugen, die die Lesbarkeit verschlechtern
• Layout-Änderungen vornehmen, ohne den Gesamtfluss zu erhalten

Die meisten dieser Probleme lassen sich vermeiden, wenn Sie in Ihrem Prompt direkt auf die bereitgestellten Skripte und Leitfäden verweisen.

Mit kleinen, gut prüfbaren Änderungen iterieren

Bei komplexen Diagrammen sollten Sie nicht alles auf einmal anfordern. Ein besseres Muster ist:

1. Struktur und Gruppierung anpassen
2. Abstände und Verbindungen prüfen
3. Labels und Schriftarten korrigieren
4. PNG exportieren
5. einen letzten Durchgang auf Lesbarkeit machen

So entstehen sauberere Diffs, und Sie erkennen leichter, ob ein Layout-Problem von der Gruppierung, der Icon-Wahl oder der Textgröße stammt.

Den Agenten gezielt auf Repository-Helfer verweisen

Wenn Ihr Agent dateibewusste Prompts unterstützt, nennen Sie die Referenzen ausdrücklich:

• references/layout-guidelines.md für Abstände und Flussführung
• references/aws-icons.md für AWS-Benennung und Icons
• scripts/find_aws_icon.py für den Icon-Lookup
• scripts/convert-drawio-to-png.sh für den Export

Dieser kleine Schritt verbessert oft schon die Qualität des ersten Durchlaufs, weil der Agent dann mit den Konventionen des Repositories arbeitet statt mit generischen Diagramm-Ratschlägen.