mermaid.js 流程图需显式初始化并确保容器有宽高和 class="mermaid"；时序图中 actor 小写且表外部角色，participant 表内部对象；类图成员须用 +/−/# 关键字标注；file:// 协议下需设 securitylevel: 'loose' 或启本地服务。
Mermaid.js 流程图怎么写才能在 HTML 里正常渲染
直接写 graph TD 但页面空白？大概率是没等 Mermaid 初始化就插入了 SVG，或者容器没给宽高。Mermaid 不会自动扫描 DOM，必须显式调用 mermaid.initialize() + mermaid.run()，且目标元素得有 class="mermaid"。
常见错误现象：Uncaught ReferenceError: mermaid is not defined（脚本加载顺序错）、Invalid syntax（缩进不一致或用了中文标点）、流程图显示为纯文本。
- 确保
<script></script>标签在底部，或使用defer；CDN 推荐用https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js -
<div class="mermaid">graph TD\nA[Start] --> B{Decision}</div>—— 换行必须用\n，不能靠 HTML 换行或空格缩进 - 容器需设
style="width: 100%; height: 400px;"，否则 SVG 可能塌陷
时序图（Sequence Diagram）里 actor 和 participant 的区别和写法
actor 是外部角色（如 User、API），用小人图标表示；participant 是内部对象（如 Service、DB），默认矩形框。混用会导致渲染失败或图标错乱。
使用场景：用户触发登录流程时，actor User 发消息给 participant AuthServer，再调 participant Database。
-
actor必须首字母小写（actor user），否则解析报错；participant名称支持驼峰或下划线（participant auth_service） - 箭头方向区分同步（
->）和异步（-->），返回消息用（如 <code>auth_service ） - 避免在
participant名称里加空格或特殊符号，否则会被截断 —— 改用引号：participant "Payment Gateway"
类图（Class Diagram）中 private/protected/public 成员怎么标注
Mermaid 类图不识别 +/-/# 前缀，必须用完整关键字：+ method(): void、- field: string、# _internal: boolean。写错前缀或漏空格，整块成员列表会消失。
性能影响：类越多、继承链越深，渲染越慢；超过 20 个类建议拆成多个图，否则浏览器可能卡顿。
- 继承用
（子类指向父类），实现用 <code>o（接口被实现方指向接口） - 关联关系（如
Order *--"1" Customer）里的数字必须加引号，否则解析失败 - 类名含空格时同样要加引号：
class "HTTP Client" { ... }
为什么本地打开 HTML 文件时 Mermaid 渲染失败
因为 Mermaid 默认禁用 file:// 协议下的初始化（安全限制），直接双击 HTML 或用 VS Code Live Server 启动都可能白屏。这不是语法问题，是加载策略问题。
容易被忽略的地方：即使写了 mermaid.initialize({ startOnLoad: true })，在 file 协议下仍不会触发 run()。
- 临时解决：启动本地服务，比如
npx http-server或 Python 的python3 -m http.server - 硬编码绕过：在
initialize里加securityLevel: 'loose'（仅开发用，生产环境勿用） - 更稳妥的做法：把 Mermaid 实例化逻辑包在
window.addEventListener('DOMContentLoaded', ...)里，并手动调用mermaid.run({ querySelector: '.mermaid' })
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
