410-mermaid-diagram-standards

TL;DR: This rule defines standards for creating, storing, and using Mermaid diagrams in the BIG BRAIN documentation, ensuring visual consistency and maintainability across all diagrams.

1.0.0

```
/images/
  ├── *.mermaid            # Source files for all diagrams
  ├── *.png                # PNG exports of diagrams
  ├── *.svg                # SVG exports of diagrams
  └── README.md            # Directory documentation

/docs/assets/
  ├── *.png                # Diagram PNGs used in documentation
  ├── *.svg                # Diagram SVGs used in documentation
  └── .gitkeep             # Ensures directory exists in git
```

Each diagram must have:
1. A source `.mermaid` file in the `/images` directory
2. Corresponding `.png` and `.svg` exports in `/images`
3. Copies of exported images in `/docs/assets` when used in documentation

Diagram naming must be:
- Descriptive of content (e.g., `memory-bank-structure.mermaid`)
- Kebab-case format (lowercase with hyphens)
- Consistent across source and export files (same base name)

1. **Flowcharts** (`flowchart` or `graph`)
   - For process flows, algorithms, and decision trees
   - Direction: TD (top-down) for procedures, LR (left-right) for sequences
   - Example use: Bedtime Protocol process flow

2. **Sequence Diagrams** (`sequenceDiagram`)
   - For interaction between components over time
   - Example use: Memory Bank initialization sequence

3. **Class Diagrams** (`classDiagram`)
   - For system structure and relationships
   - Example use: Memory Bank component relationships

4. **State Diagrams** (`stateDiagram-v2`)
   - For state transitions and lifecycle management
   - Example use: Task state transitions

5. **Entity Relationship Diagrams** (`erDiagram`)
   - For data relationships
   - Example use: Memory file relationships

6. **Gantt Charts** (`gantt`)
   - For project planning and timelines
   - Example use: Implementation phase schedule

Choose the diagram type that best communicates the concept being documented.

1. **Color Scheme**
   - Use consistent colors for specific component types:
     - Foundation Layer: `#4285F4` (blue)
     - Verification Framework: `#34A853` (green)
     - Command Protocol: `#FBBC05` (yellow)
     - Creative Phase: `#EA4335` (red)
     - Files/Documents: `#9AA0A6` (gray)
     - User Interaction: `#8AB4F8` (light blue)
     - External Systems: `#F6AEA9` (light red)