drawio-diagramlisted

# draw.io Diagram Generator When LLMs improvise coordinates, left/right and top/bottom balance breaks, and arrows and text overlap. This skill addresses the problem on two axes: 1. **Grid cell coordinate system** — Positions are computed only via `row/col × constant` formulas, eliminating guesswork. 2. **MCP verification loop** — Iterate `create → export(PNG) → coordinate/image dual verification → edit` to converge on actual results. ## When to Activate - draw.io / diagrams.net diagram generation requests - Architecture diagrams, flowcharts, sequences, org charts, ER, network diagrams - Requests to fix alignment, overlap, or balance in existing diagrams - Direct mxGraphModel XML authoring requests ## Core Principle (Why these rules) > **Eliminate calculation; let coordinates fall out of rules automatically.** > Qualitative instructions like "balance it" fail every time. Coordinates must be bound to arithmetic formulas to guarantee alignment. --- ## 1. Grid Cell Coordinate System (Most Important) ### Cell Constants ``` CELL_W = 240 # Cell horizontal spacing CELL_H = 160 # Cell vertical spacing NODE_W = 200 # Default shape width (except special shapes) NODE_H = 80 # Default shape height MARGIN = 40 # Canvas top-left margin ``` ### Coordinate Formula (No arbitrary coordinates outside this formula) ``` x = MARGIN + col * CELL_W y = MARGIN + row * CELL_H ``` - All nodes have only `(row, col)` integer coordinates. Do not write pixels directly. - Nodes at th