Mermaid进阶：从类图到主题定制

事情得从上篇发布后的一条私信说起。有读者问，流程图和时序图是够了，但类图、状态图、ER 图、甘特图这些，才是技术文档里最常出现的图，你怎么不写。说得对，这篇就是补这些的。

本篇分两大部分。先补图表类型，类图、状态图、ER 图、甘特图，外加几个轻量图表；再讲让图好看且可维护的功力，主题定制、工程化，以及踩坑实录。上篇结尾我说过，踩坑实录里大概有你的故事，这篇兑现。

classDiagram，类与类的关系

代码里最核心的结构是类，类图就是把类的骨架画出来。Mermaid 的 classDiagram 语法很简单，类的名字、属性、方法，用缩进写进一对花括号
#mermaid-svg-kky53eGzcyYBzlpF{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-kky53eGzcyYBzlpF .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-kky53eGzcyYBzlpF .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-kky53eGzcyYBzlpF .error-icon{fill:#552222;}#mermaid-svg-kky53eGzcyYBzlpF .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-kky53eGzcyYBzlpF .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-kky53eGzcyYBzlpF .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-kky53eGzcyYBzlpF .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-kky53eGzcyYBzlpF .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-kky53eGzcyYBzlpF .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-kky53eGzcyYBzlpF .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-kky53eGzcyYBzlpF .marker{fill:#333333;stroke:#333333;}#mermaid-svg-kky53eGzcyYBzlpF .marker.cross{stroke:#333333;}#mermaid-svg-kky53eGzcyYBzlpF svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-kky53eGzcyYBzlpF p{margin:0;}#mermaid-svg-kky53eGzcyYBzlpF g.classGroup text{fill:#9370DB;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-kky53eGzcyYBzlpF g.classGroup text .title{font-weight:bolder;}#mermaid-svg-kky53eGzcyYBzlpF .cluster-label text{fill:#333;}#mermaid-svg-kky53eGzcyYBzlpF .cluster-label span{color:#333;}#mermaid-svg-kky53eGzcyYBzlpF .cluster-label span p{background-color:transparent;}#mermaid-svg-kky53eGzcyYBzlpF .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-kky53eGzcyYBzlpF .cluster text{fill:#333;}#mermaid-svg-kky53eGzcyYBzlpF .cluster span{color:#333;}#mermaid-svg-kky53eGzcyYBzlpF .nodeLabel,#mermaid-svg-kky53eGzcyYBzlpF .edgeLabel{color:#131300;}#mermaid-svg-kky53eGzcyYBzlpF .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-kky53eGzcyYBzlpF .label text{fill:#131300;}#mermaid-svg-kky53eGzcyYBzlpF .labelBkg{background:#ECECFF;}#mermaid-svg-kky53eGzcyYBzlpF .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-kky53eGzcyYBzlpF .classTitle{font-weight:bolder;}#mermaid-svg-kky53eGzcyYBzlpF .node rect,#mermaid-svg-kky53eGzcyYBzlpF .node circle,#mermaid-svg-kky53eGzcyYBzlpF .node ellipse,#mermaid-svg-kky53eGzcyYBzlpF .node polygon,#mermaid-svg-kky53eGzcyYBzlpF .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-kky53eGzcyYBzlpF .divider{stroke:#9370DB;stroke-width:1;}#mermaid-svg-kky53eGzcyYBzlpF g.clickable{cursor:pointer;}#mermaid-svg-kky53eGzcyYBzlpF g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-kky53eGzcyYBzlpF g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-kky53eGzcyYBzlpF .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-kky53eGzcyYBzlpF .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-kky53eGzcyYBzlpF .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-kky53eGzcyYBzlpF .dashed-line{stroke-dasharray:3;}#mermaid-svg-kky53eGzcyYBzlpF .dotted-line{stroke-dasharray:1 2;}#mermaid-svg-kky53eGzcyYBzlpF #compositionStart,#mermaid-svg-kky53eGzcyYBzlpF .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-kky53eGzcyYBzlpF #compositionEnd,#mermaid-svg-kky53eGzcyYBzlpF .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-kky53eGzcyYBzlpF #dependencyStart,#mermaid-svg-kky53eGzcyYBzlpF .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-kky53eGzcyYBzlpF #dependencyStart,#mermaid-svg-kky53eGzcyYBzlpF .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-kky53eGzcyYBzlpF #extensionStart,#mermaid-svg-kky53eGzcyYBzlpF .extension{fill:transparent!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-kky53eGzcyYBzlpF #extensionEnd,#mermaid-svg-kky53eGzcyYBzlpF .extension{fill:transparent!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-kky53eGzcyYBzlpF #aggregationStart,#mermaid-svg-kky53eGzcyYBzlpF .aggregation{fill:transparent!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-kky53eGzcyYBzlpF #aggregationEnd,#mermaid-svg-kky53eGzcyYBzlpF .aggregation{fill:transparent!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-kky53eGzcyYBzlpF #lollipopStart,#mermaid-svg-kky53eGzcyYBzlpF .lollipop{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-kky53eGzcyYBzlpF #lollipopEnd,#mermaid-svg-kky53eGzcyYBzlpF .lollipop{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-kky53eGzcyYBzlpF .edgeTerminals{font-size:11px;line-height:initial;}#mermaid-svg-kky53eGzcyYBzlpF .classTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-kky53eGzcyYBzlpF .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-kky53eGzcyYBzlpF .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-kky53eGzcyYBzlpF :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} User
+String name
+Int age
+login() : Boolean
Article
+String title
+String content
+publish() : void

对应源码:

text 复制代码

classDiagram
    class User {
        +String name
        +Int age
        +login() Boolean
    }
    class Article {
        +String title
        +String content
        +publish() void
    }

加号表示公开成员，减号表示私有。属性是 类型名字，方法是 方法名(参数) 返回类型。这张图画出来，类的接口就一目了然，接口文档都不用另写了。

类图真正的价值在类与类之间的关系。Mermaid 用六种符号表达六种关系

符号	含义	记忆点
`<	--`	继承
`<	...`	实现
`*--`	组合	实心菱形，强依赖
`o--`	聚合	空心菱形，弱依赖
`-->`	关联	普通箭头
`..>`	依赖	虚线箭头

拿博客系统举例，用户创作文章，文章包含评论，关系是这样的
#mermaid-svg-VLsTbzZgYIkMUQvm{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-VLsTbzZgYIkMUQvm .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-VLsTbzZgYIkMUQvm .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-VLsTbzZgYIkMUQvm .error-icon{fill:#552222;}#mermaid-svg-VLsTbzZgYIkMUQvm .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-VLsTbzZgYIkMUQvm .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-VLsTbzZgYIkMUQvm .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-VLsTbzZgYIkMUQvm .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-VLsTbzZgYIkMUQvm .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-VLsTbzZgYIkMUQvm .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-VLsTbzZgYIkMUQvm .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-VLsTbzZgYIkMUQvm .marker{fill:#333333;stroke:#333333;}#mermaid-svg-VLsTbzZgYIkMUQvm .marker.cross{stroke:#333333;}#mermaid-svg-VLsTbzZgYIkMUQvm svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-VLsTbzZgYIkMUQvm p{margin:0;}#mermaid-svg-VLsTbzZgYIkMUQvm g.classGroup text{fill:#9370DB;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-VLsTbzZgYIkMUQvm g.classGroup text .title{font-weight:bolder;}#mermaid-svg-VLsTbzZgYIkMUQvm .cluster-label text{fill:#333;}#mermaid-svg-VLsTbzZgYIkMUQvm .cluster-label span{color:#333;}#mermaid-svg-VLsTbzZgYIkMUQvm .cluster-label span p{background-color:transparent;}#mermaid-svg-VLsTbzZgYIkMUQvm .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-VLsTbzZgYIkMUQvm .cluster text{fill:#333;}#mermaid-svg-VLsTbzZgYIkMUQvm .cluster span{color:#333;}#mermaid-svg-VLsTbzZgYIkMUQvm .nodeLabel,#mermaid-svg-VLsTbzZgYIkMUQvm .edgeLabel{color:#131300;}#mermaid-svg-VLsTbzZgYIkMUQvm .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-VLsTbzZgYIkMUQvm .label text{fill:#131300;}#mermaid-svg-VLsTbzZgYIkMUQvm .labelBkg{background:#ECECFF;}#mermaid-svg-VLsTbzZgYIkMUQvm .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-VLsTbzZgYIkMUQvm .classTitle{font-weight:bolder;}#mermaid-svg-VLsTbzZgYIkMUQvm .node rect,#mermaid-svg-VLsTbzZgYIkMUQvm .node circle,#mermaid-svg-VLsTbzZgYIkMUQvm .node ellipse,#mermaid-svg-VLsTbzZgYIkMUQvm .node polygon,#mermaid-svg-VLsTbzZgYIkMUQvm .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-VLsTbzZgYIkMUQvm .divider{stroke:#9370DB;stroke-width:1;}#mermaid-svg-VLsTbzZgYIkMUQvm g.clickable{cursor:pointer;}#mermaid-svg-VLsTbzZgYIkMUQvm g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-VLsTbzZgYIkMUQvm g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-VLsTbzZgYIkMUQvm .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-VLsTbzZgYIkMUQvm .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-VLsTbzZgYIkMUQvm .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-VLsTbzZgYIkMUQvm .dashed-line{stroke-dasharray:3;}#mermaid-svg-VLsTbzZgYIkMUQvm .dotted-line{stroke-dasharray:1 2;}#mermaid-svg-VLsTbzZgYIkMUQvm #compositionStart,#mermaid-svg-VLsTbzZgYIkMUQvm .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-VLsTbzZgYIkMUQvm #compositionEnd,#mermaid-svg-VLsTbzZgYIkMUQvm .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-VLsTbzZgYIkMUQvm #dependencyStart,#mermaid-svg-VLsTbzZgYIkMUQvm .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-VLsTbzZgYIkMUQvm #dependencyStart,#mermaid-svg-VLsTbzZgYIkMUQvm .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-VLsTbzZgYIkMUQvm #extensionStart,#mermaid-svg-VLsTbzZgYIkMUQvm .extension{fill:transparent!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-VLsTbzZgYIkMUQvm #extensionEnd,#mermaid-svg-VLsTbzZgYIkMUQvm .extension{fill:transparent!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-VLsTbzZgYIkMUQvm #aggregationStart,#mermaid-svg-VLsTbzZgYIkMUQvm .aggregation{fill:transparent!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-VLsTbzZgYIkMUQvm #aggregationEnd,#mermaid-svg-VLsTbzZgYIkMUQvm .aggregation{fill:transparent!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-VLsTbzZgYIkMUQvm #lollipopStart,#mermaid-svg-VLsTbzZgYIkMUQvm .lollipop{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-VLsTbzZgYIkMUQvm #lollipopEnd,#mermaid-svg-VLsTbzZgYIkMUQvm .lollipop{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-VLsTbzZgYIkMUQvm .edgeTerminals{font-size:11px;line-height:initial;}#mermaid-svg-VLsTbzZgYIkMUQvm .classTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-VLsTbzZgYIkMUQvm .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-VLsTbzZgYIkMUQvm .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-VLsTbzZgYIkMUQvm :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 创作
发布
包含
1
1
1
*
*
*
User
+String name
Article
+String title
Comment
+String content

