企业官网建设流程全解析

3分钟把Mermaid用起来的完整指南：用文字画出流程图、时序图和甘特图

【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid

Mermaid 是一个用文字生成图表的工具：你在文档里写几行 Markdown 风格的文本，它就能渲染出流程图、时序图、甘特图、ER 图等 20 多种图形。如果你正被"文档画一张图要开图形软件、改一次图要重导一次"折磨，它就是为你准备的。

第一关：最快上手路径，3分钟画出第一张图

你不用先装任何东西。Mermaid 的语法就是"第一行声明图表类型，后面写内容"，所以最短路径是直接在你的 Markdown 文档里插一个代码块：

在支持 Mermaid 的 Markdown 平台里，这个代码块会被直接渲染成一张自上而下的流程图。你马上会看到：改一行文字，图就变了，不存在"重新画图"这个动作。

如果你要在自己的网页里用，装一下 npm 包（需要 Node 16+），然后给图表套一个<pre class="mermaid">标签，再调用一次mermaid.initialize()，浏览器打开就能看到渲染结果：

npm install mermaid

细节在 使用指南 和 新手入门 里有逐步说明。想先不碰代码，仓库里还带了本地演示页，clone 下来即可跑：

git clone https://gitcode.com/GitHub_Trending/me/mermaid cd mermaid pnpm install pnpm run dev

官方在线编辑器则把"代码、配置、预览"分成三个面板，左边打字右边出图，还带编辑历史和导出按钮，适合用来试语法：

第二关：我这种情况该用哪种图？

新手最常卡住的不是语法，而是"我手头这个东西该画成什么"。用这张对照表直接做决策：

完整清单（思维导图、用户旅程、象限图、Sankey 图等 20 余种）见 语法总览。

第三关：三个真实工作场景

场景一：技术文档里补一张架构流程图

怎么用：文档里画架构最省事的写法是流程图加subgraph分组，前端后端各包一层，中间一条线连起来：

用完你得到什么：一张能直接进文档评审的分组架构图。后面模块改名、拆服务，你只改文本，diff 里一眼能看出结构变化——这就是 Mermaid 解决的核心问题：文档跟得上开发节奏。

场景二：排期会上给一张不会骗人的甘特图

怎么用：甘特图支持excludes声明非工作日，周末和节假日会从工期计算里剔掉，图上用红色竖线标出：

用完你得到什么：一张自动算好工期的时间线。加了excludes weekends后，"5 个工作日"和"5 个日历日"不再混为一谈，排期争论少了大半。

场景三：给 API 文档画一张交互时序图

怎么用：时序图里->>是实线箭头（请求），-->>是虚线箭头（响应），写四行就能画清楚一次请求的完整往返：

用完你得到什么：一张比"调用链 A 调 B 再调 C"精确得多的图——谁在哪个时间点发了什么、谁响应，全在图面上。类图同理，把类名、属性、方法写成文本就能得到下面这种标准 UML 风格产出：

第四关：新手最容易卡住的坑

语法总览页专门列了"会弄坏图表的词"，新手 90% 的报错都出在下面几条：

1. 拼写错误会让整张图渲染失败，而配置项写错却会静默忽略——所以"图没出来"先查拼写，"图出来但样式没变"先查配置名。
2. end是保留字。节点叫 "End" 或流程里写了end就会把流程图、时序图弄崩，解法是把标签用引号包起来，如A["end review"]。
3. 注释里别写{}。%%注释里出现花括号会和指令语法冲突，让渲染器误判。
4. 标签里的特殊字符（括号、引号、换行）会破坏语法，统一用双引号把标签包起来最稳。
5. 暗色主题要两个开关：theme: 'dark'只改配色，再配darkMode: true才连背景一起变暗，只设一个就会出现"深色元素浮在白底上"的错乱感。
6. frontmatter 配置大小写敏感，缩进必须一致；格式写错同样会直接崩图。想给单张图换主题，把 YAML 放在---之间就行：

更细的排障问题（怎么加标题、怎么换行、怎么绑定点击事件等）可以翻 FAQ，配置项全表见 配置文档，主题变量逐个解释见 主题文档。

第五关：给团队的落地清单

按顺序做，每一步都有明确产出：

1. 把图表源码存进 Git 仓库。.mmd文件进版本控制后，图表的每次修改都有 diff、有作者、可回溯，评审时直接看文本差异。
2. 统一主题。在mermaid.initialize({ theme: 'base', themeVariables: {...} })里定一套品牌色和字体，全团队文档视觉一致；只改base主题这一项不会和其他内置主题打架。
3. 给文档配最小示例库。挑 3 种高频图（流程、时序、甘特）各写一个 5 行内的模板，新人复制模板改文字即可，不用背语法。
4. 导出走官方在线编辑器。PNG、SVG、Markdown 链接都能导出，PNG 尺寸可调；不想装环境的人试语法也用它。
5. 网站集成用<pre class="mermaid">。每份图表定义单独放一个标签，startOnLoad: true让页面加载时自动渲染，不用手写渲染调用。

Mermaid 的本质就是把"画图"降级成"打字"：语法一天能学会，之后的每一次修改都是几行文本的事。先挑你文档里最旧的一张图，用它重画一遍——这就是最好的起步。

【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid