Mermaid 在 OpenClaw 开发中的应用实践

引言

在 OpenClaw 开发过程中，清晰的可视化文档对于团队协作和系统理解至关重要。Mermaid 作为一种基于文本的图表绘制工具，能够无缝集成到 Markdown 文档中，为 OpenClaw 项目的架构设计、流程梳理和文档编写提供了强大的可视化支持。

本文将详细介绍 Mermaid 在 OpenClaw 开发中的多种应用场景，并提供实用的代码示例。

1. 为什么在 OpenClaw 中选择 Mermaid？

1.1 版本控制友好

Mermaid 图表以纯文本形式存储，与 OpenClaw 的代码仓库完美兼容：

支持 Git 版本控制，变更可追溯
避免二进制图片文件带来的合并冲突
便于代码审查和协作

1.2 开发效率提升

图表与文档一体化，无需切换工具
实时预览，所见即所得
支持自动化文档生成

1.3 与 OpenClaw 技术栈的兼容性

完美支持 Markdown 文档
可集成到 OpenClaw 的 CI/CD 流程中
支持多种文档生成工具（如 MkDocs、Docsify 等）

2. 系统架构图可视化

2.1 组件架构图

在 OpenClaw 中，使用 Mermaid 绘制系统组件关系图：
#mermaid-svg-PRMvGh4Y6OEVx9od{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-PRMvGh4Y6OEVx9od .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-PRMvGh4Y6OEVx9od .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-PRMvGh4Y6OEVx9od .error-icon{fill:#552222;}#mermaid-svg-PRMvGh4Y6OEVx9od .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-PRMvGh4Y6OEVx9od .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-PRMvGh4Y6OEVx9od .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-PRMvGh4Y6OEVx9od .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-PRMvGh4Y6OEVx9od .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-PRMvGh4Y6OEVx9od .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-PRMvGh4Y6OEVx9od .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-PRMvGh4Y6OEVx9od .marker{fill:#333333;stroke:#333333;}#mermaid-svg-PRMvGh4Y6OEVx9od .marker.cross{stroke:#333333;}#mermaid-svg-PRMvGh4Y6OEVx9od svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-PRMvGh4Y6OEVx9od p{margin:0;}#mermaid-svg-PRMvGh4Y6OEVx9od .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-PRMvGh4Y6OEVx9od .cluster-label text{fill:#333;}#mermaid-svg-PRMvGh4Y6OEVx9od .cluster-label span{color:#333;}#mermaid-svg-PRMvGh4Y6OEVx9od .cluster-label span p{background-color:transparent;}#mermaid-svg-PRMvGh4Y6OEVx9od .label text,#mermaid-svg-PRMvGh4Y6OEVx9od span{fill:#333;color:#333;}#mermaid-svg-PRMvGh4Y6OEVx9od .node rect,#mermaid-svg-PRMvGh4Y6OEVx9od .node circle,#mermaid-svg-PRMvGh4Y6OEVx9od .node ellipse,#mermaid-svg-PRMvGh4Y6OEVx9od .node polygon,#mermaid-svg-PRMvGh4Y6OEVx9od .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-PRMvGh4Y6OEVx9od .rough-node .label text,#mermaid-svg-PRMvGh4Y6OEVx9od .node .label text,#mermaid-svg-PRMvGh4Y6OEVx9od .image-shape .label,#mermaid-svg-PRMvGh4Y6OEVx9od .icon-shape .label{text-anchor:middle;}#mermaid-svg-PRMvGh4Y6OEVx9od .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-PRMvGh4Y6OEVx9od .rough-node .label,#mermaid-svg-PRMvGh4Y6OEVx9od .node .label,#mermaid-svg-PRMvGh4Y6OEVx9od .image-shape .label,#mermaid-svg-PRMvGh4Y6OEVx9od .icon-shape .label{text-align:center;}#mermaid-svg-PRMvGh4Y6OEVx9od .node.clickable{cursor:pointer;}#mermaid-svg-PRMvGh4Y6OEVx9od .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-PRMvGh4Y6OEVx9od .arrowheadPath{fill:#333333;}#mermaid-svg-PRMvGh4Y6OEVx9od .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-PRMvGh4Y6OEVx9od .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-PRMvGh4Y6OEVx9od .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-PRMvGh4Y6OEVx9od .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-PRMvGh4Y6OEVx9od .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-PRMvGh4Y6OEVx9od .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-PRMvGh4Y6OEVx9od .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-PRMvGh4Y6OEVx9od .cluster text{fill:#333;}#mermaid-svg-PRMvGh4Y6OEVx9od .cluster span{color:#333;}#mermaid-svg-PRMvGh4Y6OEVx9od div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-PRMvGh4Y6OEVx9od .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-PRMvGh4Y6OEVx9od rect.text{fill:none;stroke-width:0;}#mermaid-svg-PRMvGh4Y6OEVx9od .icon-shape,#mermaid-svg-PRMvGh4Y6OEVx9od .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-PRMvGh4Y6OEVx9od .icon-shape p,#mermaid-svg-PRMvGh4Y6OEVx9od .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-PRMvGh4Y6OEVx9od .icon-shape .label rect,#mermaid-svg-PRMvGh4Y6OEVx9od .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-PRMvGh4Y6OEVx9od .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-PRMvGh4Y6OEVx9od .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-PRMvGh4Y6OEVx9od :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 数据层
业务服务层
网关层
客户端层
Web前端

Vue.js
移动端

React Native
API网关

Nginx
负载均衡
用户服务

Spring Boot
订单服务

Spring Boot
支付服务

Spring Boot
MySQL

主从复制
Redis

