Most AI diagram workflows end with a PNG or a screenshot. It may look fine, but the moment the architecture changes, you have to redraw it or regenerate the whole image.
I wanted a different workflow: describe a system in natural language, receive a real Draw.io file, and keep editing every node, label, connector, group, and icon.
That is why I built drawio-mxgraph, an open-source Codex Skill that turns architecture and process descriptions into validated, editable .drawio
files.
Repository: https://github.com/clawcode3-bit/drawio-mxgraph-skill
The Skill generates mxGraph XML that opens directly in Draw.io/diagrams.net. It is designed for architecture diagrams, business processes, agent workflows, and integration maps.
Key capabilities include:
.drawio
XMLA common failure mode in generated diagrams is treating every edit as a full redraw. That makes small requests surprisingly destructive.
With stable IDs, a request such as:
Move the ticketing system below the CRM, add an observability group, and change the layout to left-to-right.
can update only the affected cells. Existing labels, styles, icons, connections, and manually adjusted positions can remain intact.
This makes the diagram behave more like source code than a disposable image.
The repository includes an editable example for an intelligent customer-service system built with AgentBuilder. It connects:
The same file can be revised incrementally. For example, you can ask the Skill to add a fraud-check service, move ERP into an enterprise-systems group, switch the diagram to a vertical layout, or replace generic blocks with AWS-style icons.
Generating XML is easy. Generating XML that remains useful after several edits is harder.
The included validator checks for issues such as:
This catches many problems before the file reaches Draw.io.
Clone the repository into your Codex skills directory, then ask Codex for a diagram in plain language.
Example prompt:
Create an editable Draw.io architecture for an AI customer-service platform.
Use AgentBuilder, connect CRM, ERP, and ticketing systems, group external systems,
use a left-to-right layout, and select suitable enterprise icons automatically.
You can then continue with incremental instructions:
Move the ticketing system below CRM, add an observability group,
and change the layout to top-to-bottom without recreating unrelated nodes.
This is the first public release, and I would especially value feedback on:
If editable AI-generated diagrams are useful to you, please try the examples, open an issue, or star the repository so I know which direction to prioritize.
GitHub: https://github.com/clawcode3-bit/drawio-mxgraph-skill
Release v1.0.0: https://github.com/clawcode3-bit/drawio-mxgraph-skill/releases/tag/v1.0.0