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