Add Draw.io Diagram Generator skill and instructions (#1179)

* Add draw-io diagram generator skill for awesome github copilot

* Add comprehensive shape libraries and style reference documentation for draw.io

- Introduced a new markdown file for draw.io shape libraries detailing various built-in shapes, their style keys, and usage.
- Added a complete style reference for `<mxCell>` elements, including universal style keys, shape-specific keys, edge styles, and color palettes.
- Included examples for common styles and shapes to aid users in creating diagrams effectively.

* Add draw-io diagram validation and shape addition scripts

* Add new diagram templates for flowchart, sequence, and UML class diagrams

- Created a flowchart template with a structured layout including start, steps, decision points, and end.
- Added a sequence diagram template illustrating interactions between a client, API server, and database with activation boxes and message arrows.
- Introduced a UML class diagram template featuring an interface, classes, attributes, methods, and relationships, including composition and realization.

* Add draw-io diagram generator skill to README with detailed usage instructions and bundled assets

* Add draw.io instructions with workflow, XML structure rules, style conventions, and validation checklist

* Add draw.io diagram standards to README instructions for enhanced diagram creation and editing

* Moving diagram templates to assets/ to follow agentskills structure

- Moved flowchart template with start, steps, decision points, and end nodes.
- Moved sequence diagram template illustrating interactions between a client, API server, and database.
- Moved UML class diagram template featuring an interface, classes, attributes, methods, and relationships.

* Clarify installation instructions for draw.io VS Code extension in SKILL.md

Author: SriSatyaLokesh

docs/README.instructions.md

@@ -89,6 +89,7 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-instructions) for guidelines on
 | [Dev Box image definitions](../instructions/devbox-image-definition.instructions.md)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fdevbox-image-definition.instructions.md)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fdevbox-image-definition.instructions.md) | Authoring recommendations for creating YAML based image definition files for use with Microsoft Dev Box Team Customizations |
 | [DevOps Core Principles](../instructions/devops-core-principles.instructions.md)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fdevops-core-principles.instructions.md)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fdevops-core-principles.instructions.md) | Foundational instructions covering core DevOps principles, culture (CALMS), and key metrics (DORA) to guide GitHub Copilot in understanding and promoting effective software delivery. |
 | [Dotnet Wpf](../instructions/dotnet-wpf.instructions.md)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fdotnet-wpf.instructions.md)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fdotnet-wpf.instructions.md) | .NET WPF component and application patterns |
+| [draw.io Diagram Standards](../instructions/draw-io.instructions.md)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fdraw-io.instructions.md)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fdraw-io.instructions.md) | Use when creating, editing, or reviewing draw.io diagrams and mxGraph XML in .drawio, .drawio.svg, or .drawio.png files. |
 | [Fedora Administration Guidelines](../instructions/fedora-linux.instructions.md)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ffedora-linux.instructions.md)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ffedora-linux.instructions.md) | Guidance for Fedora (Red Hat family) systems, dnf workflows, SELinux, and modern systemd practices. |
 | [Genaiscript](../instructions/genaiscript.instructions.md)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fgenaiscript.instructions.md)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fgenaiscript.instructions.md) | AI-powered script generation guidelines |
 | [Generate Modern Terraform Code For Azure](../instructions/generate-modern-terraform-code-for-azure.instructions.md)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fgenerate-modern-terraform-code-for-azure.instructions.md)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fgenerate-modern-terraform-code-for-azure.instructions.md) | Guidelines for generating modern Terraform code for Azure |

docs/README.skills.md

@@ -114,6 +114,7 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-skills) for guidelines on how to
 | [dotnet-timezone](../skills/dotnet-timezone/SKILL.md) | .NET timezone handling guidance for C# applications. Use when working with TimeZoneInfo, DateTimeOffset, NodaTime, UTC conversion, daylight saving time, scheduling across timezones, cross-platform Windows/IANA timezone IDs, or when a .NET user needs the timezone for a city, address, region, or country and copy-paste-ready C# code. | `references/code-patterns.md`<br />`references/timezone-index.md` |
 | [dotnet-upgrade](../skills/dotnet-upgrade/SKILL.md) | Ready-to-use prompts for comprehensive .NET framework upgrade analysis and execution | None |
 | [doublecheck](../skills/doublecheck/SKILL.md) | Three-layer verification pipeline for AI output. Extracts verifiable claims, finds supporting or contradicting sources via web search, runs adversarial review for hallucination patterns, and produces a structured verification report with source links for human review. | `assets/verification-report-template.md` |
