企业官网建设流程全解析

Mermaid 文本画图：本地 5 分钟跑起来，几行文字画出第一张流程图

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

评审材料发出去，有人反馈"第二页的流程图怎么和上周的版本对不上？"——你点开文档一看，图还是三个月前用图形软件拖出来的旧版，而接口流程早就改了四次。想重画？打开专业绘图工具、重新对齐方框和箭头、导出、替换、再等一轮评审。更麻烦的是，这张图是二进制格式，没法进 Git 参与版本管理，改动全靠人肉同步。

换个思路：把图写成文字。Mermaid 就是这样一个基于文本的图表工具，你在 Markdown 里写几行A --> B，它就替你渲染出流程图、时序图、甘特图等 30 多种图。图和文档住在同一个文件里，改图就是改文字，版本、评审、提交全都顺了。

5 分钟把 Mermaid 在本地跑起来

不装什么重型软件，四条命令的事。先确认 Node 环境，接着装上包管理器，然后拉代码、装依赖、开服务。

一条命令确认 Node 版本

# 检查 Node.js 与 pnpm 是否就位 node -v && pnpm -v

预期输出类似v20.x.x加上一行 pnpm 版本号。⚠️ 注意：本项目是 pnpm 管理的 monorepo，package.json里写死了包管理器版本，缺 pnpm 就先npm install -g pnpm，不建议直接用 npm 装依赖。

克隆仓库到本地

# 把 Mermaid 源码拉到本机 git clone https://gitcode.com/GitHub_Trending/me/mermaid

预期输出以Receiving objects: 100%收尾。网络慢属于正常现象，换个网络环境或稍等片刻即可，中途断了重新执行同一条命令会自动续传。

安装依赖包

# 进入项目目录并安装全部依赖 cd mermaid pnpm install

预期输出若干包版本信息后安静结束。首次安装可能要等几分钟，个别包需要本地编译，看到进度条卡住别急，让它跑完。

启动开发服务器

# 启动带热更新的开发服务 pnpm dev

预期输出Dev server starting on http://localhost:9000。浏览器打开这个地址就能看到 Mermaid 开发页面，改代码会自动重编译、页面自动刷新。⚠️ 注意：默认端口是 9000，被占用的话用MERMAID_DEV_PORT=9001 pnpm dev换一个再启动。

甘特图：用文本定义的日期和依赖关系渲染出的项目排期，横条长度即任务工期

能力全景：一张表看清 Mermaid 能画什么

流程图：节点、菱形判断和分支连线都由文本一行行定义

原理 30 秒：文本到图形发生了什么

你可以把 Mermaid 想象成一位速记翻译官，分三步干活：

• 读懂你的文字：每种图有专属解析器，把文本拆成节点和连线的结构化数据；
• 安排站位：布局引擎算出每个元素的坐标，内置 dagre 分层布局，还能切换 ELK 布局处理复杂图；
• 画出来：按当前主题的颜色和字体生成 SVG，直接嵌进网页或文档。

所以改一个节点名字，就是改一行文字，后面两步全自动重跑——这就是它和二进制图片最大的区别。

用户旅程图：各阶段体验评分的起伏，用文本一行行写出来

动手玩起来：三个由浅入深的小例子

第一例：把请假流程写成 8 行文字

场景：团队想给新同学看请假审批怎么走。

效果：一条带菱形判断的审批链路，改审批人只需要改方括号里的字。

第二例：登录接口的时序图

场景：接口文档里要讲清楚登录时浏览器和服务之间发生了什么。

效果：请求用实线、响应用虚线，每一步谁对谁说话一目了然。

第三例：发版日的甘特图

场景：周五下午要发版，把当天任务排成表贴进通告。

效果：横条即时间轴，crit和milestone把关键节点标红加星。

时序图：参与者从左到右排队，消息箭头按发生顺序依次落下

急救箱：遇到这些报错直接抄答案

• 现象：页面提示Syntax error，图不渲染。原因：几乎总是标点问题——中文全角冒号：、全角括号混进了代码。解法：把图表文本里所有标点换成半角，-->这类箭头两侧只留 ASCII 字符。

• 现象：子图写法对了却整段解析失败。原因：subgraph 名字 [标题]的方括号格式少写或写错位置。解法：子图声明严格按subgraph id [显示标题]写，标题带空格必须放方括号内。

• 现象：pnpm dev起不来，端口报错。原因：9000 端口已被其他服务占用。解法：MERMAID_DEV_PORT=9010 pnpm dev，换端口重新启动。

• 现象：渲染出来的中文变成方框或字距异常。原因：页面字体缺失或主题字体配置未加载。解法：确认页面能加载系统中文字体；浏览器缩放回 100%，刷新即可。

下一步去哪

• 复杂大图的布局不顺眼？给flowchart换 ELK 布局算法试试，节点更整齐；
• 想把风格统一成深色或森林绿？翻一下主题与配置项，改一处全局生效；
• 图表要嵌进自己的网站或文档站？看看 API 用法，mermaid初始化后渲染任意文本。

关键资源（都在仓库里）：

• 完整语法参考（流程图）、时序图、甘特图
• 配置速查文档
• 30 余种图表的可运行示例源码

写对一行代码，图就出来——先把你文档里最旧的那张图，换成几行文字试试。

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