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

A developer built drawio-mxgraph, an open-source Codex Skill that generates editable .drawio files from natural language descriptions. The tool produces validated mxGraph XML that opens in Draw.io/diagrams.net and supports incremental edits without full redraws.

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