--- id: daily-draw-io-diagram-generator name: "draw-io-diagram-generator" url: https://skills.yangsir.net/skill/daily-draw-io-diagram-generator author: github domain: ai-software-architecture-engineering tags: ["diagrams", "visualization", "architecture", "documentation", "drawio"] install_count: 2800 rating: 4.40 (28 reviews) github: https://github.com/github/awesome-copilot --- # draw-io-diagram-generator > 自动生成符合 mxGraph XML 规范的 Draw.io 图表文件，支持架构图、流程图和 UML 图 **Stats**: 2,800 installs · 4.4/5 (28 reviews) ## Before / After 对比 ### 架构图绘制 **Before**: 手动构建 Draw.io 图表的 XML 结构，需要研究复杂的 mxGraph 格式规范，一张系统架构图需要 30-60 分钟 **After**: 描述'微服务架构，包含 API 网关、3 个服务和数据库'，30 秒生成可直接在 Draw.io 中编辑的图表文件，支持自动布局 | Metric | Before | After | Change | |---|---|---|---| | 绘图时间 | 45分钟 | 0.5分钟 | -99% | ## Readme # draw-io-diagram-generator # Draw.io Diagram Generator This skill enables you to generate, edit, and validate draw.io (`.drawio`) diagram files with correct mxGraph XML structure. All generated files open immediately in the [Draw.io VS Code extension](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio) (`hediet.vscode-drawio`) without any manual fixes required. You can also open the files in the draw.io web app or desktop app if you prefer. ## 1. When to Use This Skill **Trigger phrases (load this skill when you see these)** - "create a diagram", "draw a flowchart", "generate an architecture diagram" - "design a sequence diagram", "make a UML class diagram", "build an ER diagram" - "add a .drawio file", "update the diagram", "visualise the flow" - "document the architecture", "show the data model", "diagram the service interactions" - Any request to produce or modify a `.drawio`, `.drawio.svg`, or `.drawio.png` file **Supported diagram types** Diagram Type Template Available Description Flowchart `assets/templates/flowchart.drawio` Process flows with decisions and branches System Architecture `assets/templates/architecture.drawio` Multi-tier / layered service architecture Sequence Diagram `assets/templates/sequence.drawio` Actor lifelines and timed message flows ER Diagram `assets/templates/er-diagram.drawio` Database tables with relationships UML Class Diagram `assets/templates/uml-class.drawio` Classes, interfaces, enums, relationships Network Topology (use shape library) Routers, servers, firewalls, subnets BPMN Workflow (use shape library) Business process events, tasks, gateways Mind Map (manual) Central topic with radiating branches ## 2. Prerequisites - If running with VS Code integration enabled, Install the drawio extension: **draw.io VS Code extension** — `hediet.vscode-drawio` (extension id). Install with: ``` ext install hediet.vscode-drawio ``` - **Supported file extensions**: `.drawio`, `.drawio.svg`, `.drawio.png` - **Python 3.8+** (optional) — for the validation and shape-insertion scripts in `scripts/` ## 3. Step-by-Step Agent Workflow Follow these steps in order for every diagram generation task. ### Step 1 — Understand the Request Ask or infer: - **Diagram type** — What kind of diagram? (flowchart, architecture, UML, ER, sequence, network...) - **Entities / actors** — What are the main components, actors, classes, or tables? - **Relationships** — How are they connected? What direction? What cardinality? - **Output path** — Where should the `.drawio` file be saved? - **Existing file** — Are we creating new or editing an existing file? If the request is ambiguous, infer the most sensible diagram type from context (e.g. "show the tables" → ER diagram, "show how the API call flows" → sequence diagram). ### Step 2 — Select a Template or Start Fresh - **Use a template** when the diagram type matches one in `assets/templates/`. Copy the template structure and replace placeholder values. - **Start fresh** for novel layouts. Begin with the minimal valid skeleton: ``` ``` **Rule**: ids `0` and `1` are ALWAYS required and must be the first two cells. Never reuse them. ### Step 3 — Plan the Layout Before generating XML, sketch the logical placement: - Organise into **rows** or **tiers** (use swimlanes for layers) - **Horizontal spacing**: 40–60px between same-row shapes - **Vertical spacing**: 80–120px between tier rows - Standard shape size: `120x60` px for process boxes, `160x80` px for swimlanes - Default canvas: A4 landscape = `1169 x 827` px ### Step 4 — Generate the mxGraph XML **Vertex cell** (every shape): ``` ``` **Edge cell** (every connector): ``` ``` **Critical rules**: - Every cell id must be **globally unique** within the file - Every vertex must have an `mxGeometry` child with `x`, `y`, `width`, `height`, `as="geometry"` - Every edge must have `source` and `target` matching existing vertex ids — **exception**: floating edges (e.g. sequence diagram lifelines) use `sourcePoint`/`targetPoint` inside `` instead; see §4 Sequence Diagram - Every cell's `parent` must reference an existing cell id - Use `html=1` in style when the label contains HTML (``, ``, `
`) - Escape XML special characters in labels: `&` => `&`, `<` => `<`, `>` => `>` ### Step 5 — Apply Correct Styles Use the standard semantic color palette for consistency: Purpose fillColor strokeColor Primary / Info `#dae8fc` `#6c8ebf` Success / Start `#d5e8d4` `#82b366` Warning / Decision `#fff2cc` `#d6b656` Error / End `#f8cecc` `#b85450` Neutral `#f5f5f5` `#666666` External / Partner `#e1d5e7` `#9673a6` Common style strings by diagram type: ``` # Rounded process box (flowchart) rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf; # Decision diamond rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656; # Start/End terminal ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366; # Database cylinder shape=mxgraph.flowchart.database;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450; # Swimlane container (tier) swimlane;startSize=30;fillColor=#dae8fc;strokeColor=#6c8ebf;fontStyle=1; # UML class box swimlane;fontStyle=1;align=center;startSize=40;fillColor=#dae8fc;strokeColor=#6c8ebf; # Interface / stereotype box swimlane;fontStyle=3;align=center;startSize=40;fillColor=#f5f5f5;strokeColor=#666666; # ER table container shape=table;startSize=30;container=1;collapsible=1;childLayout=tableLayout; # Orthogonal connector edgeStyle=orthogonalEdgeStyle;html=1; # ER relationship (crow's foot) edgeStyle=entityRelationEdgeStyle;html=1;endArrow=ERmany;startArrow=ERone; ``` See `references/style-reference.md` for the complete style key catalog and `references/shape-libraries.md` for all shape library names. ### Step 6 — Save and Validate - **Write the file** to the requested path with `.drawio` extension - **Run the validator** (optional but recommended): ``` python .github/skills/draw-io-diagram-generator/scripts/validate-drawio.py ``` - **Tell the user** how to open the file: "Open `` in VS Code — it will render automatically with the draw.io extension. You can use draw.io's web app or desktop app as well if you prefer." - **Provide a brief description** of what is in the diagram so the user knows what to expect. ## 4. Diagram-Type Recipes ### Flowchart Key elements: Start (ellipse) => Process (rounded rectangle) => Decision (diamond) => End (ellipse) ``` ``` ### Architecture Diagram (3-tier) Use **swimlane containers** for each tier. All service boxes are children of their swimlane. ``` ``` Connectors between tiers use absolute coordinates with `parent="1"`. ### Sequence Diagram Key elements: Actors (top), Lifelines (dashed vertical lines), Activation boxes, Message arrows. - Lifelines: `edge="1"` with `endArrow=none` and `dashed=1`, no source/target — use `sourcePoint`/`targetPoint` in geometry - Synchronous message: `endArrow=block;endFill=1` - Return message: `endArrow=open;endFill=0;dashed=1` - Self-call: loop the edge via two Array points to the right and back **Minimal XML snippet:** ``` ``` **Note:** Lifelines are floating edges that use `sourcePoint`/`targetPoint` in `` instead of `source`/`target` attributes. This is the standard draw.io pattern for sequence diagrams. ### ER Diagram Use `shape=table` containers with `childLayout=tableLayout`. Rows are `shape=tableRow` cells with `portConstraint=eastwest`. Columns inside each row are `shape=partialRectangle`. Relationship arrows use `edgeStyle=entityRelationEdgeStyle`: - One-to-One: `startArrow=ERone;endArrow=ERone` - One-to-Many: `startArrow=ERone;endArrow=ERmany` - Many-to-Many: `startArrow=ERmany;endArrow=ERmany` - Mandatory: `ERmandOne`, Optional: `ERzeroToOne` ### UML Class Diagram Class boxes are swimlane containers. Attributes and methods are plain text cells. Dividers are zero-height swimlane children. Arrow styles by relationship type: Relationship Style String Inheritance (extends) `edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=0;` Realization (implements) `edgeStyle=orthogonalEdgeStyle;dashed=1;html=1;endArrow=block;endFill=0;` Composition `edgeStyle=orthogonalEdgeStyle;html=1;startArrow=diamond;startFill=1;endArrow=none;` Aggregation `edgeStyle=orthogonalEdgeStyle;html=1;startArrow=diamond;startFill=0;endArrow=none;` Dependency `edgeStyle=orthogonalEdgeStyle;dashed=1;html=1;endArrow=open;endFill=0;` Association `edgeStyle=orthogonalEdgeStyle;html=1;endArrow=open;endFill=0;` ## 5. Multi-Page Diagrams Add multiple `` elements for complex systems: ``` ``` Each page has its own independent cell id namespace. The same id value can appear in different pages without conflict. ## 6. Editing Existing Diagrams When modifying an existing `.drawio` file: - **Read** the file first to understand existing cell ids, positions, and parent hierarchy - **Identify the target diagram page** — by index or `name` attribute - **Assign new unique ids** that do not collide with existing ids - **Respect the container hierarchy** — children of a swimlane use coordinates relative to their parent - **Verify edges** — after repositioning nodes, confirm edge source/target ids remain valid Use `scripts/add-shape.py` to safely add a single shape without editing raw XML: ``` python .github/skills/draw-io-diagram-generator/scripts/add-shape.py docs/arch.drawio "New Service" 700 380 ``` ## 7. Best Practices **Layout** - Align shapes to the 10px grid (all coordinates divisible by 10) - Group related shapes inside swimlane containers - One diagram topic per page; use multi-page files for complex systems - Aim for 40 or fewer cells per page for readability **Labels** - Add a title text cell (`text;strokeColor=none;fillColor=none;fontSize=18;fontStyle=1`) at top of every page - Always set `whiteSpace=wrap;html=1` on vertex shapes - Keep labels concise — 3 words or fewer per shape where possible **Style consistency** - Use the semantic color palette from Section 3 Step 5 consistently across a project - Prefer `edgeStyle=orthogonalEdgeStyle` for clean right-angle connectors - Do not inline arbitrary HTML in labels unless necessary **File naming** - Use kebab-case: `order-service-flow.drawio`, `database-schema.drawio` - Place diagrams alongside the code they document: `docs/` or `architecture/` ## 8. Troubleshooting Problem Likely Cause Fix File opens blank in VS Code Missing id=0 or id=1 cell Add both root cells before any other cells Shape at wrong position Child inside container — coords are relative Check `parent`; adjust x/y relative to container Edge not visible source or target id does not match any vertex Verify both ids exist exactly as written Diagram shows "Compressed" mxGraphModel is base64-encoded Open in draw.io web, File > Export > XML (uncompressed) Shape style not rendering Typo in shape= name Check `references/shape-libraries.md` for exact style string Label shows escaped HTML html=0 on a cell with HTML label Add `html=1;` to the cell style Container children overlap container edge Container height too small Increase container height in mxGeometry ## 9. Validation Checklist Before delivering any generated `.drawio` file, verify: - File starts with `` root element - Every `` has a non-empty `id` attribute - `` is the first cell in every diagram - `` is the second cell in every diagram - All cell `id` values are unique within each diagram - Every vertex cell has `vertex="1"` and a child `` - Every edge cell has `edge="1"` and either: (a) `source`/`target` pointing to existing vertex ids, or (b) `` and `` in its `` (floating edge — used for sequence diagram lifelines) - Every cell (except id=0) has a `parent` pointing to an existing id - `html=1` is in the style for any label containing HTML tags - XML is well-formed (no unclosed tags, no unescaped `&`, `<`, `>` in attribute values) - A title label cell exists at the top of each page Run the automated validator: ``` python .github/skills/draw-io-diagram-generator/scripts/validate-drawio.py ``` ## 10. Output Format When delivering a diagram, always provide: - **The `.drawio` file** written to the requested path - **A one-sentence summary** of what the diagram shows - **How to open it**: "Open `` in VS Code — the draw.io extension will render it automatically. Or you can open it in the draw.io web app or desktop app if you prefer." - **How to edit it** (if the user is likely to customise): "Click any shape to select it. Double-click to edit the label. Drag to reposition." - **Validation status** — whether the validator script was run and passed ## 11. References All companion files are in `.github/skills/draw-io-diagram-generator/`: File Contents `references/drawio-xml-schema.md` Complete mxfile / mxGraphModel / mxCell attribute reference, coordinate system, reserved cells, validation rules `references/style-reference.md` All style keys with allowed values, vertex and edge style keys, shape catalog, semantic color palette `references/shape-libraries.md` All shape library categories (General, Flowchart, UML, ER, Network, BPMN, Mockup, K8s) with style strings `assets/templates/flowchart.drawio` Ready-to-use flowchart template `assets/templates/architecture.drawio` 4-tier system architecture template `assets/templates/sequence.drawio` 3-actor sequence diagram template `assets/templates/er-diagram.drawio` 3-table ER diagram with crow's foot relationships `assets/templates/uml-class.drawio` Interface + 2 classes + enum with relationship arrows `scripts/validate-drawio.py` Python script to validate XML structure of any .drawio file `scripts/add-shape.py` Python CLI to add a new shape to an existing diagram `scripts/README.md` How to use the scripts with examples Weekly Installs464Repository[github/awesome-copilot](https://github.com/github/awesome-copilot)GitHub Stars28.8KFirst Seen12 days agoSecurity Audits[Gen Agent Trust HubPass](/github/awesome-copilot/draw-io-diagram-generator/security/agent-trust-hub)[SocketPass](/github/awesome-copilot/draw-io-diagram-generator/security/socket)[SnykPass](/github/awesome-copilot/draw-io-diagram-generator/security/snyk)Installed ongemini-cli411opencode409github-copilot407codex407cursor406cline405 --- *Source: https://skills.yangsir.net/skill/daily-draw-io-diagram-generator* *Markdown mirror: https://skills.yangsir.net/api/skill/daily-draw-io-diagram-generator/markdown*