style: enhance README diagrams with improved subgraph labels and node styling for clarity

This commit is contained in:
Firman Ramdhani
2026-05-28 12:33:40 +07:00
parent c510feadbb
commit b4af762baa
4 changed files with 96 additions and 26 deletions
+38 -12
View File
@@ -40,8 +40,21 @@ graph TD
FACTORY -.->|reports via| FARO FACTORY -.->|reports via| FARO
FACTORY -.->|throws| API_ERR FACTORY -.->|throws| API_ERR
style Core fill:#f8f9fa,stroke:#ced4da %% Styling Subgraphs (Backgrounds)
style Apps fill:#e9ecef,stroke:#adb5bd style Apps fill:#e7f5ff,stroke:#74c0fc,stroke-width:2px,color:#1864ab
style Core fill:#f8f9fa,stroke:#ced4da,stroke-width:2px,color:#495057
%% Styling Nodes (Apps - Blue)
style WEB fill:#339af0,stroke:#1864ab,color:#fff
style LAND fill:#339af0,stroke:#1864ab,color:#fff
style DESK fill:#339af0,stroke:#1864ab,color:#fff
%% Styling Nodes (Core Modules)
style FACTORY fill:#845ef7,stroke:#5f3dc4,color:#fff
style FARO fill:#fd7e14,stroke:#d9480f,color:#fff
style BASE fill:#20c997,stroke:#089981,color:#fff
style COMMON fill:#20c997,stroke:#089981,color:#fff
style API_ERR fill:#fa5252,stroke:#c92a2a,color:#fff
``` ```
### Data Flow Lifecycle ### Data Flow Lifecycle
@@ -50,12 +63,25 @@ Every HTTP request flows through this precise interceptor pipeline:
```mermaid ```mermaid
sequenceDiagram sequenceDiagram
participant C as UI Component autonumber
participant S as Data Service
participant H as HTTP Client box #e7f5ff App Layer (Consumers)
participant F as Faro Adapter participant C as UI Component
participant A as App Hooks (IoC) end
participant N as Network
box #f8f9fa Core Engine (@repo/core-api)
participant S as Data Service
participant H as HTTP Client
participant F as Faro Adapter
end
box #e7f5ff App Logic (IoC)
participant A as App Hooks
end
box #fff5f5 External
participant N as Network
end
C->>S: getMany() C->>S: getMany()
S->>H: request() S->>H: request()
@@ -63,13 +89,13 @@ sequenceDiagram
H->>A: hooks.onRequest() (Inject Token) H->>A: hooks.onRequest() (Inject Token)
A->>N: fetch/XHR A->>N: fetch/XHR
alt Success alt Success (2xx)
N-->>A: 200 OK N-->>A: return Response
A->>F: onRequestEnd() (Close Span) A->>F: onRequestEnd() (Close Span)
F->>A: hooks.onResponse() F->>A: hooks.onResponse()
A-->>S: return data A-->>S: return data
else Error else Error (4xx / 5xx)
N-->>A: 401 / 500 N-->>A: return Rejection
A->>F: onRequestError() (Log Error) A->>F: onRequestError() (Log Error)
F->>A: hooks.onResponseError() (Redirect/Refresh) F->>A: hooks.onResponseError() (Redirect/Refresh)
A-->>S: throw ApiError A-->>S: throw ApiError
+20 -5
View File
@@ -20,7 +20,7 @@ By routing communication through a centralized event bus, we achieve:
```mermaid ```mermaid
graph TD graph TD
subgraph "@repo/core-events (Pure Tool)" subgraph Core ["@repo/core-events (Pure Tool)"]
R["AppEventRegistry<br/>(empty interface)"] R["AppEventRegistry<br/>(empty interface)"]
T["AppEvents = mapped type"] T["AppEvents = mapped type"]
E((Event Bus<br/>mitt)) E((Event Bus<br/>mitt))
@@ -29,7 +29,7 @@ graph TD
E --> H E --> H
end end
subgraph "apps/web (App Autonomy)" subgraph Apps ["apps/web (App Autonomy)"]
D["events.d.ts<br/>declare module augmentation"] D["events.d.ts<br/>declare module augmentation"]
A[Cashier UI] A[Cashier UI]
B[Profile Settings] B[Profile Settings]
@@ -49,9 +49,24 @@ graph TD
E -.-> Y E -.-> Y
E -.-> Z E -.-> Z
style E fill:#4263eb,color:#fff,stroke:#fff %% Styling Subgraphs (Backgrounds)
style R fill:#2b8a3e,color:#fff,stroke:#fff style Core fill:#f8f9fa,stroke:#ced4da,stroke-width:2px,color:#495057
style D fill:#e67700,color:#fff,stroke:#fff style Apps fill:#e7f5ff,stroke:#74c0fc,stroke-width:2px,color:#1864ab
%% Styling Core Engine (Purple) & Contracts (Green)
style R fill:#20c997,stroke:#089981,color:#fff
style T fill:#20c997,stroke:#089981,color:#fff
style E fill:#845ef7,stroke:#5f3dc4,color:#fff
style H fill:#845ef7,stroke:#5f3dc4,color:#fff
%% Styling App Injection (Orange) & Components (Blue)
style D fill:#fd7e14,stroke:#d9480f,color:#fff
style A fill:#339af0,stroke:#1864ab,color:#fff
style B fill:#339af0,stroke:#1864ab,color:#fff
style C fill:#339af0,stroke:#1864ab,color:#fff
style X fill:#339af0,stroke:#1864ab,color:#fff
style Y fill:#339af0,stroke:#1864ab,color:#fff
style Z fill:#339af0,stroke:#1864ab,color:#fff
``` ```
--- ---
+18 -4
View File
@@ -27,7 +27,7 @@ graph TD
COMMON[Common Vocabulary] COMMON[Common Vocabulary]
end end
subgraph Backend ["Backend API"] subgraph Backend ["Backend API (External)"]
SYNC[Language Sync Endpoint] SYNC[Language Sync Endpoint]
TENANT[Tenant Config Endpoint] TENANT[Tenant Config Endpoint]
end end
@@ -42,9 +42,23 @@ graph TD
TENANT -.->|applyTenantOverrides| I18N TENANT -.->|applyTenantOverrides| I18N
style I18N fill:#4263eb,color:#fff,stroke:#fff %% Styling Subgraphs (Backgrounds)
style Apps fill:#f8f9fa,stroke:#ced4da style Apps fill:#e7f5ff,stroke:#74c0fc,stroke-width:2px,color:#1864ab
style Core fill:#f8f9fa,stroke:#ced4da style Core fill:#f8f9fa,stroke:#ced4da,stroke-width:2px,color:#495057
style Backend fill:#fff4e6,stroke:#ffd8a8,stroke-width:2px,color:#d9480f
%% 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
``` ```
--- ---
+19 -4
View File
@@ -24,7 +24,7 @@ graph TD
IDB[IndexedDB Adapter] IDB[IndexedDB Adapter]
end end
subgraph Browser ["Browser APIs"] subgraph Browser ["Browser APIs (Native)"]
B_LOCAL[(localStorage)] B_LOCAL[(localStorage)]
B_IDB[(IndexedDB)] B_IDB[(IndexedDB)]
end end
@@ -38,9 +38,24 @@ graph TD
LOCAL <--> B_LOCAL LOCAL <--> B_LOCAL
IDB <--> B_IDB IDB <--> B_IDB
style Core fill:#f8f9fa,stroke:#ced4da %% Styling Subgraphs (Backgrounds)
style ENC fill:#fab005,color:#fff,stroke:#fff style Apps fill:#e7f5ff,stroke:#74c0fc,stroke-width:2px,color:#1864ab
style Browser fill:#e9ecef,stroke:#adb5bd style Core fill:#f8f9fa,stroke:#ced4da,stroke-width:2px,color:#495057
style Browser fill:#f1f3f5,stroke:#ced4da,stroke-width:2px,color:#495057
%% Styling App Nodes (Blue)
style UI fill:#339af0,stroke:#1864ab,color:#fff
%% Styling Core Nodes (Purple Engine, Green Registry, Gold Encryption)
style API fill:#845ef7,stroke:#5f3dc4,color:#fff
style LOCAL fill:#845ef7,stroke:#5f3dc4,color:#fff
style IDB fill:#845ef7,stroke:#5f3dc4,color:#fff
style REG fill:#20c997,stroke:#089981,color:#fff
style ENC fill:#fab005,stroke:#e67700,color:#fff
%% Styling Browser Nodes (Neutral Gray)
style B_LOCAL fill:#868e96,stroke:#495057,color:#fff
style B_IDB fill:#868e96,stroke:#495057,color:#fff
``` ```
--- ---