对应源码:

text 复制代码

classDiagram
    User "1" --> "*" Article : 创作
    User "1" --> "*" Comment : 发布
    Article "1" --> "*" Comment : 包含
    class User {
        +String name
    }
    class Article {
        +String title
    }
    class Comment {
        +String content
    }

"1" --> "*" 是一对多，引号里写基数，冒号后面是关系名。这张图在评审时很有用，新同事接手项目，先看类图再看代码，上手速度快很多。

stateDiagram，状态机

状态图描述的是「一个对象的一生」，它有哪些状态，什么事件触发什么转移。写代码的人对这个太熟了，状态枚举和转移逻辑天天见，只是没想过画出来。

Mermaid 里用 stateDiagram 画，[*] 是开始和结束，箭头是状态转移，冒号后面是触发事件。经典的订单状态机
#mermaid-svg-FrOmhjm8KsDz71ra{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-FrOmhjm8KsDz71ra .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-FrOmhjm8KsDz71ra .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-FrOmhjm8KsDz71ra .error-icon{fill:#552222;}#mermaid-svg-FrOmhjm8KsDz71ra .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-FrOmhjm8KsDz71ra .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-FrOmhjm8KsDz71ra .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-FrOmhjm8KsDz71ra .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-FrOmhjm8KsDz71ra .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-FrOmhjm8KsDz71ra .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-FrOmhjm8KsDz71ra .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-FrOmhjm8KsDz71ra .marker{fill:#333333;stroke:#333333;}#mermaid-svg-FrOmhjm8KsDz71ra .marker.cross{stroke:#333333;}#mermaid-svg-FrOmhjm8KsDz71ra svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-FrOmhjm8KsDz71ra p{margin:0;}#mermaid-svg-FrOmhjm8KsDz71ra defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-FrOmhjm8KsDz71ra g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-FrOmhjm8KsDz71ra g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-FrOmhjm8KsDz71ra g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-FrOmhjm8KsDz71ra g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-FrOmhjm8KsDz71ra g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-FrOmhjm8KsDz71ra .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-FrOmhjm8KsDz71ra .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-FrOmhjm8KsDz71ra .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-FrOmhjm8KsDz71ra .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-FrOmhjm8KsDz71ra .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-FrOmhjm8KsDz71ra .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-FrOmhjm8KsDz71ra .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-FrOmhjm8KsDz71ra .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-FrOmhjm8KsDz71ra .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-FrOmhjm8KsDz71ra .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-FrOmhjm8KsDz71ra .edgeLabel .label text{fill:#333;}#mermaid-svg-FrOmhjm8KsDz71ra .label div .edgeLabel{color:#333;}#mermaid-svg-FrOmhjm8KsDz71ra .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-FrOmhjm8KsDz71ra .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-FrOmhjm8KsDz71ra .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-FrOmhjm8KsDz71ra .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-FrOmhjm8KsDz71ra .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-FrOmhjm8KsDz71ra .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-FrOmhjm8KsDz71ra .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-FrOmhjm8KsDz71ra #statediagram-barbEnd{fill:#333333;}#mermaid-svg-FrOmhjm8KsDz71ra .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-FrOmhjm8KsDz71ra .cluster-label,#mermaid-svg-FrOmhjm8KsDz71ra .nodeLabel{color:#131300;}#mermaid-svg-FrOmhjm8KsDz71ra .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-FrOmhjm8KsDz71ra .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-FrOmhjm8KsDz71ra .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-FrOmhjm8KsDz71ra .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-FrOmhjm8KsDz71ra .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-FrOmhjm8KsDz71ra .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-FrOmhjm8KsDz71ra .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-FrOmhjm8KsDz71ra .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-FrOmhjm8KsDz71ra .note-edge{stroke-dasharray:5;}#mermaid-svg-FrOmhjm8KsDz71ra .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-FrOmhjm8KsDz71ra .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-FrOmhjm8KsDz71ra .statediagram-note text{fill:black;}#mermaid-svg-FrOmhjm8KsDz71ra .statediagram-note .nodeLabel{color:black;}#mermaid-svg-FrOmhjm8KsDz71ra .statediagram .edgeLabel{color:red;}#mermaid-svg-FrOmhjm8KsDz71ra #dependencyStart,#mermaid-svg-FrOmhjm8KsDz71ra #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-FrOmhjm8KsDz71ra .statediagramTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-FrOmhjm8KsDz71ra :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 支付成功
超时未支付
商家发货
确认收货
申请退款
退款到账
取消退款
待支付
已支付
已关闭
已发货
已完成
退款中
已退款

对应源码:

text 复制代码

stateDiagram-v2
    [*] --> 待支付
    待支付 --> 已支付 : 支付成功
    待支付 --> 已关闭 : 超时未支付
    已支付 --> 已发货 : 商家发货
    已发货 --> 已完成 : 确认收货
    已支付 --> 退款中 : 申请退款
    退款中 --> 已退款 : 退款到账
    退款中 --> 已支付 : 取消退款
    已完成 --> [*]
    已退款 --> [*]
    已关闭 --> [*]

这张图一出来，订单模块的边界就清楚了。哪些状态能到哪些状态，哪些转移不存在，扫一眼就知道。写代码时状态转移写错了，对照这张图也能很快发现。我的经验是，状态机图画完，状态枚举和转移逻辑基本就定型了，画图本身就是设计。

erDiagram，实体关系

ER 图是数据库设计的图，实体、属性、实体间的关系。画之前先想清楚一个映射，实体对应表，属性对应字段，关系对应外键。有了这个映射，ER 图就是表结构的可视化。

继续用博客系统，用户、文章、评论三张表
#mermaid-svg-rTPMUVjnkmgGxVlX{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-rTPMUVjnkmgGxVlX .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-rTPMUVjnkmgGxVlX .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-rTPMUVjnkmgGxVlX .error-icon{fill:#552222;}#mermaid-svg-rTPMUVjnkmgGxVlX .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-rTPMUVjnkmgGxVlX .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-rTPMUVjnkmgGxVlX .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-rTPMUVjnkmgGxVlX .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-rTPMUVjnkmgGxVlX .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-rTPMUVjnkmgGxVlX .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-rTPMUVjnkmgGxVlX .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-rTPMUVjnkmgGxVlX .marker{fill:#333333;stroke:#333333;}#mermaid-svg-rTPMUVjnkmgGxVlX .marker.cross{stroke:#333333;}#mermaid-svg-rTPMUVjnkmgGxVlX svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-rTPMUVjnkmgGxVlX p{margin:0;}#mermaid-svg-rTPMUVjnkmgGxVlX .entityBox{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-rTPMUVjnkmgGxVlX .relationshipLabelBox{fill:hsl(80, 100%, 96.2745098039%);opacity:0.7;background-color:hsl(80, 100%, 96.2745098039%);}#mermaid-svg-rTPMUVjnkmgGxVlX .relationshipLabelBox rect{opacity:0.5;}#mermaid-svg-rTPMUVjnkmgGxVlX .labelBkg{background-color:rgba(248.6666666666, 255, 235.9999999999, 0.5);}#mermaid-svg-rTPMUVjnkmgGxVlX .edgeLabel .label{fill:#9370DB;font-size:14px;}#mermaid-svg-rTPMUVjnkmgGxVlX .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-rTPMUVjnkmgGxVlX .edge-pattern-dashed{stroke-dasharray:8,8;}#mermaid-svg-rTPMUVjnkmgGxVlX .node rect,#mermaid-svg-rTPMUVjnkmgGxVlX .node circle,#mermaid-svg-rTPMUVjnkmgGxVlX .node ellipse,#mermaid-svg-rTPMUVjnkmgGxVlX .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-rTPMUVjnkmgGxVlX .relationshipLine{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-rTPMUVjnkmgGxVlX .marker{fill:none!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-rTPMUVjnkmgGxVlX .edgeLabel{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-rTPMUVjnkmgGxVlX .edgeLabel .label rect{fill:rgba(232,232,232, 0.8);}#mermaid-svg-rTPMUVjnkmgGxVlX .edgeLabel .label text{fill:#333;}#mermaid-svg-rTPMUVjnkmgGxVlX :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 创作
发布
包含
USER
string
name
string
email
ARTICLE
string
title
string
content
datetime
created_at
COMMENT
string
content
datetime
created_at

对应源码:

text 复制代码

