Agent skill · design visual · davila7
draw-io
draw.io diagram creation, editing, and review. Use for .drawio XML editing, PNG conversion, layout adjustment, and AWS icon usage.
Why this skill is useful
Adds specific commands and layout adjustment techniques for draw.io that the AI wouldn't reliably generate on its own.
What it needs
Requires drawio installed locally. About 4k tokens when loaded. Last updated 2026-08-06. 30,138 stars on the source repository.
What this skill does
draw.io Diagram Skill 1. Basic Rules Edit only .drawio files Do not directly edit .drawio.png files Use auto-generated .drawio.png by pre-commit hook in slides 2. Font Settings For diagrams used in Quarto slides, specify defaultFontFamily in mxGraphModel tag: Also explicitly specify fontFamily in each text element's style attribute: 3. Conversion Commands See conversion script at scripts/convert-drawio-to-png.sh. Internal command used: Option Description -------- ------------- -x Export mode -f png PNG format output -s 2 2x scale (high resolution) -t Transparent background -o Output file path 4. Layout Adjustment 4.1. Coordinate Adjustment Steps 1. Open .drawio file in text editor (plain XML format) 2. Find mxCell for element to adjust (search by value attribute for text) 3. Adjust coordinates in mxGeometry tag x: Position from left y: Position from top width: Width height: Height 4. Run conversion and verify 4.2. Coordinate Calculation Element center coordinate = y + (height / 2) To align multiple elements, calculate and match center coordinates 5. Design Principles 5.1. Basic Principles Clarity: Create simple, visually clean diagrams Consistency: Unify colors, fonts, icon sizes, line thickness Accuracy: Do not sacrifice accuracy for simplification 5.2. Element Rules Label all elements Use arrows to indicate direction (prefer 2 unidirectional arrows over bidirectional) Use latest official icons Add legend to explain custom symbols 5.3. Accessibility Ensure sufficient color contrast Use patterns in addition to colors 5.4. Progressive Disclosure Separate complex systems into staged diagrams: Diagram Type Purpose -------------- --------- Context Diagram System overview from external perspective System Diagram Main components and relationships Component Diagram Technical details and integration points Deployment Diagram Infrastructure configuration Data Flow Diagram Data flow and transformation Sequence Diagram Time-series interactions 5.5. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills davila7/draw-io