Mermaid 入门与进阶指南：从基础绘图到跨平台兼容策

🧜‍♂️ Mermaid 入门与进阶指南：从基础绘图到跨平台兼容策略

一句话定义： Mermaid 是一个基于 JavaScript 的“文本即图表”（Diagrams as Code）工具，允许你用类似 Markdown 的简洁语法，自动生成流程图、时序图、甘特图等专业可视化内容。

一、为什么使用 Mermaid？

• ✅ 纯文本驱动：图表可版本控制（Git 友好），告别二进制图片
• ✅ 高效修改：改几行代码，图表自动更新，无需拖拽对齐
• ✅ 生态集成：原生支持 Obsidian、Typora、GitLab、VS Code 等主流工具
• ✅ 开源免费：MIT 协议，社区活跃，持续迭代

二、基础功能（广泛兼容，推荐日常使用）

适用场景：GitHub、GitLab、Obsidian、Typora、VS Code 等大多数平台 特点：语法简单、渲染稳定、兼容性极强

1. 流程图（Flowchart）

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

是

否

开始

是否登录?

进入主页

跳转登录页

结束

• 方向控制：TD（Top-Down）、LR（Left-Right）
• 节点类型：
  • [矩形]：普通步骤
  • {菱形}：判断分支
  • ((圆形))：开始/结束（部分平台支持）
• 连线标签：A — "是" –> B

2. 时序图（Sequence Diagram）

服务端

用户

服务端

用户

#mermaid-svg-Wo4zB6Fghem0AaRm{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-Wo4zB6Fghem0AaRm .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-Wo4zB6Fghem0AaRm .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-Wo4zB6Fghem0AaRm .error-icon{fill:#552222;}#mermaid-svg-Wo4zB6Fghem0AaRm .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Wo4zB6Fghem0AaRm .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-Wo4zB6Fghem0AaRm .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Wo4zB6Fghem0AaRm .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Wo4zB6Fghem0AaRm .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-Wo4zB6Fghem0AaRm .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Wo4zB6Fghem0AaRm .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Wo4zB6Fghem0AaRm .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Wo4zB6Fghem0AaRm .marker.cross{stroke:#333333;}#mermaid-svg-Wo4zB6Fghem0AaRm svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Wo4zB6Fghem0AaRm p{margin:0;}#mermaid-svg-Wo4zB6Fghem0AaRm .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-Wo4zB6Fghem0AaRm text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-Wo4zB6Fghem0AaRm .actor-line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-Wo4zB6Fghem0AaRm .innerArc{stroke-width:1.5;stroke-dasharray:none;}#mermaid-svg-Wo4zB6Fghem0AaRm .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-Wo4zB6Fghem0AaRm .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-Wo4zB6Fghem0AaRm #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-Wo4zB6Fghem0AaRm .sequenceNumber{fill:white;}#mermaid-svg-Wo4zB6Fghem0AaRm #sequencenumber{fill:#333;}#mermaid-svg-Wo4zB6Fghem0AaRm #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-Wo4zB6Fghem0AaRm .messageText{fill:#333;stroke:none;}#mermaid-svg-Wo4zB6Fghem0AaRm .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-Wo4zB6Fghem0AaRm .labelText,#mermaid-svg-Wo4zB6Fghem0AaRm .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-Wo4zB6Fghem0AaRm .loopText,#mermaid-svg-Wo4zB6Fghem0AaRm .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-Wo4zB6Fghem0AaRm .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-Wo4zB6Fghem0AaRm .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-Wo4zB6Fghem0AaRm .noteText,#mermaid-svg-Wo4zB6Fghem0AaRm .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-Wo4zB6Fghem0AaRm .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-Wo4zB6Fghem0AaRm .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-Wo4zB6Fghem0AaRm .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-Wo4zB6Fghem0AaRm .actorPopupMenu{position:absolute;}#mermaid-svg-Wo4zB6Fghem0AaRm .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-Wo4zB6Fghem0AaRm .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-Wo4zB6Fghem0AaRm .actor-man circle,#mermaid-svg-Wo4zB6Fghem0AaRm line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-Wo4zB6Fghem0AaRm :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

