Mermaid 图表完全指南：从文本语法到LangGraph4j工作流可视化实战

霸道流氓气质2026-09-29 11:44

Mermaid 图表完全指南：从文本语法到LangGraph4j工作流可视化实战

本文面向Java开发者，系统介绍Mermaid的核心概念、语法规则、图表类型，以及LangGraph4j对Mermaid的原生支持机制与完整使用示例，帮助你用纯文本轻松绘制工作流图表。

一、Mermaid 是什么

1.1 一句话定义

Mermaid 是一个基于 JavaScript 的图表绘制工具，它让你用纯文本描述图表，由渲染器动态生成可视化图形。它的语法灵感来自 Markdown，如果你熟悉 Markdown，学习 Mermaid 几乎没有门槛。

1.2 解决什么问题

传统图表绘制依赖图形界面工具（如 Visio、Draw.io），存在三个痛点：

痛点 传统工具 Mermaid
版本控制 二进制文件，无法 diff 纯文本，Git 友好
协作修改 需打开工具手动改 直接编辑文本
维护成本 图与文档分离，容易过期 嵌入 Markdown，随文档更新

Mermaid 的核心价值：让图表像代码一样被版本控制、协作编辑和自动化生成。

1.3 为什么 Java 开发者需要关注

  • LangGraph4j 原生支持 Mermaid 输出：工作流定义可一键导出为 Mermaid 图，直观查看节点拓扑
  • Markdown 广泛支持：GitHub、GitLab、Azure DevOps Wiki 都原生渲染 Mermaid
  • AI 辅助编程友好：AI 生成的 Mermaid 图可直接嵌入技术文档

注：

博客：

https://blog.csdn.net/badao_liumang_qizhi

二、Mermaid 支持的图表类型（22种）

Mermaid 目前支持 22 种图表语法，其中 6 种最常用且稳定：

序号 图表类型 语法关键字 状态 典型用途
1 流程图 flowchart / graph 稳定 工作流、架构图
2 时序图 sequenceDiagram 稳定 API 调用流程
3 类图 classDiagram 稳定 系统设计
4 状态图 stateDiagram-v2 推荐 状态机、Agent 流程
5 实体关系图 erDiagram 稳定 数据库设计
6 甘特图 gantt 稳定 项目排期

其他图表类型（饼图、四象限图、Git 图、思维导图、时间线、桑基图等）处于 Beta 或实验阶段。

三、核心语法速成（5分钟掌握）

3.1 流程图（Flowchart）

流程图是 Mermaid 最常用的图表类型，也是 LangGraph4j 输出的格式。

基础语法：
#mermaid-svg-a1nlTQ90iT0kobdx{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-a1nlTQ90iT0kobdx .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-a1nlTQ90iT0kobdx .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-a1nlTQ90iT0kobdx .error-icon{fill:#552222;}#mermaid-svg-a1nlTQ90iT0kobdx .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-a1nlTQ90iT0kobdx .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-a1nlTQ90iT0kobdx .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-a1nlTQ90iT0kobdx .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-a1nlTQ90iT0kobdx .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-a1nlTQ90iT0kobdx .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-a1nlTQ90iT0kobdx .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-a1nlTQ90iT0kobdx .marker{fill:#333333;stroke:#333333;}#mermaid-svg-a1nlTQ90iT0kobdx .marker.cross{stroke:#333333;}#mermaid-svg-a1nlTQ90iT0kobdx svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-a1nlTQ90iT0kobdx p{margin:0;}#mermaid-svg-a1nlTQ90iT0kobdx .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-a1nlTQ90iT0kobdx .cluster-label text{fill:#333;}#mermaid-svg-a1nlTQ90iT0kobdx .cluster-label span{color:#333;}#mermaid-svg-a1nlTQ90iT0kobdx .cluster-label span p{background-color:transparent;}#mermaid-svg-a1nlTQ90iT0kobdx .label text,#mermaid-svg-a1nlTQ90iT0kobdx span{fill:#333;color:#333;}#mermaid-svg-a1nlTQ90iT0kobdx .node rect,#mermaid-svg-a1nlTQ90iT0kobdx .node circle,#mermaid-svg-a1nlTQ90iT0kobdx .node ellipse,#mermaid-svg-a1nlTQ90iT0kobdx .node polygon,#mermaid-svg-a1nlTQ90iT0kobdx .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-a1nlTQ90iT0kobdx .rough-node .label text,#mermaid-svg-a1nlTQ90iT0kobdx .node .label text,#mermaid-svg-a1nlTQ90iT0kobdx .image-shape .label,#mermaid-svg-a1nlTQ90iT0kobdx .icon-shape .label{text-anchor:middle;}#mermaid-svg-a1nlTQ90iT0kobdx .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-a1nlTQ90iT0kobdx .rough-node .label,#mermaid-svg-a1nlTQ90iT0kobdx .node .label,#mermaid-svg-a1nlTQ90iT0kobdx .image-shape .label,#mermaid-svg-a1nlTQ90iT0kobdx .icon-shape .label{text-align:center;}#mermaid-svg-a1nlTQ90iT0kobdx .node.clickable{cursor:pointer;}#mermaid-svg-a1nlTQ90iT0kobdx .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-a1nlTQ90iT0kobdx .arrowheadPath{fill:#333333;}#mermaid-svg-a1nlTQ90iT0kobdx .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-a1nlTQ90iT0kobdx .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-a1nlTQ90iT0kobdx .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-a1nlTQ90iT0kobdx .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-a1nlTQ90iT0kobdx .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-a1nlTQ90iT0kobdx .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-a1nlTQ90iT0kobdx .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-a1nlTQ90iT0kobdx .cluster text{fill:#333;}#mermaid-svg-a1nlTQ90iT0kobdx .cluster span{color:#333;}#mermaid-svg-a1nlTQ90iT0kobdx 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-a1nlTQ90iT0kobdx .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-a1nlTQ90iT0kobdx rect.text{fill:none;stroke-width:0;}#mermaid-svg-a1nlTQ90iT0kobdx .icon-shape,#mermaid-svg-a1nlTQ90iT0kobdx .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-a1nlTQ90iT0kobdx .icon-shape p,#mermaid-svg-a1nlTQ90iT0kobdx .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-a1nlTQ90iT0kobdx .icon-shape .label rect,#mermaid-svg-a1nlTQ90iT0kobdx .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-a1nlTQ90iT0kobdx .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-a1nlTQ90iT0kobdx .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-a1nlTQ90iT0kobdx :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 条件1
条件2
矩形节点
菱形判断
结果1
结果2

语法说明：

