給大家展示一下效果,
官方地址:https://mermaid.nodejs.cn/
官方開發地:https://mermaid.nodejs.cn/intro/#google_vignette
graph LR%% ==================== 樣式定義(完全保留) ====================classDef user fill:#E1F5FE,stroke:#0288D1;classDef app fill:#E8F5E9,stroke:#388E3C;classDef data fill:#F3E5F5,stroke:#8E24AA;classDef infra fill:#FFF3E0,stroke:#FB8C00;classDef biz fill:#FFEBEE,stroke:#E53935,dashed;classDef screen fill:#FCE4EC,stroke:#EC407A;classDef middleware fill:#DCE775,stroke:#AFB42B;classDef notification fill:#FF8A65,stroke:#E64A19;classDef external fill:#B39DDB,stroke:#5E35B1;%% ==================== 外部系統節點(完全保留) ====================xx數據庫:::externalyy數據庫:::external釘釘告警:::notification%% ==================== 數據采集源(完全保留) ====================subgraph 數據采集["多源數據采集"]MQ消費數據:::middlewareAPI接口服務:::app庫間遷移工具:::middlewareend%% ==================== 用戶層(完全保留) ====================subgraph 用戶層["用戶終端"]生產設備:::user微信小程序:::user監管工作臺:::user消費者APP:::user企業錄入終端:::userend%% ==================== 應用層(完全保留) ====================subgraph 應用層["應用服務"]SpringBoot核心服務:::app溯源碼管理:::app數據治理服務:::app任務調度服務:::append%% ==================== 數據層修改點 ====================subgraph 數據層["數據服務"]subgraph 達夢集群["達夢集群"]達夢節點1:::data達夢節點2:::data達夢節點3:::dataend前置達夢數據庫:::dataRedis緩存:::dataMinIO文件存儲:::dataend%% ==================== 紫光云中間件(完全保留) ====================subgraph 中間件["紫光云中間件"]RocketMQ消息隊列:::middlewareNginx負載均衡:::middlewareDolphinScheduler:::middlewareElasticsearch:::middlewareend%% ==================== 華為云基礎設施(完全保留) ====================subgraph 基礎設施["華為平臺"]容器引擎:::infraDockerSwarm:::infraPrometheus監控:::infraGrafana看板:::infraend%% ==================== 可視化大屏(完全保留) ====================subgraph 可視化大屏["業務大屏"]總大屏ECharts:::screen經營大屏TS:::screen生產大屏3D:::screen監管大屏GIS:::screenend%% ==================== 核心業務流(完全保留) ====================企業錄入終端 -->|原料數據| SpringBoot核心服務SpringBoot核心服務 -->|數據存儲| 達夢節點1微信小程序 -->|掃碼查詢| 溯源碼管理溯源碼管理 -->|數據查詢| SpringBoot核心服務監管工作臺 -->|監管指令| 監管大屏GIS生產設備 -->|IoT數據| RocketMQ消息隊列%% ==================== 多源數據入庫修改點 ====================%% 1. MQ消費入庫(保留)MQ消費數據 -->|消費消息| RocketMQ消息隊列RocketMQ消息隊列 -->|數據處理| 達夢節點1%% 2. API接口入庫(保留)API接口服務 -->|接收數據| SpringBoot核心服務SpringBoot核心服務 -->|寫入主庫| 達夢節點2%% 3. 庫間遷移入庫(修改連線)萊斯數據庫 -->|DataX遷移| 庫間遷移工具美亞數據庫 -->|Kettle遷移| 庫間遷移工具庫間遷移工具 -->|數據加載| 前置達夢數據庫前置達夢數據庫 -->|定時同步| 達夢節點3DolphinScheduler -->|調度DataX| 庫間遷移工具DolphinScheduler -->|調度Kettle| 庫間遷移工具%% ==================== 中間件服務連接(完全保留) ====================Nginx負載均衡 -->|請求分發| SpringBoot核心服務DolphinScheduler -->|任務調度| 數據治理服務Elasticsearch -->|索引查詢| 溯源碼管理SpringBoot核心服務 -->|緩存讀取| Redis緩存SpringBoot核心服務 -->|消息發布| RocketMQ消息隊列%% ==================== 監控告警連接(完全保留) ====================Prometheus監控 -->|指標采集| 容器引擎Grafana看板 -->|告警推送| 釘釘告警容器引擎 -->|容器監控| Prometheus監控%% ==================== 業務標注(完全保留) ====================subgraph 業務流["核心業務流程"]direction TBB1[企業錄入]:::bizB2[生產溯源]:::bizB3[消費者掃碼]:::bizB4[供應鏈可視化]:::bizB5[質量管控]:::bizB6[經營決策]:::bizB1 --> B2 --> B3 --> B4 --> B6B3 --> B5 --> B6end%% ==================== 業務技術映射(完全保留) ====================企業錄入終端 -.-> B1SpringBoot核心服務 -.-> B2微信小程序 -.-> B3數據治理服務 -.-> B5經營大屏TS -.-> B6%% ==================== 國產化標注(完全保留) ====================style 基礎設施 stroke:#E53935,stroke-width:2pxstyle 中間件 stroke:#E53935,stroke-width:2pxstyle 達夢集群 stroke:#E53935style 前置達夢數據庫 stroke:#E53935%% ==================== 新增同步說明 ====================subgraph 同步說明[" "]direction TBS1["DataX每日00:30同步"]S2["Kettle每日01:00同步"]S3["前置庫→達夢集群每日02:00同步"]end
sequenceDiagramtitle 食品安全溯源系統時序圖%% 全局參與者定義box 用戶層participant 消費者 as 消費者(微信小程序)participant 監管員 as 監管員(工作臺)participant 企業員工 as 企業員工(Web終端)participant 供應商系統 as 供應商系統(API)endbox 應用服務層participant 溯源服務 as 溯源服務(SpringBoot)participant 數據治理 as 數據治理(海豚調度)participant 大屏服務 as 大屏服務(TS+ECharts)endbox 數據存儲層participant 達夢DB as 達夢8(主集群)participant Redis as Redis(哨兵模式)participant MinIO as MinIO(對象存儲)end%% ============== 場景1:雙通道數據錄入 ==============Note over 企業員工,供應商系統: 場景1:混合數據錄入通道rect rgb(240,248,255)企業員工->>溯源服務: POST /api/batches溯源服務->>達夢DB: BEGIN TRANSACTION達夢DB-->>溯源服務: 返回事務ID溯源服務->>MinIO: PUT /quality-docsMinIO-->>溯源服務: 返回ETag溯源服務->>Redis: SETEX batch:${id} 604800溯源服務-->>企業員工: HTTP 201 Createdend%% ===== API數據接入 =====rect rgb(245,245,220)供應商系統->>溯源服務: POST /api/materialsactivate 溯源服務溯源服務->>溯源服務: OAuth2驗證alt 驗證成功溯源服務->>達夢DB: INSERT supplier_data溯源服務->>Redis: DEL supplier:{id}溯源服務-->>供應商系統: 200 OK (ETag)else 驗證失敗溯源服務-->>供應商系統: 401 Unauthorizedenddeactivate 溯源服務end%% ============== 場景2:消費者溯源查詢 ==============Note over 消費者,Redis: 場景2:消費者掃碼溯源rect rgb(230,230,250)消費者->>溯源服務: GET /trace/ABC123alt 緩存命中溯源服務->>Redis: HGETALL trace:ABC123Redis-->>溯源服務: 返回完整鏈路數據else 緩存穿透溯源服務->>達夢DB: EXEC sp_trace_detail達夢DB-->>溯源服務: 結果集溯源服務->>Redis: HSET trace:ABC123end溯源服務-->>消費者: HTTP 200 OKend%% ============== 場景3:監管數據分析 ==============Note over 監管員,大屏服務: 場景3:實時監管看板rect rgb(255,240,245)監管員->>大屏服務: GET /dashboard/region大屏服務->>溯源服務: 調用聚合API溯源服務->>達夢DB: CALL sp_region_stats達夢DB-->>溯源服務: 返回指標數據集溯源服務->>大屏服務: Server-Sent Events推送大屏服務->>大屏服務: 數據標準化處理大屏服務-->>監管員: 渲染熱力圖GIS展示end%% ============== 場景4:離線數據治理 ==============Note over 數據治理,達夢DB: 場景4:定時數據治理任務loop 每日02:00執行rect rgb(240,255,240)數據治理->>達夢DB: EXEC etl_job_daily數據治理->>供應商系統: GET /api/supplier/updates供應商系統-->>數據治理: 返回增量JSON數據治理->>達夢DB: MERGE INTO supplier_master達夢DB-->>數據治理: 輸出合并統計endend%% ============== 場景5:系統健康監控 ==============Note over 溯源服務,Redis: 場景5:系統健康監測rect rgb(255,250,240)溯源服務->>Redis: INCR system:health:service1Redis->>監控系統: 觸發閾值告警監控系統-->>運維人員: 釘釘機器人告警運維人員-->>監控系統: 已確認告警end
同時IDEA也有這個插件可以實時修改和查看預覽。