Content Table
2023-03-05

Hexo 使用 Mermaid

Hexo 主题中使用 Mermaid 按照官方的介绍文档会报错:

  • mermaid.js 和 require.js 冲突，需要在 require.js 前引入。
  • 配置读取失败，theme.mermaid 为未定义。

Hexo 主题中使用 Mermaid 的步骤可以写死为:

  1. 在 head.ejs 中引入 Mermaid:

    1
    2
    3
    4
    5
    6
    <!-- mermaid.js 需要在 require.js 前面加载 -->
    <script src='https://unpkg.com/mermaid@8.7.0/dist/mermaid.min.js'></script>

    <script src="/js/jquery.min.js"></script>
    <script src="/js/require.min.js"></script>
    <script src="/js/main.js"></script>

  2. 在 after-footer.ejs 中初始化 Mermaid:

    1
    2
    3
    4
    5
    <script>
      if (window.mermaid) {
        mermaid.initialize({theme: 'dark'});
      }
    </script>

示例:

1
2
3
4
5
flowchart TB
    A[Client 分片上传文件] -- 发送 --> S1[分片 1] & S2[分片 2] & S3[分片 3]
    S1 & S2 & S3 --> Gateway
    Gateway --> DSC1
    Gateway -- 保证所有分片都发送到 --> DSC2

效果:

flowchart TB
    A[Client 分片上传文件] -- 发送 --> S1[分片 1] & S2[分片 2] & S3[分片 3]
    S1 & S2 & S3 --> Gateway
    Gateway --> DSC1
    Gateway -- 保证所有分片都发送到 --> DSC2