{"id":"257a6ae6-617a-4bab-8f14-dea2774f3eb4","shortId":"bGaSFw","kind":"skill","title":"Draw Io Diagram Generator","tagline":"Awesome Copilot skill by Github","description":"# Draw.io Diagram Generator\n\nThis skill enables you to generate, edit, and validate draw.io (`.drawio`) diagram files with\ncorrect mxGraph XML structure. All generated files open immediately in the\n[Draw.io VS Code extension](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio)\n(`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.\n\n---\n\n## 1. When to Use This Skill\n\n**Trigger phrases (load this skill when you see these)**\n\n- \"create a diagram\", \"draw a flowchart\", \"generate an architecture diagram\"\n- \"design a sequence diagram\", \"make a UML class diagram\", \"build an ER diagram\"\n- \"add a .drawio file\", \"update the diagram\", \"visualise the flow\"\n- \"document the architecture\", \"show the data model\", \"diagram the service interactions\"\n- Any request to produce or modify a `.drawio`, `.drawio.svg`, or `.drawio.png` file\n\n**Supported diagram types**\n\n| Diagram Type | Template Available | Description |\n|---|---|---|\n| Flowchart | `assets/templates/flowchart.drawio` | Process flows with decisions and branches |\n| System Architecture | `assets/templates/architecture.drawio` | Multi-tier / layered service architecture |\n| Sequence Diagram | `assets/templates/sequence.drawio` | Actor lifelines and timed message flows |\n| ER Diagram | `assets/templates/er-diagram.drawio` | Database tables with relationships |\n| UML Class Diagram | `assets/templates/uml-class.drawio` | Classes, interfaces, enums, relationships |\n| Network Topology | (use shape library) | Routers, servers, firewalls, subnets |\n| BPMN Workflow | (use shape library) | Business process events, tasks, gateways |\n| Mind Map | (manual) | Central topic with radiating branches |\n\n---\n\n## 2. Prerequisites\n\n- If running with VS Code integration enabled, Install the drawio extension: **draw.io VS Code extension** — `hediet.vscode-drawio` (extension id). Install with:\n  ```\n  ext install hediet.vscode-drawio\n  ```\n- **Supported file extensions**: `.drawio`, `.drawio.svg`, `.drawio.png`\n- **Python 3.8+** (optional) — for the validation and shape-insertion scripts in `scripts/`\n\n---\n\n## 3. Step-by-Step Agent Workflow\n\nFollow these steps in order for every diagram generation task.\n\n### Step 1 — Understand the Request\n\nAsk or infer:\n1. **Diagram type** — What kind of diagram? (flowchart, architecture, UML, ER, sequence, network...)\n2. **Entities / actors** — What are the main components, actors, classes, or tables?\n3. **Relationships** — How are they connected? What direction? What cardinality?\n4. **Output path** — Where should the `.drawio` file be saved?\n5. **Existing file** — Are we creating new or editing an existing file?\n\nIf 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).\n\n### Step 2 — Select a Template or Start Fresh\n\n- **Use a template** when the diagram type matches one in `assets/templates/`. Copy the template structure and replace placeholder values.\n- **Start fresh** for novel layouts. Begin with the minimal valid skeleton:\n\n```xml\n<!-- Set modified=\"\" to the current ISO 8601 timestamp when generating a new file -->\n<mxfile host=\"Electron\" modified=\"\" version=\"26.0.0\">\n  <diagram id=\"page-1\" name=\"Page-1\">\n    <mxGraphModel dx=\"1422\" dy=\"762\" grid=\"1\" gridSize=\"10\" guides=\"1\"\n                  tooltips=\"1\" connect=\"1\" arrows=\"1\" fold=\"1\"\n                  page=\"1\" pageScale=\"1\" pageWidth=\"1169\" pageHeight=\"827\"\n                  math=\"0\" shadow=\"0\">\n      <root>\n        <mxCell id=\"0\" />\n        <mxCell id=\"1\" parent=\"0\" />\n        <!-- Your cells go here -->\n      </root>\n    </mxGraphModel>\n  </diagram>\n</mxfile>\n```\n\n> **Rule**: ids `0` and `1` are ALWAYS required and must be the first two cells. Never reuse them.\n\n### Step 3 — Plan the Layout\n\nBefore generating XML, sketch the logical placement:\n- Organise into **rows** or **tiers** (use swimlanes for layers)\n- **Horizontal spacing**: 40–60px between same-row shapes\n- **Vertical spacing**: 80–120px between tier rows\n- Standard shape size: `120x60` px for process boxes, `160x80` px for swimlanes\n- Default canvas: A4 landscape = `1169 x 827` px\n\n### Step 4 — Generate the mxGraph XML\n\n**Vertex cell** (every shape):\n```xml\n<mxCell id=\"unique-id\" value=\"Label\"\n        style=\"rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;\"\n        vertex=\"1\" parent=\"1\">\n  <mxGeometry x=\"100\" y=\"100\" width=\"120\" height=\"60\" as=\"geometry\" />\n</mxCell>\n```\n\n**Edge cell** (every connector):\n```xml\n<mxCell id=\"edge-id\" value=\"Label (optional)\"\n        style=\"edgeStyle=orthogonalEdgeStyle;html=1;\"\n        edge=\"1\" source=\"source-id\" target=\"target-id\" parent=\"1\">\n  <mxGeometry relative=\"1\" as=\"geometry\" />\n</mxCell>\n```\n\n**Critical rules**:\n- Every cell id must be **globally unique** within the file\n- Every vertex must have an `mxGeometry` child with `x`, `y`, `width`, `height`, `as=\"geometry\"`\n- Every edge must have `source` and `target` matching existing vertex ids — **exception**: floating edges (e.g. sequence diagram lifelines) use `sourcePoint`/`targetPoint` inside `<mxGeometry>` instead; see §4 Sequence Diagram\n- Every cell's `parent` must reference an existing cell id\n- Use `html=1` in style when the label contains HTML (`<b>`, `<i>`, `<br>`)\n- Escape XML special characters in labels: `&` => `&amp;`, `<` => `&lt;`, `>` => `&gt;`\n\n### Step 5 — Apply Correct Styles\n\nUse the standard semantic color palette for consistency:\n\n| Purpose | fillColor | strokeColor |\n|---|---|---|\n| Primary / Info | `#dae8fc` | `#6c8ebf` |\n| Success / Start | `#d5e8d4` | `#82b366` |\n| Warning / Decision | `#fff2cc` | `#d6b656` |\n| Error / End | `#f8cecc` | `#b85450` |\n| Neutral | `#f5f5f5` | `#666666` |\n| External / Partner | `#e1d5e7` | `#9673a6` |\n\nCommon style strings by diagram type:\n\n```\n# Rounded process box (flowchart)\nrounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;\n\n# Decision diamond\nrhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;\n\n# Start/End terminal\nellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;\n\n# Database cylinder\nshape=mxgraph.flowchart.database;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;\n\n# Swimlane container (tier)\nswimlane;startSize=30;fillColor=#dae8fc;strokeColor=#6c8ebf;fontStyle=1;\n\n# UML class box\nswimlane;fontStyle=1;align=center;startSize=40;fillColor=#dae8fc;strokeColor=#6c8ebf;\n\n# Interface / stereotype box\nswimlane;fontStyle=3;align=center;startSize=40;fillColor=#f5f5f5;strokeColor=#666666;\n\n# ER table container\nshape=table;startSize=30;container=1;collapsible=1;childLayout=tableLayout;\n\n# Orthogonal connector\nedgeStyle=orthogonalEdgeStyle;html=1;\n\n# ER relationship (crow's foot)\nedgeStyle=entityRelationEdgeStyle;html=1;endArrow=ERmany;startArrow=ERone;\n```\n\n> See `references/style-reference.md` for the complete style key catalog and `references/shape-libraries.md` for all shape library names.\n\n### Step 6 — Save and Validate\n\n1. **Write the file** to the requested path with `.drawio` extension\n2. **Run the validator** (optional but recommended):\n   ```bash\n   python .github/skills/draw-io-diagram-generator/scripts/validate-drawio.py <path-to-file.drawio>\n   ```\n3. **Tell the user** how to open the file:\n   > \"Open `<filename>` 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.\"\n4. **Provide a brief description** of what is in the diagram so the user knows what to expect.\n\n---\n\n## 4. Diagram-Type Recipes\n\n### Flowchart\n\nKey elements: Start (ellipse) => Process (rounded rectangle) => Decision (diamond) => End (ellipse)\n\n```xml\n<!-- Start node -->\n<mxCell id=\"start\" value=\"Start\"\n        style=\"ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;\"\n        vertex=\"1\" parent=\"1\">\n  <mxGeometry x=\"500\" y=\"80\" width=\"120\" height=\"60\" as=\"geometry\" />\n</mxCell>\n\n<!-- Process -->\n<mxCell id=\"p1\" value=\"Process Step\"\n        style=\"rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;\"\n        vertex=\"1\" parent=\"1\">\n  <mxGeometry x=\"500\" y=\"200\" width=\"120\" height=\"60\" as=\"geometry\" />\n</mxCell>\n\n<!-- Decision -->\n<mxCell id=\"d1\" value=\"Condition?\"\n        style=\"rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;\"\n        vertex=\"1\" parent=\"1\">\n  <mxGeometry x=\"460\" y=\"320\" width=\"200\" height=\"100\" as=\"geometry\" />\n</mxCell>\n\n<!-- Arrow: start to p1 -->\n<mxCell id=\"e1\" value=\"\"\n        style=\"edgeStyle=orthogonalEdgeStyle;html=1;\"\n        edge=\"1\" source=\"start\" target=\"p1\" parent=\"1\">\n  <mxGeometry relative=\"1\" as=\"geometry\" />\n</mxCell>\n```\n\n### Architecture Diagram (3-tier)\n\nUse **swimlane containers** for each tier. All service boxes are children of their swimlane.\n\n```xml\n<!-- Tier swimlane -->\n<mxCell id=\"tier1\" value=\"Client Layer\"\n        style=\"swimlane;startSize=30;fillColor=#dae8fc;strokeColor=#6c8ebf;fontStyle=1;\"\n        vertex=\"1\" parent=\"1\">\n  <mxGeometry x=\"60\" y=\"100\" width=\"1050\" height=\"130\" as=\"geometry\" />\n</mxCell>\n\n<!-- Service inside tier (parent=\"tier1\", coords are relative to tier) -->\n<mxCell id=\"webapp\" value=\"Web App\"\n        style=\"rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;\"\n        vertex=\"1\" parent=\"tier1\">\n  <mxGeometry x=\"80\" y=\"40\" width=\"120\" height=\"60\" as=\"geometry\" />\n</mxCell>\n```\n\n> Connectors between tiers use absolute coordinates with `parent=\"1\"`.\n\n### Sequence Diagram\n\nKey elements: Actors (top), Lifelines (dashed vertical lines), Activation boxes, Message arrows.\n\n- Lifelines: `edge=\"1\"` with `endArrow=none` and `dashed=1`, no source/target — use `sourcePoint`/`targetPoint` in geometry\n- Synchronous message: `endArrow=block;endFill=1`\n- Return message: `endArrow=open;endFill=0;dashed=1`\n- Self-call: loop the edge via two Array points to the right and back\n\n**Minimal XML snippet:**\n\n```xml\n<!-- Actor (stick figure) -->\n<mxCell id=\"actorA\" value=\"Client\"\n        style=\"shape=mxgraph.uml.actor;pointerEvents=1;dashed=0;whiteSpace=wrap;html=1;aspect=fixed;\"\n        vertex=\"1\" parent=\"1\">\n  <mxGeometry x=\"110\" y=\"80\" width=\"60\" height=\"80\" as=\"geometry\" />\n</mxCell>\n\n<!-- Service box -->\n<mxCell id=\"actorB\" value=\"API Server\"\n        style=\"rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;\"\n        vertex=\"1\" parent=\"1\">\n  <mxGeometry x=\"480\" y=\"100\" width=\"160\" height=\"60\" as=\"geometry\" />\n</mxCell>\n\n<!-- Lifeline — floating edge: uses sourcePoint/targetPoint, NOT source/target attributes -->\n<mxCell id=\"lifA\" value=\"\"\n        style=\"edgeStyle=none;dashed=1;endArrow=none;\"\n        edge=\"1\" parent=\"1\">\n  <mxGeometry relative=\"1\" as=\"geometry\">\n    <mxPoint x=\"140\" y=\"160\" as=\"sourcePoint\" />\n    <mxPoint x=\"140\" y=\"700\" as=\"targetPoint\" />\n  </mxGeometry>\n</mxCell>\n\n<!-- Activation box (thin rectangle on lifeline) -->\n<mxCell id=\"actA1\" value=\"\"\n        style=\"fillColor=#dae8fc;strokeColor=#6c8ebf;\"\n        vertex=\"1\" parent=\"1\">\n  <mxGeometry x=\"130\" y=\"220\" width=\"20\" height=\"180\" as=\"geometry\" />\n</mxCell>\n\n<!-- Synchronous message -->\n<mxCell id=\"msg1\" value=\"POST /orders\"\n        style=\"edgeStyle=elbowEdgeStyle;elbow=vertical;html=1;endArrow=block;endFill=1;\"\n        edge=\"1\" source=\"actA1\" target=\"actorB\" parent=\"1\">\n  <mxGeometry relative=\"1\" as=\"geometry\" />\n</mxCell>\n\n<!-- Return message (dashed) -->\n<mxCell id=\"msg2\" value=\"201 Created\"\n        style=\"edgeStyle=elbowEdgeStyle;elbow=vertical;dashed=1;html=1;endArrow=open;endFill=0;\"\n        edge=\"1\" source=\"actorB\" target=\"actA1\" parent=\"1\">\n  <mxGeometry relative=\"1\" as=\"geometry\" />\n</mxCell>\n```\n\n> **Note:** Lifelines are floating edges that use `sourcePoint`/`targetPoint` in `<mxGeometry>` instead of `source`/`target` attributes. This is the standard draw.io pattern for sequence diagrams.\n\n### ER Diagram\n\nUse `shape=table` containers with `childLayout=tableLayout`. Rows are `shape=tableRow` cells with `portConstraint=eastwest`. Columns inside each row are `shape=partialRectangle`.\n\nRelationship arrows use `edgeStyle=entityRelationEdgeStyle`:\n- One-to-One: `startArrow=ERone;endArrow=ERone`\n- One-to-Many: `startArrow=ERone;endArrow=ERmany`\n- Many-to-Many: `startArrow=ERmany;endArrow=ERmany`\n- Mandatory: `ERmandOne`, Optional: `ERzeroToOne`\n\n### UML Class Diagram\n\nClass boxes are swimlane containers. Attributes and methods are plain text cells. Dividers are zero-height swimlane children.\n\nArrow styles by relationship type:\n\n| Relationship | Style String |\n|---|---|\n| Inheritance (extends) | `edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=0;` |\n| Realization (implements) | `edgeStyle=orthogonalEdgeStyle;dashed=1;html=1;endArrow=block;endFill=0;` |\n| Composition | `edgeStyle=orthogonalEdgeStyle;html=1;startArrow=diamond;startFill=1;endArrow=none;` |\n| Aggregation | `edgeStyle=orthogonalEdgeStyle;html=1;startArrow=diamond;startFill=0;endArrow=none;` |\n| Dependency | `edgeStyle=orthogonalEdgeStyle;dashed=1;html=1;endArrow=open;endFill=0;` |\n| Association | `edgeStyle=orthogonalEdgeStyle;html=1;endArrow=open;endFill=0;` |\n\n---\n\n## 5. Multi-Page Diagrams\n\nAdd multiple `<diagram>` elements for complex systems:\n\n```xml\n<mxfile host=\"Electron\" version=\"26.0.0\">\n  <diagram id=\"overview\" name=\"Overview\">\n    <!-- overview mxGraphModel -->\n  </diagram>\n  <diagram id=\"detail\" name=\"Detail View\">\n    <!-- detail mxGraphModel -->\n  </diagram>\n</mxfile>\n```\n\nEach page has its own independent cell id namespace. The same id value can appear in different pages without conflict.\n\n---\n\n## 6. Editing Existing Diagrams\n\nWhen modifying an existing `.drawio` file:\n\n1. **Read** the file first to understand existing cell ids, positions, and parent hierarchy\n2. **Identify the target diagram page** — by index or `name` attribute\n3. **Assign new unique ids** that do not collide with existing ids\n4. **Respect the container hierarchy** — children of a swimlane use coordinates relative to their parent\n5. **Verify edges** — after repositioning nodes, confirm edge source/target ids remain valid\n\nUse `scripts/add-shape.py` to safely add a single shape without editing raw XML:\n```bash\npython .github/skills/draw-io-diagram-generator/scripts/add-shape.py docs/arch.drawio \"New Service\" 700 380\n```\n\n---\n\n## 7. Best Practices\n\n**Layout**\n- Align shapes to the 10px grid (all coordinates divisible by 10)\n- Group related shapes inside swimlane containers\n- One diagram topic per page; use multi-page files for complex systems\n- Aim for 40 or fewer cells per page for readability\n\n**Labels**\n- Add a title text cell (`text;strokeColor=none;fillColor=none;fontSize=18;fontStyle=1`) at top of every page\n- Always set `whiteSpace=wrap;html=1` on vertex shapes\n- Keep labels concise — 3 words or fewer per shape where possible\n\n**Style consistency**\n- Use the semantic color palette from Section 3 Step 5 consistently across a project\n- Prefer `edgeStyle=orthogonalEdgeStyle` for clean right-angle connectors\n- Do not inline arbitrary HTML in labels unless necessary\n\n**File naming**\n- Use kebab-case: `order-service-flow.drawio`, `database-schema.drawio`\n- Place diagrams alongside the code they document: `docs/` or `architecture/`\n\n---\n\n## 8. Troubleshooting\n\n| Problem | Likely Cause | Fix |\n|---|---|---|\n| File opens blank in VS Code | Missing id=0 or id=1 cell | Add both root cells before any other cells |\n| Shape at wrong position | Child inside container — coords are relative | Check `parent`; adjust x/y relative to container |\n| Edge not visible | source or target id does not match any vertex | Verify both ids exist exactly as written |\n| Diagram shows \"Compressed\" | mxGraphModel is base64-encoded | Open in draw.io web, File > Export > XML (uncompressed) |\n| Shape style not rendering | Typo in shape= name | Check `references/shape-libraries.md` for exact style string |\n| Label shows escaped HTML | html=0 on a cell with HTML label | Add `html=1;` to the cell style |\n| Container children overlap container edge | Container height too small | Increase container height in mxGeometry |\n\n---\n\n## 9. Validation Checklist\n\nBefore delivering any generated `.drawio` file, verify:\n\n- [ ] File starts with `<mxfile>` root element\n- [ ] Every `<diagram>` has a non-empty `id` attribute\n- [ ] `<mxCell id=\"0\" />` is the first cell in every diagram\n- [ ] `<mxCell id=\"1\" parent=\"0\" />` is the second cell in every diagram\n- [ ] All cell `id` values are unique within each diagram\n- [ ] Every vertex cell has `vertex=\"1\"` and a child `<mxGeometry as=\"geometry\">`\n- [ ] Every edge cell has `edge=\"1\"` and either: (a) `source`/`target` pointing to existing vertex ids, or (b) `<mxPoint as=\"sourcePoint\">` and `<mxPoint as=\"targetPoint\">` in its `<mxGeometry>` (floating edge — used for sequence diagram lifelines)\n- [ ] Every cell (except id=0) has a `parent` pointing to an existing id\n- [ ] `html=1` is in the style for any label containing HTML tags\n- [ ] XML is well-formed (no unclosed tags, no unescaped `&`, `<`, `>` in attribute values)\n- [ ] A title label cell exists at the top of each page\n\nRun the automated validator:\n```bash\npython .github/skills/draw-io-diagram-generator/scripts/validate-drawio.py <file.drawio>\n```\n\n---\n\n## 10. Output Format\n\nWhen delivering a diagram, always provide:\n\n1. **The `.drawio` file** written to the requested path\n2. **A one-sentence summary** of what the diagram shows\n3. **How to open it**:\n   > \"Open `<filename>` 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.\"\n4. **How to edit it** (if the user is likely to customise):\n   > \"Click any shape to select it. Double-click to edit the label. Drag to reposition.\"\n5. **Validation status** — whether the validator script was run and passed\n\n---\n\n## 11. References\n\nAll companion files are in `.github/skills/draw-io-diagram-generator/`:\n\n| File | Contents |\n|---|---|\n| `references/drawio-xml-schema.md` | Complete mxfile / mxGraphModel / mxCell attribute reference, coordinate system, reserved cells, validation rules |\n| `references/style-reference.md` | All style keys with allowed values, vertex and edge style keys, shape catalog, semantic color palette |\n| `references/shape-libraries.md` | All shape library categories (General, Flowchart, UML, ER, Network, BPMN, Mockup, K8s) with style strings |\n| `assets/templates/flowchart.drawio` | Ready-to-use flowchart template |\n| `assets/templates/architecture.drawio` | 4-tier system architecture template |\n| `assets/templates/sequence.drawio` | 3-actor sequence diagram template |\n| `assets/templates/er-diagram.drawio` | 3-table ER diagram with crow's foot relationships |\n| `assets/templates/uml-class.drawio` | Interface + 2 classes + enum with relationship arrows |\n| `scripts/validate-drawio.py` | Python script to validate XML structure of any .drawio file |\n| `scripts/add-shape.py` | Python CLI to add a new shape to an existing diagram |\n| `scripts/README.md` | How to use the scripts with examples |","tags":["draw","diagram","generator","awesome","copilot","github"],"capabilities":["skill","source-github","category-awesome-copilot"],"categories":["awesome-copilot"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/github/awesome-copilot/draw-io-diagram-generator","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"install_from":"skills.sh"}},"qualityScore":"0.300","qualityRationale":"deterministic score 0.30 from registry signals: · indexed on skills.sh · published under github/awesome-copilot","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T03:40:28.798Z","embedding":null,"createdAt":"2026-04-18T20:32:24.376Z","updatedAt":"2026-04-22T03:40:28.798Z","lastSeenAt":"2026-04-22T03:40:28.798Z","tsv":"'/items?itemname=hediet.vscode-drawio)':44 '0':412,927,1069,1081,1101,1114,1123,1400,1484,1599 '1':69,280,287,414,566,630,634,645,656,668,684,690,721,723,731,740,765,885,902,908,921,929,1065,1075,1077,1086,1090,1097,1108,1110,1119,1166,1308,1319,1403,1493,1563,1572,1609,1660 '10':1264,1651 '10px':1258 '11':1751 '1169':481 '120px':461 '120x60':468 '160x80':473 '18':1306 '2':216,300,372,776,1180,1669,1838 '3':262,312,429,704,786,860,1191,1326,1343,1680,1821,1827 '3.8':250 '30':678,719 '380':1249 '4':322,486,551,822,840,1203,1712,1815 '40':451,694,708,1286 '5':332,581,1124,1218,1345,1740 '6':761,1156 '60px':452 '666666':614,712 '6c8ebf':599,638,682,698 '7':1250 '700':1248 '8':1386 '80':460 '827':483 '82b366':603,660 '9':1512 '9673a6':618 'a4':479 'absolut':881 'across':1347 'activ':896 'actor':168,302,308,890,1822 'add':107,1129,1234,1295,1405,1491,1859 'adjust':1425 'agent':267 'aggreg':1093 'aim':1284 'align':691,705,1254 'allow':1779 'alongsid':1378 'also':54 'alway':416,1314,1658 'ambigu':348 'angl':1357 'api':366 'app':62,65,813,816,1705,1708 'appear':1150 'appli':582 'arbitrari':1362 'architectur':92,119,157,164,295,858,1385,1818 'array':938 'arrow':899,998,1052,1843 'ask':284 'assets/templates':389 'assets/templates/architecture.drawio':158,1814 'assets/templates/er-diagram.drawio':176,1826 'assets/templates/flowchart.drawio':149,1807 'assets/templates/sequence.drawio':167,1820 'assets/templates/uml-class.drawio':184,1836 'assign':1192 'associ':1115 'attribut':963,1038,1190,1534,1631,1766 'autom':1646 'automat':802,1695 'avail':146 'awesom':5 'b':1584 'b85450':611,672 'back':944 'base64':1455 'base64-encoded':1454 'bash':783,1242,1648 'begin':403 'best':1251 'blank':1394 'block':919,1067,1079 'box':472,627,687,701,870,897,1034 'bpmn':198,1801 'branch':155,215 'brief':825 'build':103 'busi':203 'call':367,932 'canva':478 'cardin':321 'case':1373 'catalog':752,1787 'categori':1795 'category-awesome-copilot' 'caus':1390 'cell':424,492,497,504,555,562,986,1044,1142,1174,1289,1299,1404,1408,1412,1487,1496,1538,1545,1550,1560,1569,1596,1636,1771 'center':692,706 'central':211 'charact':577 'check':1423,1473 'checklist':1514 'child':519,1417,1566 'childlayout':724,980 'children':872,1051,1208,1499 'class':101,182,185,309,686,1031,1033,1839 'clean':1354 'cli':1857 'click':1724,1732 'code':40,222,231,798,1380,1397,1688 'collaps':722 'collid':1199 'color':589,1339,1789 'column':990 'common':619 'companion':1754 'complet':749,1762 'complex':1133,1282 'compon':307 'composit':1082 'compress':1451 'concis':1325 'confirm':1224 'conflict':1155 'connect':317 'connector':499,727,877,1358 'consist':592,1335,1346 'contain':572,674,715,720,864,978,1037,1206,1270,1419,1429,1498,1501,1503,1508,1617 'content':1760 'context':356 'coord':1420 'coordin':882,1213,1261,1768 'copi':390 'copilot':6 'correct':27,583 'creat':84,337 'critic':501 'crow':734,1832 'customis':1723 'cylind':662 'd5e8d4':602,658 'd6b656':607,649 'dae8fc':598,636,680,696 'dash':893,907,928,1074,1107 'data':122 'databas':177,661 'database-schema.drawio':1375 'decis':153,605,639,853 'default':477 'deliv':1516,1655 'depend':1104 'descript':147,826 'design':94 'desktop':64,815,1707 'diagram':3,11,24,86,93,97,102,106,113,124,141,143,166,175,183,276,288,293,353,362,370,384,543,553,623,832,842,859,887,972,974,1032,1128,1159,1184,1272,1377,1449,1541,1548,1557,1593,1657,1678,1824,1830,1866 'diagram-typ':841 'diamond':640,854,1088,1099 'differ':1152 'direct':319 'divid':1045 'divis':1262 'doc':1383 'docs/arch.drawio':1245 'document':117,1382 'doubl':1731 'double-click':1730 'drag':1737 'draw':1,87 'draw.io':10,22,38,60,229,805,810,968,1459,1690,1703 'drawio':23,46,109,135,227,234,242,246,328,774,1164,1519,1662,1853 'drawio.png':138,248 'drawio.svg':136,247 'e.g':357,541 'e1d5e7':617 'eastwest':989 'edg':496,528,540,901,935,953,1220,1225,1430,1502,1568,1571,1589,1783 'edgestyl':728,737,1000,1062,1072,1083,1094,1105,1116,1351 'edit':19,340,1157,1239,1715,1734 'either':1574 'element':847,889,1131,1526 'ellips':652,849,856 'empti':1532 'enabl':15,224 'encod':1456 'end':609,855 'endarrow':741,904,918,924,1008,1016,1024,1066,1078,1091,1102,1111,1120 'endfil':920,926,1068,1080,1113,1122 'entiti':301 'entityrelationedgestyl':738,1001 'enum':187,1840 'er':105,174,297,361,713,732,973,1799,1829 'ermandon':1027 'ermani':742,1017,1023,1025 'eron':744,1007,1009,1015 'error':608 'erzerotoon':1029 'escap':574,1481 'event':205 'everi':275,493,498,503,513,527,554,1312,1527,1540,1547,1558,1567,1595 'exact':1446,1476 'exampl':1874 'except':538,1597 'exist':333,342,535,561,1158,1163,1173,1201,1445,1580,1606,1637,1865 'expect':839 'export':1462 'ext':239 'extend':1061 'extens':41,228,232,235,245,775,806,1691 'extern':615 'f5f5f5':613,710 'f8cecc':610,670 'fewer':1288,1329 'fff2cc':606,647 'file':25,33,57,110,139,244,329,334,343,512,768,794,1165,1169,1280,1368,1392,1461,1520,1522,1663,1755,1759,1854 'fillcolor':594,635,646,657,669,679,695,709,1303 'firewal':196 'first':422,1170,1537 'fix':50,1391 'float':539,952,1588 'flow':116,151,173,368 'flowchart':89,148,294,628,845,1797,1812 'follow':269 'fontsiz':1305 'fontstyl':683,689,703,1307 'foot':736,1834 'form':1624 'format':1653 'fresh':378,399 'gateway':207 'general':1796 'generat':4,12,18,32,90,277,434,487,1518 'geometri':526,915 'github':9 'github/skills/draw-io-diagram-generator':1758 'github/skills/draw-io-diagram-generator/scripts/add-shape.py':1244 'github/skills/draw-io-diagram-generator/scripts/validate-drawio.py':785,1650 'global':508 'grid':1259 'group':1265 'hediet.vscode':45,233,241 'height':524,1049,1504,1509 'hierarchi':1179,1207 'horizont':449 'html':565,573,633,644,655,667,730,739,1064,1076,1085,1096,1109,1118,1318,1363,1482,1483,1489,1492,1608,1618 'id':236,411,505,537,563,1143,1147,1175,1195,1202,1227,1399,1402,1436,1444,1533,1551,1582,1598,1607 'identifi':1181 'immedi':35 'implement':1071 'increas':1507 'independ':1141 'index':1187 'infer':286,349 'info':597 'inherit':1060 'inlin':1361 'insert':258 'insid':548,991,1268,1418 'instal':225,237,240 'instead':549,959 'integr':223 'interact':127 'interfac':186,699,1837 'io':2 'k8s':1803 'kebab':1372 'kebab-cas':1371 'keep':1323 'key':751,846,888,1777,1785 'kind':291 'know':836 'label':571,579,1294,1324,1365,1479,1490,1616,1635,1736 'landscap':480 'layer':162,448 'layout':402,432,1253 'librari':193,202,758,1794 'lifelin':169,544,892,900,950,1594 'like':1389,1721 'line':895 'load':77 'logic':438 'loop':933 'main':306 'make':98 'mandatori':1026 'mani':1013,1019,1021 'manual':49,210 'many-to-mani':1018 'map':209 'marketplace.visualstudio.com':43 'marketplace.visualstudio.com/items?itemname=hediet.vscode-drawio)':42 'match':386,534,1439 'messag':172,898,917,923 'method':1040 'mind':208 'minim':406,945 'miss':1398 'mockup':1802 'model':123 'modifi':133,1161 'multi':160,1126,1278 'multi-pag':1125,1277 'multi-ti':159 'multipl':1130 'must':419,506,515,529,558 'mxcell':1765 'mxfile':1763 'mxgeometri':518,1511 'mxgraph':28,489 'mxgraph.flowchart.database':664 'mxgraphmodel':1452,1764 'name':759,1189,1369,1472 'namespac':1144 'necessari':1367 'network':189,299,1800 'neutral':612 'never':425 'new':338,1193,1246,1861 'node':1223 'non':1531 'non-empti':1530 'none':905,1092,1103,1302,1304 'note':949 'novel':401 'one':387,1003,1005,1011,1271,1672 'one-sent':1671 'one-to-mani':1010 'one-to-on':1002 'open':34,55,792,795,925,1112,1121,1393,1457,1683,1685,1699 'option':251,780,1028 'order':273 'order-service-flow.drawio':1374 'organis':440 'orthogon':726 'orthogonaledgestyl':729,1063,1073,1084,1095,1106,1117,1352 'output':323,1652 'overlap':1500 'page':1127,1137,1153,1185,1275,1279,1291,1313,1643 'palett':590,1340,1790 'parent':557,884,1178,1217,1424,1602 'partialrectangl':996 'partner':616 'pass':1750 'path':324,772,1668 'pattern':969 'per':1274,1290,1330 'phrase':76 'place':1376 'placehold':396 'placement':439 'plain':1042 'plan':430 'point':939,1578,1603 'portconstraint':988 'posit':1176,1416 'possibl':1333 'practic':1252 'prefer':68,821,1350,1711 'prerequisit':217 'primari':596 'problem':1388 'process':150,204,471,626,850 'produc':131 'project':1349 'provid':823,1659 'purpos':593 'px':469,474,484 'python':249,784,1243,1649,1845,1856 'radiat':214 'raw':1240 'read':1167 'readabl':1293 'readi':1809 'ready-to-us':1808 'realiz':1070 'recip':844 'recommend':782 'rectangl':852 'refer':559,1752,1767 'references/drawio-xml-schema.md':1761 'references/shape-libraries.md':754,1474,1791 'references/style-reference.md':746,1774 'relat':1214,1266,1422,1427 'relationship':180,188,313,733,997,1055,1057,1835,1842 'remain':1228 'render':801,1468,1693 'replac':395 'reposit':1222,1739 'request':129,283,346,771,1667 'requir':51,417 'reserv':1770 'respect':1204 'return':922 'reus':426 'rhombus':641 'right':942,1356 'right-angl':1355 'root':1407,1525 'round':625,629,851 'router':194 'row':442,456,464,982,993 'rule':410,502,1773 'run':219,777,1644,1748 'safe':1233 'same-row':454 'save':331,762 'script':259,261,1746,1846,1872 'scripts/add-shape.py':1231,1855 'scripts/readme.md':1867 'scripts/validate-drawio.py':1844 'second':1544 'section':1342 'see':82,550,745 'select':373,1728 'self':931 'self-cal':930 'semant':588,1338,1788 'sensibl':352 'sentenc':1673 'sequenc':96,165,298,369,542,552,886,971,1592,1823 'server':195 'servic':126,163,869,1247 'set':1315 'shape':192,201,257,457,466,494,663,716,757,976,984,995,1237,1255,1267,1322,1331,1413,1465,1471,1726,1786,1793,1862 'shape-insert':256 'show':120,358,363,1450,1480,1679 'singl':1236 'size':467 'skeleton':408 'sketch':436 'skill':7,14,74,79 'small':1506 'snippet':947 'sourc':531,961,1433,1576 'source-github' 'source/target':910,1226 'sourcepoint':546,912,956 'space':450,459 'special':576 'standard':465,587,967 'start':377,398,601,848,1523 'start/end':650 'startarrow':743,1006,1014,1022,1087,1098 'startfil':1089,1100 'startsiz':677,693,707,718 'status':1742 'step':264,266,271,279,371,428,485,580,760,1344 'step-by-step':263 'stereotyp':700 'string':621,1059,1478,1806 'strokecolor':595,637,648,659,671,681,697,711,1301 'structur':30,393,1850 'style':568,584,620,750,1053,1058,1334,1466,1477,1497,1613,1776,1784,1805 'subnet':197 'success':600 'summari':1674 'support':140,243 'swimlan':446,476,673,676,688,702,863,875,1036,1050,1211,1269 'synchron':916 'system':156,1134,1283,1769,1817 'tabl':178,311,360,714,717,977,1828 'tablelayout':725,981 'tablerow':985 'tag':1619,1627 'target':533,962,1183,1435,1577 'targetpoint':547,913,957 'task':206,278 'tell':787 'templat':145,375,381,392,1813,1819,1825 'termin':651 'text':1043,1298,1300 'tier':161,444,463,675,861,867,879,1816 'time':171 'titl':1297,1634 'top':891,1310,1640 'topic':212,1273 'topolog':190 'trigger':75 'troubleshoot':1387 'two':423,937 'type':142,144,289,354,385,624,843,1056 'typo':1469 'uml':100,181,296,685,1030,1798 'unclos':1626 'uncompress':1464 'understand':281,1172 'unescap':1629 'uniqu':509,1194,1554 'unless':1366 'updat':111 'use':72,191,200,379,445,545,564,585,809,862,880,911,955,975,999,1212,1230,1276,1336,1370,1590,1811,1870 'user':789,835,1719 'valid':21,254,407,764,779,1229,1513,1647,1741,1745,1772,1848 'valu':397,1148,1552,1632,1780 'verifi':1219,1442,1521 'vertex':491,514,536,1321,1441,1559,1562,1581,1781 'vertic':458,894 'via':936 'visibl':1432 'visualis':114 'vs':39,221,230,797,1396,1687 'warn':604 'web':61,812,1460,1704 'well':818,1623 'well-form':1622 'whether':1743 'whitespac':631,642,653,665,1316 'width':523 'within':510,1555 'without':47,1154,1238 'word':1327 'workflow':199,268 'wrap':632,643,654,666,1317 'write':766 'written':1448,1664 'wrong':1415 'x':482,521 'x/y':1426 'xml':29,409,435,490,495,500,575,857,876,946,948,1135,1241,1463,1620,1849 'y':522 'zero':1048 'zero-height':1047","prices":[{"id":"2d53215c-69b7-443d-b4ff-bf1ac8fffab7","listingId":"257a6ae6-617a-4bab-8f14-dea2774f3eb4","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"github","category":"awesome-copilot","install_from":"skills.sh"},"createdAt":"2026-04-18T20:32:24.376Z"}],"sources":[{"listingId":"257a6ae6-617a-4bab-8f14-dea2774f3eb4","source":"github","sourceId":"github/awesome-copilot/draw-io-diagram-generator","sourceUrl":"https://github.com/github/awesome-copilot/tree/main/skills/draw-io-diagram-generator","isPrimary":false,"firstSeenAt":"2026-04-18T21:49:14.212Z","lastSeenAt":"2026-04-22T00:52:08.449Z"},{"listingId":"257a6ae6-617a-4bab-8f14-dea2774f3eb4","source":"skills_sh","sourceId":"github/awesome-copilot/draw-io-diagram-generator","sourceUrl":"https://skills.sh/github/awesome-copilot/draw-io-diagram-generator","isPrimary":true,"firstSeenAt":"2026-04-18T20:32:24.376Z","lastSeenAt":"2026-04-22T03:40:28.798Z"}],"details":{"listingId":"257a6ae6-617a-4bab-8f14-dea2774f3eb4","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"github","slug":"draw-io-diagram-generator","source":"skills_sh","category":"awesome-copilot","skills_sh_url":"https://skills.sh/github/awesome-copilot/draw-io-diagram-generator"},"updatedAt":"2026-04-22T03:40:28.798Z"}}