diff --git a/docs/config/math.md b/docs/config/math.md new file mode 100644 index 000000000..6b0e26f77 --- /dev/null +++ b/docs/config/math.md @@ -0,0 +1,86 @@ +> **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 + +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 + + + + + + + + + + + + +``` diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index 8fceb810b..0089438b0 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -156,6 +156,7 @@ function sidebarConfig() { { text: 'Mermaid API Configuration', link: '/config/setup/README' }, { text: 'Directives', link: '/config/directives' }, { text: 'Theming', link: '/config/theming' }, + { text: 'Math', link: '/config/math' }, { text: 'Accessibility', link: '/config/accessibility' }, { text: 'Mermaid CLI', link: '/config/mermaidCLI' }, { text: 'Advanced usage', link: '/config/n00b-advanced' }, diff --git a/packages/mermaid/src/docs/config/math.md b/packages/mermaid/src/docs/config/math.md new file mode 100644 index 000000000..b6b4e0e47 --- /dev/null +++ b/packages/mermaid/src/docs/config/math.md @@ -0,0 +1,62 @@ +# Math Configuration + +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 + 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 +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 + + + + + + + + + + + + +```