Add Mermaid.js system architecture and data flow diagrams #641
Description
Description
To help contributors understand how TalkHeal integrates Streamlit, SQLite, and the Gemini API, we should add live-rendered Mermaid.js diagrams to the README.md.
Currently, the "Project Structure" is a list, but it doesn't show how the logic flows between the Mood Dashboard, Journaling Database, and the AI Personality Selector.
Proposed Requirements
1. High-Level Flow (Mermaid Sequence Diagram)
Show the path from User Input → Gemini Processing → Response with Personality Tone.
sequenceDiagram
participant User
participant Streamlit_UI
participant Tone_Selector
participant Gemini_API
participant SQLite_DB
User->>Streamlit_UI: Enters message
Streamlit_UI->>Tone_Selector: Fetch selected Tone (e.g., Wise Friend)
Tone_Selector->>Gemini_API: Prompt + Context + Tone Instructions
Gemini_API-->>Streamlit_UI: Empathetic Response
Streamlit_UI->>SQLite_DB: Log Session/Mood
2. Feature Integration (Mermaid Flowchart)
Visualize how the Mood Tracker triggers other components like Yoga Recommendations or Coping Cards.
graph TD
A[User Logins] --> B{Mood Input}
B -- Negative/Stressed --> C[Coping Tips & Breathing]
B -- High Energy --> D[Yoga Recommendation Engine]
B -- Overwhelmed --> E[Emergency Help / Crisis Page]
C --> F[SQLite Journal Entry]
D --> F
Why this is needed
- Developer Onboarding: New contributors can instantly see which Python scripts (
auth_utils.py,chat_interface.py) handle which part of the lifecycle. - Architecture Transparency: It highlights the "TalkHeal Difference" by showing how the AI isn't just a chatbot, but a hub for wellness tools.
I would like to work on this issue and Submit a PR.
Labels: documentation SWOC SWOC'26