数学配置 (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>

数学配置 (v10.9.0+) ​

用法 ​

流程图 ​

序列 ​

旧版支持 ​

数学配置 (v10.9.0+)

用法

流程图

序列

旧版支持