# A Codex Skill That Generates Editable Draw.io Diagrams Instead of Screenshots

> Source: <https://dev.to/codecow/a-codex-skill-that-generates-editable-drawio-diagrams-instead-of-screenshots-41oa>
> Published: 2026-07-26 15:37:49+00:00

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](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](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](https://github.com/clawcode3-bit/drawio-mxgraph-skill/releases/tag/v1.0.0)