数学設定 (v10.9.0+)
Mermaidは、KaTeX タイプセッターを通じて数学的な式のレンダリングをサポートしています。
使用法
図の中で数学をレンダリングするには、数式を $$
デリミタで囲みます。
現時点でサポートされている図は以下の通りです:
フローチャート
シーケンス
レガシーサポート
デフォルトでは、MathMLが数学的表現のレンダリングに使用されます。もし、サポートされていないブラウザ を使っているユーザーがいる場合は、legacyMathML
を設定してCSSレンダリングにフォールバックすることができます。注意点として、KaTeXのスタイルシートを自分で提供する必要があります。それらはMermaidにバンドルされていません。
レガシーモードが有効な例(KaTeXのスタイルシートの最新バージョンは彼らのドキュメント で見つけることができます):
html
<!doctype html>
<!-- KaTeXはHTML5のdoctypeを使用することを要求します。それがないと、KaTeXは正しくレンダリングされない可能性があります -->
<html lang="en">
<head>
<!-- スタイルシートのバージョンがあなたのpackage-lockのKaTeXバージョンと一致していることを確認してください -->
<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
を設定することができます。
このオプションは、MathMLがサポートされていない場合にのみKaTeXのスタイルシートを使用するのではなく、常にKaTeXのスタイルシートを使用します(legacyMathML
の場合)。注意点として、forceLegacyMathML
だけを設定する必要があります。
KaTeXのスタイルシートを含めることに問題がない場合は、このオプションを有効にすることをお勧めします。そうすることで、ブラウザ内で特定のMathML実装が望んだ出力を提供しないシナリオを回避できます(以下のように)。