缓存集群
MongoDB

文档存储

2.2 微服务调用关系

展示 OpenClaw 微服务间的调用链路：
通知服务支付服务订单服务认证服务网关用户通知服务支付服务订单服务认证服务网关用户 #mermaid-svg-X08lnpbfHYVmKV1Y{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-X08lnpbfHYVmKV1Y .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-X08lnpbfHYVmKV1Y .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-X08lnpbfHYVmKV1Y .error-icon{fill:#552222;}#mermaid-svg-X08lnpbfHYVmKV1Y .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-X08lnpbfHYVmKV1Y .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-X08lnpbfHYVmKV1Y .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-X08lnpbfHYVmKV1Y .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-X08lnpbfHYVmKV1Y .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-X08lnpbfHYVmKV1Y .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-X08lnpbfHYVmKV1Y .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-X08lnpbfHYVmKV1Y .marker{fill:#333333;stroke:#333333;}#mermaid-svg-X08lnpbfHYVmKV1Y .marker.cross{stroke:#333333;}#mermaid-svg-X08lnpbfHYVmKV1Y svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-X08lnpbfHYVmKV1Y p{margin:0;}#mermaid-svg-X08lnpbfHYVmKV1Y .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-X08lnpbfHYVmKV1Y text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-X08lnpbfHYVmKV1Y .actor-line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-X08lnpbfHYVmKV1Y .innerArc{stroke-width:1.5;stroke-dasharray:none;}#mermaid-svg-X08lnpbfHYVmKV1Y .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-X08lnpbfHYVmKV1Y .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-X08lnpbfHYVmKV1Y #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-X08lnpbfHYVmKV1Y .sequenceNumber{fill:white;}#mermaid-svg-X08lnpbfHYVmKV1Y #sequencenumber{fill:#333;}#mermaid-svg-X08lnpbfHYVmKV1Y #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-X08lnpbfHYVmKV1Y .messageText{fill:#333;stroke:none;}#mermaid-svg-X08lnpbfHYVmKV1Y .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-X08lnpbfHYVmKV1Y .labelText,#mermaid-svg-X08lnpbfHYVmKV1Y .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-X08lnpbfHYVmKV1Y .loopText,#mermaid-svg-X08lnpbfHYVmKV1Y .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-X08lnpbfHYVmKV1Y .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-X08lnpbfHYVmKV1Y .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-X08lnpbfHYVmKV1Y .noteText,#mermaid-svg-X08lnpbfHYVmKV1Y .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-X08lnpbfHYVmKV1Y .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-X08lnpbfHYVmKV1Y .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-X08lnpbfHYVmKV1Y .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-X08lnpbfHYVmKV1Y .actorPopupMenu{position:absolute;}#mermaid-svg-X08lnpbfHYVmKV1Y .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-X08lnpbfHYVmKV1Y .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-X08lnpbfHYVmKV1Y .actor-man circle,#mermaid-svg-X08lnpbfHYVmKV1Y line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-X08lnpbfHYVmKV1Y :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 1. 提交订单请求 2. 验证Token 3. 验证通过 4. 创建订单 5. 调用支付 6. 支付成功 7. 发送通知 8. 返回结果 9. 订单创建成功

3. 开发流程与工作流

3.1 功能开发流程

#mermaid-svg-r8I0OLBFJ9zwKOGp{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-r8I0OLBFJ9zwKOGp .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-r8I0OLBFJ9zwKOGp .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-r8I0OLBFJ9zwKOGp .error-icon{fill:#552222;}#mermaid-svg-r8I0OLBFJ9zwKOGp .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-r8I0OLBFJ9zwKOGp .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-r8I0OLBFJ9zwKOGp .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-r8I0OLBFJ9zwKOGp .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-r8I0OLBFJ9zwKOGp .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-r8I0OLBFJ9zwKOGp .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-r8I0OLBFJ9zwKOGp .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-r8I0OLBFJ9zwKOGp .marker{fill:#333333;stroke:#333333;}#mermaid-svg-r8I0OLBFJ9zwKOGp .marker.cross{stroke:#333333;}#mermaid-svg-r8I0OLBFJ9zwKOGp svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-r8I0OLBFJ9zwKOGp p{margin:0;}#mermaid-svg-r8I0OLBFJ9zwKOGp .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-r8I0OLBFJ9zwKOGp .cluster-label text{fill:#333;}#mermaid-svg-r8I0OLBFJ9zwKOGp .cluster-label span{color:#333;}#mermaid-svg-r8I0OLBFJ9zwKOGp .cluster-label span p{background-color:transparent;}#mermaid-svg-r8I0OLBFJ9zwKOGp .label text,#mermaid-svg-r8I0OLBFJ9zwKOGp span{fill:#333;color:#333;}#mermaid-svg-r8I0OLBFJ9zwKOGp .node rect,#mermaid-svg-r8I0OLBFJ9zwKOGp .node circle,#mermaid-svg-r8I0OLBFJ9zwKOGp .node ellipse,#mermaid-svg-r8I0OLBFJ9zwKOGp .node polygon,#mermaid-svg-r8I0OLBFJ9zwKOGp .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-r8I0OLBFJ9zwKOGp .rough-node .label text,#mermaid-svg-r8I0OLBFJ9zwKOGp .node .label text,#mermaid-svg-r8I0OLBFJ9zwKOGp .image-shape .label,#mermaid-svg-r8I0OLBFJ9zwKOGp .icon-shape .label{text-anchor:middle;}#mermaid-svg-r8I0OLBFJ9zwKOGp .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-r8I0OLBFJ9zwKOGp .rough-node .label,#mermaid-svg-r8I0OLBFJ9zwKOGp .node .label,#mermaid-svg-r8I0OLBFJ9zwKOGp .image-shape .label,#mermaid-svg-r8I0OLBFJ9zwKOGp .icon-shape .label{text-align:center;}#mermaid-svg-r8I0OLBFJ9zwKOGp .node.clickable{cursor:pointer;}#mermaid-svg-r8I0OLBFJ9zwKOGp .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-r8I0OLBFJ9zwKOGp .arrowheadPath{fill:#333333;}#mermaid-svg-r8I0OLBFJ9zwKOGp .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-r8I0OLBFJ9zwKOGp .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-r8I0OLBFJ9zwKOGp .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-r8I0OLBFJ9zwKOGp .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-r8I0OLBFJ9zwKOGp .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-r8I0OLBFJ9zwKOGp .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-r8I0OLBFJ9zwKOGp .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-r8I0OLBFJ9zwKOGp .cluster text{fill:#333;}#mermaid-svg-r8I0OLBFJ9zwKOGp .cluster span{color:#333;}#mermaid-svg-r8I0OLBFJ9zwKOGp div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-r8I0OLBFJ9zwKOGp .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-r8I0OLBFJ9zwKOGp rect.text{fill:none;stroke-width:0;}#mermaid-svg-r8I0OLBFJ9zwKOGp .icon-shape,#mermaid-svg-r8I0OLBFJ9zwKOGp .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-r8I0OLBFJ9zwKOGp .icon-shape p,#mermaid-svg-r8I0OLBFJ9zwKOGp .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-r8I0OLBFJ9zwKOGp .icon-shape .label rect,#mermaid-svg-r8I0OLBFJ9zwKOGp .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-r8I0OLBFJ9zwKOGp .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-r8I0OLBFJ9zwKOGp .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-r8I0OLBFJ9zwKOGp :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 是
否
是
否
需求分析
技术设计
编写Mermaid图表
代码实现
单元测试
测试通过?
提交代码
代码审查
审查通过?
合并到主分支
部署上线

