style: enhance README diagrams with improved subgraph labels and node styling for clarity
This commit is contained in:
+38
-12
@@ -40,8 +40,21 @@ graph TD
|
||||
FACTORY -.->|reports via| FARO
|
||||
FACTORY -.->|throws| API_ERR
|
||||
|
||||
style Core fill:#f8f9fa,stroke:#ced4da
|
||||
style Apps fill:#e9ecef,stroke:#adb5bd
|
||||
%% 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
|
||||
|
||||
%% 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
|
||||
@@ -50,12 +63,25 @@ Every HTTP request flows through this precise interceptor pipeline:
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant C as UI Component
|
||||
participant S as Data Service
|
||||
participant H as HTTP Client
|
||||
participant F as Faro Adapter
|
||||
participant A as App Hooks (IoC)
|
||||
participant N as Network
|
||||
autonumber
|
||||
|
||||
box #e7f5ff App Layer (Consumers)
|
||||
participant C as UI Component
|
||||
end
|
||||
|
||||
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()
|
||||
S->>H: request()
|
||||
@@ -63,13 +89,13 @@ sequenceDiagram
|
||||
H->>A: hooks.onRequest() (Inject Token)
|
||||
A->>N: fetch/XHR
|
||||
|
||||
alt Success
|
||||
N-->>A: 200 OK
|
||||
alt Success (2xx)
|
||||
N-->>A: return Response
|
||||
A->>F: onRequestEnd() (Close Span)
|
||||
F->>A: hooks.onResponse()
|
||||
A-->>S: return data
|
||||
else Error
|
||||
N-->>A: 401 / 500
|
||||
else Error (4xx / 5xx)
|
||||
N-->>A: return Rejection
|
||||
A->>F: onRequestError() (Log Error)
|
||||
F->>A: hooks.onResponseError() (Redirect/Refresh)
|
||||
A-->>S: throw ApiError
|
||||
|
||||
@@ -20,7 +20,7 @@ By routing communication through a centralized event bus, we achieve:
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
subgraph "@repo/core-events (Pure Tool)"
|
||||
subgraph Core ["@repo/core-events (Pure Tool)"]
|
||||
R["AppEventRegistry<br/>(empty interface)"]
|
||||
T["AppEvents = mapped type"]
|
||||
E((Event Bus<br/>mitt))
|
||||
@@ -29,7 +29,7 @@ graph TD
|
||||
E --> H
|
||||
end
|
||||
|
||||
subgraph "apps/web (App Autonomy)"
|
||||
subgraph Apps ["apps/web (App Autonomy)"]
|
||||
D["events.d.ts<br/>declare module augmentation"]
|
||||
A[Cashier UI]
|
||||
B[Profile Settings]
|
||||
@@ -49,9 +49,24 @@ graph TD
|
||||
E -.-> Y
|
||||
E -.-> Z
|
||||
|
||||
style E fill:#4263eb,color:#fff,stroke:#fff
|
||||
style R fill:#2b8a3e,color:#fff,stroke:#fff
|
||||
style D fill:#e67700,color:#fff,stroke:#fff
|
||||
%% Styling Subgraphs (Backgrounds)
|
||||
style Core fill:#f8f9fa,stroke:#ced4da,stroke-width:2px,color:#495057
|
||||
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
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
@@ -27,7 +27,7 @@ graph TD
|
||||
COMMON[Common Vocabulary]
|
||||
end
|
||||
|
||||
subgraph Backend ["Backend API"]
|
||||
subgraph Backend ["Backend API (External)"]
|
||||
SYNC[Language Sync Endpoint]
|
||||
TENANT[Tenant Config Endpoint]
|
||||
end
|
||||
@@ -41,10 +41,24 @@ graph TD
|
||||
SYNC -.->|fails? rollback| I18N
|
||||
|
||||
TENANT -.->|applyTenantOverrides| I18N
|
||||
|
||||
style I18N fill:#4263eb,color:#fff,stroke:#fff
|
||||
style Apps fill:#f8f9fa,stroke:#ced4da
|
||||
style Core fill:#f8f9fa,stroke:#ced4da
|
||||
|
||||
%% 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
|
||||
|
||||
%% 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
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
@@ -24,7 +24,7 @@ graph TD
|
||||
IDB[IndexedDB Adapter]
|
||||
end
|
||||
|
||||
subgraph Browser ["Browser APIs"]
|
||||
subgraph Browser ["Browser APIs (Native)"]
|
||||
B_LOCAL[(localStorage)]
|
||||
B_IDB[(IndexedDB)]
|
||||
end
|
||||
@@ -38,9 +38,24 @@ graph TD
|
||||
LOCAL <--> B_LOCAL
|
||||
IDB <--> B_IDB
|
||||
|
||||
style Core fill:#f8f9fa,stroke:#ced4da
|
||||
style ENC fill:#fab005,color:#fff,stroke:#fff
|
||||
style Browser fill:#e9ecef,stroke:#adb5bd
|
||||
%% 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 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
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user