<div class="key-takeaways"><ul><li>เปลี่ยนจากการสร้างภาพหน้าจอหรือ PNG มาเป็นไฟล์ Draw.io ที่แก้ไขได้จริง</li><li>พัฒนาเป็น open-source Codex Skill ชื่อ drawio-mxgraph สำหรับแปลงคำอธิบายเป็น XML</li><li>รองรับการแก้ไขแบบเฉพาะจุดโดยไม่ต้องวาดแผนผังใหม่ทั้งหมด</li><li>มาพร้อมระบบตรวจสอบความถูกต้องก่อนนำไปเปิดใช้งาน</li></ul></div><p>ขั้นตอนการทำงานของปัญญาประดิษฐ์ในการสร้างไดอะแกรมส่วนใหญ่ มักจะจบลงด้วยไฟล์ภาพประเภท PNG หรือภาพหน้าจอ ถึงแม้ว่าภาพที่ได้จะดูสวยงาม แต่ทันทีที่มีการเปลี่ยนแปลงโครงสร้างสถาปัตยกรรม คุณจะต้องวาดใหม่ทั้งหมดหรือสั่งให้ AI สร้างภาพขึ้นมาใหม่ตั้งแต่ต้น</p><p>ด้วยเหตุนี้ นักพัฒนาจึงต้องการแนวทางใหม่ที่ต่างออกไป นั่นคือการอธิบายระบบด้วยภาษาธรรมชาติ แล้วได้รับไฟล์ Draw.io ของจริงกลับมา เพื่อให้สามารถเข้าไปแก้ไขทุกๆ โหนด ป้ายกำกับ เส้นเชื่อม กลุ่ม และไอคอนได้อย่างอิสระ</p><p>นี่คือที่มาของ <strong>drawio-mxgraph</strong> ซึ่งเป็น open-source Codex Skill ที่ทำหน้าที่แปลงคำอธิบายกระบวนการและสถาปัตยกรรมระบบ ให้กลายเป็นไฟล์ .drawio ที่ผ่านการตรวจสอบความถูกต้องและสามารถแก้ไขต่อได้ทันที โดยซอร์สโค้ดทั้งหมดถูกเก็บไว้บน GitHub ในชื่อรีโปสิทอรี drawio-mxgraph-skill</p><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/draw_io_ai_codex_skill_ms1ywd03_inline_1_d68c1531fc.jpg" alt="mxgraph drawio xml diagram" loading="lazy" /><p class="color-gray-500 text-sm mt-10">ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง</p></div><div class="ai-insight"><p>การแปลงข้อความเป็นไดอะแกรมแบบเดิมมักส่งออกผลลัพธ์เป็นกราฟิกตายตัว ทำให้เสียเวลาอย่างมากเมื่อระบบซับซ้อนขึ้น การใช้ไฟล์สถาปัตยกรรมแบบเวกเตอร์อย่าง .drawio หรือ mxGraph XML ช่วยให้ทีมนักพัฒนาสามารถผสานแผนผังระบบเข้ากับกระบวนการทำงานจริง (Workflow) และควบคุมเวอร์ชันผ่าน Git ได้เหมือนกับซอร์สโค้ดทั่วไป</p></div><p>จุดอ่อนที่พบบ่อยในการสร้างไดอะแกรมด้วย AI คือการมองว่าทุกการแก้ไขคือการวาดใหม่ทั้งหมด ทำให้คำขอปรับแต่งเพียงเล็กน้อยกลายเป็นเรื่องยุ่งยาก เช่น การย้ายระบบออกตั๋ว (ticketing system) ไปไว้ใต้ระบบ CRM หรือการเพิ่มกลุ่มระบบสังเกตการณ์ (observability group)</p><p>ตัวเครื่องมือตัวนี้สามารถอัปเดตเฉพาะเซลล์ที่ได้รับผลกระทบเท่านั้น โดยที่ป้ายกำกับ สไตล์ ไอคอน การเชื่อมต่อ และตำแหน่งที่ปรับแต่งด้วยมือเดิมยังคงอยู่ครบถ้วน ทำให้ไดอะแกรมทำตัวเหมือนกับซอร์สโค้ดมากกว่าภาพถ่ายที่ใช้แล้วทิ้ง</p><div class="stat-row"><div class="stat-item"><span class="stat-number">v1.0.0</span><span class="stat-label">เวอร์ชันเปิดตัวครั้งแรก</span></div><div class="stat-item"><span class="stat-number">XML</span><span class="stat-label">รูปแบบไฟล์ที่สร้าง</span></div></div><p>รีโปสิทอรีดังกล่าวยังมีตัวอย่างที่แก้ไขได้สำหรับระบบบริการลูกค้ำอัจฉริยะที่สร้างด้วย AgentBuilder ซึ่งเชื่อมต่อองค์ประกอบต่างๆ เข้าด้วยกัน และยังสามารถปรับปรุงไฟล์เดิมทีละขั้น เช่น การขอให้เพิ่มบริการตรวจสอบการฉ้อโกง หรือสลับเลย์เอาต์เป็นแบบแนวตั้ง</p><p class="source-attribution">ที่มา: <img src="https://www.google.com/s2/favicons?domain=dev.to&sz=64" alt="Dev.to" class="source-logo" width="16" height="16" /> <a href="https://dev.to/codecow/a-codex-skill-that-generates-editable-drawio-diagrams-instead-of-screenshots-41oa" target="_blank" rel=

