Markdown 进阶必修课：如何用文本“写”出复杂的时序图与甘特图？

作为一名开发者或技术写作者，你是否经历过这样的痛苦：

为了画一个简单的业务流程图，打开 Visio 或 PowerPoint，把时间都浪费在了对齐像素、调整箭头方向、统一配色上？更糟糕的是，当业务逻辑变更时，你又得重新拖拽调整半天。

“画图”本该是为了理清思路，而不是成为排版的奴隶。

今天，我们就来聊聊 Mermaid —— 一种基于 JavaScript 的图表绘制工具。它允许你通过简单的文本（Markdown 风格）来生成复杂的图表。Docs as Code（文档即代码），这才是程序员该有的画图方式。

为什么选择 Mermaid？

Mermaid 核心语法速成

Mermaid 支持流程图、时序图、甘特图、类图、状态图等多种类型。下面我们通过几个最常用的例子带你快速上手。

1. 流程图 (Flowchart)

这是最基础也是最常用的图表。

代码示例：

graph TD
A[开始] –> B{是否已登录?}
B — 是 –> C[进入首页]
B — 否 –> D[跳转登录页]
D –> B
C –> E[结束]

渲染效果：

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

是

否

开始

是否已登录?

进入首页

跳转登录页

结束

解析：

• graph TD：表示从上到下（Top-Down）的图。
• [] 表示矩形节点，{} 表示菱形判断节点，(()) 表示圆形节点。
• –> 表示带箭头的连线。

2. 时序图 (Sequence Diagram)

在描述系统交互、API 调用链时，时序图是必不可少的。

代码示例：

sequenceDiagram
participant U as 用户
participant S as 服务器
participant D as 数据库

U->>S: 发起请求 /login
S->>D: 查询用户信息
D–>>S: 返回用户数据
alt 密码正确
S–>>U: 返回 Token
else 密码错误
S–>>U: 返回 401 错误
end

渲染效果：

数据库

服务器

用户

数据库

服务器

用户

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

alt

[密码正确]

[密码错误]

发起请求 /login

查询用户信息

返回用户数据

返回 Token

返回 401 错误

解析：

• participant 定义参与者。
• ->> 表示实线箭头（请求），–>> 表示虚线箭头（响应）。
• alt … else … end 用于表达逻辑分支。

3. 甘特图 (Gantt Chart)

项目经理或 Team Leader 的最爱，用于展示项目进度。

代码示例：

gantt
title 项目开发计划
dateFormat YYYY-MM-DD
section 后端开发
数据库设计 :a1, 2025-10-01, 3d
API 接口开发 :after a1, 5d
section 前端开发
页面切图 :2025-10-02, 4d
接口联调 :5d

渲染效果：

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

2025-10-01

2025-10-02

2025-10-03

2025-10-04

2025-10-05

2025-10-06

2025-10-07

2025-10-08

2025-10-09

2025-10-10

2025-10-11

数据库设计

页面切图

API 接口开发

接口联调

后端开发

前端开发

项目开发计划

如何快速预览和调试？

虽然很多本地 IDE 插件支持 Mermaid，但在某些场景下，比如：

• 你不想安装笨重的插件；
• 你需要快速验证一段代码生成的图表效果；
• 你需要在一个干净的环境中从零编写并复制 SVG/PNG 给同事；

这时候，一个轻量级的在线编辑器就非常重要了。

推荐使用这个在线 Mermaid 图表编辑器，它界面清爽，支持实时预览，左边写代码，右边即时出图，非常适合新手练习或老手快速出图：

👉 工具直达：在线 Mermaid 图表编辑器

进阶技巧：自定义样式

Mermaid 甚至允许你通过 style 关键字来定制节点的颜色，让图表更符合你的 UI 风格。

graph LR
A[普通节点] –> B[重要节点]
style B fill:#f9f,stroke:#333,stroke-width:4px

渲染效果：

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

普通节点

重要节点

总结

Mermaid 的出现，极大地降低了绘制技术图表的门槛。它将我们将从繁琐的 UI 操作中解放出来，专注于逻辑本身。

如果你还没尝试过用代码画图，建议现在就复制上面的代码，去文中提到的在线 Mermaid 图表编辑器里试一试。相信我，一旦习惯了这种“所写即所得”的高效模式，你就再也回不去 Visio 了。