Architecture Diagram
Produce a capped Mermaid architecture flowchart from a codebase exploration so you can onboard, document modules, or explain structure in PRs.
Overview
architecture-diagram is an agent skill most often used in Build (also Ship, Idea) that generates Mermaid flowcharts of high-level module and plugin relationships from codebase exploration.
Install
npx skills add https://github.com/athola/claude-night-market --skill architecture-diagramWhat is this skill?
- Two-step workflow: dispatch codebase-explorer agent, then emit Mermaid flowchart TD or LR
- 15–20 node cap with subgraph grouping and shape conventions for modules, entry points, and data stores
- Designed for plugin/module relationship questions and "how does this fit together" onboarding
- Explicit rules for labeled edges, aggregation of small modules, and PR-ready architecture snippets
- 15–20 nodes maximum in generated diagrams
Adoption & trust: 1 installs on skills.sh; 304 GitHub stars; 3/3 security scanners passed (skills.sh audits); trending (+100% hot-view momentum).
What problem does it solve?
You inherit or grow a modular codebase and cannot quickly show how packages, entry points, and data stores connect for teammates or your future self.
Who is it for?
Indie builders documenting plugin architectures, monorepos, or agent toolchains who want Mermaid without manual graph editing.
Skip if: Deep sequence diagrams of every RPC, or production infra monitoring views that need live metrics rather than structural maps.
When should I use this skill?
Visualizing how plugins or modules relate, onboarding to system structure, or documenting architecture for PR reviews.
What do I get? / Deliverables
You get a PR- or README-ready Mermaid architecture diagram that summarizes component relationships within the skill’s node limits.
- Mermaid flowchart snippet (TD or LR)
- Grouped subgraphs with labeled relationships
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Architecture diagrams are canonical in Build docs because they translate code structure into shareable artifacts during implementation and review cycles. Docs subphase holds visualization and structural documentation that complements code—not runtime monitoring or marketing copy.
Where it fits
After adding a new plugin package, produce a subgraph-grouped flowchart for the README architecture section.
Attach a 15-node Mermaid map to a PR so reviewers see entry points and data stores without reading every import.
Explore a forked OSS repo root and summarize module relationships before deciding to build on it.
How it compares
Lightweight structural diagram generator—not a full C4 modeling suite or automatic dependency license audit.
Common Questions / FAQ
Who is architecture-diagram for?
Solo builders and small teams using Claude Code or similar agents who need onboarding diagrams and PR context for how modules relate.
When should I use architecture-diagram?
In Build docs when adding plugins, during Ship review before merge, or in Idea research when mapping an unfamiliar repo’s layout.
Is architecture-diagram safe to install?
It instructs codebase exploration and diagram output—review the Security Audits panel on this page and scope exploration to repos you trust.
SKILL.md
READMESKILL.md - Architecture Diagram
# Architecture Diagram Generate a Mermaid flowchart showing high-level component relationships in a codebase. ## When To Use - Visualizing how plugins/modules relate to each other - Onboarding to understand system structure - Documenting architecture for PR reviews - Answering "how does this system fit together?" ## Workflow ### Step 1: Explore the Codebase Dispatch the codebase explorer agent to analyze the scope: ``` Agent(cartograph:codebase-explorer) Prompt: Explore [scope] and return a structural model. Focus on packages, modules, and their relationships for an architecture diagram. ``` If no scope is provided, use the project root. ### Step 2: Generate Mermaid Syntax Transform the structural model into a Mermaid flowchart. **Rules for architecture diagrams**: - Use `flowchart TD` (top-down) for hierarchical systems - Use `flowchart LR` (left-right) for pipeline/flow systems - Group related modules into subgraphs by package - Use descriptive edge labels for relationships - Limit to 15-20 nodes maximum (aggregate small modules) - Use shapes to distinguish component types: - `[Rectangle]` for modules/packages - `([Stadium])` for entry points/commands - `[(Database)]` for data stores - `{Diamond}` for decision points **Example output**: ```mermaid flowchart TD subgraph sanctum[Sanctum Plugin] commit[Commit Messages] pr[PR Preparation] workspace[Workspace Review] end subgraph leyline[Leyline Plugin] git[Git Platform] patterns[Error Patterns] end commit --> git pr --> workspace pr --> git workspace --> patterns ``` ### Step 3: Render via MCP Call the Mermaid Chart MCP to render: ``` mcp__claude_ai_Mermaid_Chart__validate_and_render_mermaid_diagram prompt: "Architecture diagram of [scope]" mermaidCode: [generated syntax] diagramType: "flowchart" clientName: "claude-code" ``` If rendering fails, fix the Mermaid syntax based on the error message and retry (max 2 retries). ### Step 4: Present Results Show the rendered diagram to the user with a brief summary of what it depicts (2-3 sentences).