如何在HTML文件中直接嵌入Mermaid？

当然可以直接把Mermaid嵌入HTML文件，无需依赖Markdown编辑器或预览工具，步骤很简单：

• 引入Mermaid脚本
  可以通过CDN引入官方提供的压缩版脚本，或者下载本地文件后引入。示例：

  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  

• 初始化Mermaid
  在脚本标签中添加初始化配置，让页面加载时自动渲染图表：

  <script>
    mermaid.initialize({ startOnLoad: true });
  </script>
  

• 编写Mermaid图表内容
  用带有mermaid类名的<div>标签包裹你的Mermaid语法代码，示例：

  <div class="mermaid">
    graph TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[End]
    B -->|No| E[Not OK]
    E --> D
  </div>
  

完整HTML示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Mermaid in HTML</title>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <script>
        mermaid.initialize({ startOnLoad: true });
    </script>
</head>
<body>
    <h1>我的Mermaid流程图</h1>
    <div class="mermaid">
        graph TD
        A[开始] --> B{判断条件}
        B -->|满足| C[执行操作]
        C --> D[结束]
        B -->|不满足| E[跳过操作]
        E --> D
    </div>
</body>
</html>

额外说明 #

• 如果你不想用CDN，可以从Mermaid官方仓库下载mermaid.min.js文件，放在本地项目中，然后修改src路径为本地文件路径即可。
• 若需要手动控制渲染时机，可以将startOnLoad设为false，之后调用mermaid.render()方法指定要渲染的元素。

内容的提问来源于stack exchange，提问作者KcFnMi