Drawio Skill by @agents365-ai · Skillet

drawio-skill

Create and edit draw.io/diagrams.net diagrams as editable `.drawio` files. Covers architecture, UML/ERD/sequence, BPMN, network, and swimlane views authored from a description or converted from code, IaC, SQL, and API schemas, plus sync, query, test, review, export, and publish of existing diagrams. Use when the user asks for draw.io/diagrams.net or an editable diagram; prefer Mermaid/PlantUML when diagrams-as-code is enough.

disable-model-invocation: true
license: MIT
allowed-tools: [Bash, Read, Write, WebFetch]
metadata: {"openclaw":{"requires":{"anyBins":["python3"]},"emoji":"📐","os":["darwin","linux","win32"],"install":[{"id":"brew-drawio","kind":"brew","formula":"drawio","bins":["drawio"],"label":"Install draw.io for native exports","os":["darwin"],"optional":true},{"id":"brew-graphviz","kind":"brew","formula":"graphviz","bins":["dot"],"label":"Install Graphviz for automatic layout","os":["darwin"],"optional":true}]},"hermes":{"tags":["drawio","diagram","architecture","visualization","uml"],"category":"design","requires_tools":["python3"],"related_skills":["mermaid","excalidraw","plantuml"]},"author":"Agents365-ai","version":"3.4.0","homepage":"https://github.com/Agents365-ai/drawio-skill","compatibility":"Core IR, XML, sync, query, test, review, and Story workflows need Python 3 only; native export needs draw.io; Graphviz is optional.","platforms":["macos","linux","windows"]}

Draw.io Architecture Studio

Produce editable .drawio artifacts, not flattened pictures. The preferred entrypoint is scripts/diagramctl.py, which unifies generation, incremental sync, multi-view projection, semantic queries/tests/reviews, failure analysis, and accessible publishing over a shared Diagram IR.

Choose the workflow

Request	Route
Natural-language diagram with precise styling	Read `references/diagram-types.md`, then `references/xml-authoring.md` and author XML
Standard flowchart/mindmap/gantt/timeline/etc. with no special styling	If draw.io >=30, read `references/mermaid-authoring.md` and convert Mermaid to native `.drawio`
Large graph (~15+ nodes) that needs automatic layout	Use `autolayout.py`; read `references/autolayout.md` before passing any `--layout` value
Code, Terraform, K8s, compose, SQL, OpenAPI, AsyncAPI, or CI source	Use `diagramctl.py build`; read `references/diagram-ir.md`
Protocol Buffers schema (.proto)	Use `protoimports.py` or `diagramctl.py build`; read `references/toolbox.md`
GraphQL SDL schema (.graphql/.gql) or introspection JSON	Use `graphqlerd.py` or `diagramctl.py build`; read `references/toolbox.md`
Running cluster/stack/cloud (actual state, not declared config)	Read `references/live-infra.md`, then use `tfstate.py`, `dockerimports.py`, or `k8simports.py -`
Update a generated diagram without losing manual layout	Use `diagramctl.py sync`; read `references/diagram-ir.md`
Executive/system/deployment/data-flow/security views	Use `diagramctl.py views`; read `references/diagram-ir.md`
Query, architecture policy, review, what-if, or guided walkthrough	Read `references/semantic-workflows.md`
MCP host (Claude Desktop, Cursor, VS Code, Codex) should call these workflows	Register `scripts/diagramctl_mcp.py`; read

references/mcp.md

python3 scripts/diagramctl.py doctor
python3 scripts/diagramctl.py build model.json --from ir -o architecture.drawio
python3 scripts/diagramctl.py build ./infra --from terraform --group \
  --ir-output architecture.ir.json -o architecture.drawio
python3 scripts/diagramctl.py sync architecture.drawio ./infra --from terraform \
  -o architecture.next.drawio
python3 scripts/diagramctl.py views architecture.ir.json \
  --views executive,system,deployment,dataflow,security -o views.drawio
python3 scripts/diagramctl.py test architecture.drawio --rules policy.yml
python3 scripts/diagramctl.py review architecture.drawio -o review.md
python3 scripts/diagramctl.py query architecture.drawio --from internet --to orders-db
python3 scripts/diagramctl.py whatif architecture.ir.json --fail kafka \
  --drawio kafka-failure.drawio -o impact.json
python3 scripts/diagramctl.py story architecture.ir.json -o walkthrough.html

Infer the diagram type, audience, scope, output format, and location from the request. Ask only when a missing choice materially changes the result; default to PNG plus .drawio in the working directory.
Select the authoring route from the table above. For a data-backed diagram, prefer Diagram IR and preserve provenance. For a large graph, use an importer or autolayout.py; do not hand-place more than roughly fifteen nodes.
Resolve an explicitly named style preset, or the user's default preset, as documented in references/style-presets.md. Structural diagram conventions and visual presets compose; they do not replace each other.
Generate the .drawio, then run structural validation:
```
python3 scripts/validate.py diagram.drawio --score
```
When semantic metadata or an architecture policy is in scope, also run diagramctl.py test. Do not present inferred semantic findings as verified runtime facts.
Export a draft PNG without embedded XML and inspect it visually. Fix obvious overlap, clipping, disconnected edges, edge-through-node routing, stacked edges, and unreadable labels. Stop automatic vision repair after two rounds. When the drawio binary is unavailable or a visual check is inconclusive, verify the renderer's own DOM instead (--dump-dom on the viewer URL, see references/troubleshooting.md): read each edge's <path> segments and label anchor coordinates directly — vision alone both misses geometry defects and hallucinates new ones.
Show the draft and apply targeted edits. Preserve existing geometry for local changes. Use sync for source-backed changes and write a reviewable output; use --prune only when deletion was requested.
After approval, create final requested formats and report both editable source and export paths.

# Draft for visual inspection: never use -e here
drawio -x -f png --width 2000 -o diagram.png diagram.drawio

# Final editable PNG
drawio -x -f png -e -s 2 -o diagram.drawio.png diagram.drawio
python3 scripts/repair_png.py diagram.drawio.png

# Final editable SVG/PDF
drawio -x -f svg -e --embed-svg-images -o diagram.svg diagram.drawio
drawio -x -f pdf -e -o diagram.pdf diagram.drawio