3.2 Git 分支策略

#mermaid-svg-wYH46cbFSOCNDSTC{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-wYH46cbFSOCNDSTC .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-wYH46cbFSOCNDSTC .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-wYH46cbFSOCNDSTC .error-icon{fill:#552222;}#mermaid-svg-wYH46cbFSOCNDSTC .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-wYH46cbFSOCNDSTC .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-wYH46cbFSOCNDSTC .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-wYH46cbFSOCNDSTC .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-wYH46cbFSOCNDSTC .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-wYH46cbFSOCNDSTC .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-wYH46cbFSOCNDSTC .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-wYH46cbFSOCNDSTC .marker{fill:#333333;stroke:#333333;}#mermaid-svg-wYH46cbFSOCNDSTC .marker.cross{stroke:#333333;}#mermaid-svg-wYH46cbFSOCNDSTC svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-wYH46cbFSOCNDSTC p{margin:0;}#mermaid-svg-wYH46cbFSOCNDSTC .commit-id,#mermaid-svg-wYH46cbFSOCNDSTC .commit-msg,#mermaid-svg-wYH46cbFSOCNDSTC .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-wYH46cbFSOCNDSTC .branch-label0{fill:#ffffff;}#mermaid-svg-wYH46cbFSOCNDSTC .commit0{stroke:hsl(240, 100%, 46.2745098039%);fill:hsl(240, 100%, 46.2745098039%);}#mermaid-svg-wYH46cbFSOCNDSTC .commit-highlight0{stroke:hsl(60, 100%, 3.7254901961%);fill:hsl(60, 100%, 3.7254901961%);}#mermaid-svg-wYH46cbFSOCNDSTC .label0{fill:hsl(240, 100%, 46.2745098039%);}#mermaid-svg-wYH46cbFSOCNDSTC .arrow0{stroke:hsl(240, 100%, 46.2745098039%);}#mermaid-svg-wYH46cbFSOCNDSTC .branch-label1{fill:black;}#mermaid-svg-wYH46cbFSOCNDSTC .commit1{stroke:hsl(60, 100%, 43.5294117647%);fill:hsl(60, 100%, 43.5294117647%);}#mermaid-svg-wYH46cbFSOCNDSTC .commit-highlight1{stroke:rgb(0, 0, 160.5);fill:rgb(0, 0, 160.5);}#mermaid-svg-wYH46cbFSOCNDSTC .label1{fill:hsl(60, 100%, 43.5294117647%);}#mermaid-svg-wYH46cbFSOCNDSTC .arrow1{stroke:hsl(60, 100%, 43.5294117647%);}#mermaid-svg-wYH46cbFSOCNDSTC .branch-label2{fill:black;}#mermaid-svg-wYH46cbFSOCNDSTC .commit2{stroke:hsl(80, 100%, 46.2745098039%);fill:hsl(80, 100%, 46.2745098039%);}#mermaid-svg-wYH46cbFSOCNDSTC .commit-highlight2{stroke:rgb(48.8333333334, 0, 146.5000000001);fill:rgb(48.8333333334, 0, 146.5000000001);}#mermaid-svg-wYH46cbFSOCNDSTC .label2{fill:hsl(80, 100%, 46.2745098039%);}#mermaid-svg-wYH46cbFSOCNDSTC .arrow2{stroke:hsl(80, 100%, 46.2745098039%);}#mermaid-svg-wYH46cbFSOCNDSTC .branch-label3{fill:#ffffff;}#mermaid-svg-wYH46cbFSOCNDSTC .commit3{stroke:hsl(210, 100%, 46.2745098039%);fill:hsl(210, 100%, 46.2745098039%);}#mermaid-svg-wYH46cbFSOCNDSTC .commit-highlight3{stroke:rgb(146.5000000001, 73.2500000001, 0);fill:rgb(146.5000000001, 73.2500000001, 0);}#mermaid-svg-wYH46cbFSOCNDSTC .label3{fill:hsl(210, 100%, 46.2745098039%);}#mermaid-svg-wYH46cbFSOCNDSTC .arrow3{stroke:hsl(210, 100%, 46.2745098039%);}#mermaid-svg-wYH46cbFSOCNDSTC .branch-label4{fill:black;}#mermaid-svg-wYH46cbFSOCNDSTC .commit4{stroke:hsl(180, 100%, 46.2745098039%);fill:hsl(180, 100%, 46.2745098039%);}#mermaid-svg-wYH46cbFSOCNDSTC .commit-highlight4{stroke:rgb(146.5000000001, 0, 0);fill:rgb(146.5000000001, 0, 0);}#mermaid-svg-wYH46cbFSOCNDSTC .label4{fill:hsl(180, 100%, 46.2745098039%);}#mermaid-svg-wYH46cbFSOCNDSTC .arrow4{stroke:hsl(180, 100%, 46.2745098039%);}#mermaid-svg-wYH46cbFSOCNDSTC .branch-label5{fill:black;}#mermaid-svg-wYH46cbFSOCNDSTC .commit5{stroke:hsl(150, 100%, 46.2745098039%);fill:hsl(150, 100%, 46.2745098039%);}#mermaid-svg-wYH46cbFSOCNDSTC .commit-highlight5{stroke:rgb(146.5000000001, 0, 73.2500000001);fill:rgb(146.5000000001, 0, 73.2500000001);}#mermaid-svg-wYH46cbFSOCNDSTC .label5{fill:hsl(150, 100%, 46.2745098039%);}#mermaid-svg-wYH46cbFSOCNDSTC .arrow5{stroke:hsl(150, 100%, 46.2745098039%);}#mermaid-svg-wYH46cbFSOCNDSTC .branch-label6{fill:black;}#mermaid-svg-wYH46cbFSOCNDSTC .commit6{stroke:hsl(300, 100%, 46.2745098039%);fill:hsl(300, 100%, 46.2745098039%);}#mermaid-svg-wYH46cbFSOCNDSTC .commit-highlight6{stroke:rgb(0, 146.5000000001, 0);fill:rgb(0, 146.5000000001, 0);}#mermaid-svg-wYH46cbFSOCNDSTC .label6{fill:hsl(300, 100%, 46.2745098039%);}#mermaid-svg-wYH46cbFSOCNDSTC .arrow6{stroke:hsl(300, 100%, 46.2745098039%);}#mermaid-svg-wYH46cbFSOCNDSTC .branch-label7{fill:black;}#mermaid-svg-wYH46cbFSOCNDSTC .commit7{stroke:hsl(0, 100%, 46.2745098039%);fill:hsl(0, 100%, 46.2745098039%);}#mermaid-svg-wYH46cbFSOCNDSTC .commit-highlight7{stroke:rgb(0, 146.5000000001, 146.5000000001);fill:rgb(0, 146.5000000001, 146.5000000001);}#mermaid-svg-wYH46cbFSOCNDSTC .label7{fill:hsl(0, 100%, 46.2745098039%);}#mermaid-svg-wYH46cbFSOCNDSTC .arrow7{stroke:hsl(0, 100%, 46.2745098039%);}#mermaid-svg-wYH46cbFSOCNDSTC .branch{stroke-width:1;stroke:#333333;stroke-dasharray:2;}#mermaid-svg-wYH46cbFSOCNDSTC .commit-label{font-size:10px;fill:#000021;}#mermaid-svg-wYH46cbFSOCNDSTC .commit-label-bkg{font-size:10px;fill:#ffffde;opacity:0.5;}#mermaid-svg-wYH46cbFSOCNDSTC .tag-label{font-size:10px;fill:#131300;}#mermaid-svg-wYH46cbFSOCNDSTC .tag-label-bkg{fill:#ECECFF;stroke:hsl(240, 60%, 86.2745098039%);}#mermaid-svg-wYH46cbFSOCNDSTC .tag-hole{fill:#333;}#mermaid-svg-wYH46cbFSOCNDSTC .commit-merge{stroke:#ECECFF;fill:#ECECFF;}#mermaid-svg-wYH46cbFSOCNDSTC .commit-reverse{stroke:#ECECFF;fill:#ECECFF;stroke-width:3;}#mermaid-svg-wYH46cbFSOCNDSTC .commit-highlight-inner{stroke:#ECECFF;fill:#ECECFF;}#mermaid-svg-wYH46cbFSOCNDSTC .arrow{stroke-width:8;stroke-linecap:round;fill:none;}#mermaid-svg-wYH46cbFSOCNDSTC .gitTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-wYH46cbFSOCNDSTC :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} main feature/user-auth feature/order-system 0-b105c7b 1-0cf109f 2-42de084 添加JWT认证 3-7fb2a9a 实现RBAC权限 5-edd47a0 订单创建接口 6-00d59a6 支付集成 8-f6ae4f8 v1.2.0发布