<div class="key-takeaways"><ul><li>Replaces static PNGs and screenshots with fully editable Draw.io files.</li><li>Built as an open-source Codex Skill named drawio-mxgraph for XML generation.</li><li>Supports incremental updates without redrawing unaffected nodes.</li><li>Includes a built-in validator to catch structural issues early.</li></ul></div><p>Most AI diagram workflows traditionally conclude with a standard PNG or a static screenshot. While the output might look polished initially, any subsequent change to the underlying architecture forces you to redraw the entire diagram or regenerate the whole image from scratch.</p><p>To solve this, developers needed a different workflow: describing a system in natural language, receiving a genuine Draw.io file, and retaining the ability to edit every individual node, label, connector, group, and icon.</p><p>This exact requirement led to the creation of <strong>drawio-mxgraph</strong>, an open-source Codex Skill designed to turn architecture and process descriptions into validated, editable .drawio files hosted on GitHub under the repository drawio-mxgraph-skill.</p><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/draw_io_ai_codex_skill_ms1ywd03_inline_1_d68c1531fc.jpg" alt="mxgraph drawio xml diagram" loading="lazy" /><p class="color-gray-500 text-sm mt-10">Stock photo for illustration only, not from the actual event</p></div><div class="ai-insight"><p>Static diagram generation often breaks down during iterative design because minor updates require full regeneration. By utilizing editable vector formats like mxGraph XML, engineering teams can treat architecture diagrams closer to actual source code, making them version-controllable and adaptable to rapid structural changes.</p></div><p>A common failure mode in AI-generated diagrams is treating every edit as a full redraw, rendering small requests surprisingly destructive. Simple adjustments like moving the ticketing system below the CRM or adding an observability group usually ruin manual placements.</p><p>This Skill addresses the issue by updating only the affected cells. Existing labels, styles, icons, connections, and manually adjusted positions remain completely intact, making the diagram behave much more like source code than a disposable image.</p><div class="stat-row"><div class="stat-item"><span class="stat-number">v1.0.0</span><span class="stat-label">Initial Public Release</span></div><div class="stat-item"><span class="stat-number">XML</span><span class="stat-label">Generated Output Format</span></div></div><p>The repository features an editable example for an intelligent customer-service system built with AgentBuilder, connecting multiple enterprise components while allowing incremental revisions such as adding fraud-check services or switching layouts.</p><p class="source-attribution">Source: <img src="https://www.google.com/s2/favicons?domain=dev.to&sz=64" alt="Dev.to" class="source-logo" width="16" height="16" /> <a href="https://dev.to/codecow/a-codex-skill-that-generates-editable-drawio-diagrams-instead-of-screenshots-41oa" target="_blank" rel="noopener noreferrer">Dev.to</a></p>

medium_draw-io-ai-codex-skill-ms1ywd03.jpg

small_draw-io-ai-codex-skill-ms1ywd03.jpg

thumbnail_draw-io-ai-codex-skill-ms1ywd03.jpg

Inewgen

Inewgen

#AgentBuilder

A Codex Skill That Generates Editable Draw.io Diagrams

Inewgen