请求数据

返回结果

• 参与者：participant A
• 消息类型：
  • ->>：同步请求（实线）
  • –>>：异步响应（虚线）

3. 甘特图（Gantt Chart）

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

2026-02-01

2026-02-02

2026-02-03

2026-02-04

2026-02-05

2026-02-06

2026-02-07

2026-02-08

2026-02-09

2026-02-10

2026-02-11

2026-02-12

2026-02-13

前端

后端

开发

项目计划

• 任务依赖：after task_id
• 时间格式：dateFormat YYYY-MM-DD

💡 基础功能优势： 几乎所有支持 Mermaid 的平台都能正确渲染，适合写技术文档、需求说明、系统设计。

三、高级功能（需特定环境支持）

适用场景：本地笔记软件（Obsidian/Typora）、自建文档站（Docusaurus/VitePress） 风险：在 GitHub、微信、Notion 等平台可能完全失效或显示为代码块

1. 高级节点形状

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

子程序

数据库

六边形

梯形

• [[ ]]：子程序
• [( )]：圆柱体（数据库）
• {{ }}：六边形
• / /：平行四边形

⚠️ 注意：必须使用 flowchart，而非 graph

2. 样式与主题

#mermaid-svg-6ytyWeKqNUqKLWbC{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#000000;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-6ytyWeKqNUqKLWbC .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-6ytyWeKqNUqKLWbC .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-6ytyWeKqNUqKLWbC .error-icon{fill:#552222;}#mermaid-svg-6ytyWeKqNUqKLWbC .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-6ytyWeKqNUqKLWbC .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-6ytyWeKqNUqKLWbC .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-6ytyWeKqNUqKLWbC .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-6ytyWeKqNUqKLWbC .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-6ytyWeKqNUqKLWbC .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-6ytyWeKqNUqKLWbC .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-6ytyWeKqNUqKLWbC .marker{fill:#000000;stroke:#000000;}#mermaid-svg-6ytyWeKqNUqKLWbC .marker.cross{stroke:#000000;}#mermaid-svg-6ytyWeKqNUqKLWbC svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-6ytyWeKqNUqKLWbC p{margin:0;}#mermaid-svg-6ytyWeKqNUqKLWbC .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#000000;}#mermaid-svg-6ytyWeKqNUqKLWbC .cluster-label text{fill:#333;}#mermaid-svg-6ytyWeKqNUqKLWbC .cluster-label span{color:#333;}#mermaid-svg-6ytyWeKqNUqKLWbC .cluster-label span p{background-color:transparent;}#mermaid-svg-6ytyWeKqNUqKLWbC .label text,#mermaid-svg-6ytyWeKqNUqKLWbC span{fill:#000000;color:#000000;}#mermaid-svg-6ytyWeKqNUqKLWbC .node rect,#mermaid-svg-6ytyWeKqNUqKLWbC .node circle,#mermaid-svg-6ytyWeKqNUqKLWbC .node ellipse,#mermaid-svg-6ytyWeKqNUqKLWbC .node polygon,#mermaid-svg-6ytyWeKqNUqKLWbC .node path{fill:#cde498;stroke:#13540c;stroke-width:1px;}#mermaid-svg-6ytyWeKqNUqKLWbC .rough-node .label text,#mermaid-svg-6ytyWeKqNUqKLWbC .node .label text,#mermaid-svg-6ytyWeKqNUqKLWbC .image-shape .label,#mermaid-svg-6ytyWeKqNUqKLWbC .icon-shape .label{text-anchor:middle;}#mermaid-svg-6ytyWeKqNUqKLWbC .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-6ytyWeKqNUqKLWbC .rough-node .label,#mermaid-svg-6ytyWeKqNUqKLWbC .node .label,#mermaid-svg-6ytyWeKqNUqKLWbC .image-shape .label,#mermaid-svg-6ytyWeKqNUqKLWbC .icon-shape .label{text-align:center;}#mermaid-svg-6ytyWeKqNUqKLWbC .node.clickable{cursor:pointer;}#mermaid-svg-6ytyWeKqNUqKLWbC .root .anchor path{fill:#000000!important;stroke-width:0;stroke:#000000;}#mermaid-svg-6ytyWeKqNUqKLWbC .arrowheadPath{fill:green;}#mermaid-svg-6ytyWeKqNUqKLWbC .edgePath .path{stroke:#000000;stroke-width:2.0px;}#mermaid-svg-6ytyWeKqNUqKLWbC .flowchart-link{stroke:#000000;fill:none;}#mermaid-svg-6ytyWeKqNUqKLWbC .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-6ytyWeKqNUqKLWbC .edgeLabel p{background-color:#e8e8e8;}#mermaid-svg-6ytyWeKqNUqKLWbC .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-6ytyWeKqNUqKLWbC .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-6ytyWeKqNUqKLWbC .cluster rect{fill:#cdffb2;stroke:#6eaa49;stroke-width:1px;}#mermaid-svg-6ytyWeKqNUqKLWbC .cluster text{fill:#333;}#mermaid-svg-6ytyWeKqNUqKLWbC .cluster span{color:#333;}#mermaid-svg-6ytyWeKqNUqKLWbC 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(78.1578947368, 58.4615384615%, 84.5098039216%);border:1px solid #6eaa49;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-6ytyWeKqNUqKLWbC .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#000000;}#mermaid-svg-6ytyWeKqNUqKLWbC rect.text{fill:none;stroke-width:0;}#mermaid-svg-6ytyWeKqNUqKLWbC .icon-shape,#mermaid-svg-6ytyWeKqNUqKLWbC .image-shape{background-color:#e8e8e8;text-align:center;}#mermaid-svg-6ytyWeKqNUqKLWbC .icon-shape p,#mermaid-svg-6ytyWeKqNUqKLWbC .image-shape p{background-color:#e8e8e8;padding:2px;}#mermaid-svg-6ytyWeKqNUqKLWbC .icon-shape rect,#mermaid-svg-6ytyWeKqNUqKLWbC .image-shape rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-6ytyWeKqNUqKLWbC .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-6ytyWeKqNUqKLWbC .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-6ytyWeKqNUqKLWbC :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}#mermaid-svg-6ytyWeKqNUqKLWbC .highlight>*{fill:#f9f!important;stroke:#333!important;}#mermaid-svg-6ytyWeKqNUqKLWbC .highlight span{fill:#f9f!important;stroke:#333!important;}