erDiagram
    USER ||--o{ ARTICLE : 创作
    USER ||--o{ COMMENT : 发布
    ARTICLE ||--o{ COMMENT : 包含
    USER {
        string name
        string email
    }
    ARTICLE {
        string title
        string content
        datetime created_at
    }
    COMMENT {
        string content
        datetime created_at
    }

||--o{ 是一对多，竖线表示必有一个，圆圈表示零个或多个。实体名大写，属性写在花括号里，格式是 类型字段名。这张图画完，建表语句基本可以直接写了，字段名、类型、外键关系全在图上。

数据库设计评审时，拿 ER 图说话比贴建表语句直观得多。这也是 MongoDB 系列里说的数据建模，换到关系型数据库，ER 图就是标准答案。

gantt，项目排期

前面几种图是给代码和设计用的，甘特图是给项目用的。排期、里程碑、进度，一张图全包。Mermaid 的 gantt 语法
#mermaid-svg-sSuylWnUCbAuRGYe{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-sSuylWnUCbAuRGYe .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-sSuylWnUCbAuRGYe .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-sSuylWnUCbAuRGYe .error-icon{fill:#552222;}#mermaid-svg-sSuylWnUCbAuRGYe .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-sSuylWnUCbAuRGYe .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-sSuylWnUCbAuRGYe .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-sSuylWnUCbAuRGYe .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-sSuylWnUCbAuRGYe .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-sSuylWnUCbAuRGYe .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-sSuylWnUCbAuRGYe .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-sSuylWnUCbAuRGYe .marker{fill:#333333;stroke:#333333;}#mermaid-svg-sSuylWnUCbAuRGYe .marker.cross{stroke:#333333;}#mermaid-svg-sSuylWnUCbAuRGYe svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-sSuylWnUCbAuRGYe p{margin:0;}#mermaid-svg-sSuylWnUCbAuRGYe .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-sSuylWnUCbAuRGYe .exclude-range{fill:#eeeeee;}#mermaid-svg-sSuylWnUCbAuRGYe .section{stroke:none;opacity:0.2;}#mermaid-svg-sSuylWnUCbAuRGYe .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-sSuylWnUCbAuRGYe .section2{fill:#fff400;}#mermaid-svg-sSuylWnUCbAuRGYe .section1,#mermaid-svg-sSuylWnUCbAuRGYe .section3{fill:white;opacity:0.2;}#mermaid-svg-sSuylWnUCbAuRGYe .sectionTitle0{fill:#333;}#mermaid-svg-sSuylWnUCbAuRGYe .sectionTitle1{fill:#333;}#mermaid-svg-sSuylWnUCbAuRGYe .sectionTitle2{fill:#333;}#mermaid-svg-sSuylWnUCbAuRGYe .sectionTitle3{fill:#333;}#mermaid-svg-sSuylWnUCbAuRGYe .sectionTitle{text-anchor:start;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-sSuylWnUCbAuRGYe .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-sSuylWnUCbAuRGYe .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-sSuylWnUCbAuRGYe .grid path{stroke-width:0;}#mermaid-svg-sSuylWnUCbAuRGYe .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-sSuylWnUCbAuRGYe .task{stroke-width:2;}#mermaid-svg-sSuylWnUCbAuRGYe .taskText{text-anchor:middle;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-sSuylWnUCbAuRGYe .taskTextOutsideRight{fill:black;text-anchor:start;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-sSuylWnUCbAuRGYe .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-sSuylWnUCbAuRGYe .task.clickable{cursor:pointer;}#mermaid-svg-sSuylWnUCbAuRGYe .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-sSuylWnUCbAuRGYe .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-sSuylWnUCbAuRGYe .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-sSuylWnUCbAuRGYe .taskText0,#mermaid-svg-sSuylWnUCbAuRGYe .taskText1,#mermaid-svg-sSuylWnUCbAuRGYe .taskText2,#mermaid-svg-sSuylWnUCbAuRGYe .taskText3{fill:white;}#mermaid-svg-sSuylWnUCbAuRGYe .task0,#mermaid-svg-sSuylWnUCbAuRGYe .task1,#mermaid-svg-sSuylWnUCbAuRGYe .task2,#mermaid-svg-sSuylWnUCbAuRGYe .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-sSuylWnUCbAuRGYe .taskTextOutside0,#mermaid-svg-sSuylWnUCbAuRGYe .taskTextOutside2{fill:black;}#mermaid-svg-sSuylWnUCbAuRGYe .taskTextOutside1,#mermaid-svg-sSuylWnUCbAuRGYe .taskTextOutside3{fill:black;}#mermaid-svg-sSuylWnUCbAuRGYe .active0,#mermaid-svg-sSuylWnUCbAuRGYe .active1,#mermaid-svg-sSuylWnUCbAuRGYe .active2,#mermaid-svg-sSuylWnUCbAuRGYe .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-sSuylWnUCbAuRGYe .activeText0,#mermaid-svg-sSuylWnUCbAuRGYe .activeText1,#mermaid-svg-sSuylWnUCbAuRGYe .activeText2,#mermaid-svg-sSuylWnUCbAuRGYe .activeText3{fill:black!important;}#mermaid-svg-sSuylWnUCbAuRGYe .done0,#mermaid-svg-sSuylWnUCbAuRGYe .done1,#mermaid-svg-sSuylWnUCbAuRGYe .done2,#mermaid-svg-sSuylWnUCbAuRGYe .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-sSuylWnUCbAuRGYe .doneText0,#mermaid-svg-sSuylWnUCbAuRGYe .doneText1,#mermaid-svg-sSuylWnUCbAuRGYe .doneText2,#mermaid-svg-sSuylWnUCbAuRGYe .doneText3{fill:black!important;}#mermaid-svg-sSuylWnUCbAuRGYe .doneText0.taskTextOutsideLeft,#mermaid-svg-sSuylWnUCbAuRGYe .doneText0.taskTextOutsideRight,#mermaid-svg-sSuylWnUCbAuRGYe .doneText1.taskTextOutsideLeft,#mermaid-svg-sSuylWnUCbAuRGYe .doneText1.taskTextOutsideRight,#mermaid-svg-sSuylWnUCbAuRGYe .doneText2.taskTextOutsideLeft,#mermaid-svg-sSuylWnUCbAuRGYe .doneText2.taskTextOutsideRight,#mermaid-svg-sSuylWnUCbAuRGYe .doneText3.taskTextOutsideLeft,#mermaid-svg-sSuylWnUCbAuRGYe .doneText3.taskTextOutsideRight{fill:black!important;}#mermaid-svg-sSuylWnUCbAuRGYe .crit0,#mermaid-svg-sSuylWnUCbAuRGYe .crit1,#mermaid-svg-sSuylWnUCbAuRGYe .crit2,#mermaid-svg-sSuylWnUCbAuRGYe .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-sSuylWnUCbAuRGYe .activeCrit0,#mermaid-svg-sSuylWnUCbAuRGYe .activeCrit1,#mermaid-svg-sSuylWnUCbAuRGYe .activeCrit2,#mermaid-svg-sSuylWnUCbAuRGYe .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-sSuylWnUCbAuRGYe .doneCrit0,#mermaid-svg-sSuylWnUCbAuRGYe .doneCrit1,#mermaid-svg-sSuylWnUCbAuRGYe .doneCrit2,#mermaid-svg-sSuylWnUCbAuRGYe .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-sSuylWnUCbAuRGYe .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-sSuylWnUCbAuRGYe .milestoneText{font-style:italic;}#mermaid-svg-sSuylWnUCbAuRGYe .doneCritText0,#mermaid-svg-sSuylWnUCbAuRGYe .doneCritText1,#mermaid-svg-sSuylWnUCbAuRGYe .doneCritText2,#mermaid-svg-sSuylWnUCbAuRGYe .doneCritText3{fill:black!important;}#mermaid-svg-sSuylWnUCbAuRGYe .doneCritText0.taskTextOutsideLeft,#mermaid-svg-sSuylWnUCbAuRGYe .doneCritText0.taskTextOutsideRight,#mermaid-svg-sSuylWnUCbAuRGYe .doneCritText1.taskTextOutsideLeft,#mermaid-svg-sSuylWnUCbAuRGYe .doneCritText1.taskTextOutsideRight,#mermaid-svg-sSuylWnUCbAuRGYe .doneCritText2.taskTextOutsideLeft,#mermaid-svg-sSuylWnUCbAuRGYe .doneCritText2.taskTextOutsideRight,#mermaid-svg-sSuylWnUCbAuRGYe .doneCritText3.taskTextOutsideLeft,#mermaid-svg-sSuylWnUCbAuRGYe .doneCritText3.taskTextOutsideRight{fill:black!important;}#mermaid-svg-sSuylWnUCbAuRGYe .vert{stroke:navy;}#mermaid-svg-sSuylWnUCbAuRGYe .vertText{font-size:15px;text-anchor:middle;fill:navy!important;}#mermaid-svg-sSuylWnUCbAuRGYe .activeCritText0,#mermaid-svg-sSuylWnUCbAuRGYe .activeCritText1,#mermaid-svg-sSuylWnUCbAuRGYe .activeCritText2,#mermaid-svg-sSuylWnUCbAuRGYe .activeCritText3{fill:black!important;}#mermaid-svg-sSuylWnUCbAuRGYe .titleText{text-anchor:middle;font-size:18px;fill:#333;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-sSuylWnUCbAuRGYe :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 2026-08-01 2026-08-02 2026-08-03 2026-08-04 2026-08-05 2026-08-06 2026-08-07 2026-08-08 2026-08-09 2026-08-10 2026-08-11 2026-08-12 基础语法双展示改造进阶图表主题与工程化上篇下篇 Mermaid 教程写作计划

对应源码:

text 复制代码

gantt
    title Mermaid 教程写作计划
    dateFormat YYYY-MM-DD
    section 上篇
    基础语法       :done,    a1, 2026-08-01, 3d
    双展示改造     :done,    a2, 2026-08-04, 1d
    section 下篇
    进阶图表       :active,  b1, 2026-08-05, 4d
    主题与工程化   :         b2, 2026-08-09, 3d

dateFormat 声明日期格式，section 是任务分组，任务行的格式是 名称: 状态, id, 开始日期, 时长。状态有 done、active、crit 几种，不写就是待办。甘特图的场景很明确，项目排期、团队协作、个人计划，需要时间维度的图都归它。

轻量图表速览

除了上面几类主力图表，Mermaid 还有几个轻量图表，语法简单，一个场景一个
#mermaid-svg-rPeEIp5gkB9jV3JU{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-rPeEIp5gkB9jV3JU .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-rPeEIp5gkB9jV3JU .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-rPeEIp5gkB9jV3JU .error-icon{fill:#552222;}#mermaid-svg-rPeEIp5gkB9jV3JU .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-rPeEIp5gkB9jV3JU .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-rPeEIp5gkB9jV3JU .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-rPeEIp5gkB9jV3JU .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-rPeEIp5gkB9jV3JU .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-rPeEIp5gkB9jV3JU .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-rPeEIp5gkB9jV3JU .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-rPeEIp5gkB9jV3JU .marker{fill:#333333;stroke:#333333;}#mermaid-svg-rPeEIp5gkB9jV3JU .marker.cross{stroke:#333333;}#mermaid-svg-rPeEIp5gkB9jV3JU svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-rPeEIp5gkB9jV3JU p{margin:0;}#mermaid-svg-rPeEIp5gkB9jV3JU .pieCircle{stroke:#000000;stroke-width:2px;opacity:0.7;}#mermaid-svg-rPeEIp5gkB9jV3JU .pieOuterCircle{stroke:#000000;stroke-width:1px;fill:none;}#mermaid-svg-rPeEIp5gkB9jV3JU .pieTitleText{text-anchor:middle;font-size:25px;fill:#000000;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-rPeEIp5gkB9jV3JU .slice{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#000000;font-size:17px;}#mermaid-svg-rPeEIp5gkB9jV3JU .legend text{fill:#000000;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:17px;}#mermaid-svg-rPeEIp5gkB9jV3JU :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 45% 30% 25% 博客访问来源分布搜索引擎直接访问社交媒体

对应源码:

text 复制代码

pie title 博客访问来源分布
    "搜索引擎" : 45
    "直接访问" : 30
    "社交媒体" : 25

饼图，占比数据直接写，适合展示比例关系。
#mermaid-svg-qdEP1XpCs3hK0Q5W{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-qdEP1XpCs3hK0Q5W .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-qdEP1XpCs3hK0Q5W .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-qdEP1XpCs3hK0Q5W .error-icon{fill:#552222;}#mermaid-svg-qdEP1XpCs3hK0Q5W .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-qdEP1XpCs3hK0Q5W .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-qdEP1XpCs3hK0Q5W .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-qdEP1XpCs3hK0Q5W .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-qdEP1XpCs3hK0Q5W .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-qdEP1XpCs3hK0Q5W .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-qdEP1XpCs3hK0Q5W .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-qdEP1XpCs3hK0Q5W .marker{fill:#333333;stroke:#333333;}#mermaid-svg-qdEP1XpCs3hK0Q5W .marker.cross{stroke:#333333;}#mermaid-svg-qdEP1XpCs3hK0Q5W svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-qdEP1XpCs3hK0Q5W p{margin:0;}#mermaid-svg-qdEP1XpCs3hK0Q5W .edge{stroke-width:3;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section--1 rect,#mermaid-svg-qdEP1XpCs3hK0Q5W .section--1 path,#mermaid-svg-qdEP1XpCs3hK0Q5W .section--1 circle,#mermaid-svg-qdEP1XpCs3hK0Q5W .section--1 path{fill:hsl(240, 100%, 76.2745098039%);}#mermaid-svg-qdEP1XpCs3hK0Q5W .section--1 text{fill:#ffffff;}#mermaid-svg-qdEP1XpCs3hK0Q5W .node-icon--1{font-size:40px;color:#ffffff;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-edge--1{stroke:hsl(240, 100%, 76.2745098039%);}#mermaid-svg-qdEP1XpCs3hK0Q5W .edge-depth--1{stroke-width:17;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section--1 line{stroke:hsl(60, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-qdEP1XpCs3hK0Q5W .lineWrapper line{stroke:#ffffff;}#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled,#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled circle,#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled text{fill:lightgray;}#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled text{fill:#efefef;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-0 rect,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-0 path,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-0 circle,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-0 path{fill:hsl(60, 100%, 73.5294117647%);}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-0 text{fill:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .node-icon-0{font-size:40px;color:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-edge-0{stroke:hsl(60, 100%, 73.5294117647%);}#mermaid-svg-qdEP1XpCs3hK0Q5W .edge-depth-0{stroke-width:14;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-0 line{stroke:hsl(240, 100%, 83.5294117647%);stroke-width:3;}#mermaid-svg-qdEP1XpCs3hK0Q5W .lineWrapper line{stroke:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled,#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled circle,#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled text{fill:lightgray;}#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled text{fill:#efefef;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-1 rect,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-1 path,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-1 circle,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-1 path{fill:hsl(80, 100%, 76.2745098039%);}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-1 text{fill:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .node-icon-1{font-size:40px;color:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-edge-1{stroke:hsl(80, 100%, 76.2745098039%);}#mermaid-svg-qdEP1XpCs3hK0Q5W .edge-depth-1{stroke-width:11;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-1 line{stroke:hsl(260, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-qdEP1XpCs3hK0Q5W .lineWrapper line{stroke:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled,#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled circle,#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled text{fill:lightgray;}#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled text{fill:#efefef;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-2 rect,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-2 path,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-2 circle,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-2 path{fill:hsl(270, 100%, 76.2745098039%);}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-2 text{fill:#ffffff;}#mermaid-svg-qdEP1XpCs3hK0Q5W .node-icon-2{font-size:40px;color:#ffffff;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-edge-2{stroke:hsl(270, 100%, 76.2745098039%);}#mermaid-svg-qdEP1XpCs3hK0Q5W .edge-depth-2{stroke-width:8;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-2 line{stroke:hsl(90, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-qdEP1XpCs3hK0Q5W .lineWrapper line{stroke:#ffffff;}#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled,#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled circle,#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled text{fill:lightgray;}#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled text{fill:#efefef;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-3 rect,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-3 path,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-3 circle,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-3 path{fill:hsl(300, 100%, 76.2745098039%);}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-3 text{fill:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .node-icon-3{font-size:40px;color:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-edge-3{stroke:hsl(300, 100%, 76.2745098039%);}#mermaid-svg-qdEP1XpCs3hK0Q5W .edge-depth-3{stroke-width:5;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-3 line{stroke:hsl(120, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-qdEP1XpCs3hK0Q5W .lineWrapper line{stroke:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled,#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled circle,#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled text{fill:lightgray;}#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled text{fill:#efefef;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-4 rect,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-4 path,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-4 circle,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-4 path{fill:hsl(330, 100%, 76.2745098039%);}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-4 text{fill:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .node-icon-4{font-size:40px;color:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-edge-4{stroke:hsl(330, 100%, 76.2745098039%);}#mermaid-svg-qdEP1XpCs3hK0Q5W .edge-depth-4{stroke-width:2;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-4 line{stroke:hsl(150, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-qdEP1XpCs3hK0Q5W .lineWrapper line{stroke:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled,#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled circle,#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled text{fill:lightgray;}#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled text{fill:#efefef;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-5 rect,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-5 path,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-5 circle,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-5 path{fill:hsl(0, 100%, 76.2745098039%);}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-5 text{fill:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .node-icon-5{font-size:40px;color:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-edge-5{stroke:hsl(0, 100%, 76.2745098039%);}#mermaid-svg-qdEP1XpCs3hK0Q5W .edge-depth-5{stroke-width:-1;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-5 line{stroke:hsl(180, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-qdEP1XpCs3hK0Q5W .lineWrapper line{stroke:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled,#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled circle,#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled text{fill:lightgray;}#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled text{fill:#efefef;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-6 rect,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-6 path,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-6 circle,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-6 path{fill:hsl(30, 100%, 76.2745098039%);}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-6 text{fill:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .node-icon-6{font-size:40px;color:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-edge-6{stroke:hsl(30, 100%, 76.2745098039%);}#mermaid-svg-qdEP1XpCs3hK0Q5W .edge-depth-6{stroke-width:-4;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-6 line{stroke:hsl(210, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-qdEP1XpCs3hK0Q5W .lineWrapper line{stroke:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled,#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled circle,#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled text{fill:lightgray;}#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled text{fill:#efefef;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-7 rect,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-7 path,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-7 circle,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-7 path{fill:hsl(90, 100%, 76.2745098039%);}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-7 text{fill:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .node-icon-7{font-size:40px;color:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-edge-7{stroke:hsl(90, 100%, 76.2745098039%);}#mermaid-svg-qdEP1XpCs3hK0Q5W .edge-depth-7{stroke-width:-7;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-7 line{stroke:hsl(270, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-qdEP1XpCs3hK0Q5W .lineWrapper line{stroke:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled,#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled circle,#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled text{fill:lightgray;}#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled text{fill:#efefef;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-8 rect,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-8 path,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-8 circle,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-8 path{fill:hsl(150, 100%, 76.2745098039%);}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-8 text{fill:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .node-icon-8{font-size:40px;color:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-edge-8{stroke:hsl(150, 100%, 76.2745098039%);}#mermaid-svg-qdEP1XpCs3hK0Q5W .edge-depth-8{stroke-width:-10;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-8 line{stroke:hsl(330, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-qdEP1XpCs3hK0Q5W .lineWrapper line{stroke:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled,#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled circle,#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled text{fill:lightgray;}#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled text{fill:#efefef;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-9 rect,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-9 path,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-9 circle,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-9 path{fill:hsl(180, 100%, 76.2745098039%);}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-9 text{fill:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .node-icon-9{font-size:40px;color:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-edge-9{stroke:hsl(180, 100%, 76.2745098039%);}#mermaid-svg-qdEP1XpCs3hK0Q5W .edge-depth-9{stroke-width:-13;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-9 line{stroke:hsl(0, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-qdEP1XpCs3hK0Q5W .lineWrapper line{stroke:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled,#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled circle,#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled text{fill:lightgray;}#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled text{fill:#efefef;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-10 rect,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-10 path,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-10 circle,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-10 path{fill:hsl(210, 100%, 76.2745098039%);}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-10 text{fill:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .node-icon-10{font-size:40px;color:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-edge-10{stroke:hsl(210, 100%, 76.2745098039%);}#mermaid-svg-qdEP1XpCs3hK0Q5W .edge-depth-10{stroke-width:-16;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-10 line{stroke:hsl(30, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-qdEP1XpCs3hK0Q5W .lineWrapper line{stroke:black;}#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled,#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled circle,#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled text{fill:lightgray;}#mermaid-svg-qdEP1XpCs3hK0Q5W .disabled text{fill:#efefef;}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-root rect,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-root path,#mermaid-svg-qdEP1XpCs3hK0Q5W .section-root circle{fill:hsl(240, 100%, 46.2745098039%);}#mermaid-svg-qdEP1XpCs3hK0Q5W .section-root text{fill:#ffffff;}#mermaid-svg-qdEP1XpCs3hK0Q5W .icon-container{height:100%;display:flex;justify-content:center;align-items:center;}#mermaid-svg-qdEP1XpCs3hK0Q5W .edge{fill:none;}#mermaid-svg-qdEP1XpCs3hK0Q5W .eventWrapper{filter:brightness(120%);}#mermaid-svg-qdEP1XpCs3hK0Q5W :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 第一阶段 flowchart sequenceDiagram 第二阶段 classDiagram stateDiagram Mermaid 学习路线

对应源码:

text 复制代码

timeline
    title Mermaid 学习路线
    第一阶段 : flowchart
             : sequenceDiagram
    第二阶段 : classDiagram
             : stateDiagram

时间线，按时间顺序讲事件，适合演进历史、学习路线。
#mermaid-svg-Iz25GE9UcRL9W3eI{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-Iz25GE9UcRL9W3eI .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-Iz25GE9UcRL9W3eI .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-Iz25GE9UcRL9W3eI .error-icon{fill:#552222;}#mermaid-svg-Iz25GE9UcRL9W3eI .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Iz25GE9UcRL9W3eI .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-Iz25GE9UcRL9W3eI .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Iz25GE9UcRL9W3eI .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Iz25GE9UcRL9W3eI .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-Iz25GE9UcRL9W3eI .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Iz25GE9UcRL9W3eI .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Iz25GE9UcRL9W3eI .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Iz25GE9UcRL9W3eI .marker.cross{stroke:#333333;}#mermaid-svg-Iz25GE9UcRL9W3eI svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Iz25GE9UcRL9W3eI p{margin:0;}#mermaid-svg-Iz25GE9UcRL9W3eI .edge{stroke-width:3;}#mermaid-svg-Iz25GE9UcRL9W3eI .section--1 rect,#mermaid-svg-Iz25GE9UcRL9W3eI .section--1 path,#mermaid-svg-Iz25GE9UcRL9W3eI .section--1 circle,#mermaid-svg-Iz25GE9UcRL9W3eI .section--1 polygon,#mermaid-svg-Iz25GE9UcRL9W3eI .section--1 path{fill:hsl(240, 100%, 76.2745098039%);}#mermaid-svg-Iz25GE9UcRL9W3eI .section--1 text{fill:#ffffff;}#mermaid-svg-Iz25GE9UcRL9W3eI .node-icon--1{font-size:40px;color:#ffffff;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-edge--1{stroke:hsl(240, 100%, 76.2745098039%);}#mermaid-svg-Iz25GE9UcRL9W3eI .edge-depth--1{stroke-width:17;}#mermaid-svg-Iz25GE9UcRL9W3eI .section--1 line{stroke:hsl(60, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-Iz25GE9UcRL9W3eI .disabled,#mermaid-svg-Iz25GE9UcRL9W3eI .disabled circle,#mermaid-svg-Iz25GE9UcRL9W3eI .disabled text{fill:lightgray;}#mermaid-svg-Iz25GE9UcRL9W3eI .disabled text{fill:#efefef;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-0 rect,#mermaid-svg-Iz25GE9UcRL9W3eI .section-0 path,#mermaid-svg-Iz25GE9UcRL9W3eI .section-0 circle,#mermaid-svg-Iz25GE9UcRL9W3eI .section-0 polygon,#mermaid-svg-Iz25GE9UcRL9W3eI .section-0 path{fill:hsl(60, 100%, 73.5294117647%);}#mermaid-svg-Iz25GE9UcRL9W3eI .section-0 text{fill:black;}#mermaid-svg-Iz25GE9UcRL9W3eI .node-icon-0{font-size:40px;color:black;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-edge-0{stroke:hsl(60, 100%, 73.5294117647%);}#mermaid-svg-Iz25GE9UcRL9W3eI .edge-depth-0{stroke-width:14;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-0 line{stroke:hsl(240, 100%, 83.5294117647%);stroke-width:3;}#mermaid-svg-Iz25GE9UcRL9W3eI .disabled,#mermaid-svg-Iz25GE9UcRL9W3eI .disabled circle,#mermaid-svg-Iz25GE9UcRL9W3eI .disabled text{fill:lightgray;}#mermaid-svg-Iz25GE9UcRL9W3eI .disabled text{fill:#efefef;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-1 rect,#mermaid-svg-Iz25GE9UcRL9W3eI .section-1 path,#mermaid-svg-Iz25GE9UcRL9W3eI .section-1 circle,#mermaid-svg-Iz25GE9UcRL9W3eI .section-1 polygon,#mermaid-svg-Iz25GE9UcRL9W3eI .section-1 path{fill:hsl(80, 100%, 76.2745098039%);}#mermaid-svg-Iz25GE9UcRL9W3eI .section-1 text{fill:black;}#mermaid-svg-Iz25GE9UcRL9W3eI .node-icon-1{font-size:40px;color:black;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-edge-1{stroke:hsl(80, 100%, 76.2745098039%);}#mermaid-svg-Iz25GE9UcRL9W3eI .edge-depth-1{stroke-width:11;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-1 line{stroke:hsl(260, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-Iz25GE9UcRL9W3eI .disabled,#mermaid-svg-Iz25GE9UcRL9W3eI .disabled circle,#mermaid-svg-Iz25GE9UcRL9W3eI .disabled text{fill:lightgray;}#mermaid-svg-Iz25GE9UcRL9W3eI .disabled text{fill:#efefef;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-2 rect,#mermaid-svg-Iz25GE9UcRL9W3eI .section-2 path,#mermaid-svg-Iz25GE9UcRL9W3eI .section-2 circle,#mermaid-svg-Iz25GE9UcRL9W3eI .section-2 polygon,#mermaid-svg-Iz25GE9UcRL9W3eI .section-2 path{fill:hsl(270, 100%, 76.2745098039%);}#mermaid-svg-Iz25GE9UcRL9W3eI .section-2 text{fill:#ffffff;}#mermaid-svg-Iz25GE9UcRL9W3eI .node-icon-2{font-size:40px;color:#ffffff;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-edge-2{stroke:hsl(270, 100%, 76.2745098039%);}#mermaid-svg-Iz25GE9UcRL9W3eI .edge-depth-2{stroke-width:8;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-2 line{stroke:hsl(90, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-Iz25GE9UcRL9W3eI .disabled,#mermaid-svg-Iz25GE9UcRL9W3eI .disabled circle,#mermaid-svg-Iz25GE9UcRL9W3eI .disabled text{fill:lightgray;}#mermaid-svg-Iz25GE9UcRL9W3eI .disabled text{fill:#efefef;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-3 rect,#mermaid-svg-Iz25GE9UcRL9W3eI .section-3 path,#mermaid-svg-Iz25GE9UcRL9W3eI .section-3 circle,#mermaid-svg-Iz25GE9UcRL9W3eI .section-3 polygon,#mermaid-svg-Iz25GE9UcRL9W3eI .section-3 path{fill:hsl(300, 100%, 76.2745098039%);}#mermaid-svg-Iz25GE9UcRL9W3eI .section-3 text{fill:black;}#mermaid-svg-Iz25GE9UcRL9W3eI .node-icon-3{font-size:40px;color:black;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-edge-3{stroke:hsl(300, 100%, 76.2745098039%);}#mermaid-svg-Iz25GE9UcRL9W3eI .edge-depth-3{stroke-width:5;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-3 line{stroke:hsl(120, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-Iz25GE9UcRL9W3eI .disabled,#mermaid-svg-Iz25GE9UcRL9W3eI .disabled circle,#mermaid-svg-Iz25GE9UcRL9W3eI .disabled text{fill:lightgray;}#mermaid-svg-Iz25GE9UcRL9W3eI .disabled text{fill:#efefef;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-4 rect,#mermaid-svg-Iz25GE9UcRL9W3eI .section-4 path,#mermaid-svg-Iz25GE9UcRL9W3eI .section-4 circle,#mermaid-svg-Iz25GE9UcRL9W3eI .section-4 polygon,#mermaid-svg-Iz25GE9UcRL9W3eI .section-4 path{fill:hsl(330, 100%, 76.2745098039%);}#mermaid-svg-Iz25GE9UcRL9W3eI .section-4 text{fill:black;}#mermaid-svg-Iz25GE9UcRL9W3eI .node-icon-4{font-size:40px;color:black;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-edge-4{stroke:hsl(330, 100%, 76.2745098039%);}#mermaid-svg-Iz25GE9UcRL9W3eI .edge-depth-4{stroke-width:2;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-4 line{stroke:hsl(150, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-Iz25GE9UcRL9W3eI .disabled,#mermaid-svg-Iz25GE9UcRL9W3eI .disabled circle,#mermaid-svg-Iz25GE9UcRL9W3eI .disabled text{fill:lightgray;}#mermaid-svg-Iz25GE9UcRL9W3eI .disabled text{fill:#efefef;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-5 rect,#mermaid-svg-Iz25GE9UcRL9W3eI .section-5 path,#mermaid-svg-Iz25GE9UcRL9W3eI .section-5 circle,#mermaid-svg-Iz25GE9UcRL9W3eI .section-5 polygon,#mermaid-svg-Iz25GE9UcRL9W3eI .section-5 path{fill:hsl(0, 100%, 76.2745098039%);}#mermaid-svg-Iz25GE9UcRL9W3eI .section-5 text{fill:black;}#mermaid-svg-Iz25GE9UcRL9W3eI .node-icon-5{font-size:40px;color:black;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-edge-5{stroke:hsl(0, 100%, 76.2745098039%);}#mermaid-svg-Iz25GE9UcRL9W3eI .edge-depth-5{stroke-width:-1;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-5 line{stroke:hsl(180, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-Iz25GE9UcRL9W3eI .disabled,#mermaid-svg-Iz25GE9UcRL9W3eI .disabled circle,#mermaid-svg-Iz25GE9UcRL9W3eI .disabled text{fill:lightgray;}#mermaid-svg-Iz25GE9UcRL9W3eI .disabled text{fill:#efefef;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-6 rect,#mermaid-svg-Iz25GE9UcRL9W3eI .section-6 path,#mermaid-svg-Iz25GE9UcRL9W3eI .section-6 circle,#mermaid-svg-Iz25GE9UcRL9W3eI .section-6 polygon,#mermaid-svg-Iz25GE9UcRL9W3eI .section-6 path{fill:hsl(30, 100%, 76.2745098039%);}#mermaid-svg-Iz25GE9UcRL9W3eI .section-6 text{fill:black;}#mermaid-svg-Iz25GE9UcRL9W3eI .node-icon-6{font-size:40px;color:black;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-edge-6{stroke:hsl(30, 100%, 76.2745098039%);}#mermaid-svg-Iz25GE9UcRL9W3eI .edge-depth-6{stroke-width:-4;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-6 line{stroke:hsl(210, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-Iz25GE9UcRL9W3eI .disabled,#mermaid-svg-Iz25GE9UcRL9W3eI .disabled circle,#mermaid-svg-Iz25GE9UcRL9W3eI .disabled text{fill:lightgray;}#mermaid-svg-Iz25GE9UcRL9W3eI .disabled text{fill:#efefef;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-7 rect,#mermaid-svg-Iz25GE9UcRL9W3eI .section-7 path,#mermaid-svg-Iz25GE9UcRL9W3eI .section-7 circle,#mermaid-svg-Iz25GE9UcRL9W3eI .section-7 polygon,#mermaid-svg-Iz25GE9UcRL9W3eI .section-7 path{fill:hsl(90, 100%, 76.2745098039%);}#mermaid-svg-Iz25GE9UcRL9W3eI .section-7 text{fill:black;}#mermaid-svg-Iz25GE9UcRL9W3eI .node-icon-7{font-size:40px;color:black;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-edge-7{stroke:hsl(90, 100%, 76.2745098039%);}#mermaid-svg-Iz25GE9UcRL9W3eI .edge-depth-7{stroke-width:-7;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-7 line{stroke:hsl(270, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-Iz25GE9UcRL9W3eI .disabled,#mermaid-svg-Iz25GE9UcRL9W3eI .disabled circle,#mermaid-svg-Iz25GE9UcRL9W3eI .disabled text{fill:lightgray;}#mermaid-svg-Iz25GE9UcRL9W3eI .disabled text{fill:#efefef;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-8 rect,#mermaid-svg-Iz25GE9UcRL9W3eI .section-8 path,#mermaid-svg-Iz25GE9UcRL9W3eI .section-8 circle,#mermaid-svg-Iz25GE9UcRL9W3eI .section-8 polygon,#mermaid-svg-Iz25GE9UcRL9W3eI .section-8 path{fill:hsl(150, 100%, 76.2745098039%);}#mermaid-svg-Iz25GE9UcRL9W3eI .section-8 text{fill:black;}#mermaid-svg-Iz25GE9UcRL9W3eI .node-icon-8{font-size:40px;color:black;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-edge-8{stroke:hsl(150, 100%, 76.2745098039%);}#mermaid-svg-Iz25GE9UcRL9W3eI .edge-depth-8{stroke-width:-10;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-8 line{stroke:hsl(330, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-Iz25GE9UcRL9W3eI .disabled,#mermaid-svg-Iz25GE9UcRL9W3eI .disabled circle,#mermaid-svg-Iz25GE9UcRL9W3eI .disabled text{fill:lightgray;}#mermaid-svg-Iz25GE9UcRL9W3eI .disabled text{fill:#efefef;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-9 rect,#mermaid-svg-Iz25GE9UcRL9W3eI .section-9 path,#mermaid-svg-Iz25GE9UcRL9W3eI .section-9 circle,#mermaid-svg-Iz25GE9UcRL9W3eI .section-9 polygon,#mermaid-svg-Iz25GE9UcRL9W3eI .section-9 path{fill:hsl(180, 100%, 76.2745098039%);}#mermaid-svg-Iz25GE9UcRL9W3eI .section-9 text{fill:black;}#mermaid-svg-Iz25GE9UcRL9W3eI .node-icon-9{font-size:40px;color:black;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-edge-9{stroke:hsl(180, 100%, 76.2745098039%);}#mermaid-svg-Iz25GE9UcRL9W3eI .edge-depth-9{stroke-width:-13;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-9 line{stroke:hsl(0, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-Iz25GE9UcRL9W3eI .disabled,#mermaid-svg-Iz25GE9UcRL9W3eI .disabled circle,#mermaid-svg-Iz25GE9UcRL9W3eI .disabled text{fill:lightgray;}#mermaid-svg-Iz25GE9UcRL9W3eI .disabled text{fill:#efefef;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-10 rect,#mermaid-svg-Iz25GE9UcRL9W3eI .section-10 path,#mermaid-svg-Iz25GE9UcRL9W3eI .section-10 circle,#mermaid-svg-Iz25GE9UcRL9W3eI .section-10 polygon,#mermaid-svg-Iz25GE9UcRL9W3eI .section-10 path{fill:hsl(210, 100%, 76.2745098039%);}#mermaid-svg-Iz25GE9UcRL9W3eI .section-10 text{fill:black;}#mermaid-svg-Iz25GE9UcRL9W3eI .node-icon-10{font-size:40px;color:black;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-edge-10{stroke:hsl(210, 100%, 76.2745098039%);}#mermaid-svg-Iz25GE9UcRL9W3eI .edge-depth-10{stroke-width:-16;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-10 line{stroke:hsl(30, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-Iz25GE9UcRL9W3eI .disabled,#mermaid-svg-Iz25GE9UcRL9W3eI .disabled circle,#mermaid-svg-Iz25GE9UcRL9W3eI .disabled text{fill:lightgray;}#mermaid-svg-Iz25GE9UcRL9W3eI .disabled text{fill:#efefef;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-root rect,#mermaid-svg-Iz25GE9UcRL9W3eI .section-root path,#mermaid-svg-Iz25GE9UcRL9W3eI .section-root circle,#mermaid-svg-Iz25GE9UcRL9W3eI .section-root polygon{fill:hsl(240, 100%, 46.2745098039%);}#mermaid-svg-Iz25GE9UcRL9W3eI .section-root text{fill:#ffffff;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-root span{color:#ffffff;}#mermaid-svg-Iz25GE9UcRL9W3eI .section-2 span{color:#ffffff;}#mermaid-svg-Iz25GE9UcRL9W3eI .icon-container{height:100%;display:flex;justify-content:center;align-items:center;}#mermaid-svg-Iz25GE9UcRL9W3eI .edge{fill:none;}#mermaid-svg-Iz25GE9UcRL9W3eI .mindmap-node-label{dy:1em;alignment-baseline:middle;text-anchor:middle;dominant-baseline:middle;text-align:center;}#mermaid-svg-Iz25GE9UcRL9W3eI :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Mermaid
基础
flowchart
sequenceDiagram
进阶
classDiagram
stateDiagram
erDiagram

对应源码:

text 复制代码

mindmap
  root((Mermaid))
    基础
      flowchart
      sequenceDiagram
    进阶
      classDiagram
      stateDiagram
      erDiagram

思维导图，层级结构，适合知识梳理、头脑风暴。

这几个图记住一个原则，一句话能说清的比例和时间，用 pie 和 timeline；需要展示层级和发散，用 mindmap。它们是锦上添花，不是主力。

图表类型怎么选

图类型多了，选型就成了问题。把前面讲的汇总成一张决策表，遇到场景直接查

要表达的东西	用哪个图	一句话理由
流程、分支、判断	flowchart	单个对象的流转
多对象消息往来	sequenceDiagram	HTTP 调用、服务协作
类的骨架和关系	classDiagram	代码结构可视化
状态与转移	stateDiagram	状态机、生命周期
表和表的关系	erDiagram	数据库建模
时间维度的任务	gantt	项目排期
占比、演进、发散	pie / timeline / mindmap	轻量场景

上篇讲过的 flowchart 和 sequenceDiagram 也在这个表里，它们在最上面，是基础。选择的关键是想清楚一个问题，这张图要表达的是流程、消息、结构、状态、数据还是时间。想清楚了，选图就不是选择题了。

主题体系，让图先好看一半

图类型全了，接下来是功力问题。默认主题的图能看，但放进文档里，跟页面风格总有点脱节。Mermaid 支持主题定制，先认识它的主题体系。

内置四套主题，default、neutral、dark、forest。default 是默认，neutral 是中性灰，dark 适合深色页面，forest 是绿色系。换主题一行配置
#mermaid-svg-tJ018TjhHotu3rtL{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-tJ018TjhHotu3rtL .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-tJ018TjhHotu3rtL .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-tJ018TjhHotu3rtL .error-icon{fill:#552222;}#mermaid-svg-tJ018TjhHotu3rtL .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-tJ018TjhHotu3rtL .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-tJ018TjhHotu3rtL .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-tJ018TjhHotu3rtL .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-tJ018TjhHotu3rtL .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-tJ018TjhHotu3rtL .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-tJ018TjhHotu3rtL .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-tJ018TjhHotu3rtL .marker{fill:#666;stroke:#666;}#mermaid-svg-tJ018TjhHotu3rtL .marker.cross{stroke:#666;}#mermaid-svg-tJ018TjhHotu3rtL svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-tJ018TjhHotu3rtL p{margin:0;}#mermaid-svg-tJ018TjhHotu3rtL .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#000000;}#mermaid-svg-tJ018TjhHotu3rtL .cluster-label text{fill:#333;}#mermaid-svg-tJ018TjhHotu3rtL .cluster-label span{color:#333;}#mermaid-svg-tJ018TjhHotu3rtL .cluster-label span p{background-color:transparent;}#mermaid-svg-tJ018TjhHotu3rtL .label text,#mermaid-svg-tJ018TjhHotu3rtL span{fill:#000000;color:#000000;}#mermaid-svg-tJ018TjhHotu3rtL .node rect,#mermaid-svg-tJ018TjhHotu3rtL .node circle,#mermaid-svg-tJ018TjhHotu3rtL .node ellipse,#mermaid-svg-tJ018TjhHotu3rtL .node polygon,#mermaid-svg-tJ018TjhHotu3rtL .node path{fill:#eee;stroke:#999;stroke-width:1px;}#mermaid-svg-tJ018TjhHotu3rtL .rough-node .label text,#mermaid-svg-tJ018TjhHotu3rtL .node .label text,#mermaid-svg-tJ018TjhHotu3rtL .image-shape .label,#mermaid-svg-tJ018TjhHotu3rtL .icon-shape .label{text-anchor:middle;}#mermaid-svg-tJ018TjhHotu3rtL .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-tJ018TjhHotu3rtL .rough-node .label,#mermaid-svg-tJ018TjhHotu3rtL .node .label,#mermaid-svg-tJ018TjhHotu3rtL .image-shape .label,#mermaid-svg-tJ018TjhHotu3rtL .icon-shape .label{text-align:center;}#mermaid-svg-tJ018TjhHotu3rtL .node.clickable{cursor:pointer;}#mermaid-svg-tJ018TjhHotu3rtL .root .anchor path{fill:#666!important;stroke-width:0;stroke:#666;}#mermaid-svg-tJ018TjhHotu3rtL .arrowheadPath{fill:#333333;}#mermaid-svg-tJ018TjhHotu3rtL .edgePath .path{stroke:#666;stroke-width:2.0px;}#mermaid-svg-tJ018TjhHotu3rtL .flowchart-link{stroke:#666;fill:none;}#mermaid-svg-tJ018TjhHotu3rtL .edgeLabel{background-color:white;text-align:center;}#mermaid-svg-tJ018TjhHotu3rtL .edgeLabel p{background-color:white;}#mermaid-svg-tJ018TjhHotu3rtL .edgeLabel rect{opacity:0.5;background-color:white;fill:white;}#mermaid-svg-tJ018TjhHotu3rtL .labelBkg{background-color:rgba(255, 255, 255, 0.5);}#mermaid-svg-tJ018TjhHotu3rtL .cluster rect{fill:hsl(0, 0%, 98.9215686275%);stroke:#707070;stroke-width:1px;}#mermaid-svg-tJ018TjhHotu3rtL .cluster text{fill:#333;}#mermaid-svg-tJ018TjhHotu3rtL .cluster span{color:#333;}#mermaid-svg-tJ018TjhHotu3rtL 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(-160, 0%, 93.3333333333%);border:1px solid #707070;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-tJ018TjhHotu3rtL .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#000000;}#mermaid-svg-tJ018TjhHotu3rtL rect.text{fill:none;stroke-width:0;}#mermaid-svg-tJ018TjhHotu3rtL .icon-shape,#mermaid-svg-tJ018TjhHotu3rtL .image-shape{background-color:white;text-align:center;}#mermaid-svg-tJ018TjhHotu3rtL .icon-shape p,#mermaid-svg-tJ018TjhHotu3rtL .image-shape p{background-color:white;padding:2px;}#mermaid-svg-tJ018TjhHotu3rtL .icon-shape .label rect,#mermaid-svg-tJ018TjhHotu3rtL .image-shape .label rect{opacity:0.5;background-color:white;fill:white;}#mermaid-svg-tJ018TjhHotu3rtL .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-tJ018TjhHotu3rtL .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-tJ018TjhHotu3rtL :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 是
否
开始
判断
执行
跳过

对应源码:

text 复制代码

---
config:
  theme: neutral
---
graph TD
    A[开始] --> B{判断}
    B -->|是| C[执行]
    B -->|否| D[跳过]

注意文件开头的 --- 块，这是 Mermaid 的配置区，支持 YAML 格式。除了切换主题，还能用 themeVariables 定制颜色，让图跟文档主色调对齐
#mermaid-svg-LUDP1YeiMhodoslp{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-LUDP1YeiMhodoslp .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-LUDP1YeiMhodoslp .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-LUDP1YeiMhodoslp .error-icon{fill:#552222;}#mermaid-svg-LUDP1YeiMhodoslp .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-LUDP1YeiMhodoslp .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-LUDP1YeiMhodoslp .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-LUDP1YeiMhodoslp .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-LUDP1YeiMhodoslp .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-LUDP1YeiMhodoslp .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-LUDP1YeiMhodoslp .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-LUDP1YeiMhodoslp .marker{fill:#1565c0;stroke:#1565c0;}#mermaid-svg-LUDP1YeiMhodoslp .marker.cross{stroke:#1565c0;}#mermaid-svg-LUDP1YeiMhodoslp svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-LUDP1YeiMhodoslp p{margin:0;}#mermaid-svg-LUDP1YeiMhodoslp .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-LUDP1YeiMhodoslp .cluster-label text{fill:#333;}#mermaid-svg-LUDP1YeiMhodoslp .cluster-label span{color:#333;}#mermaid-svg-LUDP1YeiMhodoslp .cluster-label span p{background-color:transparent;}#mermaid-svg-LUDP1YeiMhodoslp .label text,#mermaid-svg-LUDP1YeiMhodoslp span{fill:#333;color:#333;}#mermaid-svg-LUDP1YeiMhodoslp .node rect,#mermaid-svg-LUDP1YeiMhodoslp .node circle,#mermaid-svg-LUDP1YeiMhodoslp .node ellipse,#mermaid-svg-LUDP1YeiMhodoslp .node polygon,#mermaid-svg-LUDP1YeiMhodoslp .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-LUDP1YeiMhodoslp .rough-node .label text,#mermaid-svg-LUDP1YeiMhodoslp .node .label text,#mermaid-svg-LUDP1YeiMhodoslp .image-shape .label,#mermaid-svg-LUDP1YeiMhodoslp .icon-shape .label{text-anchor:middle;}#mermaid-svg-LUDP1YeiMhodoslp .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-LUDP1YeiMhodoslp .rough-node .label,#mermaid-svg-LUDP1YeiMhodoslp .node .label,#mermaid-svg-LUDP1YeiMhodoslp .image-shape .label,#mermaid-svg-LUDP1YeiMhodoslp .icon-shape .label{text-align:center;}#mermaid-svg-LUDP1YeiMhodoslp .node.clickable{cursor:pointer;}#mermaid-svg-LUDP1YeiMhodoslp .root .anchor path{fill:#1565c0!important;stroke-width:0;stroke:#1565c0;}#mermaid-svg-LUDP1YeiMhodoslp .arrowheadPath{fill:#333333;}#mermaid-svg-LUDP1YeiMhodoslp .edgePath .path{stroke:#1565c0;stroke-width:2.0px;}#mermaid-svg-LUDP1YeiMhodoslp .flowchart-link{stroke:#1565c0;fill:none;}#mermaid-svg-LUDP1YeiMhodoslp .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-LUDP1YeiMhodoslp .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-LUDP1YeiMhodoslp .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-LUDP1YeiMhodoslp .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-LUDP1YeiMhodoslp .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-LUDP1YeiMhodoslp .cluster text{fill:#333;}#mermaid-svg-LUDP1YeiMhodoslp .cluster span{color:#333;}#mermaid-svg-LUDP1YeiMhodoslp 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-LUDP1YeiMhodoslp .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-LUDP1YeiMhodoslp rect.text{fill:none;stroke-width:0;}#mermaid-svg-LUDP1YeiMhodoslp .icon-shape,#mermaid-svg-LUDP1YeiMhodoslp .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-LUDP1YeiMhodoslp .icon-shape p,#mermaid-svg-LUDP1YeiMhodoslp .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-LUDP1YeiMhodoslp .icon-shape .label rect,#mermaid-svg-LUDP1YeiMhodoslp .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-LUDP1YeiMhodoslp .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-LUDP1YeiMhodoslp .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-LUDP1YeiMhodoslp :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 开始
结束

对应源码:

text 复制代码

---
config:
  themeVariables:
    primaryColor: "#e3f2fd"
    primaryTextColor: "#1565c0"
    lineColor: "#1565c0"
---
graph TD
    A[开始] --> B[结束]

primaryColor 是节点底色，primaryTextColor 是文字色，lineColor 是连线色。想要企业文档那种统一感，把三个变量调成品牌色就行，不用每张图单独配色。

样式定制，精确到单个节点

主题管全局，classDef 管局部。给一类节点定义样式，然后标记引用
#mermaid-svg-WsjRW8Uwum6kQzrN{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-WsjRW8Uwum6kQzrN .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-WsjRW8Uwum6kQzrN .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-WsjRW8Uwum6kQzrN .error-icon{fill:#552222;}#mermaid-svg-WsjRW8Uwum6kQzrN .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-WsjRW8Uwum6kQzrN .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-WsjRW8Uwum6kQzrN .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-WsjRW8Uwum6kQzrN .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-WsjRW8Uwum6kQzrN .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-WsjRW8Uwum6kQzrN .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-WsjRW8Uwum6kQzrN .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-WsjRW8Uwum6kQzrN .marker{fill:#333333;stroke:#333333;}#mermaid-svg-WsjRW8Uwum6kQzrN .marker.cross{stroke:#333333;}#mermaid-svg-WsjRW8Uwum6kQzrN svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-WsjRW8Uwum6kQzrN p{margin:0;}#mermaid-svg-WsjRW8Uwum6kQzrN .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-WsjRW8Uwum6kQzrN .cluster-label text{fill:#333;}#mermaid-svg-WsjRW8Uwum6kQzrN .cluster-label span{color:#333;}#mermaid-svg-WsjRW8Uwum6kQzrN .cluster-label span p{background-color:transparent;}#mermaid-svg-WsjRW8Uwum6kQzrN .label text,#mermaid-svg-WsjRW8Uwum6kQzrN span{fill:#333;color:#333;}#mermaid-svg-WsjRW8Uwum6kQzrN .node rect,#mermaid-svg-WsjRW8Uwum6kQzrN .node circle,#mermaid-svg-WsjRW8Uwum6kQzrN .node ellipse,#mermaid-svg-WsjRW8Uwum6kQzrN .node polygon,#mermaid-svg-WsjRW8Uwum6kQzrN .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-WsjRW8Uwum6kQzrN .rough-node .label text,#mermaid-svg-WsjRW8Uwum6kQzrN .node .label text,#mermaid-svg-WsjRW8Uwum6kQzrN .image-shape .label,#mermaid-svg-WsjRW8Uwum6kQzrN .icon-shape .label{text-anchor:middle;}#mermaid-svg-WsjRW8Uwum6kQzrN .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-WsjRW8Uwum6kQzrN .rough-node .label,#mermaid-svg-WsjRW8Uwum6kQzrN .node .label,#mermaid-svg-WsjRW8Uwum6kQzrN .image-shape .label,#mermaid-svg-WsjRW8Uwum6kQzrN .icon-shape .label{text-align:center;}#mermaid-svg-WsjRW8Uwum6kQzrN .node.clickable{cursor:pointer;}#mermaid-svg-WsjRW8Uwum6kQzrN .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-WsjRW8Uwum6kQzrN .arrowheadPath{fill:#333333;}#mermaid-svg-WsjRW8Uwum6kQzrN .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-WsjRW8Uwum6kQzrN .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-WsjRW8Uwum6kQzrN .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-WsjRW8Uwum6kQzrN .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-WsjRW8Uwum6kQzrN .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-WsjRW8Uwum6kQzrN .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-WsjRW8Uwum6kQzrN .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-WsjRW8Uwum6kQzrN .cluster text{fill:#333;}#mermaid-svg-WsjRW8Uwum6kQzrN .cluster span{color:#333;}#mermaid-svg-WsjRW8Uwum6kQzrN 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-WsjRW8Uwum6kQzrN .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-WsjRW8Uwum6kQzrN rect.text{fill:none;stroke-width:0;}#mermaid-svg-WsjRW8Uwum6kQzrN .icon-shape,#mermaid-svg-WsjRW8Uwum6kQzrN .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-WsjRW8Uwum6kQzrN .icon-shape p,#mermaid-svg-WsjRW8Uwum6kQzrN .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-WsjRW8Uwum6kQzrN .icon-shape .label rect,#mermaid-svg-WsjRW8Uwum6kQzrN .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-WsjRW8Uwum6kQzrN .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-WsjRW8Uwum6kQzrN .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-WsjRW8Uwum6kQzrN :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-WsjRW8Uwum6kQzrN .核心>*{fill:#fbeaf0!important;stroke:#993556!important;stroke-width:2px!important;}#mermaid-svg-WsjRW8Uwum6kQzrN .核心 span{fill:#fbeaf0!important;stroke:#993556!important;stroke-width:2px!important;}#mermaid-svg-WsjRW8Uwum6kQzrN .普通>*{fill:#e6f1fb!important;stroke:#185fa5!important;}#mermaid-svg-WsjRW8Uwum6kQzrN .普通 span{fill:#e6f1fb!important;stroke:#185fa5!important;} 支付成功
发货
完成

对应源码:

text 复制代码

graph TD
    classDef 核心 fill:#fbeaf0,stroke:#993556,stroke-width:2px
    classDef 普通 fill:#e6f1fb,stroke:#185fa5
    A[支付成功]:::核心 --> B[发货]:::普通
    B --> C[完成]:::普通

classDef 定义样式类，fill 是填充色，stroke 是描边色，stroke-width 是描边粗细。节点后面加 :::类名 引用样式。我的用法是，把关键节点标成高亮色，次要节点用普通色，图的信息层级一下就出来了。这个在评审文档里特别有用，重点路径一眼可见。

交互与配置

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

GitHub 仓库

对应源码:

text 复制代码

graph TD
    A[官方文档] --> B[GitHub 仓库]
    click A "https://mermaid.js.org" "查看 Mermaid 官方文档"
    click B "https://github.com/mermaid-js/mermaid" "查看源码"

click 语法是 click 节点ID "链接" "悬浮提示"。适合给架构图的组件挂上对应的代码仓库或文档链接，读者点开就能跳。

还有一个配置值得知道，securityLevel。Mermaid 出于安全考虑，对代码执行类功能有限制，如果图里用了 click 跳转却不生效，先检查它。这个属于踩坑范畴了，后面细说。

复杂图拆分，一张大图是灾难

图越画越大的时候，就该停下来想想了。超过 10 个节点或者 3 层嵌套，一张图就成了灾难，自动布局会拉得很长，读者根本找不到重点。

我的原则是三板斧。第一，按职责拆小图，每个子图表达一个完整流程，不超过 10 个节点。第二，用 subgraph 分区，同区域的节点分组，图的结构感更强。第三，控制方向，长流程用 LR，树形结构用 TD，别让图在纸面上拐来拐去。

这个原则上篇提过一次，子图是控制复杂度的第一层手段。到生产级的图，拆分成了必须做的事，不是可选项。一张图能讲清楚一件事，比一张图讲十件事强得多。

Mermaid CLI，让图进流水线

到这一步，图已经能画好看了。接下来是工程化，让图从「手动截图」变成「流水线产物」。

Mermaid 官方提供了 CLI 工具 mermaid-cli，命令行渲染图表

bash 复制代码

# 安装
npm install -g @mermaid-js/mermaid-cli

# 渲染单个文件
mmdc -i diagram.mmd -o diagram.svg
mmdc -i diagram.mmd -o diagram.png

# 批量渲染目录下所有图表
mmdc -i ./diagrams -o ./output

写一段 mermaid 代码存成 .mmd 文件，CLI 渲染成 SVG 或 PNG。SVG 是矢量图，缩放不糊，适合文档和网页；PNG 适合贴到不支持 SVG 的平台。

CLI 最大的价值是接入 CI。文档仓库里图跟着代码走，提交后 CI 自动渲染，生成最新的图。评审的时候，图和代码一起 diff，改了什么一眼可见。这是 Mermaid 跟拖拽画图最根本的区别，图是代码的一部分，不是孤立的文件。

踩坑实录

讲到这里，该兑现承诺了。这些坑我都踩过，按出现频率排

中文乱码。 用 CLI 导出 PNG 时，中文经常变成方块，因为默认字体不支持中文。解法是配置字体，在 config 里指定一个中文字体，或者用 SVG 格式，矢量图不受字体渲染影响。

节点文字过长，布局爆炸。 节点里塞一大段话，图会被撑得不成样子。解法是节点文字保持简洁，超过 10 个字就拆节点或改到连线标签上。这也呼应上文的拆分原则，文字是布局的一部分。

平台渲染差异。 同一个 mermaid 代码，在 GitHub 和 CSDN 上渲染效果可能不一样，版本不同，支持的特性也不同。写之前确认目标平台的 mermaid 版本，用通用语法，少用冷门特性。双展示方案在这里也适用，平台不渲染时，text 块里的源码照样能看到。

版本不兼容。 上篇说过，注释要独立成行。还有一些语法在新旧版本之间不兼容，比如 stateDiagram 的旧写法。遇到报错先查版本，再查语法，别在旧文档里找新答案。

click 不生效。 如果是安全配置问题，检查 securityLevel。它是 Mermaid 的安全开关，如果文档平台做了限制，click 这类交互会被禁掉。

这些坑的共同点，都是「本地好好的，一换环境就出事」。我的建议是，写图的时候多用通用语法，关键图在目标平台预览一遍再发布。

选型边界，Mermaid 不是万能的

最后聊边界。Mermaid 很强，但不是所有图都该用它。选型看三个场景

场景	推荐	理由
流程图、时序图、状态图、ER 图	Mermaid	文本可维护，进 Git，可评审
需要像素级控制的架构图	SVG	精确控制布局，手写矢量
需要视觉表现力的概念图	AI 生图	配色、质感、创意场景

判断标准就一条，这张图需要频繁迭代、跟随代码演进吗。需要，用 Mermaid；是一次性的精美交付，用 SVG 或 AI 生图。工具不是信仰，场景才是。这句话上篇说过，这里再说一遍，因为它值得记住。

收尾

两篇写完，Mermaid 从入门到工程化，基本覆盖了。回看整个过程，最值钱的不是语法，是那个心智转变，图是代码，不是画布上的像素。

最后留个建议，别等用到才学。下次写技术方案，试着把其中一张图换成 Mermaid，体验一次改文本出图的快感，你会回不去的。