使用mermaid 语言绘画时序图和链路图

news2025/7/11 8:55:39

给大家展示一下效果，
官方地址：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数据库:::external
    yy数据库:::external
    钉钉告警:::notification

    %% ==================== 数据采集源（完全保留） ====================
    subgraph 数据采集["多源数据采集"]
        MQ消费数据:::middleware
        API接口服务:::app
        库间迁移工具:::middleware
    end

    %% ==================== 用户层（完全保留） ====================
    subgraph 用户层["用户终端"]
        生产设备:::user
        微信小程序:::user
        监管工作台:::user
        消费者APP:::user
        企业录入终端:::user
    end

    %% ==================== 应用层（完全保留） ====================
    subgraph 应用层["应用服务"]
        SpringBoot核心服务:::app
        溯源码管理:::app
        数据治理服务:::app
        任务调度服务:::app
    end

    %% ==================== 数据层修改点 ====================
    subgraph 数据层["数据服务"]
        subgraph 达梦集群["达梦集群"]
            达梦节点1:::data
            达梦节点2:::data
            达梦节点3:::data
        end
        前置达梦数据库:::data
        Redis缓存:::data
        MinIO文件存储:::data
    end

    %% ==================== 紫光云中间件（完全保留） ====================
    subgraph 中间件["紫光云中间件"]
        RocketMQ消息队列:::middleware
        Nginx负载均衡:::middleware
        DolphinScheduler:::middleware
        Elasticsearch:::middleware
    end

    %% ==================== 华为云基础设施（完全保留） ====================
    subgraph 基础设施["华为平台"]
        容器引擎:::infra
        DockerSwarm:::infra
        Prometheus监控:::infra
        Grafana看板:::infra
    end

    %% ==================== 可视化大屏（完全保留） ====================
    subgraph 可视化大屏["业务大屏"]
        总大屏ECharts:::screen
        经营大屏TS:::screen
        生产大屏3D:::screen
        监管大屏GIS:::screen
    end

    %% ==================== 核心业务流（完全保留） ====================
    企业录入终端 -->|原料数据| SpringBoot核心服务
    SpringBoot核心服务 -->|数据存储| 达梦节点1
    微信小程序 -->|扫码查询| 溯源码管理
    溯源码管理 -->|数据查询| SpringBoot核心服务
    监管工作台 -->|监管指令| 监管大屏GIS
    生产设备 -->|IoT数据| RocketMQ消息队列

    %% ==================== 多源数据入库修改点 ====================
    %% 1. MQ消费入库（保留）
    MQ消费数据 -->|消费消息| RocketMQ消息队列
    RocketMQ消息队列 -->|数据处理| 达梦节点1

    %% 2. API接口入库（保留）
    API接口服务 -->|接收数据| SpringBoot核心服务
    SpringBoot核心服务 -->|写入主库| 达梦节点2

    %% 3. 库间迁移入库（修改连线）
    莱斯数据库 -->|DataX迁移| 库间迁移工具
    美亚数据库 -->|Kettle迁移| 库间迁移工具
    库间迁移工具 -->|数据加载| 前置达梦数据库
    前置达梦数据库 -->|定时同步| 达梦节点3
    DolphinScheduler -->|调度DataX| 库间迁移工具
    DolphinScheduler -->|调度Kettle| 库间迁移工具

    %% ==================== 中间件服务连接（完全保留） ====================
    Nginx负载均衡 -->|请求分发| SpringBoot核心服务
    DolphinScheduler -->|任务调度| 数据治理服务
    Elasticsearch -->|索引查询| 溯源码管理
    SpringBoot核心服务 -->|缓存读取| Redis缓存
    SpringBoot核心服务 -->|消息发布| RocketMQ消息队列

    %% ==================== 监控告警连接（完全保留） ====================
    Prometheus监控 -->|指标采集| 容器引擎
    Grafana看板 -->|告警推送| 钉钉告警
    容器引擎 -->|容器监控| Prometheus监控

    %% ==================== 业务标注（完全保留） ====================
    subgraph 业务流["核心业务流程"]
        direction TB
        B1[企业录入]:::biz
        B2[生产溯源]:::biz
        B3[消费者扫码]:::biz
        B4[供应链可视化]:::biz
        B5[质量管控]:::biz
        B6[经营决策]:::biz
        
        B1 --> B2 --> B3 --> B4 --> B6
        B3 --> B5 --> B6
    end

    %% ==================== 业务技术映射（完全保留） ====================
    企业录入终端 -.-> B1
    SpringBoot核心服务 -.-> B2
    微信小程序 -.-> B3
    数据治理服务 -.-> B5
    经营大屏TS -.-> B6

    %% ==================== 国产化标注（完全保留） ====================
    style 基础设施 stroke:#E53935,stroke-width:2px
    style 中间件 stroke:#E53935,stroke-width:2px
    style 达梦集群 stroke:#E53935
    style 前置达梦数据库 stroke:#E53935

    %% ==================== 新增同步说明 ====================
    subgraph 同步说明[" "]
        direction TB
        S1["DataX每日00:30同步"]
        S2["Kettle每日01:00同步"]
        S3["前置库→达梦集群每日02:00同步"]
    end

