MyClub/diagrams

Project Diagrams

This folder contains Mermaid diagrams for the project:

• ER Diagram of the database schema
• System Architecture (frontend ↔ backend ↔ integrations)
• Admin Module Map (grouped by navigation categories)
• Frontpage Data Map (sections → data sources)

Recommended extensions (VS Code)

• Markdown Preview Mermaid Support (ID: bpruitt-goddard.vscode-mermaid-preview)
• Alternative: Markdown Preview Enhanced (ID: shd101wyy.markdown-preview-enhanced)

How to preview

1. Install one of the extensions above.
2. Open any .md file here (e.g., er-diagram.md).
3. Press Ctrl+Shift+V (or Right click → Open Preview / Open Preview to the Side).
4. If prompted to allow scripts for Mermaid, accept.

Files

• er-diagram.md — ER diagram of DB entities and relationships
• system-architecture.md — high-level system flow
• admin-map.md — map of admin sections
• frontpage-data-map.md — frontpage sections → data sources

Optional: Export as images

• You can install Mermaid CLI to export to PNG/SVG: npm i -g @mermaid-js/mermaid-cli
• For Markdown files in this folder, run: mmdc -i er-diagram.md -o er-diagram.svg --inputType markdown (If you extract the mermaid code to a standalone .mmd file, you can omit --inputType.)