Mermaid初始化需确保脚本在</body>前加载且不手动调用initialize()，默认startOnLoad:true即可；动态插入容器须显式调用mermaid.run()，语法错误（如中文标点、节点名未加引号）会导致初始化失败。
直接用原生 HTML 写可维护、可交互的流程图不现实——<div> 堆节点、CSS 连线、JS 绑事件，代码量爆炸且布局极易错位。真要落地，必须选对技术路径：Mermaid 适合文档/静态展示；SVG + JavaScript 适合定制化交互；Canvas 适合高性能动态渲染（如实时工作流）。别硬刚纯 HTML。
Mermaid 怎么初始化才不会报 mermaid is not defined
常见错误是脚本加载顺序不对，或没等 DOM 就调用了 mermaid.initialize()。
- 确保
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>放在</body>前，且在任何调用mermaid的脚本之前 - 不要手动调用
mermaid.initialize()后再写mermaid.render()—— 默认startOnLoad: true就够了，除非你禁用了自动渲染 - 如果页面有多个
class="mermaid"容器，Mermaid 会批量处理；但若容器是 JS 动态插入的，得显式调用mermaid.run() - 报错
Failed to initialize Mermaid多因语法错误：比如漏了分号;、用了中文标点、节点名含空格未加引号（应写成"Start Node"而非Start Node）
SVG 连接线怎么画才不穿模、不偏移
用 <svg> 手动画流程图时，连线错位不是坐标算错了，而是没统一坐标系基准。
- 把所有节点（
<rect>、<circle>）和连线（<line>或<path>）都放在同一个<svg>内，别混用绝对定位div和 SVG 坐标 - 节点位置用
x/y属性（对<rect>）或cx/cy（对<circle>），连线起点终点必须严格对应这些值，例如从矩形右中点(x + width, y + height/2)连到下一个矩形左中点 - 避免用
transform: translate()移动 SVG 元素——它只影响渲染，不改变几何坐标，会导致连线计算失效 - 需要弯曲箭头？别硬算贝塞尔曲线，用
<path d="M... C...">配合marker-end定义箭头，示例：<defs> <marker id="arrow" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto"> <path d="M0,0 L0,7 L10,3.5 Z" fill="#000"/> </marker> </defs> <line x1="200" y1="100" x2="300" y2="100" stroke="#000" marker-end="url(#arrow)"/>
Canvas 绘制流程图时，如何让节点拖拽不卡顿
Canvas 本身不保留图形对象，每次拖拽都要重绘全图。卡顿往往来自重复清屏、未做脏矩形优化、或监听了低效事件。
立即学习“前端免费学习笔记（深入）”；
- 别在
mousemove里直接调用ctx.clearRect(0,0,w,h)—— 改用只擦除上一帧节点区域：ctx.clearRect(lastX, lastY, width, height) - 拖拽中只重绘被移动的节点 + 相关连线，其余部分缓存为离屏 canvas 或用
getImageData/putImageData复用 - 用
requestAnimationFrame替代setInterval控制重绘节奏，避免掉帧 - 监听
mousedown时立刻记录鼠标相对于节点左上角的偏移（offsetX/offsetY），后续mousemove中直接用该偏移计算新坐标，避免反复调用getBoundingClientRect()
真正难的不是画出线条，而是让节点位置、连接关系、交互状态三者始终同步。Mermaid 锁死结构，SVG 依赖坐标精度，Canvas 仰仗手动状态管理——选哪种，取决于你愿不愿意为「可预测性」多写几十行校验逻辑。