+| [draw-io-diagram-generator](../skills/draw-io-diagram-generator/SKILL.md) | Use when creating, editing, or generating draw.io diagram files (.drawio, .drawio.svg, .drawio.png). Covers mxGraph XML authoring, shape libraries, style strings, flowcharts, system architecture, sequence diagrams, ER diagrams, UML class diagrams, network topology, layout strategy, the hediet.vscode-drawio VS Code extension, and the full agent workflow from request to a ready-to-open file. | `assets/templates`<br />`references/drawio-xml-schema.md`<br />`references/shape-libraries.md`<br />`references/style-reference.md`<br />`scripts/.gitignore`<br />`scripts/README.md`<br />`scripts/add-shape.py`<br />`scripts/validate-drawio.py` |
 | [editorconfig](../skills/editorconfig/SKILL.md) | Generates a comprehensive and best-practice-oriented .editorconfig file based on project analysis and user preferences. | None |
 | [ef-core](../skills/ef-core/SKILL.md) | Get best practices for Entity Framework Core | None |
 | [email-drafter](../skills/email-drafter/SKILL.md) | Draft and review professional emails that match your personal writing style. Analyzes your sent emails for tone, greeting, structure, and sign-off patterns via WorkIQ, then generates context-aware drafts for any recipient. USE FOR: draft email, write email, compose email, reply email, follow-up email, analyze email tone, email style. | None |

instructions/draw-io.instructions.md