4. 数据库设计文档

4.1 ER 图示例

#mermaid-svg-vbFaqdfmMKrvZg50{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-vbFaqdfmMKrvZg50 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-vbFaqdfmMKrvZg50 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-vbFaqdfmMKrvZg50 .error-icon{fill:#552222;}#mermaid-svg-vbFaqdfmMKrvZg50 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-vbFaqdfmMKrvZg50 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-vbFaqdfmMKrvZg50 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-vbFaqdfmMKrvZg50 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-vbFaqdfmMKrvZg50 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-vbFaqdfmMKrvZg50 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-vbFaqdfmMKrvZg50 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-vbFaqdfmMKrvZg50 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-vbFaqdfmMKrvZg50 .marker.cross{stroke:#333333;}#mermaid-svg-vbFaqdfmMKrvZg50 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-vbFaqdfmMKrvZg50 p{margin:0;}#mermaid-svg-vbFaqdfmMKrvZg50 .entityBox{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-vbFaqdfmMKrvZg50 .relationshipLabelBox{fill:hsl(80, 100%, 96.2745098039%);opacity:0.7;background-color:hsl(80, 100%, 96.2745098039%);}#mermaid-svg-vbFaqdfmMKrvZg50 .relationshipLabelBox rect{opacity:0.5;}#mermaid-svg-vbFaqdfmMKrvZg50 .labelBkg{background-color:rgba(248.6666666666, 255, 235.9999999999, 0.5);}#mermaid-svg-vbFaqdfmMKrvZg50 .edgeLabel .label{fill:#9370DB;font-size:14px;}#mermaid-svg-vbFaqdfmMKrvZg50 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-vbFaqdfmMKrvZg50 .edge-pattern-dashed{stroke-dasharray:8,8;}#mermaid-svg-vbFaqdfmMKrvZg50 .node rect,#mermaid-svg-vbFaqdfmMKrvZg50 .node circle,#mermaid-svg-vbFaqdfmMKrvZg50 .node ellipse,#mermaid-svg-vbFaqdfmMKrvZg50 .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-vbFaqdfmMKrvZg50 .relationshipLine{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-vbFaqdfmMKrvZg50 .marker{fill:none!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-vbFaqdfmMKrvZg50 .edgeLabel{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-vbFaqdfmMKrvZg50 .edgeLabel .label rect{fill:rgba(232,232,232, 0.8);}#mermaid-svg-vbFaqdfmMKrvZg50 .edgeLabel .label text{fill:#333;}#mermaid-svg-vbFaqdfmMKrvZg50 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} places
contains
includes
USER
bigint
id
PK
varchar
username
varchar
email
datetime
created_at
ORDER
bigint
id
PK
bigint
user_id
FK
decimal
total_amount
varchar
status
datetime
created_at
ORDER_ITEM
bigint
id
PK
bigint
order_id
FK
bigint
product_id
FK
int
quantity
decimal
unit_price
PRODUCT
bigint
id
PK
varchar
name
decimal
price
int
stock

