Mermaid-AI时代的绘图语言

概述

Mermaid 是一个基于 JavaScript 的图表和作图工具，它使用类似 Markdown 的文本定义和渲染器来创建和修改复杂的图表。支持十多种图表。重点是免费！！！
#mermaid-svg-wVpW5DmVC54ozk0q{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-wVpW5DmVC54ozk0q .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-wVpW5DmVC54ozk0q .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-wVpW5DmVC54ozk0q .error-icon{fill:#552222;}#mermaid-svg-wVpW5DmVC54ozk0q .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-wVpW5DmVC54ozk0q .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-wVpW5DmVC54ozk0q .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-wVpW5DmVC54ozk0q .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-wVpW5DmVC54ozk0q .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-wVpW5DmVC54ozk0q .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-wVpW5DmVC54ozk0q .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-wVpW5DmVC54ozk0q .marker{fill:#333333;stroke:#333333;}#mermaid-svg-wVpW5DmVC54ozk0q .marker.cross{stroke:#333333;}#mermaid-svg-wVpW5DmVC54ozk0q svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-wVpW5DmVC54ozk0q p{margin:0;}#mermaid-svg-wVpW5DmVC54ozk0q .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-wVpW5DmVC54ozk0q .cluster-label text{fill:#333;}#mermaid-svg-wVpW5DmVC54ozk0q .cluster-label span{color:#333;}#mermaid-svg-wVpW5DmVC54ozk0q .cluster-label span p{background-color:transparent;}#mermaid-svg-wVpW5DmVC54ozk0q .label text,#mermaid-svg-wVpW5DmVC54ozk0q span{fill:#333;color:#333;}#mermaid-svg-wVpW5DmVC54ozk0q .node rect,#mermaid-svg-wVpW5DmVC54ozk0q .node circle,#mermaid-svg-wVpW5DmVC54ozk0q .node ellipse,#mermaid-svg-wVpW5DmVC54ozk0q .node polygon,#mermaid-svg-wVpW5DmVC54ozk0q .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-wVpW5DmVC54ozk0q .rough-node .label text,#mermaid-svg-wVpW5DmVC54ozk0q .node .label text,#mermaid-svg-wVpW5DmVC54ozk0q .image-shape .label,#mermaid-svg-wVpW5DmVC54ozk0q .icon-shape .label{text-anchor:middle;}#mermaid-svg-wVpW5DmVC54ozk0q .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-wVpW5DmVC54ozk0q .rough-node .label,#mermaid-svg-wVpW5DmVC54ozk0q .node .label,#mermaid-svg-wVpW5DmVC54ozk0q .image-shape .label,#mermaid-svg-wVpW5DmVC54ozk0q .icon-shape .label{text-align:center;}#mermaid-svg-wVpW5DmVC54ozk0q .node.clickable{cursor:pointer;}#mermaid-svg-wVpW5DmVC54ozk0q .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-wVpW5DmVC54ozk0q .arrowheadPath{fill:#333333;}#mermaid-svg-wVpW5DmVC54ozk0q .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-wVpW5DmVC54ozk0q .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-wVpW5DmVC54ozk0q .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-wVpW5DmVC54ozk0q .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-wVpW5DmVC54ozk0q .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-wVpW5DmVC54ozk0q .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-wVpW5DmVC54ozk0q .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-wVpW5DmVC54ozk0q .cluster text{fill:#333;}#mermaid-svg-wVpW5DmVC54ozk0q .cluster span{color:#333;}#mermaid-svg-wVpW5DmVC54ozk0q 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-wVpW5DmVC54ozk0q .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-wVpW5DmVC54ozk0q rect.text{fill:none;stroke-width:0;}#mermaid-svg-wVpW5DmVC54ozk0q .icon-shape,#mermaid-svg-wVpW5DmVC54ozk0q .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-wVpW5DmVC54ozk0q .icon-shape p,#mermaid-svg-wVpW5DmVC54ozk0q .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-wVpW5DmVC54ozk0q .icon-shape .label rect,#mermaid-svg-wVpW5DmVC54ozk0q .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-wVpW5DmVC54ozk0q .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-wVpW5DmVC54ozk0q .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-wVpW5DmVC54ozk0q :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-wVpW5DmVC54ozk0q .root>*{fill:#2C3E50!important;stroke:#1A252F!important;stroke-width:2px!important;color:#fff!important;font-weight:bold!important;}#mermaid-svg-wVpW5DmVC54ozk0q .root span{fill:#2C3E50!important;stroke:#1A252F!important;stroke-width:2px!important;color:#fff!important;font-weight:bold!important;}#mermaid-svg-wVpW5DmVC54ozk0q .root tspan{fill:#fff!important;}#mermaid-svg-wVpW5DmVC54ozk0q .coreNode>*{fill:#3498DB!important;stroke:#2980B9!important;stroke-width:1.5px!important;color:#fff!important;}#mermaid-svg-wVpW5DmVC54ozk0q .coreNode span{fill:#3498DB!important;stroke:#2980B9!important;stroke-width:1.5px!important;color:#fff!important;}#mermaid-svg-wVpW5DmVC54ozk0q .coreNode tspan{fill:#fff!important;}#mermaid-svg-wVpW5DmVC54ozk0q .proNode>*{fill:#2ECC71!important;stroke:#27AE60!important;stroke-width:1.5px!important;color:#fff!important;}#mermaid-svg-wVpW5DmVC54ozk0q .proNode span{fill:#2ECC71!important;stroke:#27AE60!important;stroke-width:1.5px!important;color:#fff!important;}#mermaid-svg-wVpW5DmVC54ozk0q .proNode tspan{fill:#fff!important;}#mermaid-svg-wVpW5DmVC54ozk0q .expNode>*{fill:#E67E22!important;stroke:#D35400!important;stroke-width:1.5px!important;color:#fff!important;}#mermaid-svg-wVpW5DmVC54ozk0q .expNode span{fill:#E67E22!important;stroke:#D35400!important;stroke-width:1.5px!important;color:#fff!important;}#mermaid-svg-wVpW5DmVC54ozk0q .expNode tspan{fill:#fff!important;} 实验性/新增
象限图
需求图
数据包图
鱼骨图 Beta
维恩图 Beta
专业领域类
时间线
思维导图
桑基图
架构图
C4模型
看板图
雷达图
XY图表
矩形树图
核心常用类
流程图
时序图
类图
状态图
ER图
甘特图
用户旅程图
Git图
饼图
📊 Mermaid 图表类型

