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它替你把节点、连线、坐标、样式全算好。先看这张阅读地图四个文件就覆盖了整条链路文件一句话职责packages/mermaid/src/mermaid.ts入口扫页面、启动渲染packages/mermaid/src/diagram-api/detectType.ts判断文本属于哪种图表packages/mermaid/src/mermaidAPI.ts编排解析、布局、绘制、序列化packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts认出 flowchart 文本想本地跑一遍的话git clone https://gitcode.com/GitHub_Trending/me/mermaid一次操作的全景先把地图画出来你写的那行文本要穿过下面这条链路才能变成图。步骤谁在干活干了什么扫页面mermaid.run找出所有.mermaid元素读文本runThrowsErrors取 innerHTML 并整理缩进认类型detectType按顺序试每个探测器算坐标解析器与布局引擎文本变模型模型定位置落屏render返回 SVG 字符串替换文本下面按进 → 算 → 出三段拆开讲。分段拆解一行输入的全程① 进文本怎么被找到并读进来这一段干的事是找到文本洗干净。页面 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则跳过消毒允许更丰富的内容但信任度更高。排障速查卡在哪一步对照链路从后往前查基本三分钟定位。症状卡在哪一步怎么救文本原样显示不出图进没找到元素给 div 加上 mermaid 类名No diagram type detected进类型没命中首行改成 flowchart 等合法开头报错带行号算解析失败修掉指向行的语法错误图上了屏但样式不对出主题缺失initialize 里设置 theme刷新后完全没动静进run 没被调用手动调 mermaid.run() 或开启 startOnLoad扫页面 → 读文本 → 认类型 → 解析布局 → 画 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考