企业官网建设流程全解析

Mermaid 文本驱动图表生成工具：用 Markdown 语法画出 20 多种专业图表的完整指南

【免费下载链接】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 的文字，它在浏览器里直接渲染成流程图、时序图、甘特图等 20 多种图表。下面这份指南带你从零看懂它的用法、配置和进阶玩法。

为什么团队都改用文本画 Mermaid 图表

传统 GUI 绘图工具有个老大难问题：图画完就是图片文件，改一个字要打开软件重画，版本历史也看不到。Mermaid 把图变成文本后，三件事就顺手了：

• 变更可追溯：图表文本进 Git 仓库，每次改动都有 diff，评审时能一眼看出"哪条线被挪了位置"。
• 协作不锁文件：任何人都能在 Markdown 里直接编辑图，走正常的代码评审流程，不存在"文件被占用"。
• 文档与图同步：图就嵌在文档代码块里，结构一变改文字即可，不会出现"文档是新的、图是旧的"。

一个直观类比：Mermaid 之于图表，就像 Markdown 之于排版——内容即源码。

一次配齐的图型：从流程图到时序图

Mermaid 支持的图型覆盖软件开发的主要场景，每种都有独立语法页面，目录在 docs/syntax/。先看三种最常用的。

流程图：画系统流程、决策分支、审批工作流，支持子图嵌套和条件分支。

时序图：描述对象之间按时间顺序的消息交互，写 API 设计、微服务调用链特别合适，支持同步/异步消息、循环和备注。

甘特图：排项目计划、标里程碑、跟进度百分比，还能配置排除节假日。

除此之外还有 ER 图、类图、状态图、思维导图、饼图、象限图、雷达图、Git 分支图、用户旅程图等 20 多种：

每种图型都能配主题、加标题、做无障碍说明，例如甘特图可以按你的节假日规则隐藏排除日期：

三步上手：从在线编辑器到项目集成

第一步：打开在线编辑器画第一张图

不用装任何东西，官方在线编辑器左侧写代码、右侧实时预览，还能导出 PNG、SVG 和 Markdown 源码。新手建议用它当练习场。

第二步：给网页加两行代码，渲染 Mermaid 图表

在 Node 项目里安装依赖：

npm install mermaid

页面里把图定义放进<pre class="mermaid">标签，再引入打包产物mermaid.esm.min.mjs，页面加载后它就自动找到这些标签，渲染出 SVG。完整接入方式见 docs/config/usage.md。

第三步：克隆源码跑本地构建

想改内核或做深度定制就拉源码（基于 pnpm monorepo）：

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

构建脚本定义在根目录 package.json 中，dev命令可启动开发服务器边写边看效果。

语法 30 秒速记：先写类型，再写内容

所有图型共享同一个套路：第一行声明图型，后面写内容。比如一个带循环的流程：

几个新手容易踩的点，官方语法参考页 docs/intro/syntax-reference.md 有完整清单：

• 拼错的词会直接让图报错，而参数写错只是被静默忽略——看到图没变，先查拼写。
• %%开头是行注释。
• 流程图中节点文字含end这类保留词时要加引号包起来。
• 图顶部可以用---包裹一段 YAML 做单图配置，叫 frontmatter，比如单独给某张甘特图换主题：

--- config: theme: forest --- graph TD a --> b

换主题、调安全级别、导图片：最省心的 Mermaid 配置方法

主题：内置default、neutral（适合黑白打印）、dark、forest（绿色系）、base（唯一可深度修改的基底）五种，站点级用initialize()设置，单张图用 frontmatter 覆盖，细节在 docs/config/theming.md。

安全：默认会处理用户输入的图表内容；若图表里可能有不可信来源的 HTML，开启mermaid.initialize({ securityLevel: 'strict' })进入沙箱模式，防 XSS。

导出：需要 PNG/SVG 文件时，用配套的 mermaid CLI 工具mmdc批量转换，可以接进 CI，在文档构建时自动把仓库里的.mmd文本转成图片。

生态扩展：让 Mermaid 图表接入更多平台

• 平台原生支持：GitHub、GitLab 的 Markdown 直接渲染，VS Code 有扩展实时预览，Notion、Obsidian 也内置解析——你在文档里写代码块就能出图。
• 多语言集成：社区有 Python 等语言的封装库，生态教程见 docs/ecosystem/。
• 自定义布局：仓库内置 packages/mermaid-layout-elk/ 等布局包，用不同的自动排版算法处理复杂图。
• 自定义图型：packages/mermaid-example-diagram/ 是一个可复制的模板，照着它能做出自己领域的图表类型，步骤写在 docs/community/new-diagram.md。

深入学习路线：文档目录怎么逛

• 入门顺序：docs/intro/getting-started.md → docs/intro/syntax-reference.md
• 图型语法按图索骥：docs/syntax/flowchart.md、docs/syntax/sequenceDiagram.md、docs/syntax/gantt.md
• 配置与 API：docs/config/
• 集成教程与视频：docs/ecosystem/tutorials.md
• 想参与贡献：docs/community/contributing.md

图表是技术写作里最容易被遗忘、又最容易被翻阅的部分。把它变成文本，它就能跟着代码一起被评审、被回溯、被长期维护——这正是 Mermaid 这类文本驱动图表工具给团队带来的长期价值。

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