-
-
Notifications
You must be signed in to change notification settings - Fork 6.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2885 from NicolasNewman/feature/2776_katex_math
Integrated Katex typesetting into flowcharts
- Loading branch information
Showing
21 changed files
with
720 additions
and
208 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import { imgSnapshotTest } from '../../helpers/util'; | ||
|
|
||
| describe('Katex', () => { | ||
| it('1: should render a complex Katex flowchart no htmlLabels', () => { | ||
| imgSnapshotTest( | ||
| `graph LR | ||
| A["$$f(\\relax{x}) = \\int_{-\\infty}^\\infty \\hat{f}(\\xi)\\,e^{2 \\pi i \\xi x}\\,d\\xi$$"] -->|"$$\\Bigg(\\bigg(\\Big(\\big((\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a})\\big)\\Big)\\bigg)\\Bigg)$$"| B("$$1+\\frac{e^{-2\\pi}} {1+\\frac{e^{-4\\pi}} {1+\\frac{e^{-6\\pi}} {1+\\frac{e^{-8\\pi}} {1+\\cdots}}}}$$") | ||
| A -->|"$$\\overbrace{a+b+c}^{\\text{note}}$$"| C("$$\\phase{-78^\\circ}$$") | ||
| 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}$$")`, | ||
| { fontFamily: 'courier' } | ||
| ); | ||
| }); | ||
| it('2: should render a Katex flowchart containing the Greek alphabet', () => { | ||
| imgSnapshotTest( | ||
| `graph LR | ||
| A["$$\\alpha\\beta\\gamma\\delta\\epsilon\\zeta\\eta\\theta\\iota\\kappa\\lambda\\mu\\nu\\xi\\omicron\\pi\\rho\\sigma\\tau\\upsilon\\phi\\chi\\psi\\omega$$"] --> B["$$\\Alpha\\Beta\\Gamma\\Delta\\Epsilon\\Zeta\\Eta\\Theta\\Iota\\Kappa\\Lambda\\Mu\\Nu\\Xi\\Omicron\\Pi\\Rho\\Sigma\\Tau\\Upsilon\\Phi\\Chi\\Psi\\Omega$$"]`, | ||
| { fontFamily: 'courier' } | ||
| ); | ||
| }); | ||
| it('3: should render a Katex flowchart containing set theory symbols', () => { | ||
| imgSnapshotTest( | ||
| `graph LR | ||
| A["$$\\forall\\complement\\therefore\\emptyset\\exists\\subset\\because\\empty\\exist\\supset\\mapsto\\varnothing\\nexists\\mid\\to\\implies\\in\\land\\gets\\impliedby\\isin\\lor\\leftrightarrow\\iff\\notin\\ni\\notni\\lnot$$"] --> B["$$\\nabla\\Im\\Reals\\jmath\\partial\\image\\wp\\aleph\\Game\\weierp\\alef\\Finv\\N\\Z\\alefsym\\cnums\\natnums\\beth\\Complex\\R\\gimel\\ell\\Re\\daleth\\hbar\\real\\eth\\hslash\\reals$$"]`, | ||
| { fontFamily: 'courier' } | ||
| ); | ||
| }); | ||
| // TODO: changes made to develop between Feb 13 - Feb 23 cause this test to no longer function | ||
| // it.skip('4: should render an error box originating from Katex', () => { | ||
| // imgSnapshotTest( | ||
| // `graph LR | ||
| // A["$$\\shouldBeError$$"]`, | ||
| // { fontFamily: 'courier' } | ||
| // ); | ||
| // }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 (v\<MERMAID_RELEASE_VERSION>+) | ||
|
|
||
| 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> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.