5. 部署与运维图表

5.1 容器化部署架构

#mermaid-svg-rCMFA8OiWbucYGUC{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-rCMFA8OiWbucYGUC .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-rCMFA8OiWbucYGUC .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-rCMFA8OiWbucYGUC .error-icon{fill:#552222;}#mermaid-svg-rCMFA8OiWbucYGUC .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-rCMFA8OiWbucYGUC .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-rCMFA8OiWbucYGUC .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-rCMFA8OiWbucYGUC .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-rCMFA8OiWbucYGUC .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-rCMFA8OiWbucYGUC .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-rCMFA8OiWbucYGUC .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-rCMFA8OiWbucYGUC .marker{fill:#333333;stroke:#333333;}#mermaid-svg-rCMFA8OiWbucYGUC .marker.cross{stroke:#333333;}#mermaid-svg-rCMFA8OiWbucYGUC svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-rCMFA8OiWbucYGUC p{margin:0;}#mermaid-svg-rCMFA8OiWbucYGUC .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-rCMFA8OiWbucYGUC .cluster-label text{fill:#333;}#mermaid-svg-rCMFA8OiWbucYGUC .cluster-label span{color:#333;}#mermaid-svg-rCMFA8OiWbucYGUC .cluster-label span p{background-color:transparent;}#mermaid-svg-rCMFA8OiWbucYGUC .label text,#mermaid-svg-rCMFA8OiWbucYGUC span{fill:#333;color:#333;}#mermaid-svg-rCMFA8OiWbucYGUC .node rect,#mermaid-svg-rCMFA8OiWbucYGUC .node circle,#mermaid-svg-rCMFA8OiWbucYGUC .node ellipse,#mermaid-svg-rCMFA8OiWbucYGUC .node polygon,#mermaid-svg-rCMFA8OiWbucYGUC .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-rCMFA8OiWbucYGUC .rough-node .label text,#mermaid-svg-rCMFA8OiWbucYGUC .node .label text,#mermaid-svg-rCMFA8OiWbucYGUC .image-shape .label,#mermaid-svg-rCMFA8OiWbucYGUC .icon-shape .label{text-anchor:middle;}#mermaid-svg-rCMFA8OiWbucYGUC .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-rCMFA8OiWbucYGUC .rough-node .label,#mermaid-svg-rCMFA8OiWbucYGUC .node .label,#mermaid-svg-rCMFA8OiWbucYGUC .image-shape .label,#mermaid-svg-rCMFA8OiWbucYGUC .icon-shape .label{text-align:center;}#mermaid-svg-rCMFA8OiWbucYGUC .node.clickable{cursor:pointer;}#mermaid-svg-rCMFA8OiWbucYGUC .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-rCMFA8OiWbucYGUC .arrowheadPath{fill:#333333;}#mermaid-svg-rCMFA8OiWbucYGUC .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-rCMFA8OiWbucYGUC .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-rCMFA8OiWbucYGUC .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-rCMFA8OiWbucYGUC .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-rCMFA8OiWbucYGUC .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-rCMFA8OiWbucYGUC .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-rCMFA8OiWbucYGUC .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-rCMFA8OiWbucYGUC .cluster text{fill:#333;}#mermaid-svg-rCMFA8OiWbucYGUC .cluster span{color:#333;}#mermaid-svg-rCMFA8OiWbucYGUC div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-rCMFA8OiWbucYGUC .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-rCMFA8OiWbucYGUC rect.text{fill:none;stroke-width:0;}#mermaid-svg-rCMFA8OiWbucYGUC .icon-shape,#mermaid-svg-rCMFA8OiWbucYGUC .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-rCMFA8OiWbucYGUC .icon-shape p,#mermaid-svg-rCMFA8OiWbucYGUC .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-rCMFA8OiWbucYGUC .icon-shape .label rect,#mermaid-svg-rCMFA8OiWbucYGUC .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-rCMFA8OiWbucYGUC .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-rCMFA8OiWbucYGUC .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-rCMFA8OiWbucYGUC :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 生产环境
测试环境
开发环境
本地Docker

