Architecture Diagrams

Generate clear mermaid diagrams with proper syntax and styling.

Workflow

1. Identify diagram type based on what you're visualizing:

   • flowchart - Process flows, decision trees, workflows
   • sequenceDiagram - API calls, user interactions, async flows
   • graph - Component relationships, dependencies
   • erDiagram - Data models, database schemas

2. Gather context using code tools:

   • Use finder to locate relevant components
   • Use Read to understand relationships
   • Link to source files in diagram notes

3. Generate diagram using Amp's mermaid tool:

   • Keep labels concise (3-4 words max)
   • Use consistent naming conventions
   • Add notes for complex relationships

4. Cite sources - Link diagram elements to actual code locations

Quick Reference

See diagram-templates.md for syntax examples.

When to Use

• Visualizing system architecture or component relationships
• Documenting API flows or user interactions
• Creating database/data model diagrams
• Explaining complex workflows or decision trees

Key Principles

• One concept per diagram - Split complex systems into multiple diagrams
• Top-to-bottom or left-to-right - Consistent flow direction
• Color-code by concern - Use subgraphs or styling for grouping
• Always cite code - Diagrams should reference actual implementations