{"slug": "a-codex-skill-that-generates-editable-draw-io-diagrams-instead-of-screenshots", "title": "A Codex Skill That Generates Editable Draw.io Diagrams Instead of Screenshots", "summary": "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.", "body_md": "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.\n\nI 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.\n\nThat is why I built **drawio-mxgraph**, an open-source Codex Skill that turns architecture and process descriptions into validated, editable `.drawio`\n\nfiles.\n\nRepository: [https://github.com/clawcode3-bit/drawio-mxgraph-skill](https://github.com/clawcode3-bit/drawio-mxgraph-skill)\n\nThe 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.\n\nKey capabilities include:\n\n`.drawio`\n\nXMLA common failure mode in generated diagrams is treating every edit as a full redraw. That makes small requests surprisingly destructive.\n\nWith stable IDs, a request such as:\n\nMove the ticketing system below the CRM, add an observability group, and change the layout to left-to-right.\n\ncan update only the affected cells. Existing labels, styles, icons, connections, and manually adjusted positions can remain intact.\n\nThis makes the diagram behave more like source code than a disposable image.\n\nThe repository includes an editable example for an intelligent customer-service system built with AgentBuilder. It connects:\n\nThe 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.\n\nGenerating XML is easy. Generating XML that remains useful after several edits is harder.\n\nThe included validator checks for issues such as:\n\nThis catches many problems before the file reaches Draw.io.\n\nClone the repository into your Codex skills directory, then ask Codex for a diagram in plain language.\n\nExample prompt:\n\n```\nCreate an editable Draw.io architecture for an AI customer-service platform.\nUse AgentBuilder, connect CRM, ERP, and ticketing systems, group external systems,\nuse a left-to-right layout, and select suitable enterprise icons automatically.\n```\n\nYou can then continue with incremental instructions:\n\n```\nMove the ticketing system below CRM, add an observability group,\nand change the layout to top-to-bottom without recreating unrelated nodes.\n```\n\nThis is the first public release, and I would especially value feedback on:\n\nIf 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.\n\nGitHub: [https://github.com/clawcode3-bit/drawio-mxgraph-skill](https://github.com/clawcode3-bit/drawio-mxgraph-skill)\n\nRelease 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)", "url": "https://wpnews.pro/news/a-codex-skill-that-generates-editable-draw-io-diagrams-instead-of-screenshots", "canonical_source": "https://dev.to/codecow/a-codex-skill-that-generates-editable-drawio-diagrams-instead-of-screenshots-41oa", "published_at": "2026-07-26 15:37:49+00:00", "updated_at": "2026-07-26 15:59:08.035444+00:00", "lang": "en", "topics": ["artificial-intelligence", "developer-tools", "ai-tools"], "entities": ["drawio-mxgraph", "Codex", "Draw.io", "diagrams.net", "AgentBuilder", "GitHub", "clawcode3-bit"], "alternates": {"html": "https://wpnews.pro/news/a-codex-skill-that-generates-editable-draw-io-diagrams-instead-of-screenshots", "markdown": "https://wpnews.pro/news/a-codex-skill-that-generates-editable-draw-io-diagrams-instead-of-screenshots.md", "text": "https://wpnews.pro/news/a-codex-skill-that-generates-editable-draw-io-diagrams-instead-of-screenshots.txt", "jsonld": "https://wpnews.pro/news/a-codex-skill-that-generates-editable-draw-io-diagrams-instead-of-screenshots.jsonld"}}