Compose
K8s集群

命名空间: test
Jenkins流水线
K8s集群

命名空间: prod
监控告警

Prometheus
日志收集

ELK

5.2 CI/CD 流水线

#mermaid-svg-FuuCns884O7DYoKy{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-FuuCns884O7DYoKy .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-FuuCns884O7DYoKy .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-FuuCns884O7DYoKy .error-icon{fill:#552222;}#mermaid-svg-FuuCns884O7DYoKy .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-FuuCns884O7DYoKy .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-FuuCns884O7DYoKy .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-FuuCns884O7DYoKy .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-FuuCns884O7DYoKy .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-FuuCns884O7DYoKy .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-FuuCns884O7DYoKy .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-FuuCns884O7DYoKy .marker{fill:#333333;stroke:#333333;}#mermaid-svg-FuuCns884O7DYoKy .marker.cross{stroke:#333333;}#mermaid-svg-FuuCns884O7DYoKy svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-FuuCns884O7DYoKy p{margin:0;}#mermaid-svg-FuuCns884O7DYoKy .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-FuuCns884O7DYoKy .exclude-range{fill:#eeeeee;}#mermaid-svg-FuuCns884O7DYoKy .section{stroke:none;opacity:0.2;}#mermaid-svg-FuuCns884O7DYoKy .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-FuuCns884O7DYoKy .section2{fill:#fff400;}#mermaid-svg-FuuCns884O7DYoKy .section1,#mermaid-svg-FuuCns884O7DYoKy .section3{fill:white;opacity:0.2;}#mermaid-svg-FuuCns884O7DYoKy .sectionTitle0{fill:#333;}#mermaid-svg-FuuCns884O7DYoKy .sectionTitle1{fill:#333;}#mermaid-svg-FuuCns884O7DYoKy .sectionTitle2{fill:#333;}#mermaid-svg-FuuCns884O7DYoKy .sectionTitle3{fill:#333;}#mermaid-svg-FuuCns884O7DYoKy .sectionTitle{text-anchor:start;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-FuuCns884O7DYoKy .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-FuuCns884O7DYoKy .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-FuuCns884O7DYoKy .grid path{stroke-width:0;}#mermaid-svg-FuuCns884O7DYoKy .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-FuuCns884O7DYoKy .task{stroke-width:2;}#mermaid-svg-FuuCns884O7DYoKy .taskText{text-anchor:middle;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-FuuCns884O7DYoKy .taskTextOutsideRight{fill:black;text-anchor:start;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-FuuCns884O7DYoKy .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-FuuCns884O7DYoKy .task.clickable{cursor:pointer;}#mermaid-svg-FuuCns884O7DYoKy .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-FuuCns884O7DYoKy .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-FuuCns884O7DYoKy .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-FuuCns884O7DYoKy .taskText0,#mermaid-svg-FuuCns884O7DYoKy .taskText1,#mermaid-svg-FuuCns884O7DYoKy .taskText2,#mermaid-svg-FuuCns884O7DYoKy .taskText3{fill:white;}#mermaid-svg-FuuCns884O7DYoKy .task0,#mermaid-svg-FuuCns884O7DYoKy .task1,#mermaid-svg-FuuCns884O7DYoKy .task2,#mermaid-svg-FuuCns884O7DYoKy .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-FuuCns884O7DYoKy .taskTextOutside0,#mermaid-svg-FuuCns884O7DYoKy .taskTextOutside2{fill:black;}#mermaid-svg-FuuCns884O7DYoKy .taskTextOutside1,#mermaid-svg-FuuCns884O7DYoKy .taskTextOutside3{fill:black;}#mermaid-svg-FuuCns884O7DYoKy .active0,#mermaid-svg-FuuCns884O7DYoKy .active1,#mermaid-svg-FuuCns884O7DYoKy .active2,#mermaid-svg-FuuCns884O7DYoKy .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-FuuCns884O7DYoKy .activeText0,#mermaid-svg-FuuCns884O7DYoKy .activeText1,#mermaid-svg-FuuCns884O7DYoKy .activeText2,#mermaid-svg-FuuCns884O7DYoKy .activeText3{fill:black!important;}#mermaid-svg-FuuCns884O7DYoKy .done0,#mermaid-svg-FuuCns884O7DYoKy .done1,#mermaid-svg-FuuCns884O7DYoKy .done2,#mermaid-svg-FuuCns884O7DYoKy .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-FuuCns884O7DYoKy .doneText0,#mermaid-svg-FuuCns884O7DYoKy .doneText1,#mermaid-svg-FuuCns884O7DYoKy .doneText2,#mermaid-svg-FuuCns884O7DYoKy .doneText3{fill:black!important;}#mermaid-svg-FuuCns884O7DYoKy .doneText0.taskTextOutsideLeft,#mermaid-svg-FuuCns884O7DYoKy .doneText0.taskTextOutsideRight,#mermaid-svg-FuuCns884O7DYoKy .doneText1.taskTextOutsideLeft,#mermaid-svg-FuuCns884O7DYoKy .doneText1.taskTextOutsideRight,#mermaid-svg-FuuCns884O7DYoKy .doneText2.taskTextOutsideLeft,#mermaid-svg-FuuCns884O7DYoKy .doneText2.taskTextOutsideRight,#mermaid-svg-FuuCns884O7DYoKy .doneText3.taskTextOutsideLeft,#mermaid-svg-FuuCns884O7DYoKy .doneText3.taskTextOutsideRight{fill:black!important;}#mermaid-svg-FuuCns884O7DYoKy .crit0,#mermaid-svg-FuuCns884O7DYoKy .crit1,#mermaid-svg-FuuCns884O7DYoKy .crit2,#mermaid-svg-FuuCns884O7DYoKy .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-FuuCns884O7DYoKy .activeCrit0,#mermaid-svg-FuuCns884O7DYoKy .activeCrit1,#mermaid-svg-FuuCns884O7DYoKy .activeCrit2,#mermaid-svg-FuuCns884O7DYoKy .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-FuuCns884O7DYoKy .doneCrit0,#mermaid-svg-FuuCns884O7DYoKy .doneCrit1,#mermaid-svg-FuuCns884O7DYoKy .doneCrit2,#mermaid-svg-FuuCns884O7DYoKy .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-FuuCns884O7DYoKy .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-FuuCns884O7DYoKy .milestoneText{font-style:italic;}#mermaid-svg-FuuCns884O7DYoKy .doneCritText0,#mermaid-svg-FuuCns884O7DYoKy .doneCritText1,#mermaid-svg-FuuCns884O7DYoKy .doneCritText2,#mermaid-svg-FuuCns884O7DYoKy .doneCritText3{fill:black!important;}#mermaid-svg-FuuCns884O7DYoKy .doneCritText0.taskTextOutsideLeft,#mermaid-svg-FuuCns884O7DYoKy .doneCritText0.taskTextOutsideRight,#mermaid-svg-FuuCns884O7DYoKy .doneCritText1.taskTextOutsideLeft,#mermaid-svg-FuuCns884O7DYoKy .doneCritText1.taskTextOutsideRight,#mermaid-svg-FuuCns884O7DYoKy .doneCritText2.taskTextOutsideLeft,#mermaid-svg-FuuCns884O7DYoKy .doneCritText2.taskTextOutsideRight,#mermaid-svg-FuuCns884O7DYoKy .doneCritText3.taskTextOutsideLeft,#mermaid-svg-FuuCns884O7DYoKy .doneCritText3.taskTextOutsideRight{fill:black!important;}#mermaid-svg-FuuCns884O7DYoKy .vert{stroke:navy;}#mermaid-svg-FuuCns884O7DYoKy .vertText{font-size:15px;text-anchor:middle;fill:navy!important;}#mermaid-svg-FuuCns884O7DYoKy .activeCritText0,#mermaid-svg-FuuCns884O7DYoKy .activeCritText1,#mermaid-svg-FuuCns884O7DYoKy .activeCritText2,#mermaid-svg-FuuCns884O7DYoKy .activeCritText3{fill:black!important;}#mermaid-svg-FuuCns884O7DYoKy .titleText{text-anchor:middle;font-size:18px;fill:#333;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-FuuCns884O7DYoKy :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 09:00 09:05 09:10 09:15 09:20 09:25 09:30 09:35 09:40 09:45 代码推送触发构建依赖安装单元测试代码扫描构建镜像推送到仓库部署到测试环境自动化测试人工确认部署到生产环境监控验证代码提交构建阶段部署阶段发布 OpenClaw CI/CD 流水线

