architecture-diagram

Generate Mermaid architecture and component diagrams from Java, .NET, and JavaScript code analysis.

35|8|Updated Feb 6, 2026
One-click install
npx skills add https://github.com/microsoft/github-copilot-modernization --skill architecture-diagram-microsoft
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/microsoft/github-copilot-modernization/tree/main/plugins/github-copilot-modernization/skills/architecture-diagram
Command: npx skills add https://github.com/microsoft/github-copilot-modernization --skill architecture-diagram-microsoft

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate two-layer architecture diagrams from a project's analysis to help teams understand structure quickly and accurately.

Core Features & Use Cases

  • Two diagrams in one pass: Application architecture and detailed component relationships.
  • Mermaid-based visualization: Produces readable, shareable diagrams for documentation.
  • Code analysis-driven inference: Analyzes build/config files to infer tech stack, data flows, and dependencies.
  • Use Case: Onboard new engineers by presenting an up-to-date architectural overview from a codebase.

Quick Start

Generate architecture and component diagrams for the current workspace and save the results to the facts file.

Frequently Asked Questions about architecture-diagram

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate architecture diagrams from code automatically?

You can generate architecture diagrams from code automatically by analyzing build and config files to infer the tech stack, data flows, and dependencies, then producing Mermaid-based visualizations for documentation.

What is the best way to visualize software architecture for Java, .NET, and JavaScript projects?

The best way to visualize software architecture for Java, .NET, and JavaScript projects is to run a code analysis-driven inference that produces both application architecture and detailed component relationship diagrams in one pass.

Can I use Mermaid diagrams for onboarding new engineers to a codebase?

Yes, you can use Mermaid diagrams for onboarding new engineers by presenting an up-to-date architectural overview generated from the codebase analysis and saving the results to a designated facts file for auditing.

Does this code analysis tool infer data flows and dependencies from build files?

Yes, this code analysis tool infers data flows, dependencies, and the tech stack by analyzing build and configuration files, then translates that structure into readable, shareable Mermaid diagrams.

What are the limitations of auto-generating component relationship diagrams?

A limitation of auto-generating component relationship diagrams is that the inference relies on analyzing build and config files; undocumented or dynamic relationships may not be fully captured in the resulting Mermaid visualization.

How to create two-layer architecture diagrams in one pass?

To create two-layer architecture diagrams in one pass, run an automated code analysis that outputs both the high-level application architecture and the detailed component relationships simultaneously into Mermaid format.