sequenceDiagram
    title 食品安全溯源系统时序图

    %% 全局参与者定义
    box 用户层
    participant 消费者 as 消费者(微信小程序)
    participant 监管员 as 监管员(工作台)
    participant 企业员工 as 企业员工(Web终端)
    participant 供应商系统 as 供应商系统(API)
    end

    box 应用服务层
    participant 溯源服务 as 溯源服务(SpringBoot)
    participant 数据治理 as 数据治理(海豚调度)
    participant 大屏服务 as 大屏服务(TS+ECharts)
    end

    box 数据存储层
    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-docs
    MinIO-->>溯源服务: 返回ETag
    溯源服务->>Redis: SETEX batch:${id} 604800
    溯源服务-->>企业员工: HTTP 201 Created
    end

    %% ===== API数据接入 =====
    rect rgb(245,245,220)
    供应商系统->>溯源服务: POST /api/materials
    activate 溯源服务
    溯源服务->>溯源服务: OAuth2验证
    alt 验证成功
        溯源服务->>达梦DB: INSERT supplier_data
        溯源服务->>Redis: DEL supplier:{id}
        溯源服务-->>供应商系统: 200 OK (ETag)
    else 验证失败
        溯源服务-->>供应商系统: 401 Unauthorized
    end
    deactivate 溯源服务
    end

    %% ============== 场景2：消费者溯源查询 ==============
    Note over 消费者,Redis: 场景2：消费者扫码溯源
    rect rgb(230,230,250)
    消费者->>溯源服务: GET /trace/ABC123
    alt 缓存命中
        溯源服务->>Redis: HGETALL trace:ABC123
        Redis-->>溯源服务: 返回完整链路数据
    else 缓存穿透
        溯源服务->>达梦DB: EXEC sp_trace_detail
        达梦DB-->>溯源服务: 结果集
        溯源服务->>Redis: HSET trace:ABC123
    end
    溯源服务-->>消费者: HTTP 200 OK
    end

    %% ============== 场景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-->>数据治理: 输出合并统计
    end
    end

    %% ============== 场景5：系统健康监控 ==============
    Note over 溯源服务,Redis: 场景5：系统健康监测
    rect rgb(255,250,240)
    溯源服务->>Redis: INCR system:health:service1
    Redis->>监控系统: 触发阈值告警
    监控系统-->>运维人员: 钉钉机器人告警
    运维人员-->>监控系统: 已确认告警
    end

同时IDEA也有这个插件可以实时修改和查看预览。
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2377592.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

浅论3DGS溅射模型在VR眼镜上的应用

浅论3DGS溅射模型在VR眼镜上的应用

摆烂仙君小课堂开课了，本期将介绍如何手搓VR眼镜，并将随手拍的电影变成3D视频。 一、3DGS模型介绍 3D 高斯模型是基于高斯函数构建的用于描述三维空间中数据分布概率的模型，高斯函数在数学和物理领域有着广泛应用，其在 3D 情境下…
阅读更多...
6种方式来探究数据集的的方法worldquant

6种方式来探究数据集的的方法worldquant

