欢迎来到 Mermaid 7天计划的第五天。
在过去的四天里，我们在 Live Editor 里画得不亦乐乎。但你有没有想过：这些图表难道只能活在编辑器里截图吗？
如果我想把它们放进我的个人博客、公司内网文档，甚至是我自己开发的网页里，该怎么办？
今天，我们要聊点稍微“极客”的话题：如何把 Mermaid 集成到网页中，以及一个必须知道的安全常识。
放心，不需要你精通编程，我们只讲原理和最简单的“魔法咒语”。
🪄 一、让网页读懂你的图：CDN 大法
想象一下，你的网页原本是一个只会显示文字的“笨蛋”。如果你把 A --> B 贴上去，它就真的只显示这几个字符。
我们需要请一位“翻译官”，告诉浏览器：“嘿，这几行字是图表，请把它画出来。”
这个翻译官就是 Mermaid 的脚本库。
**最简单的“召唤术” (CDN 方式)**： 根据官方文档，你不需要下载庞大的安装包，只需要在你的 HTML 网页里加上这样一段“咒语”（Script 标签）：
<script type="module">import mermaid from'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs'; mermaid.initialize({ startOnLoad: true });</script>
这一行代码做了什么？它直接从云端（CDN）拉取了最新的 Mermaid 工具包 ，并告诉浏览器：“准备好，我要开始画图了！”。
怎么让它画图？非常简单。Mermaid 会自动在网页里寻找带有 class="mermaid" 标签的箱子 。
你只需要在网页里写：
<divclass="mermaid"> graph TD; A[我是文字] --> B[变成图表了!];</div>
当网页加载时，脚本会自动找到这个 div，读取里面的文字，然后瞬间把它渲染成一张漂亮的 SVG 矢量图 。
💡 职场应用： 虽然你可能不写网页，但现在很多笔记工具（如 Notion、Obsidian）和代码托管平台（GitHub、GitLab）都内置了这个原理。你在这些工具里写 Mermaid 能自动变图，就是因为它们后台帮你运行了这段代码。
🛡️ 二、安全警示：别吃陌生人给的糖
这一部分非常关键，请一定要看。
如果你以后负责的产品想要支持 Mermaid（比如允许用户在评论区画图），你必须提醒开发团队注意一个致命风险：XSS 攻击。
为什么会有风险？ Mermaid 的原理是把文本转化成网页元素。如果是一个好人，他会输入 A --> B。 但如果是一个坏人（黑客），他可能会在文本里悄悄嵌入一段恶意的 JavaScript 脚本代码 。
如果不加防备，当其他用户打开这张图时，这段恶意代码就会运行，可能导致信息泄露。
官方的忠告：
官方文档明确指出：从互联网上的用户那里获取文本并直接展示是非常危险的 。 虽然 Mermaid 团队一直在努力做清洗（Sanitization），但因为图表包含很多 HTML 字符，很难保证万无一失 。
解决方案：沙盒 (Sandboxed iframe)
如果你的网站允许用户输入 Mermaid 代码，最安全的做法是把它关在一个“透明的玻璃房”里——这就是 iframe 沙盒 。 在这个沙盒里，图表可以显示，但里面的脚本代码被禁止执行 。
简单来说：图可以看，但毒放不出来。
