draw-io
draw.io diagram creation, editing, and review. Use for .drawio XML editing, PNG conversion, layout adjustment, and AWS icon usage.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
draw.io diagram creation, editing, and review. Use for .drawio XML editing, PNG conversion, layout adjustment, and AWS icon usage.
How to use
Zainstaluj umiejętność draw-io w swoim katalogu Claude'a (zazwyczaj ~/.claude/skills/draw-io). Upewnij się, że masz zainstalowany narzędzie draw.io CLI na swoim systemie.
Aby edytować diagram, otwórz plik .drawio w edytorze tekstu — jest to zwykły plik XML. Nigdy nie edytuj bezpośrednio pliku .drawio.png, pracuj tylko na źródłowym pliku .drawio.
Jeśli chcesz zmienić pozycję elementów, znajdź odpowiedni tag mxCell po atrybucie value (tekst elementu), a następnie dostosuj współrzędne w tagu mxGeometry: x (pozycja od lewej), y (pozycja od góry), width (szerokość) i height (wysokość).
Po dokonaniu zmian w pliku XML uruchom konwersję do PNG za pomocą komendy: bash ~/.claude/skills/draw-io/scripts/convert-drawio-to-png.sh assets/twoj-diagram.drawio. Narzędzie automatycznie wygeneruje plik .drawio.png w wysokiej rozdzielczości (2x) z przezroczystym tłem.
Jeśli diagram będzie używany w slajdach Quarto, pamiętaj o ustawieniu czcionki: dodaj atrybut defaultFontFamily w tagu mxGraphModel (np. "Noto Sans JP") oraz jawnie określ fontFamily w atrybucie style każdego elementu tekstowego.
Aby wyrównać wiele elementów, oblicz współrzędną środka każdego z nich (y + wysokość/2) i dopasuj wartości tak, aby były identyczne.