%%{ init : { "theme" : "base", 'themeVariables': { 'fontSize': '24px', 'lineColor': 'white'}, "flowchart" : { "curve" : "linear"} }}%% flowchart BT; %% Define components A[Steam APIs]:::oosStyle A1[Kaggle Data]:::apiStyle A2[Steam API]:::apiStyle B[Backend App]:::backStyle C{{MySQL Server}}:::cloudStyle D[(Database)]:::dbStyle D1[(Local Storage)]:::dbStyle E[[Frontend]]:::frontStyle F[Power BI]:::toolStyle G>Indie Data Presentation]:::frontStyle H[Data Conversion]:::backStyle H1[Data Preprocessing]:::backStyle I[Data Filter]:::backStyle J>LLM Sentiment Presentation]:::frontStyle M[Data Migration]:::obsStyle K[Analysis]:::backStyle %% Define technologies T1A[Jupyter Notebook]:::techStyle T1[Python]:::langStyle T2[Windows Forms]:::frameStyle T3[C#]:::langStyle T4[SQL]:::langStyle T5[HTML CSS JavaScript]:::langStyle T6[Node.js]:::techStyle T9[LLM]:::frameStyle T10[Azure Data Studio]:::toolStyle T11[Gemma 2]:::techStyle T12[Ollama]:::techStyle T13[Docker]:::toolStyle %% Diagram connections A --->|Raw Data| B A1 -->|Raw Data .csv| D1 B -->|Clean Data| C C <--->|Data & Queries| F D1 ---->|Raw Data .csv| H1 H1 --->|Preprocessed Data .csv| I I ---->|Indie Filtered Data .csv| H I ---->|Filtered Data .csv| D1 H -->|Converted Data .json| M H -->|Converted Data .json| D1 M -->|Clean Data| C A2 ---->|Game & Review Data| T9 F & T9 -->|Reporting| pres D1 --->|Indie Filtered Data .csv| B %% Technology associations B --- T2 --- T3 C --- T10 H1 --- T1A H & T1A & I & T9 --- T1 E & B & T10 & M --- T4 T9 --- T11 & T12 & T13 pres:::subStyle %% Subgraph for Presentations subgraph pres [Presentations] J & G <--> K end azure:::subStyle %% Subgraph for Azure Cloud subgraph azure [Azure Cloud] C <-->|Stored Data| D end front:::subStyle %% Subgraph for Front End subgraph front [Front End] C <-->|Data & Queries| E E --- T6 & T5 end %% Apply custom styles classDef paddingStyle fill:none, stroke:none; classDef subStyle fill:darkgrey, rx:15, ry:15, stroke:black, stroke-width:3px; classDef apiStyle fill:black, color:white, rx:15, ry:15, stroke:black, stroke-width:3px, margin:15px; classDef cloudStyle fill:cyan, color:black, stroke:black, stroke-width:3px, margin:15px; classDef ideaStyle fill:lightgreen, color:black, rx:15, ry:15, stroke:black, stroke-width:3px, margin:15px; classDef langStyle fill:blue, color:white, rx:15, ry:15, stroke:black, stroke-width:3px, margin:15px; classDef backStyle fill:darkblue, color:white, rx:15, ry:15, stroke:black, stroke-width:3px, margin:15px; classDef frontStyle fill:coral, color:black, rx:15, ry:15, stroke:black, stroke-width:3px, margin:15px; classDef frameStyle fill:purple, color:white, rx:15, ry:15, stroke:black, stroke-width:3px, margin:15px; classDef toolStyle fill:yellow, color:black, stroke:black, stroke-width:3px, margin:15px; classDef dbStyle fill:orange, color:black, stroke:black, stroke-width:3px, margin:15px; classDef techStyle fill:green, color:white, rx:15, ry:15, stroke:black, stroke-width:3px, margin:15px; classDef oosStyle fill:red, color:white, rx:15, ry:15, stroke:black, stroke-width:3px, margin:15px; classDef obsStyle fill:pink, color:black, rx:15, ry:15, stroke:black, stroke-width:3px, margin:15px;