企业官网建设流程全解析

mermaid 工作原理：跟着一行 "A-->B" 走完文本变图表的全程

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

在 HTML 里敲下flowchart LR和A-->B，刷新页面，一秒后箭头图就出现了——这一秒里发生了什么？Mermaid 是一款文本绘图工具，你写几行字，它画出一张图。读完这篇 mermaid 使用教程，你能亲手追出文本进页面到 SVG 上屏的每一步。

项目速览

Mermaid 用 TypeScript 写成，核心就一个承诺：文本进，图形出。你不需要懂 SVG，它替你把节点、连线、坐标、样式全算好。

先看这张阅读地图，四个文件就覆盖了整条链路：

想本地跑一遍的话：git clone https://gitcode.com/GitHub_Trending/me/mermaid

一次操作的全景

先把地图画出来：你写的那行文本，要穿过下面这条链路才能变成图。

下面按"进 → 算 → 出"三段拆开讲。

分段拆解：一行输入的全程

① 进：文本怎么被找到并读进来

这一段干的事是：找到文本，洗干净。

页面 load 事件触发后，如果startOnLoad开着，mermaid.ts 里的run()会遍历 DOM，把所有带.mermaid类的元素捞出来。两个细节值得注意：带data-processed属性的元素直接跳过，防止重复渲染；找到元素后读element.innerHTML，再经过dedent和实体解码两道处理，去掉 HTML 里碍事的缩进。

txt = dedent(utils.entityDecode(txt)) .trim() .replace(/<br\s*\/?>/gi, '<br/>');

接着文本交给 detectType.ts：先剥掉 frontmatter、init 指令和注释，再按注册顺序逐个试探测器，谁先返回 true 谁赢。flowchart 命中 flowDetector-v2.ts 里的flowchart前缀正则，同时触发懒加载——只有被命中的图表模块才会真正 import，没用的类型一行代码都不加载。

断点提示：类名写错，文本会原样躺在页面上；没有任何探测器命中，你会看到 "No diagram type detected" 报错。

② 算：文本怎么变成模型和坐标

这一段干两件事：把文本变成数据，把数据变成位置。

mermaidAPI.ts 的render先处理文本里的指令与标题，然后调用Diagram.fromText：基于 langium 语法的解析器把A-->B这样的行变成节点、边和标签，存进内部 db。

diag = await Diagram.fromText(text, { title: processed.title }); await diag.renderer.draw(text, id, injected.version, diag);

布局引擎接着给每个节点和每条边分配 x、y 坐标——这是"排版"发生的地方，默认走 dagre，也可以在配置里切到 elk。最后渲染器用 d3 把每个节点、连线、箭头逐个画成 SVG 元素，放进一个临时容器里。

断点提示：解析失败时，错误图会标出问题行号；布局环节出问题，典型症状是所有节点挤在左上角。

③ 出：SVG 怎么落上屏

这一段决定你最终看到什么。

画完之后，mermaid 先把主题样式元素插进 SVG，再把整段 SVG 序列化成字符串。非 loose 模式下，这个字符串还要过一遍 DOMPurify 消毒，过滤掉不安全的标签。合格后交回入口，只有一行代码完成最后一击：

const { svg, bindFunctions } = await render(id, txt, element); element.innerHTML = svg;

element.innerHTML = svg让文本消失、图形出现。返回值里还有一个bindFunctions，如果你想让图表响应点击，它负责把事件绑到元素上。

断点提示：render抛错且没开suppressErrors时，div 里留的还是原文本；图出来了但颜色不对，多半是主题没配对。

进阶旋钮 2 个

• theme（主题）→ 在文本开头写%%{init: {"theme": "dark"}}%%指令，或调用mermaid.initialize设置 → 全站图表换色换风格，不用碰 CSS，一处生效。
• securityLevel（安全级别）→ 设为sandbox或loose→sandbox把渲染挪进沙箱 iframe，隔离标签里的 HTML 风险；loose则跳过消毒，允许更丰富的内容但信任度更高。

排障速查：卡在哪一步

对照链路从后往前查，基本三分钟定位。

扫页面 → 读文本 → 认类型 → 解析布局 → 画 SVG → 消毒 → 写进 DOM。下次图不出来，按这条链一格一格查，就能亲手把断点找出来。

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