6. 在 OpenClaw 文档中的集成实践

6.1 项目文档结构

复制代码

openclaw-project/
├── docs/
│   ├── architecture/
│   │   ├── system-architecture.md  # 包含Mermaid架构图
│   │   └── deployment.md           # 包含部署流程图
│   ├── api/
│   │   └── api-design.md          # 包含序列图
│   └── development/
│       └── workflow.md            # 包含开发流程图
├── README.md                      # 项目概览图
└── mkdocs.yml                     # 文档站点配置

6.2 自动化文档生成

在 OpenClaw 的 mkdocs.yml 中配置：

yaml 复制代码

markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format

6.3 开发规范建议

图表命名规范 ：使用有意义的文件名，如 user-auth-sequence.mmd
版本控制：Mermaid 文件随代码一起提交
文档同步：图表更新后及时更新相关文档
团队培训：确保团队成员掌握 Mermaid 基础语法

7. 高级应用技巧

7.1 自定义样式

#mermaid-svg-9632DJUgVxVrpnqn{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-9632DJUgVxVrpnqn .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-9632DJUgVxVrpnqn .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-9632DJUgVxVrpnqn .error-icon{fill:#552222;}#mermaid-svg-9632DJUgVxVrpnqn .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-9632DJUgVxVrpnqn .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-9632DJUgVxVrpnqn .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-9632DJUgVxVrpnqn .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-9632DJUgVxVrpnqn .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-9632DJUgVxVrpnqn .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-9632DJUgVxVrpnqn .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-9632DJUgVxVrpnqn .marker{fill:#333333;stroke:#333333;}#mermaid-svg-9632DJUgVxVrpnqn .marker.cross{stroke:#333333;}#mermaid-svg-9632DJUgVxVrpnqn svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-9632DJUgVxVrpnqn p{margin:0;}#mermaid-svg-9632DJUgVxVrpnqn .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-9632DJUgVxVrpnqn .cluster-label text{fill:#333;}#mermaid-svg-9632DJUgVxVrpnqn .cluster-label span{color:#333;}#mermaid-svg-9632DJUgVxVrpnqn .cluster-label span p{background-color:transparent;}#mermaid-svg-9632DJUgVxVrpnqn .label text,#mermaid-svg-9632DJUgVxVrpnqn span{fill:#333;color:#333;}#mermaid-svg-9632DJUgVxVrpnqn .node rect,#mermaid-svg-9632DJUgVxVrpnqn .node circle,#mermaid-svg-9632DJUgVxVrpnqn .node ellipse,#mermaid-svg-9632DJUgVxVrpnqn .node polygon,#mermaid-svg-9632DJUgVxVrpnqn .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-9632DJUgVxVrpnqn .rough-node .label text,#mermaid-svg-9632DJUgVxVrpnqn .node .label text,#mermaid-svg-9632DJUgVxVrpnqn .image-shape .label,#mermaid-svg-9632DJUgVxVrpnqn .icon-shape .label{text-anchor:middle;}#mermaid-svg-9632DJUgVxVrpnqn .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-9632DJUgVxVrpnqn .rough-node .label,#mermaid-svg-9632DJUgVxVrpnqn .node .label,#mermaid-svg-9632DJUgVxVrpnqn .image-shape .label,#mermaid-svg-9632DJUgVxVrpnqn .icon-shape .label{text-align:center;}#mermaid-svg-9632DJUgVxVrpnqn .node.clickable{cursor:pointer;}#mermaid-svg-9632DJUgVxVrpnqn .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-9632DJUgVxVrpnqn .arrowheadPath{fill:#333333;}#mermaid-svg-9632DJUgVxVrpnqn .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-9632DJUgVxVrpnqn .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-9632DJUgVxVrpnqn .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-9632DJUgVxVrpnqn .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-9632DJUgVxVrpnqn .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-9632DJUgVxVrpnqn .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-9632DJUgVxVrpnqn .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-9632DJUgVxVrpnqn .cluster text{fill:#333;}#mermaid-svg-9632DJUgVxVrpnqn .cluster span{color:#333;}#mermaid-svg-9632DJUgVxVrpnqn div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-9632DJUgVxVrpnqn .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-9632DJUgVxVrpnqn rect.text{fill:none;stroke-width:0;}#mermaid-svg-9632DJUgVxVrpnqn .icon-shape,#mermaid-svg-9632DJUgVxVrpnqn .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-9632DJUgVxVrpnqn .icon-shape p,#mermaid-svg-9632DJUgVxVrpnqn .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-9632DJUgVxVrpnqn .icon-shape .label rect,#mermaid-svg-9632DJUgVxVrpnqn .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-9632DJUgVxVrpnqn .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-9632DJUgVxVrpnqn .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-9632DJUgVxVrpnqn :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-9632DJUgVxVrpnqn .start>*{fill:#e1f5fe!important;stroke:#01579b!important;stroke-width:2px!important;}#mermaid-svg-9632DJUgVxVrpnqn .start span{fill:#e1f5fe!important;stroke:#01579b!important;stroke-width:2px!important;}#mermaid-svg-9632DJUgVxVrpnqn .decision>*{fill:#fff3e0!important;stroke:#ef6c00!important;stroke-width:2px!important;}#mermaid-svg-9632DJUgVxVrpnqn .decision span{fill:#fff3e0!important;stroke:#ef6c00!important;stroke-width:2px!important;}#mermaid-svg-9632DJUgVxVrpnqn .action>*{fill:#e8f5e8!important;stroke:#2e7d32!important;stroke-width:2px!important;}#mermaid-svg-9632DJUgVxVrpnqn .action span{fill:#e8f5e8!important;stroke:#2e7d32!important;stroke-width:2px!important;} 条件1
条件2
开始
判断
操作A
操作B

