Skip to content

数学配置 (v10.9.0+)

Mermaid 支持通过 KaTeX 排版引擎渲染数学表达式。

使用方法

要在图表中渲染数学表达式,请用 $$ 定界符将其括起来。

请注意,目前仅支持以下图表:

流程图

序列图

兼容性支持

默认情况下,使用 MathML 渲染数学表达式。如果您的用户使用的是 不支持的浏览器,可以在配置中设置 legacyMathML 以回退到 CSS 渲染。请注意,您必须自己提供 KaTeX 的样式表,因为它们不包含在 Mermaid 中。

启用兼容模式的示例(最新版本的 KaTeX 样式表可以在其 文档 中找到):

html
<!doctype html>
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
<html lang="en">
  <head>
    <!-- Please ensure the stylesheet's version matches with the KaTeX version in your package-lock -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/katex@{version_number}/dist/katex.min.css"
      integrity="sha384-{hash}"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <script type="module">
      import mermaid from './mermaid.esm.mjs';
      mermaid.initialize({
        legacyMathML: true,
      });
    </script>
  </body>
</html>

处理渲染差异

由于不同操作系统上的默认字体和浏览器 MathML 实现之间的差异,不同平台上可能会出现不一致的结果。如果一致的结果很重要,或者需要最佳的渲染结果,可以在配置中启用 forceLegacyMathML

此选项将始终使用 KaTeX 的样式表,而不仅仅是在不支持 MathML 时使用(如 legacyMathML)。请注意,只需要设置 forceLegacyMathML

如果包含 KaTeX 的样式表不是问题,建议启用此选项以避免浏览器中没有 MathML 实现提供所需输出的情况(如下所示)。

显示浏览器之间差异的图像