mermaid/docs/config/math.md

> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/math.md](../../packages/mermaid/src/docs/config/math.md).

# Math Configuration (v10.9.0+)

Mermaid supports rendering mathematical expressions through the [KaTeX](https://katex.org/) 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

```mermaid-example
 graph LR
      A["$$x^2$$"] -->|"$$\sqrt{x+3}$$"| B("$$\frac{1}{2}$$")
      A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\pi r^2$$")
      B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")
      C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
```

```mermaid
 graph LR
      A["$$x^2$$"] -->|"$$\sqrt{x+3}$$"| B("$$\frac{1}{2}$$")
      A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\pi r^2$$")
      B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")
      C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
```

### Sequence

```mermaid-example
sequenceDiagram
    autonumber
    participant 1 as $$\alpha$$
    participant 2 as $$\beta$$
    1->>2: Solve: $$\sqrt{2+2}$$
    2-->>1: Answer: $$2$$
    Note right of 2: $$\sqrt{2+2}=\sqrt{4}=2$$
```

```mermaid
sequenceDiagram
    autonumber
    participant 1 as $$\alpha$$
    participant 2 as $$\beta$$
    1->>2: Solve: $$\sqrt{2+2}$$
    2-->>1: Answer: $$2$$
    Note right of 2: $$\sqrt{2+2}=\sqrt{4}=2$$
```

## Legacy Support

By default, MathML is used for rendering mathematical expressions. If you have users on [unsupported browsers](https://caniuse.com/?search=mathml), `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.

Example with legacy mode enabled (the latest version of KaTeX's stylesheet can be found on their [docs](https://katex.org/docs/browser.html)):

```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>
```
docs(katex): added documentation 2023-06-24 16:57:22 +09:00			`> Warning`
			`>`
			`> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.`
			`>`
			`> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/math.md](../../packages/mermaid/src/docs/config/math.md).`

Bump version 2024-02-27 13:21:49 +05:30			`# Math Configuration (v10.9.0+)`
docs(katex): added documentation 2023-06-24 16:57:22 +09:00
			`Mermaid supports rendering mathematical expressions through the [KaTeX](https://katex.org/) 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`

			```mermaid-example
			`graph LR`
			`A["$$x^2$$"] -->\|"$$\sqrt{x+3}$$"\| B("$$\frac{1}{2}$$")`
			`A -->\|"$$\overbrace{a+b+c}^{\text{note}}$$"\| C("$$\pi r^2$$")`
			`B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")`
			`C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")`
			```

			```mermaid
			`graph LR`
			`A["$$x^2$$"] -->\|"$$\sqrt{x+3}$$"\| B("$$\frac{1}{2}$$")`
			`A -->\|"$$\overbrace{a+b+c}^{\text{note}}$$"\| C("$$\pi r^2$$")`
			`B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")`
			`C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")`
			```

			`### Sequence`

			```mermaid-example
			`sequenceDiagram`
			`autonumber`
			`participant 1 as $$\alpha$$`
			`participant 2 as $$\beta$$`
			`1->>2: Solve: $$\sqrt{2+2}$$`
			`2-->>1: Answer: $$2$$`
			`Note right of 2: $$\sqrt{2+2}=\sqrt{4}=2$$`
			```

			```mermaid
			`sequenceDiagram`
			`autonumber`
			`participant 1 as $$\alpha$$`
			`participant 2 as $$\beta$$`
			`1->>2: Solve: $$\sqrt{2+2}$$`
			`2-->>1: Answer: $$2$$`
			`Note right of 2: $$\sqrt{2+2}=\sqrt{4}=2$$`
			```

			`## Legacy Support`

			By default, MathML is used for rendering mathematical expressions. If you have users on [unsupported browsers](https://caniuse.com/?search=mathml), `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.

			`Example with legacy mode enabled (the latest version of KaTeX's stylesheet can be found on their [docs](https://katex.org/docs/browser.html)):`

			```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>`
			```