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