Skip to content

数学設定 (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実装が望んだ出力を提供しないシナリオを回避できます(以下のように)。

ブラウザ間の違いを示す画像