语法 含义
flowchart TD 从上到下（Top-Down）；LR 从左到右
A[文本] 矩形节点
B{文本} 菱形判断节点
C(文本) 圆角矩形节点
--> 带箭头连线
`--> 文本

节点类型：
#mermaid-svg-6PLUpmWFaHMPQgZr{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-6PLUpmWFaHMPQgZr .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-6PLUpmWFaHMPQgZr .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-6PLUpmWFaHMPQgZr .error-icon{fill:#552222;}#mermaid-svg-6PLUpmWFaHMPQgZr .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-6PLUpmWFaHMPQgZr .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-6PLUpmWFaHMPQgZr .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-6PLUpmWFaHMPQgZr .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-6PLUpmWFaHMPQgZr .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-6PLUpmWFaHMPQgZr .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-6PLUpmWFaHMPQgZr .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-6PLUpmWFaHMPQgZr .marker{fill:#333333;stroke:#333333;}#mermaid-svg-6PLUpmWFaHMPQgZr .marker.cross{stroke:#333333;}#mermaid-svg-6PLUpmWFaHMPQgZr svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-6PLUpmWFaHMPQgZr p{margin:0;}#mermaid-svg-6PLUpmWFaHMPQgZr .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-6PLUpmWFaHMPQgZr .cluster-label text{fill:#333;}#mermaid-svg-6PLUpmWFaHMPQgZr .cluster-label span{color:#333;}#mermaid-svg-6PLUpmWFaHMPQgZr .cluster-label span p{background-color:transparent;}#mermaid-svg-6PLUpmWFaHMPQgZr .label text,#mermaid-svg-6PLUpmWFaHMPQgZr span{fill:#333;color:#333;}#mermaid-svg-6PLUpmWFaHMPQgZr .node rect,#mermaid-svg-6PLUpmWFaHMPQgZr .node circle,#mermaid-svg-6PLUpmWFaHMPQgZr .node ellipse,#mermaid-svg-6PLUpmWFaHMPQgZr .node polygon,#mermaid-svg-6PLUpmWFaHMPQgZr .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-6PLUpmWFaHMPQgZr .rough-node .label text,#mermaid-svg-6PLUpmWFaHMPQgZr .node .label text,#mermaid-svg-6PLUpmWFaHMPQgZr .image-shape .label,#mermaid-svg-6PLUpmWFaHMPQgZr .icon-shape .label{text-anchor:middle;}#mermaid-svg-6PLUpmWFaHMPQgZr .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-6PLUpmWFaHMPQgZr .rough-node .label,#mermaid-svg-6PLUpmWFaHMPQgZr .node .label,#mermaid-svg-6PLUpmWFaHMPQgZr .image-shape .label,#mermaid-svg-6PLUpmWFaHMPQgZr .icon-shape .label{text-align:center;}#mermaid-svg-6PLUpmWFaHMPQgZr .node.clickable{cursor:pointer;}#mermaid-svg-6PLUpmWFaHMPQgZr .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-6PLUpmWFaHMPQgZr .arrowheadPath{fill:#333333;}#mermaid-svg-6PLUpmWFaHMPQgZr .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-6PLUpmWFaHMPQgZr .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-6PLUpmWFaHMPQgZr .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-6PLUpmWFaHMPQgZr .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-6PLUpmWFaHMPQgZr .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-6PLUpmWFaHMPQgZr .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-6PLUpmWFaHMPQgZr .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-6PLUpmWFaHMPQgZr .cluster text{fill:#333;}#mermaid-svg-6PLUpmWFaHMPQgZr .cluster span{color:#333;}#mermaid-svg-6PLUpmWFaHMPQgZr 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-6PLUpmWFaHMPQgZr .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-6PLUpmWFaHMPQgZr rect.text{fill:none;stroke-width:0;}#mermaid-svg-6PLUpmWFaHMPQgZr .icon-shape,#mermaid-svg-6PLUpmWFaHMPQgZr .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-6PLUpmWFaHMPQgZr .icon-shape p,#mermaid-svg-6PLUpmWFaHMPQgZr .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-6PLUpmWFaHMPQgZr .icon-shape .label rect,#mermaid-svg-6PLUpmWFaHMPQgZr .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-6PLUpmWFaHMPQgZr .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-6PLUpmWFaHMPQgZr .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-6PLUpmWFaHMPQgZr :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 矩形
圆角
体育场形
子程序
数据库
圆形

子图（Subgraph） ：
#mermaid-svg-TREqVM5Z2dLDhejo{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-TREqVM5Z2dLDhejo .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-TREqVM5Z2dLDhejo .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-TREqVM5Z2dLDhejo .error-icon{fill:#552222;}#mermaid-svg-TREqVM5Z2dLDhejo .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-TREqVM5Z2dLDhejo .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-TREqVM5Z2dLDhejo .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-TREqVM5Z2dLDhejo .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-TREqVM5Z2dLDhejo .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-TREqVM5Z2dLDhejo .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-TREqVM5Z2dLDhejo .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-TREqVM5Z2dLDhejo .marker{fill:#333333;stroke:#333333;}#mermaid-svg-TREqVM5Z2dLDhejo .marker.cross{stroke:#333333;}#mermaid-svg-TREqVM5Z2dLDhejo svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-TREqVM5Z2dLDhejo p{margin:0;}#mermaid-svg-TREqVM5Z2dLDhejo .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-TREqVM5Z2dLDhejo .cluster-label text{fill:#333;}#mermaid-svg-TREqVM5Z2dLDhejo .cluster-label span{color:#333;}#mermaid-svg-TREqVM5Z2dLDhejo .cluster-label span p{background-color:transparent;}#mermaid-svg-TREqVM5Z2dLDhejo .label text,#mermaid-svg-TREqVM5Z2dLDhejo span{fill:#333;color:#333;}#mermaid-svg-TREqVM5Z2dLDhejo .node rect,#mermaid-svg-TREqVM5Z2dLDhejo .node circle,#mermaid-svg-TREqVM5Z2dLDhejo .node ellipse,#mermaid-svg-TREqVM5Z2dLDhejo .node polygon,#mermaid-svg-TREqVM5Z2dLDhejo .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-TREqVM5Z2dLDhejo .rough-node .label text,#mermaid-svg-TREqVM5Z2dLDhejo .node .label text,#mermaid-svg-TREqVM5Z2dLDhejo .image-shape .label,#mermaid-svg-TREqVM5Z2dLDhejo .icon-shape .label{text-anchor:middle;}#mermaid-svg-TREqVM5Z2dLDhejo .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-TREqVM5Z2dLDhejo .rough-node .label,#mermaid-svg-TREqVM5Z2dLDhejo .node .label,#mermaid-svg-TREqVM5Z2dLDhejo .image-shape .label,#mermaid-svg-TREqVM5Z2dLDhejo .icon-shape .label{text-align:center;}#mermaid-svg-TREqVM5Z2dLDhejo .node.clickable{cursor:pointer;}#mermaid-svg-TREqVM5Z2dLDhejo .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-TREqVM5Z2dLDhejo .arrowheadPath{fill:#333333;}#mermaid-svg-TREqVM5Z2dLDhejo .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-TREqVM5Z2dLDhejo .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-TREqVM5Z2dLDhejo .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-TREqVM5Z2dLDhejo .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-TREqVM5Z2dLDhejo .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-TREqVM5Z2dLDhejo .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-TREqVM5Z2dLDhejo .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-TREqVM5Z2dLDhejo .cluster text{fill:#333;}#mermaid-svg-TREqVM5Z2dLDhejo .cluster span{color:#333;}#mermaid-svg-TREqVM5Z2dLDhejo 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-TREqVM5Z2dLDhejo .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-TREqVM5Z2dLDhejo rect.text{fill:none;stroke-width:0;}#mermaid-svg-TREqVM5Z2dLDhejo .icon-shape,#mermaid-svg-TREqVM5Z2dLDhejo .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-TREqVM5Z2dLDhejo .icon-shape p,#mermaid-svg-TREqVM5Z2dLDhejo .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-TREqVM5Z2dLDhejo .icon-shape .label rect,#mermaid-svg-TREqVM5Z2dLDhejo .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-TREqVM5Z2dLDhejo .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-TREqVM5Z2dLDhejo .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-TREqVM5Z2dLDhejo :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 服务端
用户端
浏览器
移动端
API网关
业务服务

样式自定义：
#mermaid-svg-gVQd9typzthh8gVD{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-gVQd9typzthh8gVD .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-gVQd9typzthh8gVD .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-gVQd9typzthh8gVD .error-icon{fill:#552222;}#mermaid-svg-gVQd9typzthh8gVD .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-gVQd9typzthh8gVD .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-gVQd9typzthh8gVD .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-gVQd9typzthh8gVD .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-gVQd9typzthh8gVD .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-gVQd9typzthh8gVD .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-gVQd9typzthh8gVD .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-gVQd9typzthh8gVD .marker{fill:#333333;stroke:#333333;}#mermaid-svg-gVQd9typzthh8gVD .marker.cross{stroke:#333333;}#mermaid-svg-gVQd9typzthh8gVD svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-gVQd9typzthh8gVD p{margin:0;}#mermaid-svg-gVQd9typzthh8gVD .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-gVQd9typzthh8gVD .cluster-label text{fill:#333;}#mermaid-svg-gVQd9typzthh8gVD .cluster-label span{color:#333;}#mermaid-svg-gVQd9typzthh8gVD .cluster-label span p{background-color:transparent;}#mermaid-svg-gVQd9typzthh8gVD .label text,#mermaid-svg-gVQd9typzthh8gVD span{fill:#333;color:#333;}#mermaid-svg-gVQd9typzthh8gVD .node rect,#mermaid-svg-gVQd9typzthh8gVD .node circle,#mermaid-svg-gVQd9typzthh8gVD .node ellipse,#mermaid-svg-gVQd9typzthh8gVD .node polygon,#mermaid-svg-gVQd9typzthh8gVD .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-gVQd9typzthh8gVD .rough-node .label text,#mermaid-svg-gVQd9typzthh8gVD .node .label text,#mermaid-svg-gVQd9typzthh8gVD .image-shape .label,#mermaid-svg-gVQd9typzthh8gVD .icon-shape .label{text-anchor:middle;}#mermaid-svg-gVQd9typzthh8gVD .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-gVQd9typzthh8gVD .rough-node .label,#mermaid-svg-gVQd9typzthh8gVD .node .label,#mermaid-svg-gVQd9typzthh8gVD .image-shape .label,#mermaid-svg-gVQd9typzthh8gVD .icon-shape .label{text-align:center;}#mermaid-svg-gVQd9typzthh8gVD .node.clickable{cursor:pointer;}#mermaid-svg-gVQd9typzthh8gVD .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-gVQd9typzthh8gVD .arrowheadPath{fill:#333333;}#mermaid-svg-gVQd9typzthh8gVD .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-gVQd9typzthh8gVD .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-gVQd9typzthh8gVD .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-gVQd9typzthh8gVD .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-gVQd9typzthh8gVD .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-gVQd9typzthh8gVD .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-gVQd9typzthh8gVD .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-gVQd9typzthh8gVD .cluster text{fill:#333;}#mermaid-svg-gVQd9typzthh8gVD .cluster span{color:#333;}#mermaid-svg-gVQd9typzthh8gVD 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-gVQd9typzthh8gVD .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-gVQd9typzthh8gVD rect.text{fill:none;stroke-width:0;}#mermaid-svg-gVQd9typzthh8gVD .icon-shape,#mermaid-svg-gVQd9typzthh8gVD .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-gVQd9typzthh8gVD .icon-shape p,#mermaid-svg-gVQd9typzthh8gVD .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-gVQd9typzthh8gVD .icon-shape .label rect,#mermaid-svg-gVQd9typzthh8gVD .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-gVQd9typzthh8gVD .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-gVQd9typzthh8gVD .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-gVQd9typzthh8gVD :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-gVQd9typzthh8gVD .normal>*{fill:#f9f9f9!important;stroke:#333!important;}#mermaid-svg-gVQd9typzthh8gVD .normal span{fill:#f9f9f9!important;stroke:#333!important;}#mermaid-svg-gVQd9typzthh8gVD .highlight>*{fill:#ff6b6b!important;stroke:#333!important;color:#fff!important;}#mermaid-svg-gVQd9typzthh8gVD .highlight span{fill:#ff6b6b!important;stroke:#333!important;color:#fff!important;}#mermaid-svg-gVQd9typzthh8gVD .highlight tspan{fill:#fff!important;} 普通节点
高亮节点

3.2 状态图（State Diagram）

状态图特别适合描述 Agent 工作流 和状态机，也是 LangGraph4j 的可选输出格式。
#mermaid-svg-e06mihotiiq1NXxQ{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-e06mihotiiq1NXxQ .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-e06mihotiiq1NXxQ .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-e06mihotiiq1NXxQ .error-icon{fill:#552222;}#mermaid-svg-e06mihotiiq1NXxQ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-e06mihotiiq1NXxQ .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-e06mihotiiq1NXxQ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-e06mihotiiq1NXxQ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-e06mihotiiq1NXxQ .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-e06mihotiiq1NXxQ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-e06mihotiiq1NXxQ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-e06mihotiiq1NXxQ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-e06mihotiiq1NXxQ .marker.cross{stroke:#333333;}#mermaid-svg-e06mihotiiq1NXxQ svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-e06mihotiiq1NXxQ p{margin:0;}#mermaid-svg-e06mihotiiq1NXxQ defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-e06mihotiiq1NXxQ g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-e06mihotiiq1NXxQ g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-e06mihotiiq1NXxQ g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-e06mihotiiq1NXxQ g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-e06mihotiiq1NXxQ g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-e06mihotiiq1NXxQ .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-e06mihotiiq1NXxQ .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-e06mihotiiq1NXxQ .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-e06mihotiiq1NXxQ .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-e06mihotiiq1NXxQ .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-e06mihotiiq1NXxQ .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-e06mihotiiq1NXxQ .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-e06mihotiiq1NXxQ .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-e06mihotiiq1NXxQ .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-e06mihotiiq1NXxQ .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-e06mihotiiq1NXxQ .edgeLabel .label text{fill:#333;}#mermaid-svg-e06mihotiiq1NXxQ .label div .edgeLabel{color:#333;}#mermaid-svg-e06mihotiiq1NXxQ .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-e06mihotiiq1NXxQ .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-e06mihotiiq1NXxQ .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-e06mihotiiq1NXxQ .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-e06mihotiiq1NXxQ .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-e06mihotiiq1NXxQ .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-e06mihotiiq1NXxQ .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-e06mihotiiq1NXxQ #statediagram-barbEnd{fill:#333333;}#mermaid-svg-e06mihotiiq1NXxQ .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-e06mihotiiq1NXxQ .cluster-label,#mermaid-svg-e06mihotiiq1NXxQ .nodeLabel{color:#131300;}#mermaid-svg-e06mihotiiq1NXxQ .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-e06mihotiiq1NXxQ .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-e06mihotiiq1NXxQ .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-e06mihotiiq1NXxQ .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-e06mihotiiq1NXxQ .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-e06mihotiiq1NXxQ .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-e06mihotiiq1NXxQ .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-e06mihotiiq1NXxQ .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-e06mihotiiq1NXxQ .note-edge{stroke-dasharray:5;}#mermaid-svg-e06mihotiiq1NXxQ .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-e06mihotiiq1NXxQ .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-e06mihotiiq1NXxQ .statediagram-note text{fill:black;}#mermaid-svg-e06mihotiiq1NXxQ .statediagram-note .nodeLabel{color:black;}#mermaid-svg-e06mihotiiq1NXxQ .statediagram .edgeLabel{color:red;}#mermaid-svg-e06mihotiiq1NXxQ #dependencyStart,#mermaid-svg-e06mihotiiq1NXxQ #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-e06mihotiiq1NXxQ .statediagramTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-e06mihotiiq1NXxQ :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 开始处理
成功
异常
重试
待处理
处理中
已完成
失败

关键语法：

语法 含义
[*] 起始/结束状态
state "描述" as id 带描述的状态
<<choice>> 选择节点
<<fork>> / <<join>> 分叉/汇合

选择分支：
#mermaid-svg-Yi5rB9B9n9FJsD27{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-Yi5rB9B9n9FJsD27 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-Yi5rB9B9n9FJsD27 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-Yi5rB9B9n9FJsD27 .error-icon{fill:#552222;}#mermaid-svg-Yi5rB9B9n9FJsD27 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Yi5rB9B9n9FJsD27 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-Yi5rB9B9n9FJsD27 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Yi5rB9B9n9FJsD27 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Yi5rB9B9n9FJsD27 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-Yi5rB9B9n9FJsD27 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Yi5rB9B9n9FJsD27 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Yi5rB9B9n9FJsD27 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Yi5rB9B9n9FJsD27 .marker.cross{stroke:#333333;}#mermaid-svg-Yi5rB9B9n9FJsD27 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Yi5rB9B9n9FJsD27 p{margin:0;}#mermaid-svg-Yi5rB9B9n9FJsD27 defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-Yi5rB9B9n9FJsD27 g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-Yi5rB9B9n9FJsD27 g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-Yi5rB9B9n9FJsD27 g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-Yi5rB9B9n9FJsD27 g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-Yi5rB9B9n9FJsD27 g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-Yi5rB9B9n9FJsD27 .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-Yi5rB9B9n9FJsD27 .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-Yi5rB9B9n9FJsD27 .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-Yi5rB9B9n9FJsD27 .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-Yi5rB9B9n9FJsD27 .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-Yi5rB9B9n9FJsD27 .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-Yi5rB9B9n9FJsD27 .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-Yi5rB9B9n9FJsD27 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Yi5rB9B9n9FJsD27 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-Yi5rB9B9n9FJsD27 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Yi5rB9B9n9FJsD27 .edgeLabel .label text{fill:#333;}#mermaid-svg-Yi5rB9B9n9FJsD27 .label div .edgeLabel{color:#333;}#mermaid-svg-Yi5rB9B9n9FJsD27 .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-Yi5rB9B9n9FJsD27 .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-Yi5rB9B9n9FJsD27 .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-Yi5rB9B9n9FJsD27 .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-Yi5rB9B9n9FJsD27 .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-Yi5rB9B9n9FJsD27 .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Yi5rB9B9n9FJsD27 .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Yi5rB9B9n9FJsD27 #statediagram-barbEnd{fill:#333333;}#mermaid-svg-Yi5rB9B9n9FJsD27 .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Yi5rB9B9n9FJsD27 .cluster-label,#mermaid-svg-Yi5rB9B9n9FJsD27 .nodeLabel{color:#131300;}#mermaid-svg-Yi5rB9B9n9FJsD27 .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-Yi5rB9B9n9FJsD27 .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-Yi5rB9B9n9FJsD27 .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-Yi5rB9B9n9FJsD27 .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-Yi5rB9B9n9FJsD27 .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-Yi5rB9B9n9FJsD27 .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-Yi5rB9B9n9FJsD27 .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-Yi5rB9B9n9FJsD27 .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-Yi5rB9B9n9FJsD27 .note-edge{stroke-dasharray:5;}#mermaid-svg-Yi5rB9B9n9FJsD27 .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-Yi5rB9B9n9FJsD27 .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-Yi5rB9B9n9FJsD27 .statediagram-note text{fill:black;}#mermaid-svg-Yi5rB9B9n9FJsD27 .statediagram-note .nodeLabel{color:black;}#mermaid-svg-Yi5rB9B9n9FJsD27 .statediagram .edgeLabel{color:red;}#mermaid-svg-Yi5rB9B9n9FJsD27 #dependencyStart,#mermaid-svg-Yi5rB9B9n9FJsD27 #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-Yi5rB9B9n9FJsD27 .statediagramTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-Yi5rB9B9n9FJsD27 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 条件满足
条件不满足
通过
拒绝

3.3 时序图（Sequence Diagram）

时序图描述系统间的交互流程，适合 API 调用链。
数据库 后端 前端 用户 数据库 后端 前端 用户 #mermaid-svg-2E2WVSGgokGIDPod{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-2E2WVSGgokGIDPod .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-2E2WVSGgokGIDPod .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-2E2WVSGgokGIDPod .error-icon{fill:#552222;}#mermaid-svg-2E2WVSGgokGIDPod .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-2E2WVSGgokGIDPod .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-2E2WVSGgokGIDPod .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-2E2WVSGgokGIDPod .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-2E2WVSGgokGIDPod .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-2E2WVSGgokGIDPod .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-2E2WVSGgokGIDPod .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-2E2WVSGgokGIDPod .marker{fill:#333333;stroke:#333333;}#mermaid-svg-2E2WVSGgokGIDPod .marker.cross{stroke:#333333;}#mermaid-svg-2E2WVSGgokGIDPod svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-2E2WVSGgokGIDPod p{margin:0;}#mermaid-svg-2E2WVSGgokGIDPod .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-2E2WVSGgokGIDPod text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-2E2WVSGgokGIDPod .actor-line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-2E2WVSGgokGIDPod .innerArc{stroke-width:1.5;stroke-dasharray:none;}#mermaid-svg-2E2WVSGgokGIDPod .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-2E2WVSGgokGIDPod .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-2E2WVSGgokGIDPod #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-2E2WVSGgokGIDPod .sequenceNumber{fill:white;}#mermaid-svg-2E2WVSGgokGIDPod #sequencenumber{fill:#333;}#mermaid-svg-2E2WVSGgokGIDPod #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-2E2WVSGgokGIDPod .messageText{fill:#333;stroke:none;}#mermaid-svg-2E2WVSGgokGIDPod .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-2E2WVSGgokGIDPod .labelText,#mermaid-svg-2E2WVSGgokGIDPod .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-2E2WVSGgokGIDPod .loopText,#mermaid-svg-2E2WVSGgokGIDPod .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-2E2WVSGgokGIDPod .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-2E2WVSGgokGIDPod .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-2E2WVSGgokGIDPod .noteText,#mermaid-svg-2E2WVSGgokGIDPod .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-2E2WVSGgokGIDPod .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-2E2WVSGgokGIDPod .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-2E2WVSGgokGIDPod .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-2E2WVSGgokGIDPod .actorPopupMenu{position:absolute;}#mermaid-svg-2E2WVSGgokGIDPod .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-2E2WVSGgokGIDPod .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-2E2WVSGgokGIDPod .actor-man circle,#mermaid-svg-2E2WVSGgokGIDPod line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-2E2WVSGgokGIDPod :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 点击查询 GET /api/orders SELECT * FROM orders 订单数据 JSON 响应 展示结果

消息箭头类型：

箭头 含义
-> 实线无箭头
->> 实线带箭头
-->> 虚线带箭头
-x 实线带叉号

循环与条件：
服务器 客户端 服务器 客户端 #mermaid-svg-jAYGg9bmKTEGweNb{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-jAYGg9bmKTEGweNb .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-jAYGg9bmKTEGweNb .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-jAYGg9bmKTEGweNb .error-icon{fill:#552222;}#mermaid-svg-jAYGg9bmKTEGweNb .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-jAYGg9bmKTEGweNb .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-jAYGg9bmKTEGweNb .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-jAYGg9bmKTEGweNb .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-jAYGg9bmKTEGweNb .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-jAYGg9bmKTEGweNb .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-jAYGg9bmKTEGweNb .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-jAYGg9bmKTEGweNb .marker{fill:#333333;stroke:#333333;}#mermaid-svg-jAYGg9bmKTEGweNb .marker.cross{stroke:#333333;}#mermaid-svg-jAYGg9bmKTEGweNb svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-jAYGg9bmKTEGweNb p{margin:0;}#mermaid-svg-jAYGg9bmKTEGweNb .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-jAYGg9bmKTEGweNb text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-jAYGg9bmKTEGweNb .actor-line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-jAYGg9bmKTEGweNb .innerArc{stroke-width:1.5;stroke-dasharray:none;}#mermaid-svg-jAYGg9bmKTEGweNb .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-jAYGg9bmKTEGweNb .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-jAYGg9bmKTEGweNb #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-jAYGg9bmKTEGweNb .sequenceNumber{fill:white;}#mermaid-svg-jAYGg9bmKTEGweNb #sequencenumber{fill:#333;}#mermaid-svg-jAYGg9bmKTEGweNb #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-jAYGg9bmKTEGweNb .messageText{fill:#333;stroke:none;}#mermaid-svg-jAYGg9bmKTEGweNb .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-jAYGg9bmKTEGweNb .labelText,#mermaid-svg-jAYGg9bmKTEGweNb .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-jAYGg9bmKTEGweNb .loopText,#mermaid-svg-jAYGg9bmKTEGweNb .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-jAYGg9bmKTEGweNb .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-jAYGg9bmKTEGweNb .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-jAYGg9bmKTEGweNb .noteText,#mermaid-svg-jAYGg9bmKTEGweNb .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-jAYGg9bmKTEGweNb .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-jAYGg9bmKTEGweNb .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-jAYGg9bmKTEGweNb .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-jAYGg9bmKTEGweNb .actorPopupMenu{position:absolute;}#mermaid-svg-jAYGg9bmKTEGweNb .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-jAYGg9bmKTEGweNb .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-jAYGg9bmKTEGweNb .actor-man circle,#mermaid-svg-jAYGg9bmKTEGweNb line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-jAYGg9bmKTEGweNb :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} loop 每秒轮询 alt 成功 失败 检查状态 状态响应 提交结果 重试

3.4 类图（Class Diagram）

#mermaid-svg-XjejJdbvdn64rURB{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-XjejJdbvdn64rURB .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-XjejJdbvdn64rURB .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-XjejJdbvdn64rURB .error-icon{fill:#552222;}#mermaid-svg-XjejJdbvdn64rURB .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-XjejJdbvdn64rURB .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-XjejJdbvdn64rURB .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-XjejJdbvdn64rURB .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-XjejJdbvdn64rURB .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-XjejJdbvdn64rURB .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-XjejJdbvdn64rURB .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-XjejJdbvdn64rURB .marker{fill:#333333;stroke:#333333;}#mermaid-svg-XjejJdbvdn64rURB .marker.cross{stroke:#333333;}#mermaid-svg-XjejJdbvdn64rURB svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-XjejJdbvdn64rURB p{margin:0;}#mermaid-svg-XjejJdbvdn64rURB g.classGroup text{fill:#9370DB;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-XjejJdbvdn64rURB g.classGroup text .title{font-weight:bolder;}#mermaid-svg-XjejJdbvdn64rURB .cluster-label text{fill:#333;}#mermaid-svg-XjejJdbvdn64rURB .cluster-label span{color:#333;}#mermaid-svg-XjejJdbvdn64rURB .cluster-label span p{background-color:transparent;}#mermaid-svg-XjejJdbvdn64rURB .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-XjejJdbvdn64rURB .cluster text{fill:#333;}#mermaid-svg-XjejJdbvdn64rURB .cluster span{color:#333;}#mermaid-svg-XjejJdbvdn64rURB .nodeLabel,#mermaid-svg-XjejJdbvdn64rURB .edgeLabel{color:#131300;}#mermaid-svg-XjejJdbvdn64rURB .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-XjejJdbvdn64rURB .label text{fill:#131300;}#mermaid-svg-XjejJdbvdn64rURB .labelBkg{background:#ECECFF;}#mermaid-svg-XjejJdbvdn64rURB .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-XjejJdbvdn64rURB .classTitle{font-weight:bolder;}#mermaid-svg-XjejJdbvdn64rURB .node rect,#mermaid-svg-XjejJdbvdn64rURB .node circle,#mermaid-svg-XjejJdbvdn64rURB .node ellipse,#mermaid-svg-XjejJdbvdn64rURB .node polygon,#mermaid-svg-XjejJdbvdn64rURB .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-XjejJdbvdn64rURB .divider{stroke:#9370DB;stroke-width:1;}#mermaid-svg-XjejJdbvdn64rURB g.clickable{cursor:pointer;}#mermaid-svg-XjejJdbvdn64rURB g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-XjejJdbvdn64rURB g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-XjejJdbvdn64rURB .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-XjejJdbvdn64rURB .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-XjejJdbvdn64rURB .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-XjejJdbvdn64rURB .dashed-line{stroke-dasharray:3;}#mermaid-svg-XjejJdbvdn64rURB .dotted-line{stroke-dasharray:1 2;}#mermaid-svg-XjejJdbvdn64rURB #compositionStart,#mermaid-svg-XjejJdbvdn64rURB .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-XjejJdbvdn64rURB #compositionEnd,#mermaid-svg-XjejJdbvdn64rURB .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-XjejJdbvdn64rURB #dependencyStart,#mermaid-svg-XjejJdbvdn64rURB .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-XjejJdbvdn64rURB #dependencyStart,#mermaid-svg-XjejJdbvdn64rURB .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-XjejJdbvdn64rURB #extensionStart,#mermaid-svg-XjejJdbvdn64rURB .extension{fill:transparent!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-XjejJdbvdn64rURB #extensionEnd,#mermaid-svg-XjejJdbvdn64rURB .extension{fill:transparent!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-XjejJdbvdn64rURB #aggregationStart,#mermaid-svg-XjejJdbvdn64rURB .aggregation{fill:transparent!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-XjejJdbvdn64rURB #aggregationEnd,#mermaid-svg-XjejJdbvdn64rURB .aggregation{fill:transparent!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-XjejJdbvdn64rURB #lollipopStart,#mermaid-svg-XjejJdbvdn64rURB .lollipop{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-XjejJdbvdn64rURB #lollipopEnd,#mermaid-svg-XjejJdbvdn64rURB .lollipop{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-XjejJdbvdn64rURB .edgeTerminals{font-size:11px;line-height:initial;}#mermaid-svg-XjejJdbvdn64rURB .classTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-XjejJdbvdn64rURB .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-XjejJdbvdn64rURB .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-XjejJdbvdn64rURB :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Animal
+String name
+int age
+makeSound()
Dog
+String breed
+fetch()

关系类型：

语法 关系
`< --`
*-- 组合
o-- 聚合
--> 关联

3.5 甘特图（Gantt）

#mermaid-svg-NHMEwmAxzYqovyy7{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-NHMEwmAxzYqovyy7 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-NHMEwmAxzYqovyy7 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-NHMEwmAxzYqovyy7 .error-icon{fill:#552222;}#mermaid-svg-NHMEwmAxzYqovyy7 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-NHMEwmAxzYqovyy7 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-NHMEwmAxzYqovyy7 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-NHMEwmAxzYqovyy7 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-NHMEwmAxzYqovyy7 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-NHMEwmAxzYqovyy7 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-NHMEwmAxzYqovyy7 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-NHMEwmAxzYqovyy7 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-NHMEwmAxzYqovyy7 .marker.cross{stroke:#333333;}#mermaid-svg-NHMEwmAxzYqovyy7 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-NHMEwmAxzYqovyy7 p{margin:0;}#mermaid-svg-NHMEwmAxzYqovyy7 .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-NHMEwmAxzYqovyy7 .exclude-range{fill:#eeeeee;}#mermaid-svg-NHMEwmAxzYqovyy7 .section{stroke:none;opacity:0.2;}#mermaid-svg-NHMEwmAxzYqovyy7 .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-NHMEwmAxzYqovyy7 .section2{fill:#fff400;}#mermaid-svg-NHMEwmAxzYqovyy7 .section1,#mermaid-svg-NHMEwmAxzYqovyy7 .section3{fill:white;opacity:0.2;}#mermaid-svg-NHMEwmAxzYqovyy7 .sectionTitle0{fill:#333;}#mermaid-svg-NHMEwmAxzYqovyy7 .sectionTitle1{fill:#333;}#mermaid-svg-NHMEwmAxzYqovyy7 .sectionTitle2{fill:#333;}#mermaid-svg-NHMEwmAxzYqovyy7 .sectionTitle3{fill:#333;}#mermaid-svg-NHMEwmAxzYqovyy7 .sectionTitle{text-anchor:start;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-NHMEwmAxzYqovyy7 .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-NHMEwmAxzYqovyy7 .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-NHMEwmAxzYqovyy7 .grid path{stroke-width:0;}#mermaid-svg-NHMEwmAxzYqovyy7 .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-NHMEwmAxzYqovyy7 .task{stroke-width:2;}#mermaid-svg-NHMEwmAxzYqovyy7 .taskText{text-anchor:middle;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-NHMEwmAxzYqovyy7 .taskTextOutsideRight{fill:black;text-anchor:start;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-NHMEwmAxzYqovyy7 .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-NHMEwmAxzYqovyy7 .task.clickable{cursor:pointer;}#mermaid-svg-NHMEwmAxzYqovyy7 .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-NHMEwmAxzYqovyy7 .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-NHMEwmAxzYqovyy7 .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-NHMEwmAxzYqovyy7 .taskText0,#mermaid-svg-NHMEwmAxzYqovyy7 .taskText1,#mermaid-svg-NHMEwmAxzYqovyy7 .taskText2,#mermaid-svg-NHMEwmAxzYqovyy7 .taskText3{fill:white;}#mermaid-svg-NHMEwmAxzYqovyy7 .task0,#mermaid-svg-NHMEwmAxzYqovyy7 .task1,#mermaid-svg-NHMEwmAxzYqovyy7 .task2,#mermaid-svg-NHMEwmAxzYqovyy7 .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-NHMEwmAxzYqovyy7 .taskTextOutside0,#mermaid-svg-NHMEwmAxzYqovyy7 .taskTextOutside2{fill:black;}#mermaid-svg-NHMEwmAxzYqovyy7 .taskTextOutside1,#mermaid-svg-NHMEwmAxzYqovyy7 .taskTextOutside3{fill:black;}#mermaid-svg-NHMEwmAxzYqovyy7 .active0,#mermaid-svg-NHMEwmAxzYqovyy7 .active1,#mermaid-svg-NHMEwmAxzYqovyy7 .active2,#mermaid-svg-NHMEwmAxzYqovyy7 .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-NHMEwmAxzYqovyy7 .activeText0,#mermaid-svg-NHMEwmAxzYqovyy7 .activeText1,#mermaid-svg-NHMEwmAxzYqovyy7 .activeText2,#mermaid-svg-NHMEwmAxzYqovyy7 .activeText3{fill:black!important;}#mermaid-svg-NHMEwmAxzYqovyy7 .done0,#mermaid-svg-NHMEwmAxzYqovyy7 .done1,#mermaid-svg-NHMEwmAxzYqovyy7 .done2,#mermaid-svg-NHMEwmAxzYqovyy7 .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-NHMEwmAxzYqovyy7 .doneText0,#mermaid-svg-NHMEwmAxzYqovyy7 .doneText1,#mermaid-svg-NHMEwmAxzYqovyy7 .doneText2,#mermaid-svg-NHMEwmAxzYqovyy7 .doneText3{fill:black!important;}#mermaid-svg-NHMEwmAxzYqovyy7 .doneText0.taskTextOutsideLeft,#mermaid-svg-NHMEwmAxzYqovyy7 .doneText0.taskTextOutsideRight,#mermaid-svg-NHMEwmAxzYqovyy7 .doneText1.taskTextOutsideLeft,#mermaid-svg-NHMEwmAxzYqovyy7 .doneText1.taskTextOutsideRight,#mermaid-svg-NHMEwmAxzYqovyy7 .doneText2.taskTextOutsideLeft,#mermaid-svg-NHMEwmAxzYqovyy7 .doneText2.taskTextOutsideRight,#mermaid-svg-NHMEwmAxzYqovyy7 .doneText3.taskTextOutsideLeft,#mermaid-svg-NHMEwmAxzYqovyy7 .doneText3.taskTextOutsideRight{fill:black!important;}#mermaid-svg-NHMEwmAxzYqovyy7 .crit0,#mermaid-svg-NHMEwmAxzYqovyy7 .crit1,#mermaid-svg-NHMEwmAxzYqovyy7 .crit2,#mermaid-svg-NHMEwmAxzYqovyy7 .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-NHMEwmAxzYqovyy7 .activeCrit0,#mermaid-svg-NHMEwmAxzYqovyy7 .activeCrit1,#mermaid-svg-NHMEwmAxzYqovyy7 .activeCrit2,#mermaid-svg-NHMEwmAxzYqovyy7 .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-NHMEwmAxzYqovyy7 .doneCrit0,#mermaid-svg-NHMEwmAxzYqovyy7 .doneCrit1,#mermaid-svg-NHMEwmAxzYqovyy7 .doneCrit2,#mermaid-svg-NHMEwmAxzYqovyy7 .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-NHMEwmAxzYqovyy7 .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-NHMEwmAxzYqovyy7 .milestoneText{font-style:italic;}#mermaid-svg-NHMEwmAxzYqovyy7 .doneCritText0,#mermaid-svg-NHMEwmAxzYqovyy7 .doneCritText1,#mermaid-svg-NHMEwmAxzYqovyy7 .doneCritText2,#mermaid-svg-NHMEwmAxzYqovyy7 .doneCritText3{fill:black!important;}#mermaid-svg-NHMEwmAxzYqovyy7 .doneCritText0.taskTextOutsideLeft,#mermaid-svg-NHMEwmAxzYqovyy7 .doneCritText0.taskTextOutsideRight,#mermaid-svg-NHMEwmAxzYqovyy7 .doneCritText1.taskTextOutsideLeft,#mermaid-svg-NHMEwmAxzYqovyy7 .doneCritText1.taskTextOutsideRight,#mermaid-svg-NHMEwmAxzYqovyy7 .doneCritText2.taskTextOutsideLeft,#mermaid-svg-NHMEwmAxzYqovyy7 .doneCritText2.taskTextOutsideRight,#mermaid-svg-NHMEwmAxzYqovyy7 .doneCritText3.taskTextOutsideLeft,#mermaid-svg-NHMEwmAxzYqovyy7 .doneCritText3.taskTextOutsideRight{fill:black!important;}#mermaid-svg-NHMEwmAxzYqovyy7 .vert{stroke:navy;}#mermaid-svg-NHMEwmAxzYqovyy7 .vertText{font-size:15px;text-anchor:middle;fill:navy!important;}#mermaid-svg-NHMEwmAxzYqovyy7 .activeCritText0,#mermaid-svg-NHMEwmAxzYqovyy7 .activeCritText1,#mermaid-svg-NHMEwmAxzYqovyy7 .activeCritText2,#mermaid-svg-NHMEwmAxzYqovyy7 .activeCritText3{fill:black!important;}#mermaid-svg-NHMEwmAxzYqovyy7 .titleText{text-anchor:middle;font-size:18px;fill:#333;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-NHMEwmAxzYqovyy7 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 2026-01-01 2026-01-03 2026-01-05 2026-01-07 2026-01-09 2026-01-11 2026-01-13 2026-01-15 2026-01-17 2026-01-19 2026-01-21 2026-01-23 2026-01-25 2026-01-27 需求分析 UI设计 后端开发 前端开发 设计阶段 开发阶段 项目开发计划

3.6 实体关系图（ER Diagram）

#mermaid-svg-NYZtRv5Rl6fbdvSc{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-NYZtRv5Rl6fbdvSc .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-NYZtRv5Rl6fbdvSc .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-NYZtRv5Rl6fbdvSc .error-icon{fill:#552222;}#mermaid-svg-NYZtRv5Rl6fbdvSc .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-NYZtRv5Rl6fbdvSc .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-NYZtRv5Rl6fbdvSc .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-NYZtRv5Rl6fbdvSc .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-NYZtRv5Rl6fbdvSc .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-NYZtRv5Rl6fbdvSc .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-NYZtRv5Rl6fbdvSc .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-NYZtRv5Rl6fbdvSc .marker{fill:#333333;stroke:#333333;}#mermaid-svg-NYZtRv5Rl6fbdvSc .marker.cross{stroke:#333333;}#mermaid-svg-NYZtRv5Rl6fbdvSc svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-NYZtRv5Rl6fbdvSc p{margin:0;}#mermaid-svg-NYZtRv5Rl6fbdvSc .entityBox{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-NYZtRv5Rl6fbdvSc .relationshipLabelBox{fill:hsl(80, 100%, 96.2745098039%);opacity:0.7;background-color:hsl(80, 100%, 96.2745098039%);}#mermaid-svg-NYZtRv5Rl6fbdvSc .relationshipLabelBox rect{opacity:0.5;}#mermaid-svg-NYZtRv5Rl6fbdvSc .labelBkg{background-color:rgba(248.6666666666, 255, 235.9999999999, 0.5);}#mermaid-svg-NYZtRv5Rl6fbdvSc .edgeLabel .label{fill:#9370DB;font-size:14px;}#mermaid-svg-NYZtRv5Rl6fbdvSc .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-NYZtRv5Rl6fbdvSc .edge-pattern-dashed{stroke-dasharray:8,8;}#mermaid-svg-NYZtRv5Rl6fbdvSc .node rect,#mermaid-svg-NYZtRv5Rl6fbdvSc .node circle,#mermaid-svg-NYZtRv5Rl6fbdvSc .node ellipse,#mermaid-svg-NYZtRv5Rl6fbdvSc .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-NYZtRv5Rl6fbdvSc .relationshipLine{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-NYZtRv5Rl6fbdvSc .marker{fill:none!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-NYZtRv5Rl6fbdvSc .edgeLabel{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-NYZtRv5Rl6fbdvSc .edgeLabel .label rect{fill:rgba(232,232,232, 0.8);}#mermaid-svg-NYZtRv5Rl6fbdvSc .edgeLabel .label text{fill:#333;}#mermaid-svg-NYZtRv5Rl6fbdvSc :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} places
contains
CUSTOMER
string
name
string
email
ORDER
int
orderNumber
date
orderDate
LINE-ITEM

基数符号：

符号 含义
`
`o `
}o 零或多个
`} `