普通节点

高亮节点

• 自定义颜色、边框、字体
• 主题切换：default、forest、dark 等

3. 子图与分组

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

模块B

C

D

模块A

A

B

4. 交互功能（Click 事件）

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

首页

帮助中心

❗ 现实限制：

• GitHub 原生不支持 flowchart、classDef、subgraph
• Notion、飞书、微信公众号完全不支持 Mermaid 渲染

四、当平台不支持高级功能时：优雅降级策略

✅ 策略 1：坚持使用基础语法（推荐）

• 始终用 graph 而非 flowchart
• 避免 <br>，改用单行文本
• 用 emoji + 文字 替代图形语义：
  • 🗃️ 表示数据库
  • 🌐 表示服务器
  • 📱 表示移动端

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

HTTPS

📱 App

🌐 Server

🗃️ Database

✅ 策略 2：生成静态图片插入

✅ 优点：视觉效果完美，100% 兼容 ❌ 缺点：无法版本控制，修改需重新导出

✅ 策略 3：条件化文档（高级用户）

在支持 Mermaid 的平台（如 GitLab）中保留代码，在不支持的平台提供图片 fallback：

<!– 在 GitLab 中显示图表 –>
```mermaid
graph LR
A –> B

<!– 在 GitHub 中显示图片 –>

五、各平台兼容性速查表

六、总结：最佳实践建议

🎯 核心原则： “能用最简语法表达清楚，就不要依赖高级特性。” 这样既能享受 Mermaid 的效率，又能避免兼容性陷阱。

通过以上策略，您可以在任何场景下安全、高效地使用 Mermaid，真正做到 “写一次，到处可用”。