[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M69B2QAE093139NKJTJKFAFS":3,"skill-same:01M69B2QAE093139NKJTJKFAFS":79},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":23,"linkOnly":24,"markdownContent":25,"markdownBody":26,"frontMatter":27,"refName":28,"commitSha":29,"skillDirectory":30,"forksCount":31,"repositoryHtmlUrl":32,"repositoryHomepageUrl":6,"ownerHtmlUrl":33,"ownerBlogUrl":34,"ownerDescription":35,"updatedAt":36,"install":37,"resources":50},"01M69B2QAE093139NKJTJKFAFS","architecture-diagram",null,"Generate architecture diagram with component relationship details from project analysis","microsoft\u002Fgithub-copilot-modernization","microsoft","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F6154722?v=4","01M698VYDXZ6JW5WH3CRV650R8","Microsoft","01M69B2DAY0HTBHWQN4WF3JDBQ",55,"MIT","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fgithub-copilot-modernization\u002Fblob\u002Fmain\u002Fplugins\u002Fgithub-copilot-modernization\u002Fskills\u002Farchitecture-diagram\u002FSKILL.md",[],[19,20,21,22],"architecture","diagram","architecture diagram","component","2026-11-10 10:12:30",false,"---\nname: architecture-diagram\ndescription: Generate architecture diagram with component relationship details from project analysis\n---\n\n# Architecture Diagram\n\nThis skill generates a two-layer architecture visualization: a high-level application architecture diagram and a detailed component relationship diagram. Produce both in a single pass and save to `.github\u002Fmodernize\u002Fassessment\u002Fengines\u002Ffacts\u002Farchitecture-diagram.md`.\n\n## Input Parameters\n\n- `workspace-path` (optional): Path to the project to analyze (defaults to current directory)\n\n## ⚠ Mermaid Safety Constraints — read BEFORE you write any ```mermaid block\n\nMermaid is unforgiving: one illegal character anywhere in a block crashes the **whole** diagram with `Syntax error in text`, not just the offending line. There is no partial rendering. Stay strictly inside this subset:\n\n1. **Chart kind.** Only `flowchart TD` (Step 1) or `flowchart LR` (Step 2). Never `graph TD`, never mixed.\n2. **Subgraph form.** Always `subgraph \u003CAlphaNumId>[\"display label\"]`. The id must match `[A-Za-z][A-Za-z0-9_]*` (no spaces, no punctuation). NEVER use the anonymous form `subgraph \"label\"` — it crashes whenever the label contains `(`, `)`, `:`, `\u002F`, `-`, etc., and the parser error appears on an unrelated line.\n3. **Node form.** Only one of: `Id[\"label\"]` (rectangle), `Id((\"label\"))` (circle), `Id[(\"label\")]` (cylinder for data stores). Pick one shape per node — do not stack brackets.\n4. **Arrow form.** Solid `-->`, dotted `-.->`. If you put a label on an arrow it MUST be double-quoted: `-->|\"label\"|`. Never bare `-->|label|`.\n5. **No line breaks in labels.** The escape `\\n` was removed in modern Mermaid and is the #1 cause of failures. Use `\u003Cbr\u002F>` in flowcharts when you really must break a line. Strongly prefer single-line ≤ 60-char labels — put detail in the Inventory \u002F Stack tables instead.\n6. **Banned characters inside any label or subgraph title.** Use the ASCII replacement:\n\n   | Banned | Why it breaks | Replacement |\n   |---|---|---|\n   | `\\n` (literal two chars) | escape removed | `\u003Cbr\u002F>` or drop |\n   | `—` (em-dash, U+2014) | parser treats as edge | `-` (ASCII hyphen) |\n   | `–` (en-dash, U+2013) | parser treats as edge | `-` |\n   | `{` `}` (e.g. `{id}`) | opens an entity block | drop braces — write `id` or `:id` |\n   | `\"` inside a label | closes the label early | `'` (single quote) |\n   | `\\|` inside a label | breaks edge-label parser | rephrase |\n   | `@` `#` `$` `%` `&` | unsafe in many positions | rephrase or drop |\n   | `(` `)` outside a `[\"...\"]` quoted label | unbalanced parens crash | only inside the quoted label |\n   | smart quotes `\"` `\"` `'` `'` | not ASCII | regular `\"` and `'` |\n\n7. **Unique node IDs across the whole file.** If Layer 1 has `DB`, Layer 2 cannot also have `DB`. Use `DB1` and `DB2` (or `AppDb`, `ComponentDb`).\n8. **`subgraph` must be closed by a matching `end` on its own line.** No `end`, no diagram.\n\n### Mandatory self-attestation\n\nImmediately before writing each ` ```mermaid ` opening fence, emit this exact one-line HTML comment in the markdown (the comment will not render — it is for your own visible attestation that you have re-checked the block):\n\n```\n\u003C!-- mermaid-checked: no \\n, no em-dash\u002Fen-dash, no {} in labels, subgraphs are id[\"label\"], arrows are -->|\"label\"|, all subgraphs closed by end, ids unique -->\n```\n\nIf you cannot truthfully emit that comment, fix the diagram first.\n\n---\n\n## Execution Steps\n\n### Step 1: Generate Application Architecture Section\n\nAnalyze the project and produce the complete `## Application Architecture` section in one pass.\n\n**Analysis:**\n- Examine build files (Java: pom.xml, build.gradle; .NET: *.csproj, *.sln; JS\u002FTS: package.json, tsconfig.json)\n- Review configuration files (application.properties, appsettings.json, .env, database\u002FAPI configs)\n- Scan key source files to extract: framework, major dependencies, data access patterns, external integrations, technology stack\n- Identify application layers (UI, Business Logic, Data Access), data storage technologies, and external service dependencies\n\n**Diagram — Mermaid `flowchart TD`** (re-read the Safety Constraints above before writing):\n- Application layers with technology info (use `subgraph` for grouping)\n- Data storage components (specific names like \"PostgreSQL\", \"Redis\")\n- External service integrations\n- Data flow with descriptive arrow labels\n\n**Do NOT include**: individual classes\u002Fmethods or migration directions.\n\nReference example (this block satisfies every Safety Constraint — match its shape):\n\n\u003C!-- mermaid-checked: no \\n, no em-dash\u002Fen-dash, no {} in labels, subgraphs are id[\"label\"], arrows are -->|\"label\"|, all subgraphs closed by end, ids unique -->\n~~~mermaid\nflowchart TD\n    subgraph Client[\"Client Layer\"]\n        Browser[\"Web Browser\"]\n    end\n    subgraph App[\"Application Layer - Spring Boot 2.7\"]\n        Web[\"Spring MVC + Thymeleaf\"]\n        Security[\"Spring Security\"]\n        Service[\"Business Services\"]\n    end\n    subgraph Data[\"Data Layer\"]\n        JPA[\"Spring Data JPA\"]\n        DB[(\"PostgreSQL 14\")]\n        Cache[(\"Redis\")]\n    end\n    subgraph External[\"External Services\"]\n        SMTP[\"SMTP Email Service\"]\n        S3[\"AWS S3 Storage\"]\n    end\n\n    Browser -->|\"HTTP requests\"| Web\n    Web --> Security -->|\"authorized\"| Service\n    Service -->|\"CRUD operations\"| JPA\n    JPA -->|\"SQL queries\"| DB\n    Service -->|\"session cache\"| Cache\n    Service -->|\"send email\"| SMTP\n    Service -->|\"file upload\"| S3\n~~~\n\n**Textual explanations (write immediately after the diagram):**\n- **Technology Stack Summary table**: Layer | Technology | Version | Purpose\n- **Data Storage & External Services**: A short paragraph describing what databases, caches, message brokers, or external APIs are used and how they fit into the architecture\n- **Key Architectural Decisions**: 1-3 bullet points on notable patterns (e.g., \"Uses repository pattern with EF6\", \"Autofac DI with module-based registration\")\n\n> ⚠ Move detail OUT of node labels and INTO this table. A diagram with short labels and a rich table renders; a diagram with long labels does not.\n\n### Step 2: Generate Component Relationships Section\n\nAnalyze component interactions and produce the complete `## Component Relationships` section in one pass.\n\n**Analysis:**\n- Identify key component types by framework conventions:\n  - Java (Spring): Controllers, Services, Repositories, Configurations, Entities, DTOs, Listeners, Filters\n  - Java (Jakarta EE): Servlets, EJBs, CDI Beans, JPA Entities, JAX-RS Resources\n  - .NET (ASP.NET Core): Controllers, Services, Middleware, DbContext, Entities, Hubs, Filters\n  - .NET (Blazor\u002FMVC): Pages, Components, ViewModels\n  - JavaScript\u002FTypeScript (Node.js): Routes, Controllers, Services, Middleware, Models\n  - JavaScript\u002FTypeScript (React\u002FAngular\u002FVue): Components, Hooks, Services, Stores, Pages\n- Trace dependency injection (constructor\u002Ffield injection)\n- Map communication patterns (REST, gRPC, message queues, events)\n- Map data access patterns (service-to-repository, DbContext usage)\n- Detect cross-cutting concerns (middleware, interceptors, filters)\n\n**Diagram — Mermaid `flowchart LR`** (re-read the Safety Constraints above before writing):\n- Components grouped by architectural layer using `subgraph` (Presentation, Business Logic, Data Access, Infrastructure)\n- Interaction arrows with brief labels\n- Cross-cutting concerns\n- **Use IDs that do NOT collide with Step 1's diagram** (e.g., prefix with `c` for Component: `cWeb`, `cService`).\n\n**Do NOT include**: method signatures, private helpers, or external dependencies (covered by dependency-map skill).\n\nReference example (satisfies every Safety Constraint):\n\n\u003C!-- mermaid-checked: no \\n, no em-dash\u002Fen-dash, no {} in labels, subgraphs are id[\"label\"], arrows are -->|\"label\"|, all subgraphs closed by end, ids unique -->\n~~~mermaid\nflowchart LR\n    subgraph PresentationLayer[\"Presentation\"]\n        UserCtrl[\"UserController\"]\n        OrderCtrl[\"OrderController\"]\n    end\n    subgraph BusinessLayer[\"Business Logic\"]\n        UserSvc[\"UserService\"]\n        OrderSvc[\"OrderService\"]\n        NotifSvc[\"NotificationService\"]\n    end\n    subgraph DataAccessLayer[\"Data Access\"]\n        UserRepo[\"UserRepository\"]\n        OrderRepo[\"OrderRepository\"]\n    end\n    subgraph InfraLayer[\"Infrastructure\"]\n        AuthFilter[\"AuthenticationFilter\"]\n        LogMiddleware[\"LoggingMiddleware\"]\n    end\n\n    UserCtrl -->|\"delegates\"| UserSvc\n    OrderCtrl -->|\"delegates\"| OrderSvc\n    OrderSvc -->|\"lookups\"| UserSvc\n    OrderSvc -->|\"triggers\"| NotifSvc\n    UserSvc -->|\"queries\"| UserRepo\n    OrderSvc -->|\"queries\"| OrderRepo\n    AuthFilter -.->|\"intercepts\"| UserCtrl\n    AuthFilter -.->|\"intercepts\"| OrderCtrl\n    LogMiddleware -.->|\"wraps\"| PresentationLayer\n~~~\n\n**Textual explanation (write immediately after the diagram):**\n- **Component Inventory table**: Component | Layer | Type | Responsibility\n\n### Step 3: Save Output\n\nSave the combined output to `.github\u002Fmodernize\u002Fassessment\u002Fengines\u002Ffacts\u002Farchitecture-diagram.md` with this exact structure:\n\n```\n# Architecture Diagram\n\nA brief introduction (1-2 sentences).\n\n## Application Architecture\n\n\u003C Layer 1 Mermaid flowchart TD here >\n\n### Technology Stack Summary\n\n[Table: Layer | Technology | Version | Purpose]\n\n### Data Storage & External Services\n\n[Short paragraph on databases, caches, external APIs]\n\n### Key Architectural Decisions\n\n[1-3 bullet points on notable patterns]\n\n## Component Relationships\n\n\u003C Layer 2 Mermaid flowchart LR here >\n\n### Component Inventory\n\n[Table: Component | Layer | Type | Responsibility]\n```\n\n## Scaling Rules\n\n- If the project has **more than 30 components**, aggregate by package\u002Fnamespace (e.g., show `com.example.orders` as one node instead of listing every class) — this also keeps labels short and safe.\n- Keep each diagram under **40 nodes** to ensure readability and GitHub rendering compatibility.\n- For multi-module projects, focus on inter-module boundaries in Layer 1 and key components within the most important modules in Layer 2.\n\n## Common failure patterns observed in past runs\n\nEach row below is something the model actually produced and crashed the diagram. Use the ✅ form.\n\n| ❌ Past mistake | ✅ Safe form | Why the ❌ crashed |\n|---|---|---|\n| `subgraph \"Spring Boot Application (port 8080)\"` | `subgraph SpringApp[\"Spring Boot Application (port 8080)\"]` | Anonymous subgraph + parentheses in title |\n| `HC[\"HomeController\\n GET \u002F — gallery page\"]` | `HC[\"HomeController GET \u002F\"]` (move detail to table) | Literal `\\n` + em-dash |\n| `PHOTOS_TABLE[\"PHOTOS table\\n id (UUID PK)\\n photo_data (BLOB)\"]` | `PHOTOS_TABLE[\"PHOTOS\"]` (columns belong in a table) | `\\n` and overlong label |\n| `PFC[\"PhotoFileController\\n GET \u002Fphoto\u002F{id}\"]` | `PFC[\"PhotoFileController GET \u002Fphoto\u002F:id\"]` | `\\n` + `{id}` |\n| `Spring[\"Spring Boot\\n2.7.18\"]` | `Spring[\"Spring Boot 2.7.18\"]` | `\\n` |\n| `A -->|fetches users| B` | `A -->|\"fetches users\"| B` | Bare (unquoted) arrow label |\n\n## Error Handling\n\n- **Unsupported project type**: Output a single line: `> ERROR: Unsupported project type. This skill supports Java, .NET, JavaScript, and TypeScript projects only.`\n- **No source code found**: Output: `> ERROR: No recognized source files found at workspace-path. Verify the path is correct.`\n- **Insufficient info**: Generate a best-effort diagram from available data. Add a note inside the diagram: `Note[\"Some components could not be identified\"]`\n\n## Success Criteria\n\n- Layer 1 Mermaid diagram renders correctly showing architecture with technology names, data storage, and external dependencies\n- Layer 1 is accompanied by Technology Stack Summary table, Data Storage & External Services paragraph, and Key Architectural Decisions\n- Layer 2 Mermaid diagram renders correctly showing component interactions grouped by architectural layer\n- Layer 2 is accompanied by Component Inventory table\n- Every ```mermaid block is preceded by the `\u003C!-- mermaid-checked: ... -->` attestation comment\n- File saved to `.github\u002Fmodernize\u002Fassessment\u002Fengines\u002Ffacts\u002Farchitecture-diagram.md`\n","# Architecture Diagram\n\nThis skill generates a two-layer architecture visualization: a high-level application architecture diagram and a detailed component relationship diagram. Produce both in a single pass and save to `.github\u002Fmodernize\u002Fassessment\u002Fengines\u002Ffacts\u002Farchitecture-diagram.md`.\n\n## Input Parameters\n\n- `workspace-path` (optional): Path to the project to analyze (defaults to current directory)\n\n## ⚠ Mermaid Safety Constraints — read BEFORE you write any ```mermaid block\n\nMermaid is unforgiving: one illegal character anywhere in a block crashes the **whole** diagram with `Syntax error in text`, not just the offending line. There is no partial rendering. Stay strictly inside this subset:\n\n1. **Chart kind.** Only `flowchart TD` (Step 1) or `flowchart LR` (Step 2). Never `graph TD`, never mixed.\n2. **Subgraph form.** Always `subgraph \u003CAlphaNumId>[\"display label\"]`. The id must match `[A-Za-z][A-Za-z0-9_]*` (no spaces, no punctuation). NEVER use the anonymous form `subgraph \"label\"` — it crashes whenever the label contains `(`, `)`, `:`, `\u002F`, `-`, etc., and the parser error appears on an unrelated line.\n3. **Node form.** Only one of: `Id[\"label\"]` (rectangle), `Id((\"label\"))` (circle), `Id[(\"label\")]` (cylinder for data stores). Pick one shape per node — do not stack brackets.\n4. **Arrow form.** Solid `-->`, dotted `-.->`. If you put a label on an arrow it MUST be double-quoted: `-->|\"label\"|`. Never bare `-->|label|`.\n5. **No line breaks in labels.** The escape `\\n` was removed in modern Mermaid and is the #1 cause of failures. Use `\u003Cbr\u002F>` in flowcharts when you really must break a line. Strongly prefer single-line ≤ 60-char labels — put detail in the Inventory \u002F Stack tables instead.\n6. **Banned characters inside any label or subgraph title.** Use the ASCII replacement:\n\n   | Banned | Why it breaks | Replacement |\n   |---|---|---|\n   | `\\n` (literal two chars) | escape removed | `\u003Cbr\u002F>` or drop |\n   | `—` (em-dash, U+2014) | parser treats as edge | `-` (ASCII hyphen) |\n   | `–` (en-dash, U+2013) | parser treats as edge | `-` |\n   | `{` `}` (e.g. `{id}`) | opens an entity block | drop braces — write `id` or `:id` |\n   | `\"` inside a label | closes the label early | `'` (single quote) |\n   | `\\|` inside a label | breaks edge-label parser | rephrase |\n   | `@` `#` `$` `%` `&` | unsafe in many positions | rephrase or drop |\n   | `(` `)` outside a `[\"...\"]` quoted label | unbalanced parens crash | only inside the quoted label |\n   | smart quotes `\"` `\"` `'` `'` | not ASCII | regular `\"` and `'` |\n\n7. **Unique node IDs across the whole file.** If Layer 1 has `DB`, Layer 2 cannot also have `DB`. Use `DB1` and `DB2` (or `AppDb`, `ComponentDb`).\n8. **`subgraph` must be closed by a matching `end` on its own line.** No `end`, no diagram.\n\n### Mandatory self-attestation\n\nImmediately before writing each ` ```mermaid ` opening fence, emit this exact one-line HTML comment in the markdown (the comment will not render — it is for your own visible attestation that you have re-checked the block):\n\n```\n\u003C!-- mermaid-checked: no \\n, no em-dash\u002Fen-dash, no {} in labels, subgraphs are id[\"label\"], arrows are -->|\"label\"|, all subgraphs closed by end, ids unique -->\n```\n\nIf you cannot truthfully emit that comment, fix the diagram first.\n\n---\n\n## Execution Steps\n\n### Step 1: Generate Application Architecture Section\n\nAnalyze the project and produce the complete `## Application Architecture` section in one pass.\n\n**Analysis:**\n- Examine build files (Java: pom.xml, build.gradle; .NET: *.csproj, *.sln; JS\u002FTS: package.json, tsconfig.json)\n- Review configuration files (application.properties, appsettings.json, .env, database\u002FAPI configs)\n- Scan key source files to extract: framework, major dependencies, data access patterns, external integrations, technology stack\n- Identify application layers (UI, Business Logic, Data Access), data storage technologies, and external service dependencies\n\n**Diagram — Mermaid `flowchart TD`** (re-read the Safety Constraints above before writing):\n- Application layers with technology info (use `subgraph` for grouping)\n- Data storage components (specific names like \"PostgreSQL\", \"Redis\")\n- External service integrations\n- Data flow with descriptive arrow labels\n\n**Do NOT include**: individual classes\u002Fmethods or migration directions.\n\nReference example (this block satisfies every Safety Constraint — match its shape):\n\n\u003C!-- mermaid-checked: no \\n, no em-dash\u002Fen-dash, no {} in labels, subgraphs are id[\"label\"], arrows are -->|\"label\"|, all subgraphs closed by end, ids unique -->\n~~~mermaid\nflowchart TD\n    subgraph Client[\"Client Layer\"]\n        Browser[\"Web Browser\"]\n    end\n    subgraph App[\"Application Layer - Spring Boot 2.7\"]\n        Web[\"Spring MVC + Thymeleaf\"]\n        Security[\"Spring Security\"]\n        Service[\"Business Services\"]\n    end\n    subgraph Data[\"Data Layer\"]\n        JPA[\"Spring Data JPA\"]\n        DB[(\"PostgreSQL 14\")]\n        Cache[(\"Redis\")]\n    end\n    subgraph External[\"External Services\"]\n        SMTP[\"SMTP Email Service\"]\n        S3[\"AWS S3 Storage\"]\n    end\n\n    Browser -->|\"HTTP requests\"| Web\n    Web --> Security -->|\"authorized\"| Service\n    Service -->|\"CRUD operations\"| JPA\n    JPA -->|\"SQL queries\"| DB\n    Service -->|\"session cache\"| Cache\n    Service -->|\"send email\"| SMTP\n    Service -->|\"file upload\"| S3\n~~~\n\n**Textual explanations (write immediately after the diagram):**\n- **Technology Stack Summary table**: Layer | Technology | Version | Purpose\n- **Data Storage & External Services**: A short paragraph describing what databases, caches, message brokers, or external APIs are used and how they fit into the architecture\n- **Key Architectural Decisions**: 1-3 bullet points on notable patterns (e.g., \"Uses repository pattern with EF6\", \"Autofac DI with module-based registration\")\n\n> ⚠ Move detail OUT of node labels and INTO this table. A diagram with short labels and a rich table renders; a diagram with long labels does not.\n\n### Step 2: Generate Component Relationships Section\n\nAnalyze component interactions and produce the complete `## Component Relationships` section in one pass.\n\n**Analysis:**\n- Identify key component types by framework conventions:\n  - Java (Spring): Controllers, Services, Repositories, Configurations, Entities, DTOs, Listeners, Filters\n  - Java (Jakarta EE): Servlets, EJBs, CDI Beans, JPA Entities, JAX-RS Resources\n  - .NET (ASP.NET Core): Controllers, Services, Middleware, DbContext, Entities, Hubs, Filters\n  - .NET (Blazor\u002FMVC): Pages, Components, ViewModels\n  - JavaScript\u002FTypeScript (Node.js): Routes, Controllers, Services, Middleware, Models\n  - JavaScript\u002FTypeScript (React\u002FAngular\u002FVue): Components, Hooks, Services, Stores, Pages\n- Trace dependency injection (constructor\u002Ffield injection)\n- Map communication patterns (REST, gRPC, message queues, events)\n- Map data access patterns (service-to-repository, DbContext usage)\n- Detect cross-cutting concerns (middleware, interceptors, filters)\n\n**Diagram — Mermaid `flowchart LR`** (re-read the Safety Constraints above before writing):\n- Components grouped by architectural layer using `subgraph` (Presentation, Business Logic, Data Access, Infrastructure)\n- Interaction arrows with brief labels\n- Cross-cutting concerns\n- **Use IDs that do NOT collide with Step 1's diagram** (e.g., prefix with `c` for Component: `cWeb`, `cService`).\n\n**Do NOT include**: method signatures, private helpers, or external dependencies (covered by dependency-map skill).\n\nReference example (satisfies every Safety Constraint):\n\n\u003C!-- mermaid-checked: no \\n, no em-dash\u002Fen-dash, no {} in labels, subgraphs are id[\"label\"], arrows are -->|\"label\"|, all subgraphs closed by end, ids unique -->\n~~~mermaid\nflowchart LR\n    subgraph PresentationLayer[\"Presentation\"]\n        UserCtrl[\"UserController\"]\n        OrderCtrl[\"OrderController\"]\n    end\n    subgraph BusinessLayer[\"Business Logic\"]\n        UserSvc[\"UserService\"]\n        OrderSvc[\"OrderService\"]\n        NotifSvc[\"NotificationService\"]\n    end\n    subgraph DataAccessLayer[\"Data Access\"]\n        UserRepo[\"UserRepository\"]\n        OrderRepo[\"OrderRepository\"]\n    end\n    subgraph InfraLayer[\"Infrastructure\"]\n        AuthFilter[\"AuthenticationFilter\"]\n        LogMiddleware[\"LoggingMiddleware\"]\n    end\n\n    UserCtrl -->|\"delegates\"| UserSvc\n    OrderCtrl -->|\"delegates\"| OrderSvc\n    OrderSvc -->|\"lookups\"| UserSvc\n    OrderSvc -->|\"triggers\"| NotifSvc\n    UserSvc -->|\"queries\"| UserRepo\n    OrderSvc -->|\"queries\"| OrderRepo\n    AuthFilter -.->|\"intercepts\"| UserCtrl\n    AuthFilter -.->|\"intercepts\"| OrderCtrl\n    LogMiddleware -.->|\"wraps\"| PresentationLayer\n~~~\n\n**Textual explanation (write immediately after the diagram):**\n- **Component Inventory table**: Component | Layer | Type | Responsibility\n\n### Step 3: Save Output\n\nSave the combined output to `.github\u002Fmodernize\u002Fassessment\u002Fengines\u002Ffacts\u002Farchitecture-diagram.md` with this exact structure:\n\n```\n# Architecture Diagram\n\nA brief introduction (1-2 sentences).\n\n## Application Architecture\n\n\u003C Layer 1 Mermaid flowchart TD here >\n\n### Technology Stack Summary\n\n[Table: Layer | Technology | Version | Purpose]\n\n### Data Storage & External Services\n\n[Short paragraph on databases, caches, external APIs]\n\n### Key Architectural Decisions\n\n[1-3 bullet points on notable patterns]\n\n## Component Relationships\n\n\u003C Layer 2 Mermaid flowchart LR here >\n\n### Component Inventory\n\n[Table: Component | Layer | Type | Responsibility]\n```\n\n## Scaling Rules\n\n- If the project has **more than 30 components**, aggregate by package\u002Fnamespace (e.g., show `com.example.orders` as one node instead of listing every class) — this also keeps labels short and safe.\n- Keep each diagram under **40 nodes** to ensure readability and GitHub rendering compatibility.\n- For multi-module projects, focus on inter-module boundaries in Layer 1 and key components within the most important modules in Layer 2.\n\n## Common failure patterns observed in past runs\n\nEach row below is something the model actually produced and crashed the diagram. Use the ✅ form.\n\n| ❌ Past mistake | ✅ Safe form | Why the ❌ crashed |\n|---|---|---|\n| `subgraph \"Spring Boot Application (port 8080)\"` | `subgraph SpringApp[\"Spring Boot Application (port 8080)\"]` | Anonymous subgraph + parentheses in title |\n| `HC[\"HomeController\\n GET \u002F — gallery page\"]` | `HC[\"HomeController GET \u002F\"]` (move detail to table) | Literal `\\n` + em-dash |\n| `PHOTOS_TABLE[\"PHOTOS table\\n id (UUID PK)\\n photo_data (BLOB)\"]` | `PHOTOS_TABLE[\"PHOTOS\"]` (columns belong in a table) | `\\n` and overlong label |\n| `PFC[\"PhotoFileController\\n GET \u002Fphoto\u002F{id}\"]` | `PFC[\"PhotoFileController GET \u002Fphoto\u002F:id\"]` | `\\n` + `{id}` |\n| `Spring[\"Spring Boot\\n2.7.18\"]` | `Spring[\"Spring Boot 2.7.18\"]` | `\\n` |\n| `A -->|fetches users| B` | `A -->|\"fetches users\"| B` | Bare (unquoted) arrow label |\n\n## Error Handling\n\n- **Unsupported project type**: Output a single line: `> ERROR: Unsupported project type. This skill supports Java, .NET, JavaScript, and TypeScript projects only.`\n- **No source code found**: Output: `> ERROR: No recognized source files found at workspace-path. Verify the path is correct.`\n- **Insufficient info**: Generate a best-effort diagram from available data. Add a note inside the diagram: `Note[\"Some components could not be identified\"]`\n\n## Success Criteria\n\n- Layer 1 Mermaid diagram renders correctly showing architecture with technology names, data storage, and external dependencies\n- Layer 1 is accompanied by Technology Stack Summary table, Data Storage & External Services paragraph, and Key Architectural Decisions\n- Layer 2 Mermaid diagram renders correctly showing component interactions grouped by architectural layer\n- Layer 2 is accompanied by Component Inventory table\n- Every ```mermaid block is preceded by the `\u003C!-- mermaid-checked: ... -->` attestation comment\n- File saved to `.github\u002Fmodernize\u002Fassessment\u002Fengines\u002Ffacts\u002Farchitecture-diagram.md`\n",{"name":5,"description":7},"main","a9c9469d86e9dc078018e8fb391abc7744088078","plugins\u002Fgithub-copilot-modernization\u002Fskills\u002Farchitecture-diagram",15,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fgithub-copilot-modernization","https:\u002F\u002Fgithub.com\u002Fmicrosoft","https:\u002F\u002Fopensource.microsoft.com","Open source projects and samples from Microsoft","2026-09-24 00:17:59",{"source":8,"skillName":5,"commands":38,"prompt":48,"zipAvailable":49},[39,42,45],{"tool":40,"command":41},"npx","npx skills add microsoft\u002Fgithub-copilot-modernization --skill architecture-diagram",{"tool":43,"command":44},"bunx","bunx skills add microsoft\u002Fgithub-copilot-modernization --skill architecture-diagram",{"tool":46,"command":47},"pnpm","pnpm dlx skills add microsoft\u002Fgithub-copilot-modernization --skill architecture-diagram","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fgithub-copilot-modernization\u002Fblob\u002Fmain\u002Fplugins\u002Fgithub-copilot-modernization\u002Fskills\u002Farchitecture-diagram\u002FSKILL.md",true,[51,57,61,67,71,75],{"path":52,"resourceType":53,"resourceTypeDesc":54,"sizeBytes":55,"sourceHtmlUrl":56},"agents\u002Fopenai.yaml","REFERENCE","参考文档",1158,"https:\u002F\u002Fgithub.com\u002Fapache\u002Fshardingsphere\u002Fblob\u002Fmaster\u002F.codex\u002Fskills\u002Fgen-ut\u002Fagents\u002Fopenai.yaml",{"path":58,"resourceType":53,"resourceTypeDesc":54,"sizeBytes":59,"sourceHtmlUrl":60},"references\u002Fverification.md",8293,"https:\u002F\u002Fgithub.com\u002Fapache\u002Fshardingsphere\u002Fblob\u002Fmaster\u002F.codex\u002Fskills\u002Fgen-ut\u002Freferences\u002Fverification.md",{"path":62,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":65,"sourceHtmlUrl":66},"scripts\u002Fguard_task_scope.py","SCRIPT","脚本",9052,"https:\u002F\u002Fgithub.com\u002Fapache\u002Fshardingsphere\u002Fblob\u002Fmaster\u002F.codex\u002Fskills\u002Fgen-ut\u002Fscripts\u002Fguard_task_scope.py",{"path":68,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":69,"sourceHtmlUrl":70},"scripts\u002Fscan_quality_rules.py",23583,"https:\u002F\u002Fgithub.com\u002Fapache\u002Fshardingsphere\u002Fblob\u002Fmaster\u002F.codex\u002Fskills\u002Fgen-ut\u002Fscripts\u002Fscan_quality_rules.py",{"path":72,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":73,"sourceHtmlUrl":74},"tests\u002Ftest_guard_task_scope.py",11314,"https:\u002F\u002Fgithub.com\u002Fapache\u002Fshardingsphere\u002Fblob\u002Fmaster\u002F.codex\u002Fskills\u002Fgen-ut\u002Ftests\u002Ftest_guard_task_scope.py",{"path":76,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":77,"sourceHtmlUrl":78},"tests\u002Ftest_scan_quality_rules.py",15848,"https:\u002F\u002Fgithub.com\u002Fapache\u002Fshardingsphere\u002Fblob\u002Fmaster\u002F.codex\u002Fskills\u002Fgen-ut\u002Ftests\u002Ftest_scan_quality_rules.py",[80,94,103,111,120,128],{"skillNo":81,"name":82,"nameZh":6,"description":83,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":84,"categories":85,"keywords":91,"publishedAt":23},"01M69B5DBRA354JMQRZP3D1X3X","verify-test-baseline","Generate and run post-migration tests from the frozen baseline specification.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fgithub-copilot-modernization\u002Fblob\u002Fmain\u002Fplugins\u002Fgithub-copilot-modernization\u002Fskills\u002Fverify-test-baseline\u002FSKILL.md",[86],{"categoryNo":87,"categoryName":88,"taxonomyType":89,"taxonomyTypeDesc":90},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",[92,93],"test","verify test baseline",{"skillNo":95,"name":96,"nameZh":6,"description":97,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":98,"categories":99,"keywords":100,"publishedAt":23},"01M69B5BJWPCN41J5ZAR2XFMBR","team-request","How team members request infrastructure connection info and handle secrets in team mode","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fgithub-copilot-modernization\u002Fblob\u002Fmain\u002Fplugins\u002Fgithub-copilot-modernization\u002Fskills\u002Fteam-request\u002FSKILL.md",[],[101,102],"team request","infrastructure",{"skillNo":104,"name":105,"nameZh":6,"description":106,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":107,"categories":108,"keywords":109,"publishedAt":23},"01M69B58TZ7SNTPB6C508M5HWX","team-charters","Provides role charters (mission, ownership, core principles, quality bar) for a multi-agent coding team. Each charter defines the role's mission, ownership scope, core principle (boundary constraints), and quality bar. Most roles also include communication rules. Consumed by the coordinator during task decomposition to assign work to the correct role.\nTriggers: \"look up role charter\", \"what does the architect own\", \"check role boundaries\", \"find team roles\", \"which role handles X\", \"list agent charters\", \"role responsibilities\".\nNOT for: task decomposition (use breaking-down-tasks), implementation (use implementing-code), architecture analysis (use analyzing-architecture).","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fgithub-copilot-modernization\u002Fblob\u002Fmain\u002Fplugins\u002Fgithub-copilot-modernization\u002Fskills\u002Fteam-charters\u002FSKILL.md",[],[110,19],"team charters",{"skillNo":112,"name":113,"nameZh":6,"description":114,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":115,"categories":116,"keywords":117,"publishedAt":23},"01M69B56JVPKCS2WWVSCZXHEZJ","struts-to-spring","Migration guideline for transforming Apache Struts 2 applications to Spring Boot 3.x and Spring MVC.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fgithub-copilot-modernization\u002Fblob\u002Fmain\u002Fplugins\u002Fgithub-copilot-modernization\u002Fskills\u002Fstruts-to-spring\u002FSKILL.md",[],[118,119],"struts to spring","boot",{"skillNo":121,"name":122,"nameZh":6,"description":123,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":124,"categories":125,"keywords":126,"publishedAt":23},"01M69B54QQ6K8SDZ8MJYEKBYHJ","spring-boot-scaffolding","Reference guide for creating a new Spring Boot project during rewrite migration.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fgithub-copilot-modernization\u002Fblob\u002Fmain\u002Fplugins\u002Fgithub-copilot-modernization\u002Fskills\u002Fspring-boot-scaffolding\u002FSKILL.md",[],[119,127],"spring boot scaffolding",{"skillNo":129,"name":130,"nameZh":6,"description":131,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":132,"categories":133,"keywords":134,"publishedAt":23},"01M69B52T5G9CZWHYXWP22WEKY","sharing-learnings","How to record project learnings so that later-phase workers and future agent runs can consume them.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fgithub-copilot-modernization\u002Fblob\u002Fmain\u002Fplugins\u002Fgithub-copilot-modernization\u002Fskills\u002Fsharing-learnings\u002FSKILL.md",[],[135],"sharing learnings"]