| name | architecture-diagram |
| description | Generates a Mermaid architecture diagram showing high-level component relationships. Use when visualizing how plugins or modules fit together. |
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?"
When NOT To Use
- Import-level coupling (use
cartograph:dependency-graph)
- Runtime call paths (use
cartograph:call-chain)
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