7.2 交互式图表

结合 JavaScript 实现动态效果：

html 复制代码

<!-- 在 OpenClaw 管理后台中嵌入 -->
<div class="mermaid">
graph TD
    A[点击查看详情] --> B[用户管理]
    A --> C[订单管理]
    A --> D[系统设置]
    
    click A "https://openclaw.example.com/admin"
    click B "https://openclaw.example.com/admin/users"
    click C "https://openclaw.example.com/admin/orders"
    click D "https://openclaw.example.com/admin/settings"
</div>

8. 常见问题与解决方案

8.1 图表渲染问题

问题	原因	解决方案
图表不显示	Mermaid 库未加载	确保页面引入 Mermaid.js
中文乱码	字体配置问题	配置中文字体或使用 Unicode
布局错乱	节点过多	使用 subgraph 分组或调整方向

8.2 性能优化建议

大型图表分拆：将复杂图表拆分为多个小图
懒加载：只在需要时渲染图表
缓存机制：对生成的 SVG 进行缓存

9. 总结

Mermaid 在 OpenClaw 开发中的应用显著提升了文档质量和团队协作效率。通过将架构图、流程图、序列图等可视化内容以代码形式管理，实现了：

文档与代码同步：图表随代码一起版本控制
协作效率提升：减少沟通成本，明确系统设计
维护成本降低：文本格式易于修改和扩展
自动化集成：完美融入 CI/CD 流程

建议 OpenClaw 开发团队将 Mermaid 作为标准文档工具，建立相应的规范和最佳实践，充分发挥其在项目开发中的价值。