Mermaid 可以被看作一种领域特定语言（DSL，Domain-Specific Language）。

Mermaid 的核心是一种声明式的、基于文本的标记语法，专门用来定义和生成图表。就像 Markdown 是用于格式化文本的轻量级标记语言一样，Mermaid 是用于绘制图表的轻量级声明式语言。

背景

技术文档几乎离不开图：接口调用需要时序图，状态流转需要状态图，架构梳理需要流程图。但在长期维护中，这些图几乎都会出问题：

截图或二进制图片难以修改，每次调整都需要重绘，导致图形逐渐滞后于代码；
不同维护者使用的绘图工具不同，风格杂乱，没有统一的"图表语言"；
图表无法被 diff 审查，代码评审中看不出"从 A 到 B 的箭头为什么被删除了"。

现有常见方案各有不足：Confluence/Notion 内置绘图虽可协作，但强依赖平台，迁移成本高；通用绘图软件（draw.io、Visio）产出的图片文件与文档分离，难以通过 Git 追溯变更。这些问题本质上是因为图表被当作静态资源而非可编译的源码对待。

Mermaid 的诞生完美解决了上述缺点。Mermaid 核心特点如下：

纯文本描述：在代码块里用特定语法写图表，不用手动拖拽画图
自动渲染：支持 Mermaid 的平台（如 GitHub、Notion、Obsidian、Typora）会自动将代码转换成可视化图表
易于版本控制：文本形式的图表可以直接用 Git 追踪修改历
免费开源：无需付费或注册