feat: enhance architecture diagrams in README for core-api and core-i18n with improved styling and clarity
This commit is contained in:
+38
-26
@@ -9,13 +9,20 @@ The platform-agnostic API engine for the monorepo. Provides an isolated HTTP cli
|
||||
---
|
||||
|
||||
## Architecture Overview
|
||||
|
||||
```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 dataService fill:#10b981,stroke:#047857,stroke-width:2px,color:#ffffff
|
||||
classDef observability fill:#f59e0b,stroke:#b45309,stroke-width:2px,color:#ffffff
|
||||
classDef errorNode fill:#f43f5e,stroke:#be123c,stroke-width:2px,color:#ffffff
|
||||
|
||||
%% ─── Subgraphs ───
|
||||
subgraph Apps ["apps/* (App Autonomy)"]
|
||||
WEB[apps/web]
|
||||
LAND[apps/landing]
|
||||
DESK[apps/desktop]
|
||||
WEB([apps/web])
|
||||
LAND([apps/landing])
|
||||
DESK([apps/desktop])
|
||||
end
|
||||
|
||||
subgraph Core ["@repo/core-api (Engine)"]
|
||||
@@ -34,28 +41,31 @@ graph TD
|
||||
end
|
||||
end
|
||||
|
||||
WEB & LAND & DESK -->|instantiates| FACTORY
|
||||
WEB & LAND & DESK -->|extends| COMMON
|
||||
COMMON -->|executes via| FACTORY
|
||||
%% ─── Flow & Relationships ───
|
||||
WEB & LAND & DESK ===>|instantiates| FACTORY
|
||||
WEB & LAND & DESK ===>|extends| COMMON
|
||||
|
||||
COMMON --->|executes via| FACTORY
|
||||
FACTORY -.->|reports via| FARO
|
||||
FACTORY -.->|throws| API_ERR
|
||||
|
||||
%% 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
|
||||
%% ─── Apply Styles ───
|
||||
class WEB,LAND,DESK appEntity;
|
||||
class FACTORY coreEngine;
|
||||
class BASE,COMMON dataService;
|
||||
class FARO observability;
|
||||
class API_ERR errorNode;
|
||||
|
||||
%% ─── 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
|
||||
|
||||
%% 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
|
||||
```
|
||||
%% Nested subgraphs also need transparent backgrounds to prevent glaring white boxes in dark mode
|
||||
style HTTP fill:transparent,stroke:#cbd5e1,stroke-width:1px,stroke-dasharray: 5 5
|
||||
style OBS fill:transparent,stroke:#cbd5e1,stroke-width:1px,stroke-dasharray: 5 5
|
||||
style DATA fill:transparent,stroke:#cbd5e1,stroke-width:1px,stroke-dasharray: 5 5
|
||||
style ERRORS fill:transparent,stroke:#cbd5e1,stroke-width:1px,stroke-dasharray: 5 5
|
||||
```
|
||||
|
||||
### Data Flow Lifecycle
|
||||
|
||||
@@ -65,24 +75,26 @@ Every HTTP request flows through this precise interceptor pipeline:
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
|
||||
box #e7f5ff App Layer (Consumers)
|
||||
%% ─── Dark-Mode Friendly RGBA Boxes ───
|
||||
box rgba(59, 130, 246, 0.1) App Layer (Consumers)
|
||||
participant C as UI Component
|
||||
end
|
||||
|
||||
box #f8f9fa Core Engine (@repo/core-api)
|
||||
box rgba(148, 163, 184, 0.1) 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)
|
||||
box rgba(16, 185, 129, 0.1) App Logic (IoC)
|
||||
participant A as App Hooks
|
||||
end
|
||||
|
||||
box #fff5f5 External
|
||||
box rgba(245, 158, 11, 0.1) External
|
||||
participant N as Network
|
||||
end
|
||||
|
||||
%% ─── Execution Flow ───
|
||||
C->>S: getMany()
|
||||
S->>H: request()
|
||||
H->>F: onRequestStart() (Log + Span)
|
||||
|
||||
Reference in New Issue
Block a user