feat: enhance architecture diagrams in README for core-api and core-i18n with improved styling and clarity

This commit is contained in:
Firman Ramdhani
2026-05-29 16:29:46 +07:00
parent d3eb242ebe
commit ab0625d393
2 changed files with 64 additions and 51 deletions
+26 -25
View File
@@ -16,49 +16,50 @@ This architecture strictly adheres to **Inversion of Control (IoC)**. The core e
```mermaid
graph TD
%% ─── Styling Definitions (Dark-Mode Friendly Enterprise Palette) ───
classDef appEntity fill:#dbeafe,stroke:#3b82f6,stroke-width:2px,color:#1e3a8a
classDef coreEngine fill:#6366f1,stroke:#4338ca,stroke-width:2px,color:#ffffff
classDef dataStore fill:#10b981,stroke:#047857,stroke-width:2px,color:#ffffff
classDef externalAPI fill:#f59e0b,stroke:#b45309,stroke-width:2px,color:#ffffff
%% ─── Subgraphs ───
subgraph Apps ["apps/* (App Autonomy)"]
UI[React Components]
DICT[Feature Dictionaries<br/>e.g., booking.json]
UI([React Components])
DICT[[Feature Dictionaries: booking.json]]
end
subgraph Core ["@repo/core-i18n (Engine)"]
I18N((i18next Instance))
I18N[i18next Instance]
STORE[(core-storage)]
COMMON[Common Vocabulary]
end
subgraph Backend ["Backend API (External)"]
SYNC[Language Sync Endpoint]
TENANT[Tenant Config Endpoint]
SYNC([Language Sync Endpoint])
TENANT([Tenant Config Endpoint])
end
UI -->|uses useTranslation| I18N
%% ─── Flow & Relationships ───
UI ===>|uses useTranslation| I18N
DICT -.->|lazy loads| I18N
COMMON -->|preloads| I18N
I18N <-->|reads/persists| STORE
COMMON --->|preloads| I18N
I18N <===>|reads / persists| STORE
I18N -->|changeLanguage sync| SYNC
I18N --->|changeLanguage sync| SYNC
SYNC -.->|fails? rollback| I18N
TENANT -.->|applyTenantOverrides| I18N
%% Styling Subgraphs (Backgrounds)
style Apps fill:#e7f5ff,stroke:#74c0fc,stroke-width:2px,color:#1864ab
style Core fill:#f8f9fa,stroke:#ced4da,stroke-width:2px,color:#495057
style Backend fill:#fff4e6,stroke:#ffd8a8,stroke-width:2px,color:#d9480f
%% ─── Apply Styles ───
class UI,DICT appEntity;
class I18N coreEngine;
class STORE,COMMON dataStore;
class SYNC,TENANT externalAPI;
%% Styling App Nodes (Blue)
style UI fill:#339af0,stroke:#1864ab,color:#fff
style DICT fill:#339af0,stroke:#1864ab,color:#fff
%% Styling Core Nodes (Purple Engine, Green Storage/Data)
style I18N fill:#845ef7,stroke:#5f3dc4,color:#fff
style STORE fill:#20c997,stroke:#089981,color:#fff
style COMMON fill:#20c997,stroke:#089981,color:#fff
%% Styling Backend Nodes (Orange/Network)
style SYNC fill:#fd7e14,stroke:#d9480f,color:#fff
style TENANT fill:#fd7e14,stroke:#d9480f,color:#fff
%% ─── Subgraph Backgrounds (Transparent for Native GitHub Support) ───
style Apps fill:transparent,stroke:#3b82f6,stroke-width:2px,stroke-dasharray: 5 5
style Core fill:transparent,stroke:#94a3b8,stroke-width:2px,stroke-dasharray: 5 5
style Backend fill:transparent,stroke:#f59e0b,stroke-width:2px,stroke-dasharray: 5 5
```
---