Diagram

Step 3: Write diagram doc

Use this template:

# [Area or Flow] Diagram

## Purpose
[What this diagram explains]

## Related Docs
- Feature: [link]
- Technical: [link]
- ADR: [link]

## Diagram
```mermaid
flowchart TD
  user[User] --> app[NextApp]
  app --> useCase[UseCase]
  useCase --> repo[Repository]
  repo --> db[(Database)]
```

## Key Notes
- [Non-obvious relationship]
- [Boundary/constraint]

## Not Covered
- [Explicit exclusions]

Step 4: Validate Mermaid syntax

Before finalizing:

• Use no spaces in node IDs
• Quote labels containing special characters
• Avoid reserved IDs such as end, graph, subgraph
• Keep diagrams readable and focused (do not over-pack)

Step 5: Ensure traceability

Link diagram to the related feature/technical/ADR docs so it remains discoverable and maintainable.

Output

• docs/system-diagrams/[area-or-flow-name].md

Checklist Before Done

• Diagram answers one clear question
• Mermaid renders with valid syntax
• Related docs are linked
• Scope exclusions are explicit
• File exists only in docs/system-diagrams/