@@ -0,0 +1,144 @@
+---
+description: "Use when creating, editing, or reviewing draw.io diagrams and mxGraph XML in .drawio, .drawio.svg, or .drawio.png files."
+applyTo: "**/*.drawio,**/*.drawio.svg,**/*.drawio.png"
+---
+
+# draw.io Diagram Standards
+
+> **Skill**: Load `.github/skills/draw-io/SKILL.md` for full workflow, XML recipes, and troubleshooting before generating or editing any `.drawio` file.
+
+---
+
+## Required Workflow
+
+Follow these steps for every draw.io task:
+
+1. **Identify** the diagram type (flowchart / architecture / sequence / ER / UML / network / BPMN)
+2. **Select** the matching template from `.github/skills/draw-io/templates/` and adapt it, or start from the minimal skeleton
+3. **Plan** the layout on paper before writing XML — define tiers, actors, or entities first
+4. **Generate** valid mxGraph XML following the rules below
+5. **Validate** using `python .github/skills/draw-io/scripts/validate-drawio.py <file>`
+6. **Confirm** the file renders by opening it in VS Code with the draw.io extension (`hediet.vscode-drawio`)
+
+---
+
+## XML Structure Rules (Non-Negotiable)
+
+```xml
+<!-- Set modified to the current ISO 8601 timestamp when generating a new file -->
+<mxfile host="Electron" modified="" version="26.0.0">
+  <diagram id="unique-id" name="Page Name">
+    <mxGraphModel ...>
+      <root>
+        <mxCell id="0" />                          <!-- REQUIRED: always first -->
+        <mxCell id="1" parent="0" />               <!-- REQUIRED: always second -->
+        <!-- all other cells go here -->
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
+```
+
+- `id="0"` and `id="1"` **must** be present and must be the first two cells — no exceptions
+- Every cell `id` must be **unique** within the diagram
+- Every vertex (`vertex="1"`) must have a child `<mxGeometry x y width height as="geometry">`
+- Every edge (`edge="1"`) must have `source`/`target` pointing to existing vertex ids — **exception**: floating edges (sequence diagram lifelines) use `<mxPoint as="sourcePoint">` and `<mxPoint as="targetPoint">` inside `<mxGeometry>` instead of `source`/`target` attributes
+- Every cell except id=0 must have `parent` pointing to an existing id
+- Children of a container (swimlane) use **coordinates relative to their parent**, not the canvas
+
+---
+
+## Mandatory Style Conventions
+
+### Semantic Color Palette — Use consistently across the project
+
+| Role | fillColor | strokeColor |
+|---|---|---|
+| Primary / Info (default) | `#dae8fc` | `#6c8ebf` |
+| Success / Start / Positive | `#d5e8d4` | `#82b366` |
+| Warning / Decision | `#fff2cc` | `#d6b656` |
+| Error / End / Danger | `#f8cecc` | `#b85450` |
+| Neutral / Interface | `#f5f5f5` | `#666666` |
+| External / Partner | `#e1d5e7` | `#9673a6` |
+
+### Always include on vertex shapes
+
+```
+whiteSpace=wrap;html=1;
+```
+
+### Use `html=1` whenever a label contains HTML tags (`<b>`, `<i>`, `<br>`)
+
+### Standard connectors
+
+```
+edgeStyle=orthogonalEdgeStyle;html=1;
+```
+
+---
+
+## Diagram-Type Quick Reference
+
+| Type | Container | Key shapes | Connector style |
+|---|---|---|---|
+| Flowchart | None | `ellipse` (start/end), `rounded=1` (process), `rhombus` (decision) | `orthogonalEdgeStyle` |
+| Architecture | `swimlane` per tier | `rounded=1` services, cloud/DB shapes | `orthogonalEdgeStyle` with labels |
+| Sequence | None | `mxgraph.uml.actor`, dashed lifeline edges | `endArrow=block` (sync), `endArrow=open;dashed=1` (return) |
+| ER Diagram | `shape=table;childLayout=tableLayout` | `shape=tableRow`, `shape=partialRectangle` | `entityRelationEdgeStyle;endArrow=ERmany;startArrow=ERone` |
+| UML Class | `swimlane` per class | text rows for attributes/methods | `endArrow=block;endFill=0` (inherit), `dashed=1` (realize) |
+
+---
+
+## Layout Best Practices
+
+- Align all coordinates to the **10 px grid** (values divisible by 10)
+- **Horizontal**: 40–60 px gap between same-row shapes
+- **Vertical**: 80–120 px gap between tier rows
+- Standard shape size: `120 × 60` px (process), `200 × 100` px (decision diamond)
+- Default canvas: A4 landscape `1169 × 827` px
+- Maximum **40 cells per page** — split into multiple pages for larger diagrams
+- Add a **title text cell** at top of every page:
+  ```
+  style="text;strokeColor=none;fillColor=none;fontSize=18;fontStyle=1;align=center;"
+  ```
+
+---
+
+## File and Naming Conventions
+
+- Extension: `.drawio` for version-controlled diagrams, `.drawio.svg` for files embedded in Markdown
+- Naming: `kebab-case` — e.g. `order-flow.drawio`, `database-schema.drawio`
+- Location: `docs/` or `architecture/` alongside the code they document
+- Multi-page: use one `<diagram>` element per logical view within the same `<mxfile>`
+
+---
+
+## Validation Checklist (run before every commit)
+
+- [ ] `<mxCell id="0" />` and `<mxCell id="1" parent="0" />` are the first two cells
+- [ ] All cell ids are unique within their diagram
+- [ ] All edge `source`/`target` ids resolve to existing vertices
+- [ ] All vertex cells have `<mxGeometry as="geometry">`
+- [ ] All cells (except id=0) have a valid `parent`
+- [ ] XML is well-formed — no unclosed tags, no bare `&`, `<`, `>` in attribute values
+- [ ] Semantic color palette used consistently
+- [ ] Title cell present on every page
+
+```bash
+# Run automated validation
+python .github/skills/draw-io/scripts/validate-drawio.py <file.drawio>
+```
+
+---
+
+## Reference Files
+
+| File | Use For |
+|---|---|
+| `.github/skills/draw-io/SKILL.md` | Full agent workflow, recipes, troubleshooting |
+| `.github/skills/draw-io/references/drawio-xml-schema.md` | Complete mxCell attribute reference |
+| `.github/skills/draw-io/references/style-reference.md` | All style keys, shape names, edge types |
+| `.github/skills/draw-io/references/shape-libraries.md` | Shape library catalog with style strings |
+| `.github/skills/draw-io/templates/` | Ready-to-use `.drawio` templates per diagram type |
+| `.github/skills/draw-io/scripts/validate-drawio.py` | XML structure validator |
+| `.github/skills/draw-io/scripts/add-shape.py` | CLI: add a shape to an existing diagram |