四、LangGraph4j 对 Mermaid 的原生支持

4.1 "原生支持"的具体表现

LangGraph4j 内置了 MermaidGenerator ，可以将 StateGraph 自动转换为 Mermaid flowchart TD 格式的文本。这意味着你不需要手动绘制工作流图------定义好节点和边后，一键生成。

架构设计：

复制代码 
StateGraph.getGraph()
    → DiagramGenerator（抽象基类）
        → MermaidGenerator（Mermaid 实现）
            → 输出 flowchart TD 格式文本

DiagramGenerator 定义了模板方法，MermaidGenerator 负责生成具体的 Mermaid 语法。

4.2 输出内容对照

LangGraph4j 元素 Mermaid 输出 图形表现
节点（Node） agent("agent") 圆角矩形
普通边（Edge） agent:::agent --> tool:::tool 实线箭头
条件边（Conditional Edge） condition1{"check state"} 菱形节点
条件分支 `condition1 -.-> continue
START/END __START__ / __END__ 特殊样式节点

五、完整使用示例

5.1 基础用法：顺序工作流

java 复制代码 
import org.bsc.langgraph4j.StateGraph;
import org.bsc.langgraph4j.GraphRepresentation;
import org.bsc.langgraph4j.state.AgentState;
import static org.bsc.langgraph4j.StateGraph.START;
import static org.bsc.langgraph4j.StateGraph.END;

public class MermaidExample {
    public static void main(String[] args) throws Exception {
        // 1. 构建工作流
        StateGraph<AgentState> workflow = new StateGraph<>(AgentState::new)
            .addNode("agent", node_async(state -> {
                return Map.of("result", "processed");
            }))
            .addNode("tool", node_async(state -> {
                return Map.of("toolResult", "done");
            }))
            .addEdge(START, "agent")
            .addEdge("agent", "tool")
            .addEdge("tool", END);

        // 2. 生成 Mermaid 图
        GraphRepresentation diagram = workflow.getGraph(
            GraphRepresentation.Type.MERMAID,
            "My Workflow",
            true  // 打印条件边
        );

        // 3. 输出 Mermaid 文本
        System.out.println(diagram.content());
    }
}

输出结果：

复制代码 
flowchart TD
    __START__("__START__"):::__START__
    agent("agent"):::agent
    tool("tool"):::tool
    __END__("__END__"):::__END__
    __START__:::__START__ --> agent:::agent
    agent:::agent --> tool:::tool
    tool:::tool --> __END__:::__END__
    
    classDef __START__ fill:#2ecc71,stroke:#333
    classDef __END__ fill:#e74c3c,stroke:#333
    classDef agent fill:#3498db,stroke:#333,color:#fff
    classDef tool fill:#f39c12,stroke:#333,color:#fff

5.2 条件边工作流

java 复制代码 
StateGraph<AgentState> workflow = new StateGraph<>(AgentState::new)
    .addNode("classify", node_async(state -> {
        String category = (String) state.value("category").orElse("default");
        return Map.of("category", category);
    }))
    .addNode("order_agent", node_async(state -> Map.of("result", "order handled")))
    .addNode("ticket_agent", node_async(state -> Map.of("result", "ticket handled")))
    .addEdge(START, "classify")
    .addConditionalEdges("classify",
        state -> {
            String category = (String) state.value("category").orElse("default");
            return CompletableFuture.completedFuture(category);
        },
        Map.of(
            "order", "order_agent",
            "ticket", "ticket_agent"
        ))
    .addEdge("order_agent", END)
    .addEdge("ticket_agent", END);

// 生成 Mermaid（打印条件边）
System.out.println(workflow.getGraph(
    GraphRepresentation.Type.MERMAID, "Intent Router", true).content());

输出结果：

复制代码 
flowchart TD
    __START__("__START__"):::__START__
    classify("classify"):::classify
    order_agent("order_agent"):::order_agent
    ticket_agent("ticket_agent"):::ticket_agent
    __END__("__END__"):::__END__
    
    __START__:::__START__ --> classify:::classify
    condition1{"check state"}:::condition1
    classify:::classify -.-> condition1:::condition1
    condition1:::condition1 -.->|order| order_agent:::order_agent
    condition1:::condition1 -.->|ticket| ticket_agent:::ticket_agent
    order_agent:::order_agent --> __END__:::__END__
    ticket_agent:::ticket_agent --> __END__:::__END__

5.3 循环工作流（ReAct 模式）

java 复制代码 
StateGraph<AgentState> reactGraph = new StateGraph<>(AgentState::new)
    .addNode("reason", node_async(state -> {
        boolean hasToolCalls = (boolean) state.value("hasToolCalls").orElse(false);
        return Map.of("hasToolCalls", hasToolCalls);
    }))
    .addNode("act", node_async(state -> {
        return Map.of("toolResult", "executed");
    }))
    .addEdge(START, "reason")
    .addConditionalEdges("reason",
        state -> {
            boolean hasToolCalls = (boolean) state.value("hasToolCalls").orElse(false);
            return CompletableFuture.completedFuture(hasToolCalls ? "act" : "end");
        },
        Map.of("act", "act", "end", END))
    .addEdge("act", "reason");  // 回环边

// 生成 Mermaid
System.out.println(reactGraph.getGraph(
    GraphRepresentation.Type.MERMAID, "ReAct Agent", true).content());

5.4 在 Markdown 中嵌入渲染

生成的 Mermaid 文本可以直接嵌入 Markdown 文档：

markdown 复制代码 
## 工作流拓扑

```mermaid
flowchart TD
    __START__ --> classify
    classify --> condition1{"check state"}
    condition1 -.->|order| order_agent
    condition1 -.->|ticket| ticket_agent
    order_agent --> __END__
    ticket_agent --> __END__
