【mermaid】本站现已全面支持 Mermaid 图表渲染

测试样例：

graph TD A[Start] –> B{Is it working?} B — Yes –> C[Ship it] B — No –> D[Debug] D –> B

测试结束。

为了让大家的文档、教程和技术分享更加直观，本站现已接入 Mermaid.js，全面支持基于文本的图表渲染功能！

以后，你无需再使用截图工具来粘贴流程图、时序图或甘特图了。只需几行简单的代码，就能在网页上自动生成精美的动态图表。

✨ 什么是 Mermaid？

Mermaid 是一个基于 JavaScript 的图表绘制工具。它允许你使用 Markdown 风格的文本代码来动态创建和修改图表。它的核心理念是“图表即代码”，不仅方便版本控制，而且书写极其高效。

在编辑文章或页面时，你只需要在 HTML 源码中插入带有 mermaid 类的 div 标签，并在其中编写 Mermaid 语法即可。

例如插入下面的html内容：

<div class="mermaid">
graph TD
    A[Start] --> B{Is it working?}
    B -- Yes --> C[Ship it]
    B -- No --> D[Debug]
    D --> B
</div>

就是本文一开始的那个例子流程图。(网站渲染后，此处将显示一张从 Start 开始，经过条件判断，最终走向 Ship it 或 Debug 的流程图)

除了上述的流程图（graph），Mermaid 还支持：

你只需要将相应的语法填入 <div class="mermaid"> ... </div> 中，剩下的交给系统自动完成！

为了实现这个功能，我们在底层做了一些简单但有效的接入工作。以下是本站实现 Mermaid 渲染的技术路线：

库的引入：
我们在前端页面中引入了官方的 mermaid.js 库（通过 CDN 加速，确保加载速度）。
初始化配置：
在页面加载时，执行了 Mermaid 的初始化脚本。
DOM 扫描与渲染：
当配置了 startOnLoad: true 后，mermaid.js 会自动遍历当前网页的 DOM 树，查找所有带有 class="mermaid" 的 <div> 元素。找到后，它会读取标签内的纯文本内容，将其解析为 SVG 图形，并直接替换掉原有的文本 DOM 节点。
样式兼容：
我们对生成的 SVG 图表进行了一些 CSS 样式上的微调，确保它能够自适应你的屏幕宽度，并与网站的整体 UI 风格保持一致（支持响应式布局）。

如果发现渲染后报错，请打开浏览器开发者调试窗口，在console内会打印报错信息，告诉你是哪里的语法出现了问题。

如果你在编写图表时遇到任何语法问题，可以查阅 Mermaid 官方文档。

2026年6月20日

limitless网站管理员