数学配置 (v10.9.0+)

¥Math Configuration (v10.9.0+)

Mermaid 支持通过 KaTeX 排字机渲染数学表达式。

¥Mermaid supports rendering mathematical expressions through the KaTeX typesetter.

用法

¥Usage

要在图表中渲染数学，请用 $$ 分隔符包围数学表达式。

¥To render math within a diagram, surround the mathematical expression with the $$ delimiter.

请注意，目前仅支持以下图表：

¥Note that at the moment, the only supported diagrams are below:

流程图

¥Flowcharts

序列

¥Sequence

旧版支持

¥Legacy Support

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

¥By default, MathML is used for rendering mathematical expressions. If you have users on unsupported browsers, legacyMathML can be set in the config to fall back to CSS rendering. Note that you must provide KaTeX's stylesheets on your own as they do not come bundled with Mermaid.

启用旧模式的示例（KaTeX 样式表的最新版本可以在其 docs 上找到）：

¥Example with legacy mode enabled (the latest version of KaTeX's stylesheet can be found on their docs):

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>

处理渲染差异

¥Handling Rendering Differences

由于不同操作系统的默认字体和浏览器的 MathML 实现之间存在差异，因此不同平台的结果可能不一致。如果获得一致的结果很重要，或者需要最优化的渲染结果，可以在配置中启用 forceLegacyMathML。

¥Due to differences between default fonts across operating systems and browser's MathML implementations, inconsistent results can be seen across platforms. If having consistent results are important, or the most optimal rendered results are desired, forceLegacyMathML can be enabled in the config.

此选项将始终使用 KaTeX 的样式表，而不是仅在 MathML 不受支持时使用（与 legacyMathML 一样）。请注意，只需要设置 forceLegacyMathML。

¥This option will always use KaTeX's stylesheet instead of only when MathML is not supported (as with legacyMathML). Note that only forceLegacyMathML needs to be set.

如果不考虑包含 KaTeX 的样式表，建议启用此选项以避免浏览器中没有 MathML 实现提供所需输出的情况（如下所示）。

¥If including KaTeX's stylesheet is not a concern, enabling this option is recommended to avoid scenarios where no MathML implementation within a browser provides the desired output (as seen below).

Image showing differences between Browsers

数学配置 (v10.9.0+) ​

用法 ​

流程图 ​

序列 ​

旧版支持 ​

处理渲染差异 ​

数学配置 (v10.9.0+)

用法

流程图

序列

旧版支持

处理渲染差异