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实现无法提供所需输出的情况(如下所示)。

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