```

在 GitHub、GitLab、Azure DevOps Wiki 等平台中，这段代码会自动渲染为可视化流程图。

六、常见问题排查

6.1 渲染失败

症状：Mermaid 代码无法渲染，显示为纯文本。

排查：

  • 确认平台支持 Mermaid（GitHub/GitLab/Azure DevOps 都支持）
  • 检查语法是否正确（缩进、特殊字符转义）
  • 复杂图表可先在 Mermaid Live Editor 验证

6.2 中文显示异常

解决 ：节点文本用引号包裹，如 A["中文标签"]。

6.3 条件边显示混乱

解决 ：将 printConditionalEdges 设为 false，直接显示边而不显示菱形条件节点：

java 复制代码 
workflow.getGraph(GraphRepresentation.Type.MERMAID, "My Graph", false)

七、下一步学习路径

阶段 学习内容
入门 掌握 flowchart 和 stateDiagram-v2 基础语法
进阶 学习时序图、类图、甘特图、ER 图
实战 用 LangGraph4j 自动生成工作流 Mermaid 图
高级 自定义样式、主题、子图嵌套

参考资源：

相关推荐
SamChan901 小时前
PDF翻译时页眉页脚总在捣乱？跨页重复文本块的检测与过滤实测
人工智能·python·ai·pdf·wpf
晴空蓝天1 小时前
MDC traceId 全链路日志追踪：Spring Boot 3.5 里把日志串成一条线
java·spring boot·后端·python
泡海椒1 小时前
JQuick-Excel 项目定位与适用场景：声明式 Java Excel 的边界
java·开发语言·excel
L@ncor1 小时前
第六章可能出现的问题：依赖冲突与成本乘法
python·依赖管理·langgraph·agentscope·避坑
AC赳赳老秦1 小时前
财报附注表格精准提取：OpenClaw 从 PDF 年报附注挖掘隐藏明细，补齐财务分析维度
java·汇编·c++·python·青少年编程·deepseek·openclaw
小小张说故事1 小时前
CatBoost 入门指南：类别特征为什么不用 One-Hot？Python 实战与 5 个坑
python·机器学习
slandarer2 小时前
MATLAB | R2026b 更新了哪些有趣的新东西
开发语言·数据库·matlab
工具派2 小时前
Word文档太大怎么拆分？段落结构与两种拆法的边界实测
开发语言·c#·word
卷无止境2 小时前
WebGIS生态全景丨从浏览器里的地图到背后的空间数据库
后端·python
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02Telegram APK 下载安装完整指南 — 2026年最新03历年考研数学一、数学二、数学三真题试卷及答案PDF04GitHub 镜像站点052026 爱知・名古屋亚运会怎么看？直播平台+赛程安排分享06蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接07给AI一张“业务概念地图“：本体如何从哲学走向企业智能082026 年 9 月国内外主流大模型横向硬核评测：价格、算力、业务场景全维度对比，GPT‑6 Astra横空出世09jev-ultrafast 深度解析：7 秒订机票的浏览器 Agent 是如何炼成的10微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新