diff --git a/.github/skills/drawio-mcp-diagramming/SKILL.md b/.github/skills/drawio-mcp-diagramming/SKILL.md index d70bef5..b22d684 100644 --- a/.github/skills/drawio-mcp-diagramming/SKILL.md +++ b/.github/skills/drawio-mcp-diagramming/SKILL.md @@ -1,35 +1,40 @@ --- name: drawio-mcp-diagramming -description: Create and edit architecture diagrams using Draw.io MCP (`drawio/create_diagram`) with reliable Azure and AWS icon rendering guidance and troubleshooting. Supports Azure2 and AWS4 icon libraries. Requires Python 3 and internet access to refresh icon catalogs (periodic, not per-run). +description: Create and edit diagrams using the Draw.io MCP server — any shape, any vendor. USE FOR: draw me a diagram, create an architecture diagram, add Azure/AWS/GCP/Cisco/Kubernetes icons to a diagram, convert Mermaid to draw.io, fix overlapping arrows, edit a .drawio file, network topology diagrams, CI/CD pipeline diagrams, auth flow diagrams. Supports XML, Mermaid, and CSV. Uses `drawio/search_shapes` to find any of 10,000+ shapes across all vendor and icon libraries. DO NOT USE FOR: Excalidraw output (use excalidraw-mcp-diagramming skill). metadata: author: Thomas Thornton - version: "1.0.0" - last-updated: "2026-05-19" + version: "1.1.1" + last-updated: "2026-07-26" --- # Draw.io MCP Diagramming Skill -Use this skill to create or update diagrams through the Draw.io MCP tool and to avoid common Azure and AWS icon rendering problems. +Create or update diagrams via the Draw.io MCP server. Before generating XML, read [references/xml-authoring-rules.md](references/xml-authoring-rules.md) — hard constraints, container rules, and edge routing guidance that prevent the most common rendering failures. For layout anti-pattern fixes, see [references/layout-antipatterns.md](references/layout-antipatterns.md). For cloud topology conventions, icon libraries, and worked examples, see [references/azure.md](references/azure.md) and [references/aws.md](references/aws.md). -See [references/REFERENCE.md](references/REFERENCE.md) for reference artifacts and refresh commands. - -For non-Azure/non-AWS diagrams, you can skip icon discovery/validation scripts and proceed directly to `drawio/create_diagram`. +For diagrams that use only basic shapes (flowcharts, UML, ERD, org charts, mind maps, timelines, wireframes), skip icon discovery and proceed directly to `drawio/create_diagram` or `drawio/open_drawio_mermaid`. ## When to Use -- The user asks to create or refine architecture diagrams (Azure, AWS, or multi-cloud). +- The user asks to create or refine architecture diagrams (Azure, AWS, multi-cloud, or generic). - The user wants draw.io/diagrams.net output from an MCP workflow. +- The user asks for **Mermaid → draw.io** conversion. +- The user asks for **CSV → draw.io** conversion (org charts, flowcharts from tabular data). - The user needs Azure service icons in diagrams. - The user needs AWS service icons in diagrams. - The user reports that Azure or AWS icons/shapes are not appearing. - The user asks for an **auth or identity flow** (OAuth 2.0, OIDC, JWT validation, SSO, login, token exchange, Entra, Cognito). - The user asks for an **API or microservice interaction diagram** (request/response chain, service-to-service calls, API gateway flow). - The user asks for a **CI/CD pipeline or deployment workflow** (build, test, deploy stages, GitHub Actions, Azure DevOps, approval gates). +- The user wants to **edit an existing multi-page `.drawio` file** (Tool Server only). ## Required Tooling +Draw.io provides two MCP server variants. The skill works with either; call the tools that match the configured server. + +### Option A — Hosted App Server (inline / "Open in draw.io" button) + - MCP tool: `drawio/create_diagram` -- Workspace MCP config should include a `drawio` server: +- Workspace MCP config: ```json { @@ -42,170 +47,137 @@ For non-Azure/non-AWS diagrams, you can skip icon discovery/validation scripts a } ``` +Supported inputs: `xml` (draw.io XML), `mermaid` (Mermaid.js text). +Optional layout passes: `postLayout: "elk"`, `routing: "libavoid"`. + +### Option B — stdio Tool Server (opens draw.io in browser) + +- MCP tools: `drawio/open_drawio_xml`, `drawio/open_drawio_mermaid`, `drawio/open_drawio_csv`, `drawio/search_shapes`, `drawio/list_pages`, `drawio/get_page`, `drawio/set_page` +- Workspace MCP config: + +```json +{ + "servers": { + "drawio": { + "command": "npx", + "args": ["-y", "@drawio/mcp"] + } + } +} +``` + +Supported inputs: XML, Mermaid, CSV. +Optional layout pass: `routing: "libavoid"` on `open_drawio_xml` — **requires `@drawio/mcp` v1.3.0 or later**. On older versions the parameter is ignored, so pin with `npx -y @drawio/mcp@latest` if connector routing does not improve. + +> Use **Option A** if your host supports MCP Apps inline rendering (Claude.ai, Cursor ≥ 2.6) or if the "Open in draw.io" button workflow is acceptable. Use **Option B** for VS Code / GitHub Copilot or any standard MCP client. + +### Icon discovery tool (both servers) + +- MCP tool: `drawio/search_shapes` — search 10,000+ draw.io shapes and return ready-to-use style strings. +- Parameters: `query` (space-separated keywords) and optional `limit` (default 10, max 50). Raise `limit` when a first search returns nothing usable, before concluding a shape does not exist. + +### Tool name detection + +MCP hosts may register tools with a server prefix (e.g. `mcp_drawio-mcp-ap_create_diagram` and `mcp_drawio-mcp-ap_search_shapes`). If `tool_search` does not surface the drawio tools, inspect the available or deferred tools list and call the exact names shown there. Do not assume a tool is unavailable if it appears in the deferred list; use the exact registered name. + +### VS Code / GitHub Copilot: run shape searches sequentially + +In VS Code and GitHub Copilot, parallel tool calls are cancelled if the user sends a new message while they are in flight. Always run `drawio/search_shapes` calls **one at a time** — never in parallel batches. + +### XML hard constraints, containers, and edge routing + +The draw.io MCP server enforces strict XML rules, and the most common quality failures are flattened hierarchy and hand-routed edges. Before generating any XML, read [references/xml-authoring-rules.md](references/xml-authoring-rules.md) which covers: + +- **Hard constraints** — forbidden constructs that cause the server to return a render error (XML comments, duplicate IDs, self-closing edge/geometry elements, unescaped characters) +- **Container rules** — nested `swimlane` containment, relative child coordinates, and why cross-container edges must sit at `parent="1"` +- **Edge routing** — let `routing: "libavoid"` or `postLayout: "elk"` compute paths; the narrow cases where manual connection points are justified +- **Pre-generation edge checklist** — run before writing edge XML for any infrastructure diagram + ## Recommended Workflow -1. **Identify the cloud provider** — determine whether the diagram uses Azure, AWS, or both (multi-cloud). -2. **Verify icon paths from the static catalogs** — no scripts needed at runtime: - - Azure: grep `references/azure2-complete-catalog.txt` - - AWS: grep `references/aws4-complete-catalog.txt` - - Multi-cloud: grep both catalogs as needed. -3. If diagram uses neither Azure nor AWS icons — or is a **sequence or flow diagram** (auth flow, API call chain, CI/CD pipeline): skip icon lookup. For sequence and flow diagrams, apply Sequence and Flow Diagram Patterns (see section below). -4. **For Azure infrastructure/network diagrams**: apply Professional Network Topology Patterns (see Azure section below): - - Use larger canvas (1900x1500) - - VNets with thick borders (strokeWidth=4) - - Subnets with dashed borders (strokeWidth=2, dashPattern=8 8) - - Position resources inside their subnets - - Label all traffic flows with protocols/ports - - Include network isolation explanation box -5. **For AWS infrastructure/network diagrams**: apply AWS Network Topology Patterns (see AWS section below): - - Use larger canvas (1900x1500) for multi-VPC/account topologies - - VPCs with thick borders (strokeWidth=4) - - Subnets (public/private) with dashed borders (strokeWidth=2, dashPattern=8 8) - - Position resources inside their respective subnets - - Label all traffic flows with protocols/ports - - Include security group / NACL notation -6. Build a valid `mxGraphModel` payload using verified icons when applicable. -7. Call `drawio/create_diagram` with the XML. -8. If user wants a file artifact, save as `.drawio` wrapped in `...`. -9. Keep labels concise and explicit (service name + role). -10. For cloud-specific diagrams, prefer one icon per major service and use edges for flow semantics (ingress/egress/peering/telemetry). +1. **Identify the input format and diagram type** + - For flowcharts, sequence diagrams, ERD, mind maps, Gantt, timelines, kanban: prefer **Mermaid** if the Tool Server is available, or use the App Server's `mermaid` parameter. + - For org charts or flowcharts from tabular data: use **CSV** with the Tool Server (`drawio/open_drawio_csv`). + - For diagrams with named services, vendor shapes, or pictorial icons: use **XML** (`drawio/create_diagram` or `drawio/open_drawio_xml`). + +2. **Use `drawio/search_shapes` for any non-geometric shape** — it searches all 10,000+ shapes across every draw.io library and returns ready-to-use style strings. + - Use it for cloud services (Azure, AWS, GCP), network equipment (Cisco, Juniper), container/orchestration tools (Kubernetes, Docker), brand logos (Slack, GitHub), IT infrastructure shapes, and any other named component. + - Example queries: `"azure virtual machine"`, `"aws lambda"`, `"cisco router"`, `"kubernetes pod"`, `"slack"`, `"docker"`. + - Use the returned style string directly in the XML cell — do not guess or fabricate style strings. + - Skip `search_shapes` only for diagrams that use purely geometric shapes: rectangles, diamonds, circles, and arrows. + +3. **When to use `search_shapes` vs skip it** — if a shape has a recognised name, brand, or product identity, always look it up via `search_shapes` first. Only skip it for standard geometric diagrams (flowcharts, UML, ERD, org charts, mind maps, timelines, wireframes) that need no pictorial icons. For sequence and flow diagrams, apply Sequence and Flow Diagram Patterns (see section below). + +4. **Nest groupings with real containers, not stacked rectangles** — for any diagram with hierarchy (VNet → Subnet → resource, VPC → AZ → instance, Region → Environment → Service, swimlanes), make each level a `swimlane;startSize=24;` container, set `parent=""` on children, and give children coordinates **relative to their parent**. Edges between cells in *different* containers must use `parent="1"` or they render inside the container and get clipped. Drawing a large rectangle and positioning shapes on top of it at absolute coordinates is the anti-pattern the draw.io XML reference explicitly calls out — it breaks move/resize, collapse, and layout passes. + +5. **Keep labels unique and sparse** — if several edges say the same thing, collapse them into one labelled flow or a single note box. Do not repeat the same wording in the title, legend, lane name, and callout; each text element should have one job. + +6. **For cloud infrastructure diagrams, load the vendor reference** — read [references/azure.md](references/azure.md) for anything with VNets, subnets, or Azure icons, and [references/aws.md](references/aws.md) for anything with VPCs, AZs, or AWS icons. Read both for multi-cloud diagrams. Each covers that vendor's icon library and caveats, container structure, colour palette, annotation boxes, a complete worked example, and a topology checklist. + +7. **Build the payload** + - XML: valid `mxGraphModel` using verified icons/style strings. + - Mermaid: valid Mermaid.js definition (App Server: pass as `mermaid`; Tool Server: use `drawio/open_drawio_mermaid`). + - CSV: valid CSV content (Tool Server: use `drawio/open_drawio_csv`). + +8. **Call the appropriate tool** + - App Server: `drawio/create_diagram` with `xml` or `mermaid`. + - Tool Server: `drawio/open_drawio_xml`, `drawio/open_drawio_mermaid`, or `drawio/open_drawio_csv`. + +9. **Decide the layout pass before writing XML, then let it route the edges** + - `routing: "libavoid"` — keeps your hand-placed coordinates and only reroutes connectors around shapes. This is the default for topology, architecture, deployment, and container-based diagrams. + - `postLayout: "elk"` — full re-layout that replaces your vertex positions. Use for directional/hierarchical XML (pipelines, decision flows). Add `direction: "horizontal"` when the flow reads left-to-right — it defaults to `vertical`, which is why left-to-right CI/CD pipelines come out stacked. + - Do **not** combine `postLayout` and `routing` — ELK already routes its own edges. `direction` is XML-only and ignored for Mermaid (Mermaid takes direction from `flowchart TD/LR`). + - Do **not** hand-write `exitX`/`entryX` or `` waypoints. The routing pass computes them, and manual values fight it. See [references/xml-authoring-rules.md](references/xml-authoring-rules.md) for the narrow exceptions. + +10. If the user wants a file artifact, save as `.drawio` wrapped in `...`. **Read [references/standalone-file-requirements.md](references/standalone-file-requirements.md) before writing any `.drawio` file by hand** (or whenever the MCP tools are unavailable) — the MCP tools add `as="geometry"` and the `mxGraphModel` layout attributes for you, and without them every element collapses to the origin. + +11. Keep labels concise and explicit (service name + role). + +12. Prefer one icon per major component or service; use edges for flow semantics (ingress/egress/dependency/telemetry). + +## Input Format Quick Reference + +Choose the input that matches the diagram type and configured server. + +| Input | Best for | App Server | Tool Server | +|---|---|---|---| +| **XML** | Architecture/topology diagrams with vendor or pictorial icons, custom layouts | `drawio/create_diagram` with `xml` | `drawio/open_drawio_xml` | +| **Mermaid** | Flowcharts, sequence, class, ER, state, mindmap, Gantt, timeline, kanban | `drawio/create_diagram` with `mermaid` | `drawio/open_drawio_mermaid` | +| **CSV** | Org charts, flowcharts, simple diagrams from tabular data | Not supported | `drawio/open_drawio_csv` | + +Use Mermaid for standard diagram types; use XML when the user needs pictorial or vendor-specific icons, precise positioning, complex containers, or custom styling. See [references/REFERENCE.md](references/REFERENCE.md) for Mermaid/CSV examples and multi-page editing details. ## Visual Quality Guardrails Apply these defaults unless the user explicitly asks for a dense/technical view: -- Use 3-4 major lanes/zones max (for example Source, Pipeline, Cloud target). +- Use 3-4 major lanes/zones max (for example Source → Process → Destination). - Keep primary flow left-to-right with a single main path. - Use stage numbering (`1`, `2`, `3`, `4`) instead of many edge labels. -- Keep one icon per major service; avoid icon-per-step layouts. +- Keep one icon per major component; avoid icon-per-step layouts. - Limit cross-lane dashed lines to one security/auth line and one optional telemetry line. +- **Edge density**: for nodes with 3+ outgoing edges, reduce duplicates first (for example one gateway → one aggregated backend edge). Then let `routing: "libavoid"` separate what remains — only add explicit `exitX`/`exitY` if a specific edge is still ambiguous after routing. - Keep text concise (single purpose per box) and avoid multiline overload. +- Keep edge labels short and unique; if adjacent edges repeat the same protocol/port wording, collapse them or move the shared detail to one annotation box. +- Avoid repeating the same label in the title, legend, lane name, and callout. - **Animated flow on connectors**: adding `flowAnimation=1;` to any edge style renders a moving dot that travels along the arrow, making directional flow immediately visible without extra labels — ideal for data-flow and pipeline diagrams. The animation is preserved in SVG export and the draw.io desktop app. By default, ask the user whether they want any flow arrows animated before generating the diagram — *"Would you like any of the flow arrows animated to show traffic direction? If so, which ones?"* Apply `flowAnimation=1;` only to the edges the user identifies. If the user has already indicated they want a static/clean diagram, skip the question. - Prefer a "clean" variant first; add detail only if requested. For worked examples of common layout problems (stacked edges, repeated labels, observability inside VNet, etc.), see [references/layout-antipatterns.md](references/layout-antipatterns.md). -## Professional Network Topology Patterns (Azure Infrastructure) - -When creating **Azure infrastructure network diagrams** with VNets, subnets, and network isolation: - -### Canvas Sizing -- Use larger canvas for complex infrastructure: `pageWidth="1900" pageHeight="1500"` -- Standard canvas may be too small for multi-VNet topologies - -### VNet and Subnet Visualization -- **VNets**: Use thick borders (`strokeWidth=4`) and large containers - - DMZ VNet: Yellow (`fillColor=#fff2cc`, `strokeColor=#d6b656`) - - Internal VNet: Green (`fillColor=#d5e8d4`, `strokeColor=#82b366`) - - Management Zone: Blue (`fillColor=#dae8fc`, `strokeColor=#6c8ebf`) -- **Subnets**: Use dashed borders (`strokeWidth=2`, `dashed=1`, `dashPattern=8 8`) - - Position subnet containers **inside** VNet containers - - Use lighter shades of parent VNet color - - Label with subnet name and CIDR (e.g., "Application Subnet - 10.x.2.0/24") -- **Delegated Subnets**: Add delegation info to label (e.g., "PostgreSQL Subnet - 10.x.4.0/24 (Delegated to Microsoft.DBforPostgreSQL/flexibleServers)") - -### Resource Positioning -- Position all resources **inside their respective subnet containers** -- VMs, databases, load balancers must be visually contained within their subnets -- This clearly shows network isolation boundaries - -### Traffic Flow Visualization -- **Label all traffic arrows** with protocols and ports, using this colour palette: - - HTTPS:443 — **Azure blue** (`#0078D4`, thick solid) for internet ingress; prominent but professional - - HTTP:80/8080/8090/8095 — **Teal** (`#00897B`, solid) for backend pool traffic; signals allowed/healthy east-west flow - - PostgreSQL:5432 — **Indigo** (`#5C6BC0`, dashed) for database connections; purple/indigo conventionally marks the data tier - - NFS/Gluster — **Green** (`#43A047`, solid) for shared storage flows - - RBAC/Identity/SMTP — **Amber** (`#F57C00`, dashed) for management/control-plane traffic - - Denied/Blocked (WAF, NSG deny rules) — **Red** (`#C62828`) — reserve red exclusively for blocked or denied traffic -- Use `edgeStyle=orthogonalEdgeStyle` for clean routing -- Include `` waypoints for complex routing -- **Direction animation on key edges**: `flowAnimation=1;` adds a moving dot along a connector arrow, making ingress paths, egress routes, and replication flows readable at a glance — the effect renders in SVG export and draw.io desktop and works on any edge style. Before generating the diagram, ask the user: *"Would you like any of the traffic arrows animated to show flow direction? If so, which ones?"* Apply `flowAnimation=1;` only to the edges they identify. Example style for an animated internet ingress arrow: `style="edgeStyle=orthogonalEdgeStyle;flowAnimation=1;strokeWidth=3;strokeColor=#0078D4;"` - -### Essential Components - -Include two annotation boxes in every Azure topology diagram: -1. **Network Isolation Explanation** (top-left, `fillColor=#fff9cc`) — visual conventions: VNet thick borders, subnet dashed borders, NSG/DNS notes -2. **Zone Separation** — VNet Peering zone (grey `fillColor=#f5f5f5`) and External Services zone (orange `fillColor=#ffe6cc`) - -For a complete example, see [references/topology-patterns.md](references/topology-patterns.md). - -### Professional Topology Checklist (Azure) -- [ ] VNets have thick borders (strokeWidth=4) -- [ ] Subnets have dashed borders (strokeWidth=2, dashPattern=8 8) -- [ ] All resources positioned inside their subnets -- [ ] Traffic arrows labelled with protocols and ports using the standard colour palette -- [ ] Network isolation explanation box included -- [ ] Color-coded zones for different purposes -- [ ] Canvas sized appropriately (1900x1500 for complex infra) -- [ ] VNet peering connections shown in separate zone -- [ ] External services grouped in separate zone -- [ ] Animation preference confirmed with user before generating (*"Would you like any flow arrows animated? If so, which ones?"*) - -## Professional Network Topology Patterns (AWS Infrastructure) - -When creating **AWS infrastructure network diagrams** with VPCs, subnets, and network isolation: - -### Canvas Sizing -- Use larger canvas for complex infrastructure: `pageWidth="1900" pageHeight="1500"` -- Standard canvas may be too small for multi-VPC/multi-account topologies - -### VPC and Subnet Visualization -- **VPCs**: Use thick borders (`strokeWidth=4`) and large containers - - Production VPC: Green (`fillColor=#d5e8d4`, `strokeColor=#82b366`) - - Development VPC: Blue (`fillColor=#dae8fc`, `strokeColor=#6c8ebf`) - - Shared Services VPC: Yellow (`fillColor=#fff2cc`, `strokeColor=#d6b656`) -- **Subnets**: Use dashed borders (`strokeWidth=2`, `dashed=1`, `dashPattern=8 8`) - - Public Subnets: Light green (`fillColor=#e6f4ea`, `strokeColor=#82b366`) - - Private Subnets: Light blue (`fillColor=#EFF7FF`, `strokeColor=#6c8ebf`) - - Isolated Subnets (databases): Light orange (`fillColor=#fff3e0`, `strokeColor=#e6821e`) - - Position subnet containers **inside** VPC containers - - Label with subnet name, AZ, and CIDR (e.g., "Public Subnet A - us-east-1a - 10.x.1.0/24") -- **Availability Zones**: Use light grey container inside VPC to group subnets per AZ - -### Resource Positioning -- Position all resources **inside their respective subnet containers** -- EC2 instances, RDS, Lambda, etc. must be visually contained within their subnets -- Internet-facing resources (ALB, NAT Gateway, Bastion) go in **public subnets** -- Application servers / ECS tasks go in **private subnets** -- Databases (RDS, ElastiCache) go in **isolated subnets** with no outbound internet - -### Traffic Flow Visualization -- **Label all traffic arrows** with protocols and ports, using the same colour palette as Azure: - - HTTPS:443 *(internet ingress)* — **Azure blue** (`#0078D4`, thick solid) for external traffic entering via ALB/CloudFront - - HTTP:80→HTTPS redirect — **Teal** (`#00897B`, solid) for healthy/redirected traffic - - Port 5432/3306 — **Indigo** (`#5C6BC0`, dashed) for database connections - - HTTPS:443 *(internal AWS service calls)* — **Green** (`#43A047`, solid) for traffic to VPC Endpoints and AWS-managed services (S3, SSM, Secrets Manager, etc.) - - SSH:22 / SSM — **Amber** (`#F57C00`, dashed) for management / Bastion access - - Denied/Blocked (WAF, Security Group deny rules) — **Red** (`#C62828`) — reserve red exclusively for blocked traffic -- Use `edgeStyle=orthogonalEdgeStyle` for clean routing -- Show NAT Gateway path for private subnet → internet egress -- **Direction animation on key edges**: `flowAnimation=1;` adds a moving dot along a connector arrow, making ingress paths, egress routes, and data-transfer flows readable at a glance — the effect renders in SVG export and draw.io desktop and can be applied to any edge style. Before generating the diagram, ask the user: *"Would you like any of the traffic arrows animated to show flow direction? If so, which ones?"* Apply `flowAnimation=1;` only to the edges they identify. Example style for an animated ingress path: `style="edgeStyle=orthogonalEdgeStyle;flowAnimation=1;strokeWidth=3;strokeColor=#0078D4;"` - -### Essential Components - -Include two annotation boxes in every AWS topology diagram: -1. **Network Isolation Explanation** (top-left) — visual conventions: VPC thick borders, subnet tiers (public/private/isolated), SG/NACL notes, VPC Endpoints -2. **Zone Separation** — Internet/Edge zone (orange), VPC Peering/Transit Gateway zone (grey), AWS Managed Services zone (purple) - -For a complete example, see [references/topology-patterns.md](references/topology-patterns.md). - -### Professional Topology Checklist (AWS) -- [ ] VPCs have thick borders (strokeWidth=4) and are colour-coded by environment -- [ ] Subnets have dashed borders (strokeWidth=2, dashPattern=8 8) and are colour-coded by tier (public/private/isolated) -- [ ] Availability Zone containers group subnets per AZ -- [ ] All resources positioned inside their respective subnets -- [ ] Internet Gateway and NAT Gateway shown for public/private egress -- [ ] Traffic arrows labelled with protocols and ports using the standard colour palette -- [ ] Security Group boundaries annotated where important -- [ ] Network isolation explanation box included -- [ ] Canvas sized appropriately (1900x1500 for complex infra) -- [ ] VPC Peering / Transit Gateway shown in separate zone -- [ ] Edge/internet services (CloudFront, Route53, WAF) in separate zone -- [ ] Animation preference confirmed with user before generating (*"Would you like any flow arrows animated? If so, which ones?"*) +## Cloud Infrastructure Topology (Azure and AWS) + +Vendor-specific topology guidance lives in per-cloud reference files. Load the one that matches the diagram — or both for multi-cloud: + +- **Azure** — [references/azure.md](references/azure.md): read for any diagram with VNets, subnets, or Azure icons. Covers the azure2 and mscae icon libraries and their caveats, nested VNet → subnet container structure, colour and border conventions, traffic palette, annotation boxes, a complete worked example, and the Azure topology checklist. +- **AWS** — [references/aws.md](references/aws.md): read for any diagram with VPCs, AZs, or AWS icons. Covers the AWS4 stencil library and its caveats, nested VPC → AZ → subnet container structure, subnet-tier colour coding, NAT/IGW egress paths, security group annotation, a complete worked example, and the AWS topology checklist. + +Shared rules that apply to both — containment, edge routing, and hard XML constraints — stay in [references/xml-authoring-rules.md](references/xml-authoring-rules.md). + ## Sequence and Flow Diagram Patterns -Use this section for diagrams that show **temporal flows** — what happens in order — rather than infrastructure topology. No cloud icon catalog lookup is required. +Use this section for diagrams that show **temporal flows** — what happens in order — rather than infrastructure topology. No shape lookup via `drawio/search_shapes` is required. ### When to Apply @@ -218,17 +190,20 @@ Use this section for diagrams that show **temporal flows** — what happens in o ### Layout Approach **Swimlane interaction flow** (auth / API flows with 2–5 actors): -- Represent each actor as a labelled header rectangle at the top, with a matching full-height light-coloured background column below it -- Steps flow top-to-bottom within each column; number them (`1.`, `2.`, `3.`) in the label so execution order is unambiguous -- All step boxes and edges live at `parent="1"` (root) — no nested swimlane cell geometry required -- Edges cross between columns with `edgeStyle=orthogonalEdgeStyle;` -- Canvas: `pageWidth="1400" pageHeight="900"` for 3 actors; add ~420 px width per additional actor +- Use flat `swimlane` lanes stacked vertically at `parent="1"`, one actor per lane: `swimlane;horizontal=0;startSize=110;fillColor=;html=1;` with geometry `x=0, y=lane_index*150, width=CANVAS_W, height=150` +- Step boxes are children of their lane (`parent=""`) with coordinates relative to the lane: `x = 120 + col*180`, `y = 45`, size `140x60` (`140x80` for decision diamonds). The `x=120` start clears the 110px title area +- Number steps (`1.`, `2.`, `3.`) in the label so execution order is unambiguous +- Cross-lane edges must sit at `parent="1"`, not inside a lane, or they are clipped +- Use `edgeStyle=orthogonalEdgeStyle;` and let the routing pass place the bends +- Canvas width: `max_col * 180 + 300`; do not nest lanes inside a pool or vary lane heights +- Canvas height: `actor_count * 150 + 100` **Horizontal pipeline flowchart** (CI/CD): - Stages flow left-to-right: Source → Build → Test → Staging → Approval → Production - Use `rounded=1` rectangles for stages, `rhombus` shape for gate / decision points - Colour-code each stage box using the Stage Colours table below - Failure branch goes downward from the gate with a red edge to a Rollback/Notify step +- Pass `postLayout: "elk"` with `direction: "horizontal"` — without `direction` the default vertical pass stacks the pipeline top-to-bottom - Canvas: `pageWidth="1700" pageHeight="600"` ### Colour Conventions @@ -252,7 +227,7 @@ Use this section for diagrams that show **temporal flows** — what happens in o | Identity provider (Entra, Cognito, Okta) | `#e6f4ea` | `#82b366` | | API / backend service | `#fff3e0` | `#e6821e` | | Database / data store | `#f5f5f5` | `#666666` | -| Cloud managed service (Key Vault, S3, etc.) | `#f3e5f5` | `#7B1FA2` | +| Managed service / external system | `#f3e5f5` | `#7B1FA2` | **Stage fill colours** (CI/CD pipeline): @@ -280,103 +255,57 @@ Use this section for diagrams that show **temporal flows** — what happens in o - [ ] Animation preference confirmed with user before generating - [ ] Canvas sized appropriately for participant count and step depth -## Icon Reference Assets (Azure Diagrams) +## Icon Discovery: Hard Gate and Fallback -This section applies only when the diagram includes Azure services/icons. +This applies to all shapes — cloud services, network equipment, brand logos, and any pictorial icon. -1. **Use the static catalog** — `references/azure2-complete-catalog.txt` contains all 648 Azure2 icons. - - Grep it to find icon paths: `grep -i "gateway" references/azure2-complete-catalog.txt` - - No HTTP requests or script execution needed at runtime. -2. **Hard gate** - - If an icon path cannot be confirmed in the catalog, do **not** use it in `drawio/create_diagram`. - - Find an alternative via grep first. -3. **Render review fallback** - - If diagram review shows wrong/missing icon rendering, grep the catalog for alternative paths. - - Substitute and regenerate the diagram. -4. **Refresh catalog** (periodic, human-run — not per diagram): +1. **`drawio/search_shapes` is the only accepted source** — do not guess or fabricate style strings. +2. If a style string cannot be confirmed, find an alternative via `drawio/search_shapes` before generating. +3. If a shape renders incorrectly, use `drawio/search_shapes` for an alternative, substitute, and regenerate. -```bash -cd .github/skills/drawio-mcp-diagramming/scripts -python3 search_azure2_icons_github.py --max-results 9999 > ../references/azure2-complete-catalog.txt -``` +## How to Discover Shapes -## Azure Icon Caveats (Important) +`drawio/search_shapes` searches all 10,000+ shapes across every draw.io library and returns ready-to-use style strings. Use it for **any** shape that has a name, brand, or product identity — not just cloud providers. -Azure icon rendering in draw.io can fail for two common reasons: +Example queries by category: -1. **Wrong style type** - - `shape=mxgraph.azure2.*` may not render in some hosts. - - Prefer Azure2 image style entries: - - `image;aspect=fixed;html=1;...;image=img/lib/azure2//.svg;` +| Category | Example queries | +|---|---| +| Azure | `"azure virtual machine"`, `"azure key vault"`, `"azure api management"` | +| AWS | `"aws lambda"`, `"aws s3"`, `"aws ec2"` | +| GCP | `"gcp compute engine"`, `"gcp cloud storage"` | +| Network equipment | `"cisco router"`, `"cisco firewall"`, `"juniper switch"` | +| Containers / orchestration | `"kubernetes pod"`, `"docker"`, `"helm"` | +| Brands / SaaS | `"slack"`, `"github"`, `"jira"`, `"salesforce"` | +| On-premises / IT | `"server"`, `"database"`, `"laptop"`, `"printer"` | -2. **Library/environment mismatch** - - Some embedded viewers/extensions do not resolve `img/lib/azure2/...` consistently. - - If icons do not render in one host, test in `app.diagrams.net`. +Always use the returned `style` value directly on the `mxCell` — never guess or fabricate a style string. -## Icon Reference Assets (AWS Diagrams) +The style format varies by library: -This section applies only when the diagram includes AWS services/icons. +```text +# Image-based (Azure azure2, SVG files) +image;aspect=fixed;html=1;points=[];align=center;image=img/lib/azure2//.svg; -> **Important difference from Azure**: AWS4 icons in draw.io are **stencil-based**, not individual SVG files. They are referenced using `shape=mxgraph.aws4.` rather than `image=img/lib/aws4/...`. The catalog lists ready-to-use style strings in this format. +# Stencil-based (AWS4, shape library) +shape=mxgraph.aws4.;fillColor=;fontColor=#ffffff;strokeColor=none; -1. **Use the static catalog** — `references/aws4-complete-catalog.txt` contains all 1,037 AWS4 stencil shape names. - - Grep it to find shapes: `grep -i "lambda" references/aws4-complete-catalog.txt` - - Each line is a ready-to-use `shape=mxgraph.aws4.*` style string. - - No HTTP requests or script execution needed at runtime. -2. **Hard gate** - - If a shape name cannot be confirmed in the catalog, do **not** use it in `drawio/create_diagram`. - - Find an alternative via grep first. -3. **Render review fallback** - - If diagram review shows wrong/missing shape rendering, grep the catalog for alternative names. - - Substitute and regenerate the diagram. -4. **Refresh catalog** (periodic, human-run — not per diagram): +# Stencil-based (Cisco, Kubernetes, etc.) +shape=mxgraph.cisco..;sketch=0;html=1; -```bash -cd .github/skills/drawio-mcp-diagramming/scripts -python3 search_aws4_icons_github.py --max-results 9999 > ../references/aws4-complete-catalog.txt +# Icon-service (brand logos and concept icons, returned as an absolute URL) +shape=image;html=1;verticalLabelPosition=bottom;verticalAlign=top;image=https:///.svg; ``` -## AWS Icon Caveats (Important) - -AWS4 icon rendering in draw.io can fail for two common reasons: - -1. **Wrong style approach** - - Do **not** use `image=img/lib/aws4/...` — AWS4 icons are **stencils**, not SVG files. - - The correct style is: `shape=mxgraph.aws4.;fillColor=#E7157B;fontColor=#ffffff;strokeColor=none;` - - Fill colour conventions: - - Compute (orange): `fillColor=#ED7100` - - Storage (green): `fillColor=#3F8624` - - Database (blue): `fillColor=#C7131F` (for Aurora/RDS use red) - - Networking (purple): `fillColor=#8C4FFF` - - Security (red): `fillColor=#DD344C` - - Management (orange-red): `fillColor=#E7157B` - - General/generic: `fillColor=#232F3E` (AWS dark) - -2. **Library/environment mismatch** - - Some embedded viewers may not load the `mxgraph.aws4` stencil library. - - If shapes do not render in VS Code, test in `app.diagrams.net`. - -## How to Discover Icons - -Grep the static catalogs — no scripts needed at agent runtime: - -```bash -grep -i "gateway" references/azure2-complete-catalog.txt # Azure -grep -i "lambda" references/aws4-complete-catalog.txt # AWS -``` - -Use verified paths in cell styles: -- **Azure**: `image;aspect=fixed;html=1;points=[];align=center;image=img/lib/azure2//.svg;` -- **AWS**: `shape=mxgraph.aws4.;fillColor=;fontColor=#ffffff;strokeColor=none;` - -See [references/REFERENCE.md](references/REFERENCE.md) for absolute URL fallback, additional grep examples, and known-good icon style strings. +When the built-in libraries have no strong match, `search_shapes` supplements results from the draw.io icon service (the same grouped icon search the editor sidebar uses) and returns them as `shape=image` styles with an absolute URL. These are valid results — use them as returned rather than rejecting them for not matching an `img/lib/...` path. -## Fallback Strategy if Icons Still Fail +## Fallback Strategy if Shapes Still Fail -If Azure or AWS icons still do not render: +If any shapes do not render correctly: -- Do **not** generate the diagram with an unresolved icon set. -- Return the missing icon list and propose verified replacements (grepped from the relevant catalog). +- Do **not** generate the diagram with an unresolved shape style. +- Use `drawio/search_shapes` to find alternative verified style strings. +- Return the list of unresolved shapes and propose verified replacements. - After replacements validate to `OK`, then generate the diagram. ## Exporting Diagrams @@ -392,27 +321,33 @@ If Azure or AWS icons still do not render: ## Troubleshooting Checklist -- Confirm MCP server appears in `MCP: List Servers`. +- Confirm the configured MCP server appears in `MCP: List Servers`. - Run `MCP: Reset Cached Tools` if tool list is stale. -- Ensure XML is well-formed (no malformed tags or invalid comments). -- **Azure**: Verify style uses `image=img/lib/azure2/...` for Azure2 icon mode. -- **AWS**: Verify style uses `image=img/lib/aws4/...` for AWS4 icon mode. +- **XML comments (``) are forbidden** — the MCP server rejects them. Remove all comments before submitting. +- Ensure XML is otherwise well-formed (no malformed tags, no duplicate IDs, no unescaped `<`/`>`/`&` in style strings). +- **Z-order**: when shapes are siblings at `parent="1"`, background rectangles must be defined **before** the icons they sit behind, or they render on top. Using real containers (`swimlane`, `container=1`) avoids the problem entirely — children always render above their parent. +- **`html=1` in style** is required for any cell whose `value` contains HTML tags (``, `
`, ``). Newlines via ` ` work without it. +- **`sketch=0` in search results**: if `drawio/search_shapes` returns a style string containing `sketch=0`, preserve it exactly — omitting it enables the hand-drawn sketch rendering mode for that shape. +- **Icon sizes**: use dimensions as returned by `search_shapes`; they reflect the intended aspect ratio. When normalising a row of icons for visual consistency, 64×64 is a safe common size. Never change the aspect ratio of an icon that has `aspect=fixed` in its style. +- **Azure / AWS icon rendering**: vendor-specific style rules and fixes are in [references/azure.md](references/azure.md) and [references/aws.md](references/aws.md). - Reopen diagram in web draw.io if VS Code extension rendering differs. -- If an Azure icon path looks wrong, grep `references/azure2-complete-catalog.txt` for alternatives. -- If an AWS icon path looks wrong, grep `references/aws4-complete-catalog.txt` for alternatives. -- If either catalog appears stale, re-run the refresh workflow in REFERENCE.md. +- If an icon looks wrong, use `drawio/search_shapes` for an alternative exact style string. -## Prompt Template for Agents +## Prompt Templates and Checklists -See [references/REFERENCE.md](references/REFERENCE.md) for full example prompt templates. +See [references/REFERENCE.md](references/REFERENCE.md) for diagram-type prompt presets and [references/layout-antipatterns.md](references/layout-antipatterns.md) for the pre-flight layout checklist. ## Definition of Done -- All icon paths confirmed against the relevant static catalog before calling `drawio/create_diagram`; unconfirmed icons are not used -- Diagram renders correctly; XML is valid and opens in draw.io -- Cloud resources identifiable via correct icons and clear labels -- All applicable topology checklist items passed (borders, subnets, traffic labels, legend, isolation box, zones, canvas size) -- All applicable sequence/flow checklist items passed (numbered steps, colour-coded edges, error paths, canvas size) -- Animation preference confirmed; `flowAnimation=1;` applied only to user-identified edges -- File artifact saved as `.drawio` (wrapped in ``) if requested -- Layout anti-patterns checked against [references/layout-antipatterns.md](references/layout-antipatterns.md) before finalising \ No newline at end of file +- The correct input format and MCP tool were chosen (XML, Mermaid, or CSV; App Server or Tool Server). +- All icon/style strings confirmed via `drawio/search_shapes` before generating; unconfirmed icons are not used. +- Diagram renders correctly; XML/Mermaid/CSV is valid and opens in draw.io. +- All named components identifiable via correct icons and clear labels. +- Layout pass chosen deliberately (`routing: "libavoid"` for hand-placed/container layouts; `postLayout: "elk"` — with `direction: "horizontal"` for left-to-right flows — for directional diagrams; never both). +- All applicable topology checklist items passed (borders, subnets, traffic labels, legend, isolation box, zones, canvas size). +- All applicable sequence/flow checklist items passed (numbered steps, colour-coded edges, error paths, canvas size). +- Animation preference confirmed; `flowAnimation=1;` applied only to user-identified edges. +- Nested groupings use real containers: each level a `swimlane`, children parented to their container with relative coordinates, cross-container edges at `parent="1"`. +- File artifact saved as `.drawio` (wrapped in ``) if requested, following [references/standalone-file-requirements.md](references/standalone-file-requirements.md). +- Edges declare only `source`/`target`: no hand-written `` waypoints or `exitX`/`entryX` overrides unless a documented exception applies. See [references/xml-authoring-rules.md](references/xml-authoring-rules.md). +- Layout anti-patterns checked against [references/layout-antipatterns.md](references/layout-antipatterns.md) before finalising. \ No newline at end of file diff --git a/.github/skills/drawio-mcp-diagramming/references/REFERENCE.md b/.github/skills/drawio-mcp-diagramming/references/REFERENCE.md index b64636c..b2f499a 100644 --- a/.github/skills/drawio-mcp-diagramming/references/REFERENCE.md +++ b/.github/skills/drawio-mcp-diagramming/references/REFERENCE.md @@ -1,57 +1,36 @@ -# Draw.io Azure2 & AWS4 References +# Draw.io MCP Diagramming — Reference Index This folder contains reference artifacts for the `drawio-mcp-diagramming` skill. -## Files +## Shape Discovery -- `azure2-complete-catalog.txt` - - Complete Azure2 icon inventory (648 icons) from `jgraph/drawio` GitHub tree under `img/lib/azure2`. - - Use this as the canonical lookup for Azure icon paths — **no scripts needed at agent runtime**. - - Agent usage: `grep -i "keyword" references/azure2-complete-catalog.txt` +Use `drawio/search_shapes` for any shape with a name, brand, or product identity — cloud services (Azure, AWS, GCP), network equipment (Cisco, Juniper), containers (Kubernetes, Docker), brand logos, IT infrastructure shapes, and more. It covers all 10,000+ draw.io library shapes and returns ready-to-use style strings. -- `aws4-complete-catalog.txt` - - Complete AWS4 stencil shape inventory (1,037 shapes) extracted from `jgraph/drawio` stencil XML. - - **AWS4 icons are stencil-based** — referenced as `shape=mxgraph.aws4.`, not as SVG files. - - Each line in the catalog is a ready-to-use `shape=mxgraph.aws4.*` style string. - - Agent usage: `grep -i "keyword" references/aws4-complete-catalog.txt` - - Generate/refresh with: `python3 scripts/search_aws4_icons_github.py --max-results 9999 > references/aws4-complete-catalog.txt` +Never guess or fabricate a style string. If `drawio/search_shapes` cannot confirm a style, find an alternative before generating. + +## Reference Files - `layout-antipatterns.md` - Worked examples of layout problems (stacked edges, repeated labels, observability inside VNet/VPC, etc.) - Derived from real diagram review sessions. - Use this as the first reference when a diagram looks cluttered or has overlapping lines/labels. -- `topology-patterns.md` - - Complete `mxGraphModel` XML examples for Azure (VNet → Subnet → Resource) and AWS (VPC → Public/Private Subnets → ALB/ECS) topology diagrams. - - Use when building or debugging a network topology diagram. +- `azure.md` + - Azure icon libraries (azure2, mscae) and their caveats, nested VNet → subnet container structure, colour/border conventions, traffic palette, a complete topology example, and the Azure checklist. + - Read for any diagram containing Azure services. + +- `aws.md` + - AWS4 stencil library and its caveats, nested VPC → AZ → subnet container structure, subnet-tier colour coding, NAT/IGW egress paths, a complete topology example, and the AWS checklist. + - Read for any diagram containing AWS services. - `standalone-file-requirements.md` - Required XML attributes when writing a `.drawio` file directly (MCP tool unavailable): `as="geometry"` on every ``, and standard `mxGraphModel` layout attributes. - Includes a full minimal wrapper template. -## Refresh Workflow - -Refresh the catalogs when draw.io updates its icon library (not required per-run): - -### Azure2 Catalog - -```bash -cd .github/skills/drawio-mcp-diagramming/scripts -python3 search_azure2_icons_github.py --max-results 9999 > ../references/azure2-complete-catalog.txt -``` - -### AWS4 Catalog - -```bash -cd .github/skills/drawio-mcp-diagramming/scripts -python3 search_aws4_icons_github.py --max-results 9999 > ../references/aws4-complete-catalog.txt -``` - ## Notes -- The catalogs are pre-generated — agents should grep them directly rather than running scripts. -- If an icon appears missing from a catalog, re-run the relevant refresh workflow above. -- If render review shows bad/missing icons, grep the catalog for alternative paths and substitute. +- Always confirm icon style strings via `drawio/search_shapes` before use. +- If render review shows bad/missing icons, use `drawio/search_shapes` for alternative paths and substitute. ## Example Prompt Templates @@ -68,11 +47,11 @@ Requirements: respective subnets to show network isolation - Label all traffic flows with protocols and ports (e.g., HTTPS:443, PostgreSQL:5432, HTTP:8080) -- Add a network isolation explanation box showing the visual conventions +- Add a network isolation explanation box only when the topology needs the extra explanation - Use a larger canvas (1900x1500) to accommodate the multi-VNet topology -- Color-code different zones (DMZ VNet in yellow, Internal VNet in green, - Management zone in blue, VNet Peering in grey, External Services in orange) -- Show VNet peering connections and external services in separate zones +- Color-code different zones only when they represent real boundaries (perimeter/ingress in yellow, + internal in green, management in blue, VNet peering in grey, external services in orange) +- Show VNet peering connections and external services in separate zones when they help explain the topology - Use Azure2 icons from draw.io MCP Focus on the networking aspects - how components are isolated, how traffic flows @@ -133,54 +112,93 @@ Use AWS4 image styles (image=img/lib/aws4/...) for AWS resources. Show connectivity, data replication, and identity federation between the clouds. ``` -## Known-Good Azure2 Icon Examples +## Diagram-Type Prompt Presets + +Use these compact prompts to route the agent to the right input format and conventions. + +### Flowchart ```text -image=img/lib/azure2/networking/Front_Doors.svg -image=img/lib/azure2/networking/Private_Link_Hub.svg -image=img/lib/azure2/networking/Network_Watcher.svg -image=img/lib/azure2/app_services/API_Management_Services.svg -image=img/lib/azure2/app_services/App_Services.svg -image=img/lib/azure2/databases/Azure_Cosmos_DB.svg -image=img/lib/azure2/identity/Managed_Identities.svg -image=img/lib/azure2/management_governance/Policy.svg -image=img/lib/azure2/analytics/Log_Analytics_Workspaces.svg -image=img/lib/azure2/management_governance/Monitor.svg -image=img/lib/azure2/devops/Application_Insights.svg -image=img/lib/azure2/devops/API_Connections.svg +Create a flowchart showing the decision flow for [process]. Use Mermaid if possible. Keep it left-to-right, label decision diamonds clearly, and use orthogonal edges. ``` -## Known-Good AWS4 Icon Examples +### Sequence diagram -AWS4 icons use stencil syntax: `shape=mxgraph.aws4.`. Always confirm the exact name against `aws4-complete-catalog.txt` before use. +```text +Draw a sequence diagram for [interaction]. Show participants [A, B, C], label each message, and use activation bars. Use Mermaid. +``` + +### Entity Relationship diagram + +```text +Generate an ER diagram from this SQL/schema: [schema]. Use Mermaid erDiagram syntax. Mark primary keys and foreign-key relationships. +``` + +### C4 model ```text -shape=mxgraph.aws4.ec2;fillColor=#ED7100;fontColor=#ffffff;strokeColor=none; -shape=mxgraph.aws4.lambda;fillColor=#ED7100;fontColor=#ffffff;strokeColor=none; -shape=mxgraph.aws4.elastic_container_service;fillColor=#ED7100;fontColor=#ffffff;strokeColor=none; -shape=mxgraph.aws4.elastic_kubernetes_service;fillColor=#ED7100;fontColor=#ffffff;strokeColor=none; -shape=mxgraph.aws4.application_load_balancer;fillColor=#8C4FFF;fontColor=#ffffff;strokeColor=none; -shape=mxgraph.aws4.cloudfront;fillColor=#8C4FFF;fontColor=#ffffff;strokeColor=none; -shape=mxgraph.aws4.route_53;fillColor=#8C4FFF;fontColor=#ffffff;strokeColor=none; -shape=mxgraph.aws4.vpc;fillColor=#8C4FFF;fontColor=#ffffff;strokeColor=none; -shape=mxgraph.aws4.transit_gateway;fillColor=#8C4FFF;fontColor=#ffffff;strokeColor=none; -shape=mxgraph.aws4.s3;fillColor=#3F8624;fontColor=#ffffff;strokeColor=none; -shape=mxgraph.aws4.efs;fillColor=#3F8624;fontColor=#ffffff;strokeColor=none; -shape=mxgraph.aws4.rds;fillColor=#C7131F;fontColor=#ffffff;strokeColor=none; -shape=mxgraph.aws4.dynamodb;fillColor=#C7131F;fontColor=#ffffff;strokeColor=none; -shape=mxgraph.aws4.elasticache;fillColor=#C7131F;fontColor=#ffffff;strokeColor=none; -shape=mxgraph.aws4.iam;fillColor=#DD344C;fontColor=#ffffff;strokeColor=none; -shape=mxgraph.aws4.key_management_service;fillColor=#DD344C;fontColor=#ffffff;strokeColor=none; -shape=mxgraph.aws4.waf;fillColor=#DD344C;fontColor=#ffffff;strokeColor=none; -shape=mxgraph.aws4.cognito;fillColor=#DD344C;fontColor=#ffffff;strokeColor=none; -shape=mxgraph.aws4.cloudwatch;fillColor=#E7157B;fontColor=#ffffff;strokeColor=none; -shape=mxgraph.aws4.cloudformation;fillColor=#E7157B;fontColor=#ffffff;strokeColor=none; -shape=mxgraph.aws4.cloudtrail;fillColor=#E7157B;fontColor=#ffffff;strokeColor=none; -shape=mxgraph.aws4.sqs;fillColor=#E7157B;fontColor=#ffffff;strokeColor=none; -shape=mxgraph.aws4.sns;fillColor=#E7157B;fontColor=#ffffff;strokeColor=none; -shape=mxgraph.aws4.eventbridge;fillColor=#E7157B;fontColor=#ffffff;strokeColor=none; -shape=mxgraph.aws4.api_gateway;fillColor=#8C4FFF;fontColor=#ffffff;strokeColor=none; -shape=mxgraph.aws4.codepipeline;fillColor=#C7131F;fontColor=#ffffff;strokeColor=none; +Create a C4 Container diagram for [system]. Show users, containers, databases, and external systems. Use official C4 shapes and keep the diagram at container scope only. ``` -> **Note:** Shape names in the catalog use underscores. If a shape does not render, grep the catalog for partial name matches (e.g. `grep -i "gateway" references/aws4-complete-catalog.txt`). \ No newline at end of file +### Azure network topology + +```text +Create a professional Azure network topology diagram for [description]. Use Azure2 icons, VNets with thick borders, subnets with dashed borders, position resources inside subnets, label traffic with protocols/ports, and include a traffic legend and network isolation explanation box. +``` + +### AWS network topology + +```text +Create a professional AWS network topology diagram for [description]. Use AWS4 icons with correct fill colours, VPCs with thick borders, public/private/isolated subnets with dashed borders, and label all traffic flows. +``` + +### Cross-functional swimlane + +```text +Create a cross-functional flowchart for [process] with swimlanes for [actors]. Number the steps, show decision points, and use the standard edge colour conventions. +``` + +## Input Format Details + +### Mermaid + +Mermaid is the fastest path for many standard diagram types. The draw.io server parses Mermaid natively and converts it to editable draw.io XML. + +- Use Mermaid when the user asks for flowcharts, sequence diagrams, ER diagrams, class diagrams, state diagrams, mind maps, Gantt charts, timelines, or kanban boards. +- Use XML when the user needs official cloud icons, precise positioning, complex containers, or custom styling. + +Example App Server call: + +```json +{ + "mermaid": "flowchart LR\n A[Start] --> B{Decision?}\n B -->|Yes| C[Do thing]\n B -->|No| D[Skip]" +} +``` + +Example Tool Server call: + +```json +{ + "content": "flowchart LR\n A[Start] --> B{Decision?}\n B -->|Yes| C[Do thing]\n B -->|No| D[Skip]" +} +``` + +> For complex flowcharts (≥ ~20 nodes, ≥ 3 decision diamonds, feedback edges, or ≥ 3 endpoints), the App Server's native Mermaid layout can become cramped. Add `postLayout: "elk"` to re-layout the result. The flow direction is taken from the Mermaid code (`TD/TB` vs `LR/RL`). + +### CSV + +CSV input is useful for org charts and simple labeled diagrams. The first row is the header; each subsequent row becomes a node. Edge relationships are typically expressed with `id` and `parent` columns. See the Tool Server documentation for the exact CSV schema. + +### Multi-page `.drawio` files (Tool Server only) + +Use these tools to inspect or edit one page of a multi-page `.drawio` file without rewriting the whole file: + +- `drawio/list_pages` — list pages by index, id, name, and approximate size. +- `drawio/get_page` — retrieve the `mxGraphModel` XML for a single page. +- `drawio/set_page` — replace a single page's content. + +Use these when the user says "update page 2 of my architecture diagram" or "add a new diagram page to this file". + +## Known-Good Icon Examples + +Vendor icon examples now live with the rest of the vendor guidance: see `azure.md` for azure2/mscae paths and `aws.md` for AWS4 style strings. diff --git a/.github/skills/drawio-mcp-diagramming/references/aws.md b/.github/skills/drawio-mcp-diagramming/references/aws.md new file mode 100644 index 0000000..1d90e1d --- /dev/null +++ b/.github/skills/drawio-mcp-diagramming/references/aws.md @@ -0,0 +1,193 @@ +# AWS Diagram Guidance + +Everything AWS-specific for draw.io MCP diagrams: the AWS4 stencil library and its caveats, VPC/AZ/subnet container structure, colour conventions, and the topology checklist. + +Read this file when the diagram contains AWS services — whether it is a full VPC topology or a handful of AWS icons in a flow diagram. + +Contents: +- [AWS4 icon library and caveats](#aws4-icon-library-and-caveats) +- [Known-good AWS4 style strings](#known-good-aws4-style-strings) +- [VPC, AZ, and subnet container structure](#vpc-az-and-subnet-container-structure) +- [Styles and colours](#styles-and-colours) +- [Resource placement rules](#resource-placement-rules) +- [Traffic flow colour palette](#traffic-flow-colour-palette) +- [Annotation boxes](#annotation-boxes) +- [Complete topology example](#complete-topology-example) +- [AWS topology checklist](#aws-topology-checklist) + +--- + +## AWS4 icon library and caveats + +AWS4 icons are **stencils, not SVG files**. Two things go wrong most often: + +1. **Wrong style approach** — do not use `image=img/lib/aws4/...`. The correct form is + `shape=mxgraph.aws4.;fillColor=;fontColor=#ffffff;strokeColor=none;` + Shape names use underscores (`elastic_kubernetes_service`, not `elastic-kubernetes-service`). +2. **Library/environment mismatch** — some embedded viewers do not load the `mxgraph.aws4` stencil library. If shapes do not render in VS Code, test the same XML in `app.diagrams.net` before changing the style string. + +Fill colour conventions by service category: + +| Category | `fillColor` | +|---|---| +| Compute | `#ED7100` | +| Storage | `#3F8624` | +| Database | `#C7131F` | +| Networking / content delivery | `#8C4FFF` | +| Security, identity, compliance | `#DD344C` | +| Management / integration | `#E7157B` | +| Generic / AWS dark | `#232F3E` | + +If a shape still fails, re-query `search_shapes` (raise `limit`, up to 50) and substitute a confirmed style string rather than guessing a variant name. + +--- + +## Known-good AWS4 style strings + +Confirm via `search_shapes` before use — these are a starting point, not a substitute for lookup. + +```text +shape=mxgraph.aws4.ec2;fillColor=#ED7100;fontColor=#ffffff;strokeColor=none; +shape=mxgraph.aws4.lambda;fillColor=#ED7100;fontColor=#ffffff;strokeColor=none; +shape=mxgraph.aws4.elastic_container_service;fillColor=#ED7100;fontColor=#ffffff;strokeColor=none; +shape=mxgraph.aws4.elastic_kubernetes_service;fillColor=#ED7100;fontColor=#ffffff;strokeColor=none; +shape=mxgraph.aws4.application_load_balancer;fillColor=#8C4FFF;fontColor=#ffffff;strokeColor=none; +shape=mxgraph.aws4.cloudfront;fillColor=#8C4FFF;fontColor=#ffffff;strokeColor=none; +shape=mxgraph.aws4.route_53;fillColor=#8C4FFF;fontColor=#ffffff;strokeColor=none; +shape=mxgraph.aws4.vpc;fillColor=#8C4FFF;fontColor=#ffffff;strokeColor=none; +shape=mxgraph.aws4.transit_gateway;fillColor=#8C4FFF;fontColor=#ffffff;strokeColor=none; +shape=mxgraph.aws4.api_gateway;fillColor=#8C4FFF;fontColor=#ffffff;strokeColor=none; +shape=mxgraph.aws4.s3;fillColor=#3F8624;fontColor=#ffffff;strokeColor=none; +shape=mxgraph.aws4.efs;fillColor=#3F8624;fontColor=#ffffff;strokeColor=none; +shape=mxgraph.aws4.rds;fillColor=#C7131F;fontColor=#ffffff;strokeColor=none; +shape=mxgraph.aws4.dynamodb;fillColor=#C7131F;fontColor=#ffffff;strokeColor=none; +shape=mxgraph.aws4.elasticache;fillColor=#C7131F;fontColor=#ffffff;strokeColor=none; +shape=mxgraph.aws4.iam;fillColor=#DD344C;fontColor=#ffffff;strokeColor=none; +shape=mxgraph.aws4.key_management_service;fillColor=#DD344C;fontColor=#ffffff;strokeColor=none; +shape=mxgraph.aws4.waf;fillColor=#DD344C;fontColor=#ffffff;strokeColor=none; +shape=mxgraph.aws4.cognito;fillColor=#DD344C;fontColor=#ffffff;strokeColor=none; +shape=mxgraph.aws4.cloudwatch;fillColor=#E7157B;fontColor=#ffffff;strokeColor=none; +shape=mxgraph.aws4.cloudformation;fillColor=#E7157B;fontColor=#ffffff;strokeColor=none; +shape=mxgraph.aws4.cloudtrail;fillColor=#E7157B;fontColor=#ffffff;strokeColor=none; +shape=mxgraph.aws4.sqs;fillColor=#E7157B;fontColor=#ffffff;strokeColor=none; +shape=mxgraph.aws4.sns;fillColor=#E7157B;fontColor=#ffffff;strokeColor=none; +shape=mxgraph.aws4.eventbridge;fillColor=#E7157B;fontColor=#ffffff;strokeColor=none; +``` + +--- + +## VPC, AZ, and subnet container structure + +Model the hierarchy with real containment, not stacked rectangles — see [xml-authoring-rules.md](xml-authoring-rules.md) for the general rule and why it matters. + +- Each VPC is a `swimlane;startSize=24;` at `parent="1"`. +- Each Availability Zone is a `swimlane;startSize=24;` with `parent=""`. +- Each subnet is a `swimlane;startSize=24;` with `parent=""` — this is what makes AZ redundancy visible. +- Resource icons are parented to their subnet, with coordinates relative to the subnet. +- Edges between resources in different subnets, AZs, or VPCs sit at `parent="1"`. +- Edge/internet services and Transit Gateway/peering zones are separate top-level containers. + +--- + +## Styles and colours + +| Element | Style | +|---|---| +| VPC (Production) | `swimlane;startSize=24;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=4;` | +| VPC (Development) | `swimlane;startSize=24;fillColor=#dae8fc;strokeColor=#6c8ebf;strokeWidth=4;` | +| VPC (Shared Services) | `swimlane;startSize=24;fillColor=#fff2cc;strokeColor=#d6b656;strokeWidth=4;` | +| AZ container | `swimlane;startSize=24;fillColor=#f5f5f5;strokeColor=#999999;strokeWidth=1;` | +| Public subnet | `swimlane;startSize=24;fillColor=#e6f4ea;strokeColor=#82b366;dashed=1;dashPattern=8 8;strokeWidth=2;` | +| Private subnet | `swimlane;startSize=24;fillColor=#EFF7FF;strokeColor=#6c8ebf;dashed=1;dashPattern=8 8;strokeWidth=2;` | +| Isolated subnet (databases) | `swimlane;startSize=24;fillColor=#fff3e0;strokeColor=#e6821e;dashed=1;dashPattern=8 8;strokeWidth=2;` | + +Label subnets with name, AZ, and CIDR. Canvas: `pageWidth="1900" pageHeight="1500"` for multi-VPC or multi-account topologies. + +--- + +## Resource placement rules + +- Internet-facing (ALB, NAT Gateway, Bastion) → **public subnets** +- Application servers / ECS tasks / EKS nodes → **private subnets** +- Databases (RDS, ElastiCache) → **isolated subnets**, no outbound internet +- Always show the NAT Gateway path for private subnet → internet egress +- Annotate Security Group and NACL boundaries where they carry meaning + +--- + +## Traffic flow colour palette + +| Traffic type | Colour | Style | +|---|---|---| +| HTTPS:443 internet ingress | `#0078D4` Blue | solid, `strokeWidth=3` | +| HTTP:80/8080 backend | `#00897B` Teal | solid, `strokeWidth=2` | +| Database (PostgreSQL:5432, MySQL:3306) | `#5C6BC0` Indigo | dashed, `strokeWidth=2` | +| VPC Endpoint / AWS managed service | `#43A047` Green | solid, `strokeWidth=2` | +| SSH:22 / SSM management | `#F57C00` Amber | dashed, `strokeWidth=2` | +| Denied/blocked | `#C62828` Red | solid — reserve exclusively for blocked traffic | + +--- + +## Annotation boxes + +1. **Network Isolation Explanation** — top-left: VPC thick borders, subnet tiers, SG/NACL notes, VPC Endpoints for private AWS service access. +2. **Zone Separation** — Internet/Edge zone (CloudFront, Route 53, WAF, Shield), VPC Peering/Transit Gateway zone, AWS Managed Services zone. + +--- + +## Complete topology example + +Nested containers, relative child coordinates, cross-container edges at `parent="1"`, and `as="geometry"` on every geometry element. + +```xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +Generate with `routing: "libavoid"` so connectors route around the containers without moving them. + +--- + +## AWS topology checklist + +- [ ] VPCs are containers with thick borders (`strokeWidth=4`), colour-coded by environment +- [ ] AZ containers group subnets per Availability Zone +- [ ] Subnets are containers parented to their AZ, dashed and colour-coded by tier (public/private/isolated) +- [ ] Every resource is parented to its subnet with relative coordinates +- [ ] Cross-subnet, cross-AZ, and cross-VPC edges declared at `parent="1"` +- [ ] Internet Gateway and NAT Gateway shown, with the private-subnet egress path +- [ ] Traffic arrows labelled with protocols and ports, using the palette above +- [ ] Security Group / NACL boundaries annotated where important +- [ ] Network isolation explanation box included +- [ ] VPC Peering / Transit Gateway and edge services in separate zone containers +- [ ] Canvas 1900×1500 for complex infrastructure +- [ ] `routing: "libavoid"` applied; no hand-written waypoints or exit/entry points +- [ ] Animation preference confirmed before generating diff --git a/.github/skills/drawio-mcp-diagramming/references/aws4-complete-catalog.txt b/.github/skills/drawio-mcp-diagramming/references/aws4-complete-catalog.txt deleted file mode 100644 index e669c7b..0000000 --- a/.github/skills/drawio-mcp-diagramming/references/aws4-complete-catalog.txt +++ /dev/null @@ -1,1038 +0,0 @@ -Matched 1037 shapes (showing 1037) -shape=mxgraph.aws4.Bedrock_AgentCore -shape=mxgraph.aws4.DevOps_Agent -shape=mxgraph.aws4.Security_Agent -shape=mxgraph.aws4.a1_instance -shape=mxgraph.aws4.access_analyzer -shape=mxgraph.aws4.action -shape=mxgraph.aws4.activate -shape=mxgraph.aws4.actuator -shape=mxgraph.aws4.ad_connector -shape=mxgraph.aws4.addon -shape=mxgraph.aws4.agent -shape=mxgraph.aws4.agent2 -shape=mxgraph.aws4.alarm -shape=mxgraph.aws4.alert -shape=mxgraph.aws4.alexa_enabled_device -shape=mxgraph.aws4.alexa_for_business -shape=mxgraph.aws4.alexa_skill -shape=mxgraph.aws4.alexa_smart_home_skill -shape=mxgraph.aws4.alexa_voice_service -shape=mxgraph.aws4.all_products -shape=mxgraph.aws4.ami -shape=mxgraph.aws4.amplify -shape=mxgraph.aws4.amplify_aws_amplify_studio -shape=mxgraph.aws4.analytics -shape=mxgraph.aws4.apache_mxnet_on_aws -shape=mxgraph.aws4.api_gateway -shape=mxgraph.aws4.app_config -shape=mxgraph.aws4.app_mesh -shape=mxgraph.aws4.app_runner -shape=mxgraph.aws4.app_studio -shape=mxgraph.aws4.app_wizard -shape=mxgraph.aws4.appfabric -shape=mxgraph.aws4.appflow -shape=mxgraph.aws4.application -shape=mxgraph.aws4.application_auto_scaling -shape=mxgraph.aws4.application_composer -shape=mxgraph.aws4.application_cost_profiler -shape=mxgraph.aws4.application_discovery_service -shape=mxgraph.aws4.application_discovery_service_aws_agentless_collector -shape=mxgraph.aws4.application_discovery_service_aws_discovery_agent -shape=mxgraph.aws4.application_discovery_service_migration_evaluator_collector -shape=mxgraph.aws4.application_integration -shape=mxgraph.aws4.application_load_balancer -shape=mxgraph.aws4.application_recovery_controller -shape=mxgraph.aws4.apps -shape=mxgraph.aws4.appstream_20 -shape=mxgraph.aws4.appsync -shape=mxgraph.aws4.ar_vr -shape=mxgraph.aws4.archive -shape=mxgraph.aws4.artifact -shape=mxgraph.aws4.athena -shape=mxgraph.aws4.athena_data_source_connectors -shape=mxgraph.aws4.attribute -shape=mxgraph.aws4.attributes -shape=mxgraph.aws4.audit_manager -shape=mxgraph.aws4.augmented_ai -shape=mxgraph.aws4.aurora -shape=mxgraph.aws4.aurora_instance -shape=mxgraph.aws4.aurora_instance_alt -shape=mxgraph.aws4.authenticated_user -shape=mxgraph.aws4.auto_scaling -shape=mxgraph.aws4.auto_scaling2 -shape=mxgraph.aws4.auto_scaling3 -shape=mxgraph.aws4.automation -shape=mxgraph.aws4.autoscaling -shape=mxgraph.aws4.aws_backup_for_aws_cloudformation -shape=mxgraph.aws4.aws_backup_legal_hold -shape=mxgraph.aws4.aws_backup_support_for_amazon_fsx_for_netapp_ontap -shape=mxgraph.aws4.aws_backup_vault_lock -shape=mxgraph.aws4.aws_backup_virtual_machine_monitor -shape=mxgraph.aws4.aws_cloud -shape=mxgraph.aws4.aws_glue_data_quality -shape=mxgraph.aws4.aws_glue_for_ray -shape=mxgraph.aws4.aws_user_notifications -shape=mxgraph.aws4.b2b_data_interchange -shape=mxgraph.aws4.backint_agent -shape=mxgraph.aws4.backup -shape=mxgraph.aws4.backup_audit_manager -shape=mxgraph.aws4.backup_aws_backup_support_for_amazon_s3 -shape=mxgraph.aws4.backup_aws_backup_support_for_vmware_workloads -shape=mxgraph.aws4.backup_backup_plan -shape=mxgraph.aws4.backup_backup_restore -shape=mxgraph.aws4.backup_compliance_reporting -shape=mxgraph.aws4.backup_compute -shape=mxgraph.aws4.backup_database -shape=mxgraph.aws4.backup_gateway -shape=mxgraph.aws4.backup_plan -shape=mxgraph.aws4.backup_recovery_point_objective -shape=mxgraph.aws4.backup_recovery_time_objective -shape=mxgraph.aws4.backup_restore -shape=mxgraph.aws4.backup_storage -shape=mxgraph.aws4.backup_vault -shape=mxgraph.aws4.backup_virtual_machine -shape=mxgraph.aws4.backup_virtual_machine_monitor -shape=mxgraph.aws4.bank -shape=mxgraph.aws4.batch -shape=mxgraph.aws4.bedrock -shape=mxgraph.aws4.blockchain -shape=mxgraph.aws4.blockchain_resource -shape=mxgraph.aws4.bottlerocket -shape=mxgraph.aws4.braket -shape=mxgraph.aws4.braket_chandelier -shape=mxgraph.aws4.braket_chip -shape=mxgraph.aws4.braket_embedded_simulator -shape=mxgraph.aws4.braket_managed_simulator -shape=mxgraph.aws4.braket_noise_simulator -shape=mxgraph.aws4.braket_qpu -shape=mxgraph.aws4.braket_simulator -shape=mxgraph.aws4.braket_simulator_1 -shape=mxgraph.aws4.braket_simulator_2 -shape=mxgraph.aws4.braket_simulator_3 -shape=mxgraph.aws4.braket_simulator_4 -shape=mxgraph.aws4.braket_state_vector -shape=mxgraph.aws4.braket_tensor_network -shape=mxgraph.aws4.bucket -shape=mxgraph.aws4.bucket_with_objects -shape=mxgraph.aws4.budgets -shape=mxgraph.aws4.budgets_2 -shape=mxgraph.aws4.business_application -shape=mxgraph.aws4.bycicle -shape=mxgraph.aws4.c4_instance -shape=mxgraph.aws4.c5_instance -shape=mxgraph.aws4.c5a -shape=mxgraph.aws4.c5ad -shape=mxgraph.aws4.c5d -shape=mxgraph.aws4.c5n_instance -shape=mxgraph.aws4.c6g_instance -shape=mxgraph.aws4.c6gd -shape=mxgraph.aws4.cache_node -shape=mxgraph.aws4.cached_volume -shape=mxgraph.aws4.camera -shape=mxgraph.aws4.camera2 -shape=mxgraph.aws4.car -shape=mxgraph.aws4.cart -shape=mxgraph.aws4.certificate_manager -shape=mxgraph.aws4.certificate_manager_2 -shape=mxgraph.aws4.certificate_manager_3 -shape=mxgraph.aws4.change_set -shape=mxgraph.aws4.chat -shape=mxgraph.aws4.chatbot -shape=mxgraph.aws4.checklist -shape=mxgraph.aws4.checklist_cost -shape=mxgraph.aws4.checklist_fault_tolerant -shape=mxgraph.aws4.checklist_performance -shape=mxgraph.aws4.checklist_security -shape=mxgraph.aws4.chime -shape=mxgraph.aws4.chime_sdk -shape=mxgraph.aws4.classic_load_balancer -shape=mxgraph.aws4.clean_rooms -shape=mxgraph.aws4.client -shape=mxgraph.aws4.client_vpn -shape=mxgraph.aws4.cloud_control_api -shape=mxgraph.aws4.cloud_development_kit -shape=mxgraph.aws4.cloud_digital_interface -shape=mxgraph.aws4.cloud_directory -shape=mxgraph.aws4.cloud_extension_ros -shape=mxgraph.aws4.cloud_map -shape=mxgraph.aws4.cloud_map_resource -shape=mxgraph.aws4.cloud_wan -shape=mxgraph.aws4.cloud_wan_segment_network -shape=mxgraph.aws4.cloud_wan_transit_gateway_route_table_attachment -shape=mxgraph.aws4.cloud_wan_virtual_pop -shape=mxgraph.aws4.cloud9 -shape=mxgraph.aws4.cloudendure_disaster_recovery -shape=mxgraph.aws4.cloudendure_migration -shape=mxgraph.aws4.cloudformation -shape=mxgraph.aws4.cloudfront -shape=mxgraph.aws4.cloudfront_functions -shape=mxgraph.aws4.cloudhsm -shape=mxgraph.aws4.cloudsearch -shape=mxgraph.aws4.cloudsearch2 -shape=mxgraph.aws4.cloudshell -shape=mxgraph.aws4.cloudtrail -shape=mxgraph.aws4.cloudtrail_cloudtrail_lake -shape=mxgraph.aws4.cloudwatch -shape=mxgraph.aws4.cloudwatch_2 -shape=mxgraph.aws4.cloudwatch_cross_account_observability -shape=mxgraph.aws4.cloudwatch_data_protection -shape=mxgraph.aws4.cloudwatch_evidently -shape=mxgraph.aws4.cloudwatch_logs -shape=mxgraph.aws4.cloudwatch_metrics_insights -shape=mxgraph.aws4.cloudwatch_rum -shape=mxgraph.aws4.cloudwatch_synthetics -shape=mxgraph.aws4.cluster -shape=mxgraph.aws4.codeartifact -shape=mxgraph.aws4.codebuild -shape=mxgraph.aws4.codecatalyst -shape=mxgraph.aws4.codecommit -shape=mxgraph.aws4.codedeploy -shape=mxgraph.aws4.codeguru -shape=mxgraph.aws4.codeguru_2 -shape=mxgraph.aws4.codepipeline -shape=mxgraph.aws4.codestar -shape=mxgraph.aws4.codewhisperer -shape=mxgraph.aws4.coffee_pot -shape=mxgraph.aws4.cognito -shape=mxgraph.aws4.cold_storage -shape=mxgraph.aws4.command_line_interface -shape=mxgraph.aws4.comprehend -shape=mxgraph.aws4.comprehend_medical -shape=mxgraph.aws4.compute -shape=mxgraph.aws4.compute_optimizer -shape=mxgraph.aws4.config -shape=mxgraph.aws4.connect -shape=mxgraph.aws4.connector -shape=mxgraph.aws4.contact_center -shape=mxgraph.aws4.container_1 -shape=mxgraph.aws4.container_2 -shape=mxgraph.aws4.container_3 -shape=mxgraph.aws4.container_registry_image -shape=mxgraph.aws4.containers -shape=mxgraph.aws4.control_tower -shape=mxgraph.aws4.corporate_data_center -shape=mxgraph.aws4.corporate_data_center2 -shape=mxgraph.aws4.corretto -shape=mxgraph.aws4.cost_and_usage_report -shape=mxgraph.aws4.cost_explorer -shape=mxgraph.aws4.cost_management -shape=mxgraph.aws4.credentials -shape=mxgraph.aws4.custom_billing_manager -shape=mxgraph.aws4.custom_event_bus_resource -shape=mxgraph.aws4.customer_enablement -shape=mxgraph.aws4.customer_engagement -shape=mxgraph.aws4.customer_gateway -shape=mxgraph.aws4.d2_instance -shape=mxgraph.aws4.d3_instance -shape=mxgraph.aws4.d3en_instance -shape=mxgraph.aws4.data_encryption_key -shape=mxgraph.aws4.data_exchange -shape=mxgraph.aws4.data_exchange_for_apis -shape=mxgraph.aws4.data_lake_resource_icon -shape=mxgraph.aws4.data_pipeline -shape=mxgraph.aws4.data_set -shape=mxgraph.aws4.data_stream -shape=mxgraph.aws4.data_table -shape=mxgraph.aws4.data_transfer_terminal -shape=mxgraph.aws4.database -shape=mxgraph.aws4.database_migration_service -shape=mxgraph.aws4.database_migration_workflow_job -shape=mxgraph.aws4.datasync -shape=mxgraph.aws4.datasync_discovery -shape=mxgraph.aws4.datazone -shape=mxgraph.aws4.datazone_business_data_catalog -shape=mxgraph.aws4.datazone_data_portal -shape=mxgraph.aws4.datazone_data_projects -shape=mxgraph.aws4.db_instance -shape=mxgraph.aws4.db_instance_read_replica -shape=mxgraph.aws4.db_instance_standby -shape=mxgraph.aws4.db_on_instance -shape=mxgraph.aws4.db_on_instance2 -shape=mxgraph.aws4.deadline_cloud -shape=mxgraph.aws4.deep_learning_amis -shape=mxgraph.aws4.deep_learning_containers -shape=mxgraph.aws4.deepcomposer -shape=mxgraph.aws4.deeplens -shape=mxgraph.aws4.deepracer -shape=mxgraph.aws4.default_event_bus_resource -shape=mxgraph.aws4.dense_compute_node -shape=mxgraph.aws4.dense_storage_node -shape=mxgraph.aws4.deployment -shape=mxgraph.aws4.deployments -shape=mxgraph.aws4.desired_state -shape=mxgraph.aws4.desktop_and_app_streaming -shape=mxgraph.aws4.detective -shape=mxgraph.aws4.developer_tools -shape=mxgraph.aws4.development_environment -shape=mxgraph.aws4.device_farm -shape=mxgraph.aws4.devops_guru -shape=mxgraph.aws4.devops_guru_insights -shape=mxgraph.aws4.direct_connect -shape=mxgraph.aws4.directory_service -shape=mxgraph.aws4.disk -shape=mxgraph.aws4.distro_for_opentelemetry -shape=mxgraph.aws4.document -shape=mxgraph.aws4.documentdb_elastic_clusters -shape=mxgraph.aws4.documentdb_with_mongodb_compatibility -shape=mxgraph.aws4.documents -shape=mxgraph.aws4.documents2 -shape=mxgraph.aws4.documents3 -shape=mxgraph.aws4.door_lock -shape=mxgraph.aws4.download_distribution -shape=mxgraph.aws4.dynamodb -shape=mxgraph.aws4.dynamodb_dax -shape=mxgraph.aws4.dynamodb_standard_access_table_class -shape=mxgraph.aws4.dynamodb_standard_infrequent_access_table_class -shape=mxgraph.aws4.dynamodb_stream -shape=mxgraph.aws4.ec2 -shape=mxgraph.aws4.ec2_aws_microservice_extractor_for_net -shape=mxgraph.aws4.ec2_c6a_instance -shape=mxgraph.aws4.ec2_c6gn_instance -shape=mxgraph.aws4.ec2_c6i_instance -shape=mxgraph.aws4.ec2_c6in_instance -shape=mxgraph.aws4.ec2_c7g_instance -shape=mxgraph.aws4.ec2_c7gn_instance -shape=mxgraph.aws4.ec2_dl1_instance -shape=mxgraph.aws4.ec2_g5_instance -shape=mxgraph.aws4.ec2_g5g_instance -shape=mxgraph.aws4.ec2_hpc6a_instance -shape=mxgraph.aws4.ec2_hpc6id_instance -shape=mxgraph.aws4.ec2_i4i_instance -shape=mxgraph.aws4.ec2_im4gn_instance -shape=mxgraph.aws4.ec2_image_builder -shape=mxgraph.aws4.ec2_inf2_instance -shape=mxgraph.aws4.ec2_instance_contents -shape=mxgraph.aws4.ec2_is4gen_instance -shape=mxgraph.aws4.ec2_m1_mac_instance -shape=mxgraph.aws4.ec2_m6a_instance -shape=mxgraph.aws4.ec2_m6i_instance -shape=mxgraph.aws4.ec2_m6idn_instance -shape=mxgraph.aws4.ec2_m6in_instance -shape=mxgraph.aws4.ec2_p4de_instance -shape=mxgraph.aws4.ec2_r6a_instance -shape=mxgraph.aws4.ec2_r6i_instance -shape=mxgraph.aws4.ec2_r6idn_instance -shape=mxgraph.aws4.ec2_r6in_instance -shape=mxgraph.aws4.ec2_r7iz_instance -shape=mxgraph.aws4.ec2_trn1_instance -shape=mxgraph.aws4.ec2_vt1_instance -shape=mxgraph.aws4.ec2_x2gd_instance -shape=mxgraph.aws4.ec2_x2idn_instance -shape=mxgraph.aws4.ec2_x2iedn_instance -shape=mxgraph.aws4.ec2_x2iezn_instance -shape=mxgraph.aws4.echo -shape=mxgraph.aws4.ecr -shape=mxgraph.aws4.ecs -shape=mxgraph.aws4.ecs_anywhere -shape=mxgraph.aws4.ecs_copilot_cli -shape=mxgraph.aws4.ecs_service -shape=mxgraph.aws4.ecs_service_connect -shape=mxgraph.aws4.ecs_task -shape=mxgraph.aws4.edge_location -shape=mxgraph.aws4.efs_infrequentaccess -shape=mxgraph.aws4.efs_standard -shape=mxgraph.aws4.eks -shape=mxgraph.aws4.eks_anywhere -shape=mxgraph.aws4.eks_cloud -shape=mxgraph.aws4.eks_distro -shape=mxgraph.aws4.eks_on_outposts -shape=mxgraph.aws4.elastic_beanstalk -shape=mxgraph.aws4.elastic_block_store -shape=mxgraph.aws4.elastic_block_store_amazon_data_lifecycle_manager -shape=mxgraph.aws4.elastic_block_store_volume_gp3 -shape=mxgraph.aws4.elastic_fabric_adapter -shape=mxgraph.aws4.elastic_file_system -shape=mxgraph.aws4.elastic_file_system_elastic_throughput -shape=mxgraph.aws4.elastic_file_system_infrequent_access -shape=mxgraph.aws4.elastic_file_system_intelligent_tiering -shape=mxgraph.aws4.elastic_file_system_one_zone -shape=mxgraph.aws4.elastic_file_system_one_zone_infrequent_access -shape=mxgraph.aws4.elastic_file_system_one_zone_standard -shape=mxgraph.aws4.elastic_file_system_standard -shape=mxgraph.aws4.elastic_file_system_standard_infrequent_access -shape=mxgraph.aws4.elastic_inference -shape=mxgraph.aws4.elastic_inference_2 -shape=mxgraph.aws4.elastic_ip_address -shape=mxgraph.aws4.elastic_load_balancing -shape=mxgraph.aws4.elastic_network_adapter -shape=mxgraph.aws4.elastic_network_interface -shape=mxgraph.aws4.elastic_transcoder -shape=mxgraph.aws4.elastic_vmware_service -shape=mxgraph.aws4.elasticache -shape=mxgraph.aws4.elasticache_for_memcached -shape=mxgraph.aws4.elasticache_for_redis -shape=mxgraph.aws4.elasticache_for_valkey -shape=mxgraph.aws4.elasticsearch_service -shape=mxgraph.aws4.elemental -shape=mxgraph.aws4.elemental_link -shape=mxgraph.aws4.elemental_mediaconnect -shape=mxgraph.aws4.elemental_mediaconvert -shape=mxgraph.aws4.elemental_medialive -shape=mxgraph.aws4.elemental_mediapackage -shape=mxgraph.aws4.elemental_mediastore -shape=mxgraph.aws4.elemental_mediatailor -shape=mxgraph.aws4.email -shape=mxgraph.aws4.email_2 -shape=mxgraph.aws4.email_notification -shape=mxgraph.aws4.emr -shape=mxgraph.aws4.emr_engine -shape=mxgraph.aws4.emr_engine_mapr_m3 -shape=mxgraph.aws4.emr_engine_mapr_m5 -shape=mxgraph.aws4.emr_engine_mapr_m7 -shape=mxgraph.aws4.encrypted_data -shape=mxgraph.aws4.end_user_messaging -shape=mxgraph.aws4.endpoint -shape=mxgraph.aws4.endpoints -shape=mxgraph.aws4.entity_resolution -shape=mxgraph.aws4.event -shape=mxgraph.aws4.event_event_based -shape=mxgraph.aws4.event_resource -shape=mxgraph.aws4.event_time_based -shape=mxgraph.aws4.eventbridge -shape=mxgraph.aws4.eventbridge_custom_event_bus_resource -shape=mxgraph.aws4.eventbridge_default_event_bus_resource -shape=mxgraph.aws4.eventbridge_pipes -shape=mxgraph.aws4.eventbridge_saas_partner_event_bus_resource -shape=mxgraph.aws4.eventbridge_scheduler -shape=mxgraph.aws4.eventbridge_schema -shape=mxgraph.aws4.eventbridge_schema_registry -shape=mxgraph.aws4.express_workflow -shape=mxgraph.aws4.external_sdk -shape=mxgraph.aws4.external_toolkit -shape=mxgraph.aws4.f1_instance -shape=mxgraph.aws4.factory -shape=mxgraph.aws4.fargate -shape=mxgraph.aws4.fault_injection_simulator -shape=mxgraph.aws4.file_cache -shape=mxgraph.aws4.file_cache_hybrid_nfs_linked_datasets -shape=mxgraph.aws4.file_cache_on_premises_nfs_linked_datasets -shape=mxgraph.aws4.file_cache_s3_linked_datasets -shape=mxgraph.aws4.file_gateway -shape=mxgraph.aws4.file_system -shape=mxgraph.aws4.filtering_rule -shape=mxgraph.aws4.finding -shape=mxgraph.aws4.finspace -shape=mxgraph.aws4.firetv -shape=mxgraph.aws4.firetv_stick -shape=mxgraph.aws4.firewall_manager -shape=mxgraph.aws4.fleet_management -shape=mxgraph.aws4.flow_logs -shape=mxgraph.aws4.folder -shape=mxgraph.aws4.folders -shape=mxgraph.aws4.forecast -shape=mxgraph.aws4.forums -shape=mxgraph.aws4.fraud_detector -shape=mxgraph.aws4.freertos -shape=mxgraph.aws4.fsx -shape=mxgraph.aws4.fsx_file_gateway -shape=mxgraph.aws4.fsx_for_lustre -shape=mxgraph.aws4.fsx_for_netapp_ontap -shape=mxgraph.aws4.fsx_for_openzfs -shape=mxgraph.aws4.fsx_for_windows_file_server -shape=mxgraph.aws4.g3_instance -shape=mxgraph.aws4.g4ad_instance -shape=mxgraph.aws4.g4dn -shape=mxgraph.aws4.game_tech -shape=mxgraph.aws4.game_tech2 -shape=mxgraph.aws4.gamekit -shape=mxgraph.aws4.gamelift -shape=mxgraph.aws4.gamelift_2 -shape=mxgraph.aws4.gamelift_streams -shape=mxgraph.aws4.games -shape=mxgraph.aws4.gamesparks -shape=mxgraph.aws4.gateway -shape=mxgraph.aws4.gateway_load_balancer -shape=mxgraph.aws4.gear -shape=mxgraph.aws4.general -shape=mxgraph.aws4.general_access_points -shape=mxgraph.aws4.generic -shape=mxgraph.aws4.generic_application -shape=mxgraph.aws4.generic_database -shape=mxgraph.aws4.generic_firewall -shape=mxgraph.aws4.genomics_cli -shape=mxgraph.aws4.git_repository -shape=mxgraph.aws4.glacier -shape=mxgraph.aws4.glacier_deep_archive -shape=mxgraph.aws4.global_accelerator -shape=mxgraph.aws4.global_secondary_index -shape=mxgraph.aws4.globe -shape=mxgraph.aws4.glue -shape=mxgraph.aws4.glue_crawlers -shape=mxgraph.aws4.glue_data_catalog -shape=mxgraph.aws4.glue_databrew -shape=mxgraph.aws4.glue_elastic_views -shape=mxgraph.aws4.greengrass -shape=mxgraph.aws4.ground_station -shape=mxgraph.aws4.group_account -shape=mxgraph.aws4.group_auto_scaling_group -shape=mxgraph.aws4.group_availability_zone -shape=mxgraph.aws4.group_aws_cloud -shape=mxgraph.aws4.group_aws_cloud_alt -shape=mxgraph.aws4.group_aws_step_functions_workflow -shape=mxgraph.aws4.group_corporate_data_center -shape=mxgraph.aws4.group_ec2_instance_contents -shape=mxgraph.aws4.group_elastic_beanstalk -shape=mxgraph.aws4.group_elastic_load_balancing -shape=mxgraph.aws4.group_iot_greengrass -shape=mxgraph.aws4.group_iot_greengrass_deployment -shape=mxgraph.aws4.group_on_premise -shape=mxgraph.aws4.group_region -shape=mxgraph.aws4.group_security_group -shape=mxgraph.aws4.group_spot_fleet -shape=mxgraph.aws4.group_subnet -shape=mxgraph.aws4.group_vpc -shape=mxgraph.aws4.group_vpc2 -shape=mxgraph.aws4.guardduty -shape=mxgraph.aws4.h1_instance -shape=mxgraph.aws4.habana_gaudi -shape=mxgraph.aws4.hardware_board -shape=mxgraph.aws4.hdfs_cluster -shape=mxgraph.aws4.healthimaging -shape=mxgraph.aws4.healthlake -shape=mxgraph.aws4.healthscribe -shape=mxgraph.aws4.high_memory_instance -shape=mxgraph.aws4.honeycode -shape=mxgraph.aws4.hosted_zone -shape=mxgraph.aws4.house -shape=mxgraph.aws4.http_notification -shape=mxgraph.aws4.http_protocol -shape=mxgraph.aws4.http2_protocol -shape=mxgraph.aws4.i2 -shape=mxgraph.aws4.i3_instance -shape=mxgraph.aws4.i3en -shape=mxgraph.aws4.identity_access_management_iam_roles_anywhere -shape=mxgraph.aws4.identity_and_access_management -shape=mxgraph.aws4.illustration_desktop -shape=mxgraph.aws4.illustration_devices -shape=mxgraph.aws4.illustration_notification -shape=mxgraph.aws4.illustration_office_building -shape=mxgraph.aws4.illustration_users -shape=mxgraph.aws4.import_export -shape=mxgraph.aws4.inf1 -shape=mxgraph.aws4.inferentia -shape=mxgraph.aws4.infrequent_access_storage_class -shape=mxgraph.aws4.inspector -shape=mxgraph.aws4.instance -shape=mxgraph.aws4.instance_with_cloudwatch -shape=mxgraph.aws4.instance_with_cloudwatch2 -shape=mxgraph.aws4.instance2 -shape=mxgraph.aws4.instances -shape=mxgraph.aws4.instances_2 -shape=mxgraph.aws4.intelligent_tiering -shape=mxgraph.aws4.interactive_video -shape=mxgraph.aws4.internet -shape=mxgraph.aws4.internet_alt1 -shape=mxgraph.aws4.internet_alt2 -shape=mxgraph.aws4.internet_alt22 -shape=mxgraph.aws4.internet_gateway -shape=mxgraph.aws4.internet_of_things -shape=mxgraph.aws4.inventory -shape=mxgraph.aws4.iot_1click -shape=mxgraph.aws4.iot_analytics -shape=mxgraph.aws4.iot_analytics_channel -shape=mxgraph.aws4.iot_analytics_data_store -shape=mxgraph.aws4.iot_analytics_dataset -shape=mxgraph.aws4.iot_analytics_pipeline -shape=mxgraph.aws4.iot_button -shape=mxgraph.aws4.iot_core -shape=mxgraph.aws4.iot_core_device_advisor -shape=mxgraph.aws4.iot_core_device_location -shape=mxgraph.aws4.iot_device_defender -shape=mxgraph.aws4.iot_device_defender_iot_device_jobs -shape=mxgraph.aws4.iot_device_gateway -shape=mxgraph.aws4.iot_device_jobs_resource -shape=mxgraph.aws4.iot_device_management -shape=mxgraph.aws4.iot_device_management_fleet -shape=mxgraph.aws4.iot_device_tester -shape=mxgraph.aws4.iot_edukit -shape=mxgraph.aws4.iot_events -shape=mxgraph.aws4.iot_expresslink -shape=mxgraph.aws4.iot_fleetwise -shape=mxgraph.aws4.iot_greengrass_artifact -shape=mxgraph.aws4.iot_greengrass_component -shape=mxgraph.aws4.iot_greengrass_component_machine_learning -shape=mxgraph.aws4.iot_greengrass_component_nucleus -shape=mxgraph.aws4.iot_greengrass_component_private -shape=mxgraph.aws4.iot_greengrass_component_public -shape=mxgraph.aws4.iot_greengrass_interprocess_communication -shape=mxgraph.aws4.iot_greengrass_protocol -shape=mxgraph.aws4.iot_greengrass_recipe -shape=mxgraph.aws4.iot_greengrass_stream_manager -shape=mxgraph.aws4.iot_lorawan_protocol -shape=mxgraph.aws4.iot_over_the_air_update -shape=mxgraph.aws4.iot_roborunner -shape=mxgraph.aws4.iot_sailboat -shape=mxgraph.aws4.iot_sitewise -shape=mxgraph.aws4.iot_sitewise_asset -shape=mxgraph.aws4.iot_sitewise_asset_hierarchy -shape=mxgraph.aws4.iot_sitewise_asset_model -shape=mxgraph.aws4.iot_sitewise_asset_properties -shape=mxgraph.aws4.iot_sitewise_data_streams -shape=mxgraph.aws4.iot_thing_freertos_device -shape=mxgraph.aws4.iot_thing_humidity_sensor -shape=mxgraph.aws4.iot_thing_industrial_pc -shape=mxgraph.aws4.iot_thing_plc -shape=mxgraph.aws4.iot_thing_relay -shape=mxgraph.aws4.iot_thing_stacklight -shape=mxgraph.aws4.iot_thing_temperature_humidity_sensor -shape=mxgraph.aws4.iot_thing_temperature_sensor -shape=mxgraph.aws4.iot_thing_temperature_vibration_sensor -shape=mxgraph.aws4.iot_thing_vibration_sensor -shape=mxgraph.aws4.iot_things_graph -shape=mxgraph.aws4.iot_twinmaker -shape=mxgraph.aws4.iq -shape=mxgraph.aws4.item -shape=mxgraph.aws4.items -shape=mxgraph.aws4.json_script -shape=mxgraph.aws4.kendra -shape=mxgraph.aws4.key_management_service -shape=mxgraph.aws4.key_management_service_external_key_store -shape=mxgraph.aws4.keyspaces -shape=mxgraph.aws4.kinesis -shape=mxgraph.aws4.kinesis_data_analytics -shape=mxgraph.aws4.kinesis_data_firehose -shape=mxgraph.aws4.kinesis_data_streams -shape=mxgraph.aws4.kinesis_video_streams -shape=mxgraph.aws4.lake_formation -shape=mxgraph.aws4.lambda -shape=mxgraph.aws4.lambda_function -shape=mxgraph.aws4.layers -shape=mxgraph.aws4.lex -shape=mxgraph.aws4.license_manager -shape=mxgraph.aws4.license_manager_application_discovery -shape=mxgraph.aws4.license_manager_license_blending -shape=mxgraph.aws4.lightbulb -shape=mxgraph.aws4.lightsail -shape=mxgraph.aws4.lightsail_for_research -shape=mxgraph.aws4.local_zones -shape=mxgraph.aws4.location_service -shape=mxgraph.aws4.location_service_geofence -shape=mxgraph.aws4.location_service_map -shape=mxgraph.aws4.location_service_place -shape=mxgraph.aws4.location_service_routes -shape=mxgraph.aws4.location_service_track -shape=mxgraph.aws4.logs -shape=mxgraph.aws4.long_term_security_credential -shape=mxgraph.aws4.lookout_for_equipment -shape=mxgraph.aws4.lookout_for_metrics -shape=mxgraph.aws4.lookout_for_vision -shape=mxgraph.aws4.lumberyard -shape=mxgraph.aws4.m4_instance -shape=mxgraph.aws4.m5_instance -shape=mxgraph.aws4.m5a_instance -shape=mxgraph.aws4.m5d_instance -shape=mxgraph.aws4.m5dn_instance -shape=mxgraph.aws4.m5n -shape=mxgraph.aws4.m5n_instance -shape=mxgraph.aws4.m5zn_instance -shape=mxgraph.aws4.m6g_instance -shape=mxgraph.aws4.m6gd_instance -shape=mxgraph.aws4.mac_instance -shape=mxgraph.aws4.machine_learning -shape=mxgraph.aws4.macie -shape=mxgraph.aws4.magnifying_glass -shape=mxgraph.aws4.magnifying_glass_2 -shape=mxgraph.aws4.mainframe_modernization -shape=mxgraph.aws4.mainframe_modernization_analyzer -shape=mxgraph.aws4.mainframe_modernization_compiler -shape=mxgraph.aws4.mainframe_modernization_converter -shape=mxgraph.aws4.mainframe_modernization_developer -shape=mxgraph.aws4.mainframe_modernization_runtime -shape=mxgraph.aws4.maintenance_windows -shape=mxgraph.aws4.managed_apache_cassandra_service -shape=mxgraph.aws4.managed_blockchain -shape=mxgraph.aws4.managed_ms_ad -shape=mxgraph.aws4.managed_service_for_apache_flink -shape=mxgraph.aws4.managed_service_for_grafana -shape=mxgraph.aws4.managed_service_for_prometheus -shape=mxgraph.aws4.managed_services -shape=mxgraph.aws4.managed_streaming_for_kafka -shape=mxgraph.aws4.managed_workflows_for_apache_airflow -shape=mxgraph.aws4.management_and_governance -shape=mxgraph.aws4.management_console -shape=mxgraph.aws4.management_console2 -shape=mxgraph.aws4.marketplace -shape=mxgraph.aws4.media_services -shape=mxgraph.aws4.mediaconnect_gateway -shape=mxgraph.aws4.medical_emergency -shape=mxgraph.aws4.memorydb_for_redis -shape=mxgraph.aws4.mesh -shape=mxgraph.aws4.message -shape=mxgraph.aws4.metrics -shape=mxgraph.aws4.mfa_token -shape=mxgraph.aws4.migration_and_transfer -shape=mxgraph.aws4.migration_evaluator -shape=mxgraph.aws4.migration_hub -shape=mxgraph.aws4.migration_hub_refactor_spaces_applications -shape=mxgraph.aws4.migration_hub_refactor_spaces_environments -shape=mxgraph.aws4.migration_hub_refactor_spaces_services -shape=mxgraph.aws4.mobile -shape=mxgraph.aws4.mobile_application -shape=mxgraph.aws4.mobile_client -shape=mxgraph.aws4.mobile_hub -shape=mxgraph.aws4.monitoring -shape=mxgraph.aws4.monitron -shape=mxgraph.aws4.mq -shape=mxgraph.aws4.mq_broker -shape=mxgraph.aws4.mqtt_protocol -shape=mxgraph.aws4.ms_sql_instance -shape=mxgraph.aws4.ms_sql_instance_alternate -shape=mxgraph.aws4.msk_amazon_msk_connect -shape=mxgraph.aws4.multimedia -shape=mxgraph.aws4.multiple_volumes_resource -shape=mxgraph.aws4.mysql_db_instance -shape=mxgraph.aws4.mysql_db_instance_alternate -shape=mxgraph.aws4.namespace -shape=mxgraph.aws4.nat_gateway -shape=mxgraph.aws4.neptune -shape=mxgraph.aws4.network_access_control_list -shape=mxgraph.aws4.network_firewall -shape=mxgraph.aws4.network_firewall_endpoints -shape=mxgraph.aws4.network_load_balancer -shape=mxgraph.aws4.networking_and_content_delivery -shape=mxgraph.aws4.neuron_ml_sdk -shape=mxgraph.aws4.nice_dcv -shape=mxgraph.aws4.nice_enginframe -shape=mxgraph.aws4.nimble_studio -shape=mxgraph.aws4.nitro_enclaves -shape=mxgraph.aws4.non_cached_volume -shape=mxgraph.aws4.notebook -shape=mxgraph.aws4.nova -shape=mxgraph.aws4.nova2 -shape=mxgraph.aws4.object -shape=mxgraph.aws4.office_building -shape=mxgraph.aws4.omics -shape=mxgraph.aws4.one_zone_ia -shape=mxgraph.aws4.open_3d_engine -shape=mxgraph.aws4.open_3d_engine_2 -shape=mxgraph.aws4.opensearch_dashboards -shape=mxgraph.aws4.opensearch_ingestion -shape=mxgraph.aws4.opensearch_observability -shape=mxgraph.aws4.opensearch_service_cluster_administrator_node -shape=mxgraph.aws4.opensearch_service_data_node -shape=mxgraph.aws4.opensearch_service_index -shape=mxgraph.aws4.opensearch_service_traces -shape=mxgraph.aws4.opensearch_service_ultrawarm_node -shape=mxgraph.aws4.opsworks -shape=mxgraph.aws4.opsworks_apps -shape=mxgraph.aws4.opsworks_permissions -shape=mxgraph.aws4.optimized_instance -shape=mxgraph.aws4.oracle_database_at_aws -shape=mxgraph.aws4.oracle_db_instance -shape=mxgraph.aws4.oracle_db_instance_alternate -shape=mxgraph.aws4.organizations -shape=mxgraph.aws4.organizations_account -shape=mxgraph.aws4.organizations_account2 -shape=mxgraph.aws4.organizations_management_account -shape=mxgraph.aws4.organizations_management_account2 -shape=mxgraph.aws4.organizations_organizational_unit -shape=mxgraph.aws4.organizations_organizational_unit2 -shape=mxgraph.aws4.outposts -shape=mxgraph.aws4.outposts_1u_and_2u_servers -shape=mxgraph.aws4.outposts_family -shape=mxgraph.aws4.p2_instance -shape=mxgraph.aws4.p3_instance -shape=mxgraph.aws4.p3dn_instance -shape=mxgraph.aws4.p4_instance -shape=mxgraph.aws4.p4d_instance -shape=mxgraph.aws4.panorama -shape=mxgraph.aws4.parallel_cluster -shape=mxgraph.aws4.parallel_computing_service -shape=mxgraph.aws4.parameter_store -shape=mxgraph.aws4.partner_central -shape=mxgraph.aws4.patch_manager -shape=mxgraph.aws4.payment_cryptography -shape=mxgraph.aws4.peering -shape=mxgraph.aws4.permissions -shape=mxgraph.aws4.permissions_2 -shape=mxgraph.aws4.personal_health_dashboard -shape=mxgraph.aws4.personalize -shape=mxgraph.aws4.pinpoint -shape=mxgraph.aws4.pinpoint_journey -shape=mxgraph.aws4.police_emergency -shape=mxgraph.aws4.policy -shape=mxgraph.aws4.polly -shape=mxgraph.aws4.postgresql_instance -shape=mxgraph.aws4.private_5g -shape=mxgraph.aws4.private_certificate_authority -shape=mxgraph.aws4.privatelink -shape=mxgraph.aws4.professional_services -shape=mxgraph.aws4.programming_language -shape=mxgraph.aws4.proton -shape=mxgraph.aws4.q -shape=mxgraph.aws4.quantum_ledger_database -shape=mxgraph.aws4.quantum_technologies -shape=mxgraph.aws4.question -shape=mxgraph.aws4.queue -shape=mxgraph.aws4.quick_suite -shape=mxgraph.aws4.quicksight -shape=mxgraph.aws4.quicksight_paginated_reports -shape=mxgraph.aws4.r4_instance -shape=mxgraph.aws4.r5_instance -shape=mxgraph.aws4.r5a_instance -shape=mxgraph.aws4.r5ad_instance -shape=mxgraph.aws4.r5b_instance -shape=mxgraph.aws4.r5d_instance -shape=mxgraph.aws4.r5gd_instance -shape=mxgraph.aws4.r5n -shape=mxgraph.aws4.r5n_instance -shape=mxgraph.aws4.r6g_instance -shape=mxgraph.aws4.rdn_instance -shape=mxgraph.aws4.rds -shape=mxgraph.aws4.rds_blue_green_deployments -shape=mxgraph.aws4.rds_instance -shape=mxgraph.aws4.rds_instance_alt -shape=mxgraph.aws4.rds_mariadb_instance -shape=mxgraph.aws4.rds_mariadb_instance_alt -shape=mxgraph.aws4.rds_multi_az -shape=mxgraph.aws4.rds_multi_az_db_cluster -shape=mxgraph.aws4.rds_mysql_instance -shape=mxgraph.aws4.rds_mysql_instance_alt -shape=mxgraph.aws4.rds_on_vmware -shape=mxgraph.aws4.rds_optimized_writes -shape=mxgraph.aws4.rds_oracle_instance -shape=mxgraph.aws4.rds_oracle_instance_alt -shape=mxgraph.aws4.rds_piop -shape=mxgraph.aws4.rds_piops -shape=mxgraph.aws4.rds_postgresql_instance -shape=mxgraph.aws4.rds_postgresql_instance_alt -shape=mxgraph.aws4.rds_proxy -shape=mxgraph.aws4.rds_proxy_alt -shape=mxgraph.aws4.rds_sql_server_instance -shape=mxgraph.aws4.rds_sql_server_instance_alt -shape=mxgraph.aws4.rds_trusted_language_extensions_for_postgresql -shape=mxgraph.aws4.recover -shape=mxgraph.aws4.red_hat_openshift -shape=mxgraph.aws4.redshift -shape=mxgraph.aws4.redshift_auto_copy -shape=mxgraph.aws4.redshift_data_sharing_governance -shape=mxgraph.aws4.redshift_ml -shape=mxgraph.aws4.redshift_query_editor_v20_light -shape=mxgraph.aws4.redshift_ra3 -shape=mxgraph.aws4.redshift_streaming_ingestion -shape=mxgraph.aws4.registry -shape=mxgraph.aws4.rekognition -shape=mxgraph.aws4.rekognition_2 -shape=mxgraph.aws4.rekognition_image -shape=mxgraph.aws4.rekognition_video -shape=mxgraph.aws4.replication -shape=mxgraph.aws4.replication_time_control -shape=mxgraph.aws4.reported_state -shape=mxgraph.aws4.repost -shape=mxgraph.aws4.repost_private -shape=mxgraph.aws4.rescue -shape=mxgraph.aws4.reserved_instance_reporting -shape=mxgraph.aws4.resilience_hub -shape=mxgraph.aws4.resource -shape=mxgraph.aws4.resource_access_manager -shape=mxgraph.aws4.resource_explorer -shape=mxgraph.aws4.resources -shape=mxgraph.aws4.robomaker -shape=mxgraph.aws4.robotics -shape=mxgraph.aws4.role -shape=mxgraph.aws4.route_53 -shape=mxgraph.aws4.route_53_application_recovery_controller -shape=mxgraph.aws4.route_53_readiness_checks -shape=mxgraph.aws4.route_53_resolver -shape=mxgraph.aws4.route_53_resolver_dns_firewall -shape=mxgraph.aws4.route_53_resolver_query_logging -shape=mxgraph.aws4.route_53_routing_controls -shape=mxgraph.aws4.route_table -shape=mxgraph.aws4.router -shape=mxgraph.aws4.rtb_fabric -shape=mxgraph.aws4.rule -shape=mxgraph.aws4.rule_2 -shape=mxgraph.aws4.rule_3 -shape=mxgraph.aws4.run_command -shape=mxgraph.aws4.s3 -shape=mxgraph.aws4.s3_batch_operations -shape=mxgraph.aws4.s3_express_one_zone -shape=mxgraph.aws4.s3_file_gateway -shape=mxgraph.aws4.s3_multi_region_access_points -shape=mxgraph.aws4.s3_object_lambda -shape=mxgraph.aws4.s3_object_lambda_access_points -shape=mxgraph.aws4.s3_object_lock -shape=mxgraph.aws4.s3_on_outposts -shape=mxgraph.aws4.s3_on_outposts_storage -shape=mxgraph.aws4.s3_replication_time_control -shape=mxgraph.aws4.s3_select -shape=mxgraph.aws4.s3_storage_lens -shape=mxgraph.aws4.s3_tables -shape=mxgraph.aws4.s3_vectors -shape=mxgraph.aws4.saas_event_bus_resource -shape=mxgraph.aws4.sagemaker -shape=mxgraph.aws4.sagemaker_2 -shape=mxgraph.aws4.sagemaker_canvas -shape=mxgraph.aws4.sagemaker_geospatial_ml -shape=mxgraph.aws4.sagemaker_ground_truth -shape=mxgraph.aws4.sagemaker_model -shape=mxgraph.aws4.sagemaker_notebook -shape=mxgraph.aws4.sagemaker_shadow_testing -shape=mxgraph.aws4.sagemaker_studio_lab -shape=mxgraph.aws4.sagemaker_train -shape=mxgraph.aws4.saml_token -shape=mxgraph.aws4.satellite -shape=mxgraph.aws4.savings_plans -shape=mxgraph.aws4.search_documents -shape=mxgraph.aws4.secrets_manager -shape=mxgraph.aws4.security_group -shape=mxgraph.aws4.security_hub -shape=mxgraph.aws4.security_hub_finding -shape=mxgraph.aws4.security_identity_and_compliance -shape=mxgraph.aws4.security_incident_response -shape=mxgraph.aws4.security_lake -shape=mxgraph.aws4.sensor -shape=mxgraph.aws4.server_migration_service -shape=mxgraph.aws4.serverless -shape=mxgraph.aws4.serverless_application_repository -shape=mxgraph.aws4.servers -shape=mxgraph.aws4.service -shape=mxgraph.aws4.service_catalog -shape=mxgraph.aws4.service_management_connector -shape=mxgraph.aws4.servo -shape=mxgraph.aws4.shadow -shape=mxgraph.aws4.shield -shape=mxgraph.aws4.shield_shield_advanced -shape=mxgraph.aws4.shield2 -shape=mxgraph.aws4.signer -shape=mxgraph.aws4.simple_ad -shape=mxgraph.aws4.simple_email_service -shape=mxgraph.aws4.simple_storage_service_directory_bucket -shape=mxgraph.aws4.simple_storage_service_s3_glacier_instant_retrieval -shape=mxgraph.aws4.simspace_weaver -shape=mxgraph.aws4.simulation -shape=mxgraph.aws4.simulator -shape=mxgraph.aws4.single_sign_on -shape=mxgraph.aws4.site_to_site_vpn -shape=mxgraph.aws4.snapshot -shape=mxgraph.aws4.snowball -shape=mxgraph.aws4.snowball_edge -shape=mxgraph.aws4.snowcone -shape=mxgraph.aws4.snowmobile -shape=mxgraph.aws4.sns -shape=mxgraph.aws4.source_code -shape=mxgraph.aws4.spot_instance -shape=mxgraph.aws4.sql_primary -shape=mxgraph.aws4.sql_replica -shape=mxgraph.aws4.sql_workbench -shape=mxgraph.aws4.sqs -shape=mxgraph.aws4.ssl_padlock -shape=mxgraph.aws4.stack -shape=mxgraph.aws4.stack2 -shape=mxgraph.aws4.standard_ia -shape=mxgraph.aws4.state_manager -shape=mxgraph.aws4.step_functions -shape=mxgraph.aws4.storage -shape=mxgraph.aws4.storage_gateway -shape=mxgraph.aws4.streaming_distribution -shape=mxgraph.aws4.sts -shape=mxgraph.aws4.sts_alternate -shape=mxgraph.aws4.sumerian -shape=mxgraph.aws4.supply_chain -shape=mxgraph.aws4.support -shape=mxgraph.aws4.systems_manager -shape=mxgraph.aws4.systems_manager_application_manager -shape=mxgraph.aws4.systems_manager_change_calendar -shape=mxgraph.aws4.systems_manager_change_manager -shape=mxgraph.aws4.systems_manager_compliance -shape=mxgraph.aws4.systems_manager_distributor -shape=mxgraph.aws4.systems_manager_incident_manager -shape=mxgraph.aws4.systems_manager_opscenter -shape=mxgraph.aws4.systems_manager_session_manager -shape=mxgraph.aws4.t2_instance -shape=mxgraph.aws4.t3_instance -shape=mxgraph.aws4.t3a_instance -shape=mxgraph.aws4.t4g_instance -shape=mxgraph.aws4.table -shape=mxgraph.aws4.tape_gateway -shape=mxgraph.aws4.tape_storage -shape=mxgraph.aws4.telco_network_builder -shape=mxgraph.aws4.template -shape=mxgraph.aws4.temporary_security_credential -shape=mxgraph.aws4.tensorflow_on_aws -shape=mxgraph.aws4.textract -shape=mxgraph.aws4.textract_analyze_lending -shape=mxgraph.aws4.thermostat -shape=mxgraph.aws4.thinkbox_deadline -shape=mxgraph.aws4.thinkbox_draft -shape=mxgraph.aws4.thinkbox_frost -shape=mxgraph.aws4.thinkbox_krakatoa -shape=mxgraph.aws4.thinkbox_sequoia -shape=mxgraph.aws4.thinkbox_stoke -shape=mxgraph.aws4.thinkbox_xmesh -shape=mxgraph.aws4.timestream -shape=mxgraph.aws4.tools_and_sdks -shape=mxgraph.aws4.topic -shape=mxgraph.aws4.topic_2 -shape=mxgraph.aws4.torchserve -shape=mxgraph.aws4.traditional_server -shape=mxgraph.aws4.training_certification -shape=mxgraph.aws4.trainium_instance -shape=mxgraph.aws4.transcribe -shape=mxgraph.aws4.transfer_family -shape=mxgraph.aws4.transfer_family_aws_as2 -shape=mxgraph.aws4.transfer_for_ftp_resource -shape=mxgraph.aws4.transfer_for_ftps_resource -shape=mxgraph.aws4.transfer_for_sftp -shape=mxgraph.aws4.transfer_for_sftp_resource -shape=mxgraph.aws4.transform -shape=mxgraph.aws4.transit_gateway -shape=mxgraph.aws4.transit_gateway_attachment -shape=mxgraph.aws4.translate -shape=mxgraph.aws4.travel -shape=mxgraph.aws4.trusted_advisor -shape=mxgraph.aws4.user -shape=mxgraph.aws4.user_notifications -shape=mxgraph.aws4.users -shape=mxgraph.aws4.utility -shape=mxgraph.aws4.vault -shape=mxgraph.aws4.verified_access -shape=mxgraph.aws4.verified_permissions -shape=mxgraph.aws4.virtual_gateway -shape=mxgraph.aws4.virtual_node -shape=mxgraph.aws4.virtual_private_cloud -shape=mxgraph.aws4.virtual_router -shape=mxgraph.aws4.virtual_service -shape=mxgraph.aws4.virtual_tape_library -shape=mxgraph.aws4.vmware_cloud_on_aws -shape=mxgraph.aws4.volume -shape=mxgraph.aws4.volume_gateway -shape=mxgraph.aws4.vpc -shape=mxgraph.aws4.vpc_access_points -shape=mxgraph.aws4.vpc_carrier_gateway -shape=mxgraph.aws4.vpc_lattice -shape=mxgraph.aws4.vpc_network_access_analyzer -shape=mxgraph.aws4.vpc_privatelink -shape=mxgraph.aws4.vpc_reachability_analyzer -shape=mxgraph.aws4.vpc_traffic_mirroring -shape=mxgraph.aws4.vpc_virtual_private_cloud_vpc -shape=mxgraph.aws4.vpn_connection -shape=mxgraph.aws4.vpn_gateway -shape=mxgraph.aws4.waf -shape=mxgraph.aws4.waf_bad_bot -shape=mxgraph.aws4.waf_bot -shape=mxgraph.aws4.waf_bot_control -shape=mxgraph.aws4.waf_labels -shape=mxgraph.aws4.waf_managed_rule -shape=mxgraph.aws4.waf_rule -shape=mxgraph.aws4.wavelength -shape=mxgraph.aws4.well_architect_tool -shape=mxgraph.aws4.well_architected_tool -shape=mxgraph.aws4.wickr -shape=mxgraph.aws4.windfarm -shape=mxgraph.aws4.work_package -shape=mxgraph.aws4.workdocs -shape=mxgraph.aws4.worklink -shape=mxgraph.aws4.workmail -shape=mxgraph.aws4.workspaces -shape=mxgraph.aws4.workspaces_family -shape=mxgraph.aws4.workspaces_family_amazon_workspaces -shape=mxgraph.aws4.workspaces_family_amazon_workspaces_core -shape=mxgraph.aws4.workspaces_thin_client -shape=mxgraph.aws4.workspaces_workspaces_web -shape=mxgraph.aws4.x1_instance -shape=mxgraph.aws4.x1_instance2 -shape=mxgraph.aws4.x1e_instance -shape=mxgraph.aws4.xray -shape=mxgraph.aws4.z1d_instance diff --git a/.github/skills/drawio-mcp-diagramming/references/azure.md b/.github/skills/drawio-mcp-diagramming/references/azure.md new file mode 100644 index 0000000..137b030 --- /dev/null +++ b/.github/skills/drawio-mcp-diagramming/references/azure.md @@ -0,0 +1,167 @@ +# Azure Diagram Guidance + +Everything Azure-specific for draw.io MCP diagrams: icon libraries and their caveats, VNet/subnet container structure, colour conventions, and the topology checklist. + +Read this file when the diagram contains Azure services — whether it is a full VNet topology or a handful of Azure icons in a flow diagram. + +Contents: +- [Azure icon libraries and caveats](#azure-icon-libraries-and-caveats) +- [Known-good azure2 icon paths](#known-good-azure2-icon-paths) +- [VNet and subnet container structure](#vnet-and-subnet-container-structure) +- [Styles and colours](#styles-and-colours) +- [Traffic flow colour palette](#traffic-flow-colour-palette) +- [Annotation boxes](#annotation-boxes) +- [Complete topology example](#complete-topology-example) +- [Azure topology checklist](#azure-topology-checklist) + +--- + +## Azure icon libraries and caveats + +Azure icons come from **two separate libraries**. `drawio/search_shapes` returns icons from either — use the style string exactly as returned. + +### azure2 (most Azure services) + +Path pattern: `image=img/lib/azure2//.svg` + +- Prefer the `image;aspect=fixed;...` style form. `shape=mxgraph.azure2.*` does not render in some hosts. +- Some embedded viewers do not resolve `img/lib/azure2/...` consistently — if icons are missing, test the same XML in `app.diagrams.net` before assuming the style string is wrong. (The hosted App Server rewrites relative `img/lib/...` paths to absolute `https://app.diagrams.net/img/lib/...` URLs for you, so relative paths are safe to submit.) +- Absolute URLs also work when a renderer is unreliable: + `image=https://raw.githubusercontent.com/jgraph/drawio/dev/src/main/webapp/img/lib/azure2/networking/Application_Gateways.svg` + +### mscae (Sentinel, DNS Private Zones, some older icons) + +Path pattern: `image=img/lib/mscae/.svg` + +- These **must include `sketch=0`** in the style, or the shape renders with a hand-drawn sketch effect. +- Correct prefix: `image;sketch=0;aspect=fixed;html=1;points=[];align=center;...` +- If `search_shapes` returns a style containing `sketch=0`, the icon is from mscae — preserve that attribute. + +### If an Azure icon still fails + +Do not generate the diagram with an unresolved icon. Re-query `search_shapes` (raise `limit`, up to 50), propose verified replacements, and generate only once every style string is confirmed. + +--- + +## Known-good azure2 icon paths + +Confirm via `search_shapes` before use — these are a starting point, not a substitute for lookup. + +```text +image=img/lib/azure2/networking/Front_Doors.svg +image=img/lib/azure2/networking/Private_Link_Hub.svg +image=img/lib/azure2/networking/Network_Watcher.svg +image=img/lib/azure2/app_services/API_Management_Services.svg +image=img/lib/azure2/app_services/App_Services.svg +image=img/lib/azure2/databases/Azure_Cosmos_DB.svg +image=img/lib/azure2/identity/Managed_Identities.svg +image=img/lib/azure2/management_governance/Policy.svg +image=img/lib/azure2/analytics/Log_Analytics_Workspaces.svg +image=img/lib/azure2/management_governance/Monitor.svg +image=img/lib/azure2/devops/Application_Insights.svg +image=img/lib/azure2/devops/API_Connections.svg +``` + +--- + +## VNet and subnet container structure + +Model the hierarchy with real containment, not stacked rectangles — see [xml-authoring-rules.md](xml-authoring-rules.md) for the general rule and why it matters. + +- Each VNet is a `swimlane;startSize=24;` at `parent="1"`. +- Each subnet is a `swimlane;startSize=24;` with `parent=""` and geometry **relative to the VNet** (start at `y=40` to clear the title bar). +- Each resource icon is parented to its subnet, with coordinates relative to the subnet. +- Edges between resources in different subnets or VNets sit at `parent="1"`. +- Peering and external-services zones are separate top-level containers, not overlapping rectangles. + +--- + +## Styles and colours + +| Element | Style | +|---|---| +| VNet (Perimeter / Ingress) | `swimlane;startSize=24;fillColor=#fff2cc;strokeColor=#d6b656;strokeWidth=4;` | +| VNet (Internal) | `swimlane;startSize=24;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=4;` | +| VNet (Management) | `swimlane;startSize=24;fillColor=#dae8fc;strokeColor=#6c8ebf;strokeWidth=4;` | +| Subnet | `swimlane;startSize=24;dashed=1;dashPattern=8 8;strokeWidth=2;` in a lighter shade of the parent VNet colour | +| VNet Peering zone | `swimlane;startSize=24;fillColor=#f5f5f5;strokeColor=#666666;strokeWidth=2;` | +| External Services zone | `swimlane;startSize=24;fillColor=#ffe6cc;strokeColor=#d79b00;strokeWidth=2;` | + +Label subnets with name + CIDR. For delegated subnets add the delegation to the label, e.g. `PostgreSQL Subnet - 10.0.4.0/24 (Delegated to Microsoft.DBforPostgreSQL/flexibleServers)`. Only use a DMZ/perimeter box when the diagram explicitly models a real perimeter subnet, firewall, or NVA; otherwise keep the edge layer clean and omit it. + +Canvas: `pageWidth="1900" pageHeight="1500"` for complex multi-VNet diagrams. + +--- + +## Traffic flow colour palette + +| Traffic type | Colour | Style | +|---|---|---| +| HTTPS:443 internet ingress | `#0078D4` Azure blue | solid, `strokeWidth=3` | +| HTTP:80/8080 backend | `#00897B` Teal | solid, `strokeWidth=2` | +| Database (PostgreSQL:5432) | `#5C6BC0` Indigo | dashed, `strokeWidth=2` | +| Storage (NFS/Gluster) | `#43A047` Green | solid, `strokeWidth=2` | +| Management/Identity | `#F57C00` Amber | dashed, `strokeWidth=2` | +| Denied/blocked | `#C62828` Red | solid — reserve exclusively for blocked traffic | + +Label every flow with protocol and port. + +--- + +## Annotation boxes + +1. **Network Isolation Explanation** — top-left, `fillColor=#fff9cc`: VNet/subnet conventions, NSG and Private DNS notes. Add it when the topology needs the explanation, not by default. +2. **Zone Separation** — VNet Peering zone and External Services zone as distinct containers when they add useful separation. + +--- + +## Complete topology example + +Nested containers, relative child coordinates, cross-container edges at `parent="1"`, and `as="geometry"` on every geometry element. + +```xml + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +Generate with `routing: "libavoid"` so connectors route around the containers without moving them. + +--- + +## Azure topology checklist + +- [ ] VNets are containers with thick borders (`strokeWidth=4`), colour-coded by purpose +- [ ] Subnets are containers parented to their VNet, dashed (`strokeWidth=2;dashPattern=8 8`), labelled with CIDR +- [ ] Every resource is parented to its subnet with relative coordinates +- [ ] Cross-subnet and cross-VNet edges declared at `parent="1"` +- [ ] Traffic arrows labelled with protocols and ports, using the palette above +- [ ] Network isolation explanation box included only when it adds clarity +- [ ] VNet peering and external services in separate zone containers when they help explain the topology +- [ ] Canvas 1900×1500 for complex infrastructure +- [ ] `routing: "libavoid"` applied; no hand-written waypoints or exit/entry points +- [ ] Animation preference confirmed before generating diff --git a/.github/skills/drawio-mcp-diagramming/references/azure2-complete-catalog.txt b/.github/skills/drawio-mcp-diagramming/references/azure2-complete-catalog.txt deleted file mode 100644 index 91198a1..0000000 --- a/.github/skills/drawio-mcp-diagramming/references/azure2-complete-catalog.txt +++ /dev/null @@ -1,649 +0,0 @@ -Matched 648 icons (showing 648) -ai_machine_learning/AI_Studio.svg -ai_machine_learning/Anomaly_Detector.svg -ai_machine_learning/Azure_Applied_AI.svg -ai_machine_learning/Azure_Experimentation_Studio.svg -ai_machine_learning/Azure_Object_Understanding.svg -ai_machine_learning/Azure_OpenAI.svg -ai_machine_learning/Batch_AI.svg -ai_machine_learning/Bonsai.svg -ai_machine_learning/Bot_Services.svg -ai_machine_learning/Cognitive_Services.svg -ai_machine_learning/Cognitive_Services_Decisions.svg -ai_machine_learning/Computer_Vision.svg -ai_machine_learning/Content_Moderators.svg -ai_machine_learning/Content_Safety.svg -ai_machine_learning/Custom_Vision.svg -ai_machine_learning/Face_APIs.svg -ai_machine_learning/Form_Recognizers.svg -ai_machine_learning/Genomics.svg -ai_machine_learning/Immersive_Readers.svg -ai_machine_learning/Language_Services.svg -ai_machine_learning/Language_Understanding.svg -ai_machine_learning/Machine_Learning.svg -ai_machine_learning/Machine_Learning_Studio_Classic_Web_Services.svg -ai_machine_learning/Machine_Learning_Studio_Web_Service_Plans.svg -ai_machine_learning/Machine_Learning_Studio_Workspaces.svg -ai_machine_learning/Personalizers.svg -ai_machine_learning/QnA_Makers.svg -ai_machine_learning/Serverless_Search.svg -ai_machine_learning/Speech_Services.svg -ai_machine_learning/Translator_Text.svg -analytics/Analysis_Services.svg -analytics/Azure_Databricks.svg -analytics/Azure_Synapse_Analytics.svg -analytics/Azure_Workbooks.svg -analytics/Data_Lake_Analytics.svg -analytics/Data_Lake_Store_Gen1.svg -analytics/Endpoint_Analytics.svg -analytics/Event_Hub_Clusters.svg -analytics/Event_Hubs.svg -analytics/HD_Insight_Clusters.svg -analytics/Log_Analytics_Workspaces.svg -analytics/Power_BI_Embedded.svg -analytics/Power_Platform.svg -analytics/Stream_Analytics_Jobs.svg -app_services/API_Management_Services.svg -app_services/App_Service_Certificates.svg -app_services/App_Service_Domains.svg -app_services/App_Service_Environments.svg -app_services/App_Service_Plans.svg -app_services/App_Services.svg -app_services/CDN_Profiles.svg -app_services/Notification_Hubs.svg -app_services/Search_Services.svg -azure_ecosystem/Applens.svg -azure_ecosystem/Azure_Hybrid_Center.svg -azure_ecosystem/Collaborative_Service.svg -azure_stack/Azure_Stack.svg -azure_stack/Capacity.svg -azure_stack/Infrastructure_Backup.svg -azure_stack/Multi_Tenancy.svg -azure_stack/Offers.svg -azure_stack/Plans.svg -azure_stack/Updates.svg -azure_stack/User_Subscriptions.svg -azure_vmware_solution/AVS.svg -blockchain/ABS_Member.svg -blockchain/Azure_Blockchain_Service.svg -blockchain/Azure_Token_Service.svg -blockchain/Blockchain_Applications.svg -blockchain/Consortium.svg -blockchain/Outbound_Connection.svg -compute/App_Services.svg -compute/Application_Group.svg -compute/Automanaged_VM.svg -compute/Availability_Sets.svg -compute/Azure_Compute_Galleries.svg -compute/Azure_Spring_Cloud.svg -compute/Batch_Accounts.svg -compute/Cloud_Services_Classic.svg -compute/Container_Instances.svg -compute/Container_Services_Deprecated.svg -compute/Disk_Encryption_Sets.svg -compute/Disks.svg -compute/Disks_Classic.svg -compute/Disks_Snapshots.svg -compute/Function_Apps.svg -compute/Host_Groups.svg -compute/Host_Pools.svg -compute/Hosts.svg -compute/Image_Definitions.svg -compute/Image_Templates.svg -compute/Image_Versions.svg -compute/Images.svg -compute/Kubernetes_Services.svg -compute/Maintenance_Configuration.svg -compute/Managed_Service_Fabric.svg -compute/Mesh_Applications.svg -compute/Metrics_Advisor.svg -compute/OS_Images_Classic.svg -compute/Restore_Points.svg -compute/Restore_Points_Collections.svg -compute/Service_Fabric_Clusters.svg -compute/Shared_Image_Galleries.svg -compute/VM_Images_Classic.svg -compute/VM_Scale_Sets.svg -compute/Virtual_Machine.svg -compute/Virtual_Machines_Classic.svg -compute/Workspaces.svg -compute/Workspaces2.svg -containers/App_Services.svg -containers/Azure_Red_Hat_OpenShift.svg -containers/Batch_Accounts.svg -containers/Container_Instances.svg -containers/Container_Registries.svg -containers/Kubernetes_Services.svg -containers/Service_Fabric_Clusters.svg -cxp/Elixir.svg -cxp/Elixir_Purple.svg -databases/Azure_Cosmos_DB.svg -databases/Azure_Data_Explorer_Clusters.svg -databases/Azure_Database_MariaDB_Server.svg -databases/Azure_Database_Migration_Services.svg -databases/Azure_Database_MySQL_Server.svg -databases/Azure_Database_PostgreSQL_Server.svg -databases/Azure_Database_PostgreSQL_Server_Group.svg -databases/Azure_Purview_Accounts.svg -databases/Azure_SQL.svg -databases/Azure_SQL_Edge.svg -databases/Azure_SQL_Server_Stretch_Databases.svg -databases/Azure_SQL_VM.svg -databases/Azure_Synapse_Analytics.svg -databases/Cache_Redis.svg -databases/Data_Factory.svg -databases/Elastic_Job_Agents.svg -databases/Instance_Pools.svg -databases/Managed_Database.svg -databases/Oracle_Database.svg -databases/SQL_Data_Warehouses.svg -databases/SQL_Database.svg -databases/SQL_Elastic_Pools.svg -databases/SQL_Managed_Instance.svg -databases/SQL_Server.svg -databases/SQL_Server_Registries.svg -databases/SSIS_Lift_And_Shift_IR.svg -databases/Virtual_Clusters.svg -devops/API_Connections.svg -devops/Application_Insights.svg -devops/Azure_DevOps.svg -devops/Change_Analysis.svg -devops/CloudTest.svg -devops/Code_Optimization.svg -devops/DevOps_Starter.svg -devops/DevTest_Labs.svg -devops/Lab_Accounts.svg -devops/Lab_Services.svg -general/All_Resources.svg -general/Backlog.svg -general/Biz_Talk.svg -general/Blob_Block.svg -general/Blob_Page.svg -general/Branch.svg -general/Browser.svg -general/Bug.svg -general/Builds.svg -general/Cache.svg -general/Code.svg -general/Commit.svg -general/Controls.svg -general/Controls_Horizontal.svg -general/Cost_Alerts.svg -general/Cost_Analysis.svg -general/Cost_Budgets.svg -general/Cost_Management.svg -general/Cost_Management_and_Billing.svg -general/Counter.svg -general/Cubes.svg -general/Dashboard.svg -general/Dashboard2.svg -general/Dev_Console.svg -general/Download.svg -general/Error.svg -general/Extensions.svg -general/FTP.svg -general/File.svg -general/Files.svg -general/Folder_Blank.svg -general/Folder_Website.svg -general/Free_Services.svg -general/Gear.svg -general/Globe.svg -general/Globe_Error.svg -general/Globe_Success.svg -general/Globe_Warning.svg -general/Guide.svg -general/Heart.svg -general/Help_and_Support.svg -general/Image.svg -general/Information.svg -general/Input_Output.svg -general/Journey_Hub.svg -general/Launch_Portal.svg -general/Learn.svg -general/Load_Test.svg -general/Location.svg -general/Log_Streaming.svg -general/Management_Groups.svg -general/Management_Portal.svg -general/Marketplace.svg -general/Media.svg -general/Media_File.svg -general/Mobile.svg -general/Mobile_Engagement.svg -general/Module.svg -general/Power.svg -general/Power_Up.svg -general/Powershell.svg -general/Preview.svg -general/Preview_Features.svg -general/Process_Explorer.svg -general/Production_Ready_Database.svg -general/Quickstart_Center.svg -general/Recent.svg -general/Reservations.svg -general/Resource_Explorer.svg -general/Resource_Group_List.svg -general/Resource_Groups.svg -general/Resource_Linked.svg -general/SSD.svg -general/Scale.svg -general/Scheduler.svg -general/Search.svg -general/Search_Grid.svg -general/Server_Farm.svg -general/Service_Bus.svg -general/Service_Health.svg -general/Storage_Azure_Files.svg -general/Storage_Container.svg -general/Storage_Queue.svg -general/Subscriptions.svg -general/TFS_VC_Repository.svg -general/Table.svg -general/Tag.svg -general/Tags.svg -general/Templates.svg -general/Toolbox.svg -general/Troubleshoot.svg -general/Versions.svg -general/Web_Slots.svg -general/Web_Test.svg -general/Website_Power.svg -general/Website_Staging.svg -general/Workbooks.svg -general/Workflow.svg -hybrid_multicloud/Azure_Operator_5G_Core.svg -hybrid_multicloud/Azure_Operator_Insights.svg -hybrid_multicloud/Azure_Operator_Nexus.svg -hybrid_multicloud/Azure_Operator_Service_Manager.svg -hybrid_multicloud/Azure_Programmable_Connectivity.svg -identity/AAD_Licenses.svg -identity/Active_Directory_Connect_Health.svg -identity/Active_Directory_Connect_Health2.svg -identity/Administrative_Units.svg -identity/App_Registrations.svg -identity/Azure_AD_B2C.svg -identity/Azure_AD_B2C2.svg -identity/Azure_AD_Domain_Services.svg -identity/Azure_AD_Identity_Protection.svg -identity/Azure_AD_Privilege_Identity_Management.svg -identity/Azure_Active_Directory.svg -identity/Azure_Information_Protection.svg -identity/Custom_Azure_AD_Roles.svg -identity/Enterprise_Applications.svg -identity/Entra_Connect.svg -identity/Entra_Domain_Services.svg -identity/Entra_Global_Secure_Access.svg -identity/Entra_ID_Protection.svg -identity/Entra_Internet_Access.svg -identity/Entra_Managed_Identities.svg -identity/Entra_Private_Access.svg -identity/Entra_Privileged_Identity_Management.svg -identity/Entra_Verified_ID.svg -identity/External_Identities.svg -identity/Groups.svg -identity/Identity_Governance.svg -identity/Managed_Identities.svg -identity/Multi_Factor_Authentication.svg -identity/PIM.svg -identity/Security.svg -identity/Tenant_Properties.svg -identity/User_Settings.svg -identity/Users.svg -identity/Verifiable_Credentials.svg -identity/Verification_As_A_Service.svg -integration/API_Management_Services.svg -integration/App_Configuration.svg -integration/Azure_API_for_FHIR.svg -integration/Azure_Data_Catalog.svg -integration/Event_Grid_Domains.svg -integration/Event_Grid_Subscriptions.svg -integration/Event_Grid_Topics.svg -integration/Integration_Accounts.svg -integration/Integration_Environments.svg -integration/Integration_Service_Environments.svg -integration/Logic_Apps.svg -integration/Logic_Apps_Custom_Connector.svg -integration/Partner_Namespace.svg -integration/Partner_Registration.svg -integration/Partner_Topic.svg -integration/Relays.svg -integration/SQL_Data_Warehouses.svg -integration/SendGrid_Accounts.svg -integration/Service_Bus.svg -integration/Software_as_a_Service.svg -integration/System_Topic.svg -internet_of_things/Digital_Twins.svg -internet_of_things/Logic_Apps.svg -internet_of_things/Time_Series_Insights_Access_Policies.svg -intune/Azure_AD_Roles_and_Administrators.svg -intune/Client_Apps.svg -intune/Device_Compliance.svg -intune/Device_Configuration.svg -intune/Device_Enrollment.svg -intune/Device_Security_Apple.svg -intune/Device_Security_Google.svg -intune/Device_Security_Windows.svg -intune/Devices.svg -intune/Exchange_Access.svg -intune/Intune.svg -intune/Intune_For_Education.svg -intune/Mindaro.svg -intune/Security_Baselines.svg -intune/Software_Updates.svg -intune/Tenant_Status.svg -intune/eBooks.svg -iot/Azure_IoT_Operations.svg -iot/Azure_Maps_Accounts.svg -iot/Azure_Stack_HCI_Sizer.svg -iot/Device_Provisioning_Services.svg -iot/Digital_Twins.svg -iot/Event_Hubs.svg -iot/Function_Apps.svg -iot/Industrial_IoT.svg -iot/IoT_Central_Applications.svg -iot/IoT_Edge.svg -iot/IoT_Hub.svg -iot/Logic_Apps.svg -iot/Notification_Hubs.svg -iot/Stack_HCI_Premium.svg -iot/Stream_Analytics_Jobs.svg -iot/Time_Series_Data_Sets.svg -iot/Time_Series_Insights_Environments.svg -iot/Time_Series_Insights_Event_Sources.svg -iot/Windows10_Core_Services.svg -management_governance/Activity_Log.svg -management_governance/Advisor.svg -management_governance/Alerts.svg -management_governance/Application_Insights.svg -management_governance/Arc_Machines.svg -management_governance/Automation_Accounts.svg -management_governance/Azure_Arc.svg -management_governance/Azure_Lighthouse.svg -management_governance/Blueprints.svg -management_governance/Compliance.svg -management_governance/Cost_Management_and_Billing.svg -management_governance/Customer_Lockbox_for_MS_Azure.svg -management_governance/Diagnostics_Settings.svg -management_governance/Education.svg -management_governance/Log_Analytics_Workspaces.svg -management_governance/MachinesAzureArc.svg -management_governance/Managed_Applications_Center.svg -management_governance/Managed_Desktop.svg -management_governance/Metrics.svg -management_governance/Monitor.svg -management_governance/My_Customers.svg -management_governance/Operation_Log_Classic.svg -management_governance/Policy.svg -management_governance/Recovery_Services_Vaults.svg -management_governance/Resource_Graph_Explorer.svg -management_governance/Resources_Provider.svg -management_governance/Scheduler_Job_Collections.svg -management_governance/Service_Catalog_MAD.svg -management_governance/Service_Providers.svg -management_governance/Solutions.svg -management_governance/Universal_Print.svg -management_governance/User_Privacy.svg -menu/Keys.svg -migrate/Azure_Migrate.svg -migrate/Cost_Management_and_Billing.svg -migrate/Data_Box.svg -migrate/Data_Box_Edge.svg -migrate/Recovery_Services_Vaults.svg -mixed_reality/Remote_Rendering.svg -mixed_reality/Spatial_Anchor_Accounts.svg -monitor/SAP_Azure_Monitor.svg -networking/ATM_Multistack.svg -networking/Application_Gateway_Containers.svg -networking/Application_Gateways.svg -networking/Azure_Communications_Gateway.svg -networking/Azure_Firewall_Manager.svg -networking/Azure_Firewall_Policy.svg -networking/Bastions.svg -networking/CDN_Profiles.svg -networking/Connections.svg -networking/DDoS_Protection_Plans.svg -networking/DNS_Multistack.svg -networking/DNS_Private_Resolver.svg -networking/DNS_Security_Policy.svg -networking/DNS_Zones.svg -networking/ExpressRoute_Circuits.svg -networking/Firewalls.svg -networking/Front_Doors.svg -networking/IP_Address_manager.svg -networking/IP_Groups.svg -networking/Load_Balancer_Hub.svg -networking/Load_Balancers.svg -networking/Local_Network_Gateways.svg -networking/NAT.svg -networking/Network_Interfaces.svg -networking/Network_Security_Groups.svg -networking/Network_Watcher.svg -networking/On_Premises_Data_Gateways.svg -networking/Private_Endpoint.svg -networking/Private_Link.svg -networking/Private_Link_Hub.svg -networking/Private_Link_Service.svg -networking/Proximity_Placement_Groups.svg -networking/Public_IP_Addresses.svg -networking/Public_IP_Addresses_Classic.svg -networking/Public_IP_Prefixes.svg -networking/Reserved_IP_Addresses_Classic.svg -networking/Resource_Management_Private_Link.svg -networking/Route_Filters.svg -networking/Route_Tables.svg -networking/Service_Endpoint_Policies.svg -networking/Spot_VM.svg -networking/Spot_VMSS.svg -networking/Subnet.svg -networking/Traffic_Manager_Profiles.svg -networking/Virtual_Network_Gateways.svg -networking/Virtual_Networks.svg -networking/Virtual_Networks_Classic.svg -networking/Virtual_Router.svg -networking/Virtual_WAN_Hub.svg -networking/Virtual_WANs.svg -networking/Web_Application_Firewall_Policies_WAF.svg -other/ACS_Solutions_Builder.svg -other/AKS_Automatic.svg -other/AKS_Istio.svg -other/API_Proxy.svg -other/AVS_VM.svg -other/App_Compliance_Automation.svg -other/App_Space_Component.svg -other/Aquila.svg -other/Arc_Data_services.svg -other/Arc_Kubernetes.svg -other/Arc_PostgreSQL.svg -other/Arc_SQL_Managed_Instance.svg -other/Arc_SQL_Server.svg -other/AzureAttestation.svg -other/Azure_A.svg -other/Azure_Backup_Center.svg -other/Azure_Center_for_SAP.svg -other/Azure_Chaos_Studio.svg -other/Azure_Cloud_Shell.svg -other/Azure_Communication_Services.svg -other/Azure_Deployment_Environments.svg -other/Azure_Dev_Tunnels.svg -other/Azure_Edge_Hardware_Center.svg -other/Azure_HPC_Workbench.svg -other/Azure_Load_Testing.svg -other/Azure_Monitor_Dashboard.svg -other/Azure_Monitor_Pipeline.svg -other/Azure_Network_Function_Manager.svg -other/Azure_Network_Function_Manager_Functions.svg -other/Azure_Network_Manager.svg -other/Azure_Orbital.svg -other/Azure_Quotas.svg -other/Azure_Sphere.svg -other/Azure_Storage_Mover.svg -other/Azure_Support_Center_Blue.svg -other/Azure_Sustainability.svg -other/Azure_Video_Indexer.svg -other/Azurite.svg -other/Backup_Vault.svg -other/Bare_Metal_Infrastructure.svg -other/Business_Process_Tracking.svg -other/Central_Service_Instance_for_SAP.svg -other/Ceres.svg -other/Cloud_Services_(extended_support).svg -other/Compliance_Center.svg -other/Compute_Fleet.svg -other/Confidential_Ledger.svg -other/Connected_Cache.svg -other/Connected_Vehicle_Platform.svg -other/Container_App_Environments.svg -other/Cost_Export.svg -other/Custom_IP_Prefix.svg -other/Dashboard_Hub.svg -other/Data_Collection_Rules.svg -other/Database_Instance_For_SAP.svg -other/Dedicated_HSM.svg -other/Defender_CM_Local_Manager.svg -other/Defender_DCS_Controller.svg -other/Defender_Distributer_Control_System.svg -other/Defender_Engineering_Station.svg -other/Defender_External_Management.svg -other/Defender_Freezer_Monitor.svg -other/Defender_HMI.svg -other/Defender_Historian.svg -other/Defender_Industrial_Packaging_System.svg -other/Defender_Industrial_Printer.svg -other/Defender_Industrial_Robot.svg -other/Defender_Industrial_Scale_System.svg -other/Defender_Marquee.svg -other/Defender_Meter.svg -other/Defender_PLC.svg -other/Defender_Pneumatic_Device.svg -other/Defender_Programable_Board.svg -other/Defender_RTU.svg -other/Defender_Relay.svg -other/Defender_Robot_Controller.svg -other/Defender_Sensor.svg -other/Defender_Slot.svg -other/Defender_Web_Guiding_System.svg -other/Detonation.svg -other/Device_Update_IoT_Hub.svg -other/Disk_Pool.svg -other/Edge_Management.svg -other/Elastic_SAN.svg -other/Entra_Connect_Health.svg -other/Entra_Connect_Sync.svg -other/Entra_Identity.svg -other/Exchange_On_Premises_Access.svg -other/ExpressRoute_Direct.svg -other/Express_Route_Traffic_Collector.svg -other/FHIR_Service.svg -other/Fiji.svg -other/Grafana.svg -other/HDI_AKS_Cluster.svg -other/IcM_Troubleshooting.svg -other/Image_Definition.svg -other/Image_Version.svg -other/Instance_Pools.svg -other/Internet_Analyzer_Profiles.svg -other/Intune_Trends.svg -other/Kubernetes_Fleet_Manager.svg -other/Load_Testing.svg -other/Local_Network_Gateways.svg -other/Log_Analytics_Query_Pack.svg -other/MS_Dev_Box.svg -other/Managed_DevOps_Pools.svg -other/Managed_File_Shares.svg -other/Managed_Instance_Apache_Cassandra.svg -other/Marketplace_Management.svg -other/MedTech_Service.svg -other/Mission_Landing_Zone.svg -other/Modular_Data_Center.svg -other/Monitor_Health_Models.svg -other/Network_Security_Perimeters.svg -other/OSConfig.svg -other/Open_Supply_Chain_Platform.svg -other/Peering_Service.svg -other/Peerings.svg -other/Private_Endpoints.svg -other/Private_Mobile_Network.svg -other/RTOS.svg -other/Reserved_Capacity.svg -other/Reserved_Capacity_Groups.svg -other/Resource_Guard.svg -other/Resource_Mover.svg -other/SCVMM_Management_Servers.svg -other/SSH_Keys.svg -other/Savings_Plan.svg -other/Sonic_Dash.svg -other/Storage_Actions.svg -other/Storage_Tasks.svg -other/Targets_Management.svg -other/Template_Specs.svg -other/Test_Base.svg -other/Universal_Print.svg -other/Update_Center.svg -other/VM_Application_Definition.svg -other/VM_Application_Version.svg -other/Video_Analyzers.svg -other/Virtual_Enclaves.svg -other/Virtual_Instance_for_SAP.svg -other/WAC.svg -other/WAC_Installer.svg -other/Web_App_Database.svg -other/Web_Jobs.svg -other/Windows_Notification_Services.svg -other/Windows_Virtual_Desktop.svg -other/Worker_Container_App.svg -other/Workspace_Gateway.svg -power_platform/AIBuilder.svg -power_platform/CopilotStudio.svg -power_platform/Dataverse.svg -power_platform/PowerApps.svg -power_platform/PowerAutomate.svg -power_platform/PowerBI.svg -power_platform/PowerFx.svg -power_platform/PowerPages.svg -power_platform/PowerPlatform.svg -preview/Azure_Cloud_Shell.svg -preview/Azure_Sphere.svg -preview/Azure_Workbooks.svg -preview/IoT_Edge.svg -preview/Private_Link_Hub.svg -preview/RTOS.svg -preview/Static_Apps.svg -preview/Time_Series_Data_Sets.svg -preview/Web_Environment.svg -security/Application_Security_Groups.svg -security/Azure_AD_Risky_Signins.svg -security/Azure_AD_Risky_Users.svg -security/Azure_Defender.svg -security/Azure_Sentinel.svg -security/Conditional_Access.svg -security/Detonation.svg -security/ExtendedSecurityUpdates.svg -security/Identity_Secure_Score.svg -security/Key_Vaults.svg -security/Keys.svg -security/MS_Defender_EASM.svg -security/Multifactor_Authentication.svg -security/Security_Center.svg -storage/Azure_Fileshare.svg -storage/Azure_HCP_Cache.svg -storage/Azure_NetApp_Files.svg -storage/Azure_Stack_Edge.svg -storage/Data_Box.svg -storage/Data_Box_Edge.svg -storage/Data_Lake_Storage_Gen1.svg -storage/Data_Share_Invitations.svg -storage/Data_Shares.svg -storage/Import_Export_Jobs.svg -storage/Recovery_Services_Vaults.svg -storage/StorSimple_Data_Managers.svg -storage/StorSimple_Device_Managers.svg -storage/Storage_Accounts.svg -storage/Storage_Accounts_Classic.svg -storage/Storage_Explorer.svg -storage/Storage_Sync_Services.svg -web/API_Center.svg -web/App_Space.svg -web/Azure_Media_Service.svg -web/Notification_Hub_Namespaces.svg -web/SignalR.svg diff --git a/.github/skills/drawio-mcp-diagramming/references/layout-antipatterns.md b/.github/skills/drawio-mcp-diagramming/references/layout-antipatterns.md index b3d4a91..99fade7 100644 --- a/.github/skills/drawio-mcp-diagramming/references/layout-antipatterns.md +++ b/.github/skills/drawio-mcp-diagramming/references/layout-antipatterns.md @@ -25,59 +25,43 @@ Eight issues frequently compound to make lines and labels unreadable: ### Repeated edge labels +Before — all three labels identical: + +```xml + + + +``` + +After — each label names its specific target: + ```xml - - - - - - - - - + + + ``` -### Exit anchor fanning (3+ edges from one node face) +### Stacked edges from one node face -Spread `exitX` values at least 0.15 apart. Use `` waypoints to route each edge into its own horizontal corridor before they reach targets. +Work through these in order — the first two solve almost every case, and neither adds brittle XML: -The `x`/`y` attributes on `mxGeometry relative="1"` shift the **label** along the edge path — use this to avoid label stacking when edges share a path segment: +1. **Reduce the edges.** Consolidate same-protocol fan-outs into one labelled edge, and cap observability/identity edges (see [xml-authoring-rules.md](xml-authoring-rules.md)). +2. **Re-run with `routing: "libavoid"`.** It spreads parallel connectors and routes them around shapes, using your existing node positions. +3. **Offset the labels, not the edges.** The `x`/`y` attributes on `` shift the *label* along the edge path — enough to unstack labels on edges that share a segment: ```xml - - - - - + + - - - - - + + - - - - - + + ``` -Same pattern for right-side dashed management/observability edges from a hub node: - -```xml - -exitX=1, exitY=0.35 → first target (label offset: x=-0.45, y=-18) -exitX=1, exitY=0.52 → second target (label offset: x=-0.15, y=-2) -exitX=1, exitY=0.68 → third target (label offset: x=0.25, y=14) -``` +Only if all three fail — and the face an edge leaves genuinely carries meaning — fan `exitY` values at least 0.15 apart (`0.35 / 0.5 / 0.65`). Hand-written waypoints remain a last resort; see the documented exceptions in [xml-authoring-rules.md](xml-authoring-rules.md). ### Observability zone placement @@ -133,28 +117,34 @@ CORRECT layout: AWS4 icons are stencil-based and must **not** be referenced as SVG image paths. +Bad — AWS4 has no SVG files at `img/lib/aws4/`: + ```xml - - + + + +``` - +Good — stencil shape notation: + +```xml ``` -Always grep `references/aws4-complete-catalog.txt` for the exact shape name before adding an AWS icon. +Always confirm the exact AWS4 style string via `drawio/search_shapes` before adding an AWS icon. ### Decorative icon positioning Icons such as the Virtual Network icon (`networking/Virtual_Networks.svg`) used as a visual label companion should be anchored to a fixed corner of their parent container — typically top-right. Without anchoring, draw.io renders them at the computed top-left of the container where they land on top of subnet boxes or service icons. +Anchor to the top-right of the region/VNet container — set `x` to `container_x + container_width - icon_width - 20` for a 20px margin: + ```xml - - ``` @@ -163,11 +153,15 @@ Icons such as the Virtual Network icon (`networking/Virtual_Networks.svg`) used When generating `mxGraphModel` XML, always emit one `mxCell` per line with child elements indented: +Bad — impossible to patch, and `xmllint` errors all point at char 0: + ```xml - -... + +``` + +Good — each element independently patchable: - +```xml @@ -195,5 +189,21 @@ When generating `mxGraphModel` XML, always emit one `mxCell` per line with child **AWS-specific:** - [ ] CloudWatch / CloudTrail / Config are **outside** any VPC or subnet container - [ ] AWS icons use `shape=mxgraph.aws4.` style (not `image=img/lib/aws4/...`) -- [ ] Shape names verified against `references/aws4-complete-catalog.txt` before use +- [ ] Shape style strings confirmed via `drawio/search_shapes` before use - [ ] fillColor matches AWS service category colour conventions + +## Pre-Flight Layout Checklist + +Before finalising any diagram, run through these checks: + +- [ ] No overlapping nodes or labels +- [ ] No edges passing through unrelated shapes (use `routing: "libavoid"` if needed) +- [ ] Labels are readable and not clipped +- [ ] One icon per major service; no icon-per-step clutter +- [ ] Edge colours consistently encode meaning (request, response, error, async, token) +- [ ] Containers/swimlanes clearly group related elements, with children parented to their container (not stacked on top of it) +- [ ] Cross-container edges declared at `parent="1"` +- [ ] Canvas size fits content without excessive whitespace +- [ ] Animation (`flowAnimation=1;`) only applied where the user requested it +- [ ] For topology diagrams: legend and isolation explanation boxes present +- [ ] For sequence/flow diagrams: steps numbered, error paths shown, actors labelled diff --git a/.github/skills/drawio-mcp-diagramming/references/standalone-file-requirements.md b/.github/skills/drawio-mcp-diagramming/references/standalone-file-requirements.md index 6b1d0fd..55bc018 100644 --- a/.github/skills/drawio-mcp-diagramming/references/standalone-file-requirements.md +++ b/.github/skills/drawio-mcp-diagramming/references/standalone-file-requirements.md @@ -1,30 +1,35 @@ # Standalone .drawio File Requirements -The XML examples in this skill (and in `topology-patterns.md`) are **designed for `drawio/create_diagram`**, which wraps the `mxGraphModel` payload automatically. When the MCP tool is unavailable and you must write a `.drawio` file directly, two extra things are required that the MCP tool normally provides: +The XML examples in this skill (and in `azure.md` / `aws.md`) are **designed for `drawio/create_diagram`**, which wraps the `mxGraphModel` payload automatically. When the MCP tool is unavailable and you must write a `.drawio` file directly, two extra things are required that the MCP tool normally provides: ## 1. `as="geometry"` on every `` element Without it, draw.io cannot parse coordinates and all elements collapse to the origin (appear stacked in one corner). +Wrong — MCP-tool shorthand only: + ```xml - +``` + +Correct for a `.drawio` file: - +```xml ``` ## 2. Standard layout attributes on `` -Without `dx`/`dy`/`grid`/`gridSize`, draw.io defaults to zero offsets and the canvas renders blank or misaligned. +Without `dx`/`dy`/`grid`/`gridSize`, draw.io defaults to zero offsets and the canvas renders blank or misaligned. Use this header for all standalone `.drawio` files: ```xml - ``` ## Full minimal wrapper +Content cells go inside ``, after the two base cells, each with `parent="1"` (or a container id) and `as="geometry"`: + ```xml @@ -32,11 +37,10 @@ Without `dx`/`dy`/`grid`/`gridSize`, draw.io defaults to zero offsets and the ca - ``` -> Do not include XML comments (``) in `.drawio` files — some parsers handle them inconsistently. +> Never include XML comments (``) in `.drawio` output — the MCP server rejects them outright, and parsers handle them inconsistently. That includes placeholder comments in templates: copy the wrapper above exactly as shown. diff --git a/.github/skills/drawio-mcp-diagramming/references/topology-patterns.md b/.github/skills/drawio-mcp-diagramming/references/topology-patterns.md deleted file mode 100644 index 8188774..0000000 --- a/.github/skills/drawio-mcp-diagramming/references/topology-patterns.md +++ /dev/null @@ -1,87 +0,0 @@ -# Topology Pattern XML Examples - -Complete example `mxGraphModel` XML for Azure and AWS infrastructure topology diagrams. - ---- - -## Azure Infrastructure Topology - -```xml - - - - - - - - - - - - - - -``` - ---- - -## AWS Infrastructure Topology - -```xml - - - - - - - - - - - - - - - - - - -``` diff --git a/.github/skills/drawio-mcp-diagramming/references/xml-authoring-rules.md b/.github/skills/drawio-mcp-diagramming/references/xml-authoring-rules.md new file mode 100644 index 0000000..a3911ef --- /dev/null +++ b/.github/skills/drawio-mcp-diagramming/references/xml-authoring-rules.md @@ -0,0 +1,182 @@ +# XML Authoring Rules for draw.io MCP + +Hard constraints and edge-routing best practices for writing `mxGraphModel` XML that renders correctly in the draw.io MCP server (both App Server and Tool Server variants). + +--- + +## Hard Constraints + +Violating any of these causes render errors or silent failures from the MCP server. + +| Constraint | Detail | +|---|---| +| **No XML comments** | `` anywhere in the XML causes the server to reject the payload with an explicit error. Remove all comments before submitting. | +| **Unique `id` values** | Every `mxCell` must have a globally unique `id` within the document. Duplicate IDs cause unpredictable rendering. | +| **Valid edge references** | Edge cells must use `edge="1"` and reference `source` and `target` IDs that exist in the same document. | +| **No unescaped XML characters in styles** | Style strings must not contain raw `<`, `>`, or `&`. Use `<`, `>`, `&` if needed. | +| **Edges need an expanded geometry child** | Every edge `mxCell` must contain ``. A self-closing edge cell does not render. | +| **`html=1` required for HTML labels** | Cell `value` attributes that use ``, `
`, ``, or any HTML tag must have `html=1` in the cell style. Without it the tags render as literal text. Newlines using ` ` work without `html=1`. | + +--- + +## Containers: Nest Hierarchy, Do Not Stack Rectangles + +Any diagram with nested groupings — VNet → Subnet → resource, VPC → AZ → instance, Datacenter → Rack → Server, Region → Environment → Service — must use real parent-child containment. Drawing a large rectangle and positioning shapes on top of it at absolute coordinates *looks* right in a static render but breaks move, resize, collapse, and every layout pass, and it is the single most common structural failure in generated diagrams. + +**Rules:** + +- Every container level is a `swimlane` with `startSize=24` (title area at the top). Add `container=1;pointerEvents=0;` when using a non-swimlane shape as a container so it does not capture connections from its children. +- Child cells set `parent=""` and use coordinates **relative to their parent** — origin `0,0` is the parent's top-left, so leave `y >= startSize` to clear the title. +- Edges between cells in **different** containers must have `parent="1"`. Parented to a container, they render inside it and get clipped. +- Edges crossing a container boundary to reach a child are normal and expected — do not add waypoints to route around the parent. +- Icons from `search_shapes` are ordinary vertices: substitute the returned `style` and keep the container structure unchanged. + +```xml + + + + + + + + + + + + +``` + +--- + +## Z-Order (Only for Siblings at `parent="1"`) + +Cells defined later render on top of earlier siblings. When background rectangles and icons are siblings at `parent="1"`, define the backgrounds first or they will cover the icons. Real containers make this moot — a child always renders above its parent — which is another reason to prefer containment over stacked rectangles. + +--- + +## VS Code / GitHub Copilot: Sequential Shape Searches + +In VS Code and GitHub Copilot, **parallel tool calls are cancelled if the user sends a new message** while they are in flight. + +Always run `drawio/search_shapes` calls **one at a time** (sequentially) — never in parallel batches — to avoid losing results mid-search. + +--- + +## Icon Size Normalisation + +`drawio/search_shapes` returns varying default dimensions (e.g. 65×60, 68×68, 64×64). Use these default sizes as returned — they reflect the icon's intended aspect ratio. When normalising a row of icons for visual consistency, 64×64 is a common safe size. Never scale an icon that has `aspect=fixed` in its style to a size that changes the aspect ratio. + +--- + +## Do Not Hand-Route Edges + +Declare `source` and `target`, pick an edge style, and stop there. The `create_diagram` XML reference is explicit: do **not** add `` waypoints and do **not** set `exitX`/`exitY`/`entryX`/`entryY`. When a layout pass runs it computes those values, and hand-written ones fight it; when no pass runs, draw.io's own router handles the path. + +Decide the pass **before** writing XML: + +| Situation | Pass | +|---|---| +| Hand-placed layout — architecture, topology, deployment, swimlanes, containers, UML | `routing: "libavoid"` (keeps positions, routes wires around shapes) | +| Directional/hierarchical XML — pipelines, decision flows, state machines | `postLayout: "elk"`, plus `direction: "horizontal"` for left-to-right flow | +| Sparse layout with clear space between connected nodes | Neither — the basic router is fine | + +Never set both: ELK already routes its own edges. Use `edgeStyle=orthogonalEdgeStyle` consistently within a diagram, and express meaning through `strokeColor`, `dashed=1`, `strokeWidth`, and the edge label. + +### Baseline edge style + +Always include `orthogonalLoop=1;jettySize=auto;` alongside `edgeStyle=orthogonalEdgeStyle;rounded=1;`. Without them, self-loops render as straight lines through their own shape, and endpoints on curved shapes snap to the wrong face. + +```xml +style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;" +``` + +`orthogonalLoop=1` forces loop edges out and back on orthogonal paths. `jettySize=auto` lets draw.io pick the connector stub length that keeps the arrowhead clear of the shape boundary — the default fixed value clips arrowheads on narrow shapes. + +--- + +## Node Spacing and Routing Corridors + +How you place nodes determines whether edges can route cleanly — and no router fixes a layout where shapes block the only viable path. + +**Leave clear corridors between rows and columns.** A corridor is the empty horizontal or vertical band between two rows (or columns) of nodes where edges must travel. If a shape sits in that band, the router must detour around it, often producing a crossing or a long detour that looks wrong. Size corridors to the diagram's density: + +| Diagram complexity | Node count | Minimum corridor | +|---|---|---| +| Simple | ≤ 5 nodes | 120 px | +| Medium | 6–12 nodes | 160 px | +| Complex / infrastructure | 13+ nodes | 200 px | + +**How to apply this in practice:** + +1. Assign nodes to horizontal bands (tiers) before computing `x`/`y` values. Nodes in the same tier share a `y` range; the gap to the next tier is the corridor. +2. Never place a node in the vertical or horizontal gap that an edge from a different tier must cross. If a node would land in a corridor, move it into an existing tier or create a new one. +3. Hub nodes — those with the most connections — belong at the centre of their tier so edges radiate outward rather than crossing each other to reach the hub. +4. These rules apply to hand-placed XML. When using `postLayout: "elk"` or `routing: "libavoid"`, the layout/routing pass sets its own spacing — do not fight it with tight manual coordinates. + +**Snap to a grid.** Set all `x`, `y`, `width`, `height` to multiples of 10. It makes manual edits predictable and keeps shapes aligned on draw.io's default grid. + +--- + +## Edge Density Rules + +Overlapping arrows are the most common visual quality problem in generated diagrams, and the fix is fewer edges — not more routing hints. Apply these before writing any edge XML. + +### Edge count limits + +| Situation | Rule | +|---|---| +| A node is the source of 3+ edges going to **different zones** | Assign a distinct `exitX`/`exitY` to each edge. Never let all edges leave from the same connection point. | +| Fan-out to multiple **same-tier targets** (e.g. API gateway → 3 backends, same protocol) | Use **one aggregated edge** labelled e.g. `"HTTP:80 → backends"` instead of 3 identical arrows. | +| Observability (diagnostic logs from multiple services to Log Analytics / CloudWatch) | Draw **one representative edge** from the most significant source, labelled `"Diagnostic settings (all services)"`. Max 2 observability edges in any diagram. | +| Security / identity pattern (Managed Identity → Key Vault, or IAM Role → Secrets Manager, from multiple services) | Draw **one amber dashed edge** from the primary service. Not one per service instance. | + +### The narrow exceptions + +There are two cases where a manual override is justified. Both are rare, and both should be a deliberate answer to a problem you have already seen in a rendered diagram — never a precaution applied up front. + +**1. A node with 3+ edges where the source face carries meaning.** For example a firewall whose inbound edges must enter the north face and outbound edges must leave the south face. Set only the endpoints that carry that meaning, and leave everything else to the router: + +| Face | Style fragment | +|---|---| +| Left centre | `exitX=0;exitY=0.5;exitDx=0;exitDy=0;` | +| Right centre | `exitX=1;exitY=0.5;exitDx=0;exitDy=0;` | +| Top centre | `exitX=0.5;exitY=0;exitDx=0;exitDy=0;` | +| Bottom centre | `exitX=0.5;exitY=1;exitDx=0;exitDy=0;` | + +```xml + + + +``` + +**2. A fixed, hand-placed diagram the user is iterating on by coordinate**, where a single bend point resolves a genuinely ambiguous critical path *and* a routing pass has already been tried and rejected. Add one `` waypoint, no more: + +```xml + + + + + + + +``` + +Note that `` must be written as an open/close pair when it has children — a self-closing tag with an `` inside is invalid. + +If neither exception applies, delete the override and re-run with `routing: "libavoid"`. + +### Pre-generation edge checklist + +Run this check before writing edge XML for any infrastructure diagram: + +- [ ] Layout pass decided up front (`routing: "libavoid"`, or `postLayout: "elk"` with `direction` — never both) +- [ ] No hand-written `exitX`/`exitY`/`entryX`/`entryY` or `` unless one of the two documented exceptions applies +- [ ] Count edges per source node — consolidate duplicate fan-outs before adding extra arrows +- [ ] Fan-out patterns (same edge type, multiple same-tier targets) consolidated to one labelled edge +- [ ] No two edges share the same label leaving the same source node +- [ ] Observability telemetry: <= 2 edges total across the whole diagram +- [ ] Security/identity pattern: <= 1 amber dashed edge per service tier +- [ ] Cross-container edges declared at `parent="1"` +- [ ] Every edge cell has an expanded `` child +- [ ] Every edge style includes `orthogonalLoop=1;jettySize=auto;` +- [ ] Nodes assigned to tiers with corridor gaps sized to diagram complexity (120 / 160 / 200 px) diff --git a/.github/skills/drawio-mcp-diagramming/scripts/search_aws4_icons_github.py b/.github/skills/drawio-mcp-diagramming/scripts/search_aws4_icons_github.py deleted file mode 100644 index 9494fdb..0000000 --- a/.github/skills/drawio-mcp-diagramming/scripts/search_aws4_icons_github.py +++ /dev/null @@ -1,116 +0,0 @@ -#!/usr/bin/env python3 -""" -Search for AWS4 stencil shape names in the jgraph/drawio GitHub repository. - -AWS4 icons in draw.io are stencil-based (not individual SVG files). -They are packed in a single XML file and referenced in diagrams as: - shape=mxgraph.aws4. - -Usage: - # Dump full catalog (run once, commit result as aws4-complete-catalog.txt): - python3 search_aws4_icons_github.py --max-results 9999 > ../references/aws4-complete-catalog.txt - - # Search by keyword (prints matching shape= style strings): - python3 search_aws4_icons_github.py --search lambda ec2 - - # Preview category breakdowns: - python3 search_aws4_icons_github.py --search lambda --verbose -""" - -import argparse -import re -import sys -import urllib.request -from typing import List - -STENCIL_URL = ( - "https://raw.githubusercontent.com/jgraph/drawio/dev/" - "src/main/webapp/stencils/aws4.xml" -) -SHAPE_PREFIX = "mxgraph.aws4" - - -def fetch_stencil(url: str) -> str: - req = urllib.request.Request(url, method="GET") - with urllib.request.urlopen(req, timeout=120) as response: - return response.read().decode("utf-8", errors="replace") - - -def extract_shape_names(xml_content: str) -> List[str]: - """Extract all shape names from the AWS4 stencil XML.""" - # The top-level element is: - # Each shape is: - names = re.findall(r']*name="([^"]+)"', xml_content) - return sorted(set(names)) - - -def name_to_style(name: str) -> str: - """Convert a raw shape name to a draw.io style string.""" - # Shape names can contain spaces; draw.io accepts them as-is in the style. - # Conventionally most tools replace spaces with underscores. - safe = name.replace(" ", "_") - return "shape={prefix}.{safe}".format(prefix=SHAPE_PREFIX, safe=safe) - - -def filter_names(names: List[str], terms: List[str]) -> List[str]: - if not terms: - return names - lowered = [t.lower() for t in terms] - return [n for n in names if any(t in n.lower() for t in lowered)] - - -def main() -> int: - parser = argparse.ArgumentParser( - description=( - "Search AWS4 stencil shape names from jgraph/drawio. " - "AWS4 icons are stencil-based (shape=mxgraph.aws4.*), not SVG files." - ) - ) - parser.add_argument( - "--search", nargs="*", default=[], help="Keywords to match in shape name" - ) - parser.add_argument( - "--max-results", type=int, default=50, help="Maximum results to print" - ) - parser.add_argument( - "--verbose", - action="store_true", - help="Also print the raw shape name alongside the style string", - ) - args = parser.parse_args() - - try: - xml = fetch_stencil(STENCIL_URL) - except Exception as exc: - print( - "ERROR: unable to fetch AWS4 stencil XML: {0}".format(exc), - file=sys.stderr, - ) - return 1 - - all_names = extract_shape_names(xml) - if not all_names: - print("ERROR: no shape names found in AWS4 stencil XML", file=sys.stderr) - return 1 - - matches = filter_names(all_names, args.search) - if not matches: - joined = ", ".join(args.search) if args.search else "(none)" - print("No matches found for search terms: {0}".format(joined)) - return 1 - - limited = matches[: args.max_results] - print("Matched {0} shapes (showing {1})".format(len(matches), len(limited))) - - for name in limited: - style = name_to_style(name) - if args.verbose: - print("{style:<80} # {name}".format(style=style, name=name)) - else: - print(style) - - return 0 - - -if __name__ == "__main__": - sys.exit(main()) diff --git a/.github/skills/drawio-mcp-diagramming/scripts/search_azure2_icons_github.py b/.github/skills/drawio-mcp-diagramming/scripts/search_azure2_icons_github.py deleted file mode 100644 index c0f5a40..0000000 --- a/.github/skills/drawio-mcp-diagramming/scripts/search_azure2_icons_github.py +++ /dev/null @@ -1,104 +0,0 @@ -#!/usr/bin/env python3 -import argparse -import json -import re -import sys -import urllib.request -from typing import List, Optional, Tuple - -TREE_API = "https://api.github.com/repos/jgraph/drawio/git/trees/dev?recursive=1" -PATH_PREFIX = "src/main/webapp/img/lib/azure2/" -RAW_BASE = "https://raw.githubusercontent.com/jgraph/drawio/dev/src/main/webapp/img/lib/azure2/" - - -def fetch_json(url: str) -> dict: - req = urllib.request.Request(url, method="GET", headers={"Accept": "application/vnd.github+json"}) - with urllib.request.urlopen(req, timeout=60) as response: - return json.loads(response.read().decode("utf-8", errors="replace")) - - -def check_url(url: str) -> Tuple[bool, Optional[int], Optional[str]]: - try: - req = urllib.request.Request(url, method="HEAD") - with urllib.request.urlopen(req, timeout=20) as response: - return True, response.status, None - except Exception as exc: - try: - req = urllib.request.Request(url, method="GET") - with urllib.request.urlopen(req, timeout=20) as response: - return True, response.status, None - except Exception as exc2: - return False, None, str(exc2 or exc) - - -def extract_azure2_paths(tree_payload: dict) -> List[str]: - items = tree_payload.get("tree", []) - results = [] - for item in items: - path = item.get("path", "") - if not path.startswith(PATH_PREFIX): - continue - if not path.endswith(".svg"): - continue - rel = path[len(PATH_PREFIX):] - results.append(rel) - return sorted(set(results)) - - -def filter_paths(paths: List[str], terms: List[str]) -> List[str]: - if not terms: - return paths - lowered = [term.lower() for term in terms] - filtered = [] - for path in paths: - path_l = path.lower() - if any(term in path_l for term in lowered): - filtered.append(path) - return filtered - - -def main() -> int: - parser = argparse.ArgumentParser(description="Fallback search for Azure2 icons directly in jgraph/drawio GitHub repo") - parser.add_argument("--search", nargs="*", default=[], help="Keywords to match in icon path") - parser.add_argument("--max-results", type=int, default=50, help="Maximum results to print") - parser.add_argument("--validate", action="store_true", help="Validate each matched icon URL") - parser.add_argument("--raw-base", default=RAW_BASE, help="Raw base URL for validation") - args = parser.parse_args() - - try: - payload = fetch_json(TREE_API) - except Exception as exc: - print("ERROR: unable to fetch GitHub tree: {0}".format(exc), file=sys.stderr) - return 1 - - all_paths = extract_azure2_paths(payload) - if not all_paths: - print("ERROR: no Azure2 icon paths found in GitHub tree", file=sys.stderr) - return 1 - - matches = filter_paths(all_paths, args.search) - if not matches: - joined = ", ".join(args.search) if args.search else "(none)" - print("No matches found for search terms: {0}".format(joined)) - return 1 - - limited = matches[: args.max_results] - print("Matched {0} icons (showing {1})".format(len(matches), len(limited))) - - for path in limited: - if not args.validate: - print(path) - continue - - url = "{0}{1}".format(args.raw_base, path) - ok, status, err = check_url(url) - if ok: - print("OK {0} {1}".format(status, path)) - else: - print("FAIL {0} :: {1}".format(path, err)) - - return 0 - - -if __name__ == "__main__": - raise SystemExit(main()) diff --git a/.github/skills/skill-creator/SKILL.md b/.github/skills/skill-creator/SKILL.md index 8b65379..f6e0958 100644 --- a/.github/skills/skill-creator/SKILL.md +++ b/.github/skills/skill-creator/SKILL.md @@ -43,6 +43,16 @@ skill-name/ --- +## When to Use + +- The user wants to create a new skill ("create a skill", "build a skill", "make a skill for X"). +- The user wants to turn a workflow into a reusable skill ("turn this into a skill", "capture what we just did"). +- The user wants to update or improve an existing SKILL.md. +- The user asks how to teach Copilot to do something consistently. +- The user wants to write the description field, plan the folder structure, or design bundled resources for a skill. + +--- + ## Is a Skill the Right Vehicle? Not every workflow needs a skill. Before creating one, choose the right tool: @@ -200,13 +210,7 @@ Helps with Azure cost analysis. ### Pattern 1 — High-level guide with references -Keep core workflow in SKILL.md; move detailed docs to `references/`: - -```markdown -## Advanced Features -- **Streaming**: See [references/streaming.md](references/streaming.md) — read when user requests real-time output -- **Error handling**: See [references/errors.md](references/errors.md) — read when diagnosing failures -``` +Keep core workflow in SKILL.md; move detailed docs to `references/`. For each reference file, state exactly when the agent should load it — e.g. "read when the user asks about X" or "read when diagnosing Y". ### Pattern 2 — Domain-specific organization @@ -234,15 +238,7 @@ apim-deployment/ ### Pattern 3 — Conditional details -Show core content, reference advanced content: - -```markdown -## Basic usage -[Core instructions here] - -## Advanced: tracked changes -See [references/redlining.md](references/redlining.md) — read only for tracked-change workflows. -``` +Show core content in SKILL.md and load a reference file only when an advanced scenario is triggered. State the load condition inline next to the link. **Key rule:** Keep reference links one level deep from SKILL.md. For files over 100 lines, add a table of contents at the top.