V13 — Mermaid.js Auto-Generated
Diagram rendered from Mermaid syntax, auto-generated from family data
.frankx/family/*.md→lib/family-tree-data.ts→Mermaid syntax→SVG diagram
gorte
riemer
bridge
current
partner
Initializing Mermaid...
8
Family Members
10
Relationships
3
Generations
Technical Implementation
- •Auto-generation: Mermaid syntax generated from TypeScript data structure
- •Dynamic rendering: Uses mermaid.render() with custom dark theme
- •Layout toggle: Switch between top-down (TD) and left-right (LR) orientations
- •Color coding: Five family sides styled with Mermaid classDef
- •Edge types: Horizontal lines (---) for marriages, arrows (-->) for parent-child
- •Source visibility: View and copy raw Mermaid syntax for debugging