企业官网建设流程全解析

Mermaid 文本绘图完全指南：3 步用 Markdown 语法生成流程图、时序图与甘特图

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

Mermaid 是一个基于 JavaScript 的开源图表库，让你用 Markdown 风格的纯文本"写出"流程图、时序图、类图、甘特图等 20 多种图形。它解决的痛点很实在：图表以文本形式存在，能进 Git、能 diff、能随代码一起评审，改一行文字就能重新生成，不用再打开画图软件导出图片。

它适合谁

如果你写过 Markdown 文档、维护过技术博客，或者需要在 README 里解释系统架构、接口调用顺序、项目排期，Mermaid 就是为你准备的。产品经理用它画业务流程，工程师用它写架构说明，学生用它整理论文里的流程示意图——只要你能打字，就能画图，不需要任何设计工具基础。

快速上手：从 clone 到跑起来的最短路径

前置条件只需要两样：Node.js 和 pnpm 包管理器。

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

前三步是把源码拉下来并装好依赖，最后一条命令启动本地开发服务。启动后打开浏览器里的本地地址，就能实时看到图表渲染效果。

如果只想"看看效果"而不想构建，也可以直接打开仓库里现成的演示页，比如 demos/flowchart.html、demos/sequence.html，每个图表类型都有一份独立页面，点开即看。

核心能力拆解

20+ 种图表类型，一个语法体系搞定

流程图、时序图、类图、状态图、ER 图、甘特图、饼图、Git 分支图、思维导图、泳道图……项目把它们统一收在 packages/mermaid/src/diagrams/ 目录下，每种图一个子文件夹。语法风格高度一致：都是"第一行声明图表类型，后面用缩进写结构"，学会流程图，看时序图文档基本无压力。

纯文本图表，天然适配版本控制

图表是.mmd/ Markdown 代码块这类纯文本文件。它带来两个直接好处：

• 改动可追溯：谁在什么时候加了哪个节点，Git 日志一目了然
• 评审零门槛：代码评审时直接看到图表差异，而不是"见图 3 的更新版"

仓库的端到端测试正是这么做的——每个图表场景一个.mmd文件，放在 e2e/diagrams/ 下，渲染结果做视觉回归比对，图表代码即测试用例。

主题与配置：同一份代码，多种外观

图表颜色、字体、布局方向（TB纵向 /LR横向）都可以通过配置控制，内置default、forest、dark、neutral等主题。主题逻辑位于 packages/mermaid/src/themes/，配置文档见 docs/config/configuration.md。同一份文本在不同主题下渲染，就能适配论文黑白排版或深色演示文稿。

实战演示：10 分钟画出第一张甘特图

跟着下面 3 步走一遍，用的是甘特图（适合项目排期），语法最简单：

第 1 步：写图表文本。新建一个plan.mmd文件，内容如下——第一行声明gantt，section分组，每行一个任务：

gantt title 博客上线计划 dateFormat YYYY-MM-DD section 内容 撰写初稿 :done, t1, 2026-08-01, 5d 配图与排版 :active, t2, after t1, 3d section 发布 内网预览 :t3, after t2, 1d 正式发布 :t4, after t3, 1d

第 2 步：渲染成图。最简单的方式是把这段文本放进支持 Mermaid 的 Markdown 环境（如 GitHub、GitLab 的mermaid代码块）直接查看；或在本地开发服务里替换演示页的图表代码。仓库的演示模板都在 demos/ 目录，以 demos/gantt.html 为例，把上面的文本贴进去即可。

第 3 步：微调导出。把dateFormat改成YYYY-MM-DD HH:mm可细化到小时；任务后加after t1表示依赖关系，排期一调整，全图自动重排，不用手动挪块。

官方文档里甘特图还展示了排除周末、节假日等进阶能力，效果如下：

技巧与避坑

1. 先选对布局方向再堆细节。节点多时默认TB（自上而下）容易拉得很长，横向流程改用LR，一行配置就能让图更紧凑。
2. 节点文字含特殊符号要加引号。标签里出现:、#、(等字符时，用双引号包起来，例如A["状态: 运行中"]，否则会被解析器当成语法报错。
3. 渲染不受信任的内容时务必开沙箱。Mermaid 内置了内容清洗与沙箱渲染模式（基于 DOMPurify），处理外部输入时不要关掉，安全机制说明见 docs/community/security.md。
4. 主题要全项目统一。文档、演示、截图各用一套主题会让图表风格割裂，建议把theme写进统一的初始化配置里一次设定。
5. 想更规整的布局可试 ELK 引擎。复杂流程图可用 packages/mermaid-layout-elk/ 提供的 ELK 布局，节点间距更均匀，仓库 e2e 里也放了专门用例对比两种布局效果。

延伸阅读

• 新手入口：docs/intro/getting-started.md（部署方式总览）
• 全部图表语法速查：docs/intro/syntax-reference.md
• 配置项详解：docs/config/
• 各图表类型的独立文档：docs/syntax/（如 flowchart.md、sequenceDiagram.md）
• 核心渲染逻辑源码：packages/mermaid/src/mermaid.ts
• 解析器（Langium 实现）：packages/parser/
• ER 图效果参考：

现在就动手

打开 demos/flowchart.html，改一个节点的文字，亲眼看看"文字即图表"有多快——十分钟之后，你的第一张 Mermaid 图表就诞生了。

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