覆盖率百分比 指金融数据字段（如股价、成交量、财务指标）在时间或空间上的有效数据比例。 时间维度：数据在历史周期内的完整度（如：某股票过去 1 年中，95% 的交易日有收盘价）。空间维度&#xf…
阅读更多...
深度学习中的归一化：提升模型性能的关键因素

深度学习中的归一化：提升模型性能的关键因素

📌 友情提示： 本文内容由银河易创AI（https://ai.eaigx.com）创作平台的gpt-4-turbo模型辅助完成，旨在提供技术参考与灵感启发。文中观点或代码示例需结合实际情况验证，建议读者通过官方文档或实践进一步确认…
阅读更多...
vue+threeJS 大理石贴图

vue+threeJS 大理石贴图

嗨，我是小路。今天主要和大家分享的主题是“vuethreeJS 大理石贴图”。 通过 Vue 3 和 Three.js 实现大理石纹理效果，并将这种技术应用于产品展示、虚拟展览、甚至是互动游戏之中，其潜力无穷。今天主要介绍基础的大理石贴图。 vueth…
阅读更多...
WebGL 3着色器和GLSL

WebGL 3着色器和GLSL

我们之前提到过着色器和GLSL，但是没有涉及细节，你可能已经对此有所了解， 但以防万一，这里将详细讲解着色器和GLSL。 在工作原理中我们提到，WebGL每次绘制需要两个着色器， 一个顶点着色器和一个片段着色器&…
阅读更多...
华为OD机试真题——通信系统策略调度（用户调度问题）（2025B卷：100分）Java/python/JavaScript/C/C++/GO最佳实现

华为OD机试真题——通信系统策略调度（用户调度问题）（2025B卷：100分）Java/python/JavaScript/C/C++/GO最佳实现

2025 B卷 100分 题型 本专栏内全部题目均提供Java、python、JavaScript、C、C++、GO六种语言的最佳实现方式； 并且每种语言均涵盖详细的问题分析、解题思路、代码实现、代码详解、3个测试用例以及综合分析； 本文收录于专栏：《2025华为OD真题目录+全流程解析+备考攻略+经验分…
阅读更多...
llamafactory SFT 从断点恢复训练

llamafactory SFT 从断点恢复训练

背景 我使用llamafactory sft 微调模型的时候。gpu停止运行了。日志文件没有任何的报错信息。 显存还是占用状态。 查看llamafactory的进程是下述信息： 151312 151306 91 17:42 ? 03:58:10 [llamafactory-cl] 既然如此，那就只能从断点恢复训练了。 …
阅读更多...
计算机网络-----6分层结构

计算机网络-----6分层结构

目录 “分层” 的设计思想： 计算机网络要完成的功能： 计算机网络的分层结构： 网络体系结构的概念： 各层之间的关系： 数据的传输过程 水平视角： 垂直视角： 相关概念 协议三要素&#x…
阅读更多...
运算放大器相关的电路

运算放大器相关的电路

1运算放大器介绍 解释：运算放大器本质就是一个放大倍数很大的元件，就如上图公式所示 Vp和Vn相差很小但是放大后输出还是会很大。 运算放大器不止上面的三个引脚，他需要独立供电； 如图比较器： 解释：Vp&…
阅读更多...
python版本管理工具-pyenv轻松切换多个Python版本

python版本管理工具-pyenv轻松切换多个Python版本

在使用python环境开发时，相信肯定被使用版本所烦恼，在用第三方库时依赖兼容的python版本不一样，有没有一个能同时安装多个python并能自由切换的工具呢，那就是pyenv，让你可以轻松切换多个Python 版本。 pyenv是什么 p…
阅读更多...
elementUI 循环出来的表单，怎么做表单校验？

elementUI 循环出来的表单，怎么做表单校验？

数据结构如下&#xff1a; diversionParamList: [ { length: null, positionNumber: null, value: null, } ] 思路&#xff1a;可根据 index 动态绑定 :props 属性值&#xff0c;校验规则写在:rules <div class"config-item" v-for"(item, index) in form.…
阅读更多...
Leetcode76覆盖最小子串

Leetcode76覆盖最小子串

覆盖最小子串 代码来自b站左程云 class Solution {public String minWindow(String str, String tar) {char[] s str.toCharArray();char[] t tar.toCharArray();int[] cnt new int[256];for (char cha : t) { cnt[cha]--;}int len Integer.MAX_VALUE;int debt t.length…
阅读更多...
电力杆塔安全监测解决方案

电力杆塔安全监测解决方案

一、方案背景 在台风、滑坡等自然灾害出现时&#xff0c;极易产生倒杆、断杆、杆塔倾斜、塔基滑动等致使杆塔失稳的状况&#xff0c;进而引发导线断线、线路跳闸等事故&#xff0c;给电网的安全稳定运行造成影响。可借助在铁塔上装设的传感器&#xff0c;能够感知铁塔的工作状态…
阅读更多...
AD 常用系统快捷键

AD 常用系统快捷键

(1) L: 打开层设置开关选项(在元件移动状态下&#xff0c;按下“L”键换层) (2) S: 打开选择&#xff0c;如SL(线选)、SI(框选)、SE(滑动选择) (3) J: 跳转&#xff0c;如JC(跳转到元件)、JN(跳转到网络) (4) CtrlQ: 英寸和毫米相互切换。 (5) Delete: 删除已被选择的对象 E…
阅读更多...
今日行情明日机会——20250516

今日行情明日机会——20250516

上证缩量收阴线&#xff0c;小盘股表现相对更好&#xff0c;上涨的个股大于下跌的&#xff0c;日线已到前期压力位附近&#xff0c;注意风险。 深证缩量收假阳线&#xff0c;临近日线周期上涨末端&#xff0c;注意风险。 2025年5月16日涨停股行业方向分析 机器人概念&#x…
阅读更多...
AlphaEvolve：LLM驱动的算法进化革命与科学发现新范式

AlphaEvolve：LLM驱动的算法进化革命与科学发现新范式

AlphaEvolve&#xff1a;LLM驱动的算法进化革命与科学发现新范式 本文聚焦Google DeepMind最新发布的AlphaEvolve&#xff0c;探讨其如何通过LLM与进化算法的结合&#xff0c;在数学难题突破、计算基础设施优化等领域实现革命性进展。从48次乘法优化44矩阵相乘到数据中心资源利…
阅读更多...
多尺度对比度调整

多尺度对比度调整

一、背景介绍 受到了前面锐化算法实现的启发&#xff0c;对高频层做增强是锐化&#xff0c;那么对中低频一起做增强&#xff0c;就应该能有局域对比度增强效果。 直接暴力实现了个基本版本&#xff0c;确实有对比度增强效果。然后搜了下关键字&#xff0c;还真找到了已经有人这…
阅读更多...
解决IDEA Maven编译时@spring.profiles.active@没有替换成具体环境变量的问题

解决IDEA Maven编译时@spring.profiles.active@没有替换成具体环境变量的问题

如果不加filtering true&#xff0c;编译后的文件还是 spring.profiles.active 编译前的application.yml 编译后的application.yml【环境变量没有改变】 解决方案 找到 SpringBoot 启动类所在的pom.xml&#xff0c;在 resources 增加 filtering true&#xff0c;然后重新…
阅读更多...
记参加一次数学建模

记参加一次数学建模

题目请到全国大学生数学建模竞赛下载查看。 注&#xff1a;过程更新了很多文件&#xff0c;所有这里贴上的有些内容不是最新的&#xff08;而是草稿&#xff09;。 注&#xff1a;我们队伍并没有获奖&#xff0c;文章内容仅供一乐。 从这次比赛&#xff0c;给出以下赛前建议 …
阅读更多...
Maven使用详解：Maven的概述（二）

Maven使用详解：Maven的概述（二）

一、核心定义与功能 Maven是由Apache软件基金会开发的开源项目管理工具&#xff0c;专为Java项目设计&#xff0c;主要用于自动化构建、依赖管理和项目标准化。其核心功能包括&#xff1a; 依赖管理&#xff1a;通过pom.xml文件声明依赖库&#xff0c;自动从中央仓库下载并管…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023