diff --git a/cSpell.json b/cSpell.json
index fc5eb6f9dc..25c1e854f6 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -68,6 +68,7 @@
"jgreywolf",
"jison",
"jiti",
+ "katex",
"kaufmann",
"khroma",
"klemm",
@@ -81,6 +82,7 @@
"logmsg",
"lucida",
"markdownish",
+ "mathml",
"matthieu",
"matthieumorel",
"mdast",
diff --git a/cypress/integration/rendering/katex.spec.js b/cypress/integration/rendering/katex.spec.js
new file mode 100644
index 0000000000..fb1d13392a
--- /dev/null
+++ b/cypress/integration/rendering/katex.spec.js
@@ -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' }
+ // );
+ // });
+});
diff --git a/demos/flowchart.html b/demos/flowchart.html
index d7032a663c..faf5337955 100644
--- a/demos/flowchart.html
+++ b/demos/flowchart.html
@@ -1102,6 +1102,57 @@ flowchart
+ Sample 20
+ graph
+
+ 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}$$")
+
+
+
+ flowchart
+
+ flowchart 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}$$")
+
+
+
+ Sample 21
+ graph
+
+ 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$$"]
+
+
+
+ flowchart
+
+ 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$$"]
+
+
+
+ Sample 22
+ graph
+
+ 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$$"]
+
+
+
+ flowchart
+
+ 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$$"]
+
+
+
@@ -1524,11 +1575,11 @@ flowchart
F{Flow 2} == Choice 2.1 ==> H[Feedback node]
H[Feedback node] ==> B[Step 1]
F{Flow 2} == Choice 2.2 ==> G((Finish))
-
+
linkStyle 0,1,4,6,7,8,9 stroke:gold, stroke-width:4px
classDef active_node fill:#0CF,stroke:#09F,stroke-width:6px
- classDef unactive_node fill:#e0e0e0,stroke:#bdbdbd,stroke-width:3px
+ classDef unactive_node fill:#e0e0e0,stroke:#bdbdbd,stroke-width:3px
classDef bugged_node fill:#F88,stroke:#F22,stroke-width:3px
classDef start_node,finish_node fill:#3B1,stroke:#391,stroke-width:8px
diff --git a/demos/sequence.html b/demos/sequence.html
index 8eecae6105..d6b4e3769d 100644
--- a/demos/sequence.html
+++ b/demos/sequence.html
@@ -16,9 +16,9 @@
Sequence diagram demos
- sequenceDiagram
- accTitle: test the accTitle
- accDescr: Test a description
+ sequenceDiagram
+ accTitle: test the accTitle
+ accDescr: Test a description
participant Alice
participant Bob
@@ -31,39 +31,39 @@ Sequence diagram demos
rect rgb(200, 220, 100)
rect rgb(200, 255, 200)
- Alice ->> Bob: Hello Bob, how are you?
- Bob-->>John: How about you John?
- end
+ Alice ->> Bob: Hello Bob, how are you?
+ Bob-->>John: How about you John?
+ end
- Bob--x Alice: I am good thanks!
- Bob-x John: I am good thanks!
- Note right of John: John thinks a long
long time, so long
that the text does
not fit on a row.
+ Bob--x Alice: I am good thanks!
+ Bob-x John: I am good thanks!
+ Note right of John: John thinks a long
long time, so long
that the text does
not fit on a row.
- Bob-->Alice: Checking with John...
- Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
- Bob-x John: Hey John - we're still waiting to know
how you're doing
- Note over John:nowrap: John's trying hard not to break his train of thought.
- Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
- Note over John: After a few more moments, John
finally snaps out of it.
- end
+ Bob-->Alice: Checking with John...
+ Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
+ Bob-x John: Hey John - we're still waiting to know
how you're doing
+ Note over John:nowrap: John's trying hard not to break his train of thought.
+ Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
+ Note over John: After a few more moments, John
finally snaps out of it.
+ end
- autonumber off
- alt either this
- Alice->>+John: Yes
- John-->>-Alice: OK
- else or this
- autonumber
- Alice->>John: No
- else or this will happen
- Alice->John: Maybe
- end
- autonumber 200
- par this happens in parallel
- Alice -->> Bob: Parallel message 1
- and
- Alice -->> John: Parallel message 2
- end
-
+ autonumber off
+ alt either this
+ Alice->>+John: Yes
+ John-->>-Alice: OK
+ else or this
+ autonumber
+ Alice->>John: No
+ else or this will happen
+ Alice->John: Maybe
+ end
+ autonumber 200
+ par this happens in parallel
+ Alice -->> Bob: Parallel message 1
+ and
+ Alice -->> John: Parallel message 2
+ end
+
---
@@ -153,18 +153,18 @@ Sequence diagram demos
- sequenceDiagram
- box lightgreen Alice & John
- participant A
- participant J
- end
- box Another Group very very long description not wrapped
- participant B
- end
- A->>J: Hello John, how are you?
- J->>A: Great!
- A->>B: Hello Bob, how are you ?
-
>J: Hello John, how are you?
+ J->>A: Great!
+ A->>B: Hello Bob, how are you ?
+
@@ -188,6 +188,49 @@ Sequence diagram demos
end
+
+
+
+ sequenceDiagram
+ participant 1 as $$\frac{\lim_{x\rightarrow0}{\frac{1}{x}}}{\frac{-b\pm\sqrt{b^2-4ac}}{2a}}$$
+ participant 2 as $$\beta$$
+ participant 3 as $$\delta$$
+ participant 4 as $$\frac{\frac{\lim_{x\rightarrow0}{\frac{1}{x}}}{\frac{-b\pm\sqrt{b^2-4ac}}{2a}}}{\frac{\text{d}}{\text{d}x}{x^2}}$$
+ 1->>2: $$\sqrt{2}$$
+ note right of 2: $$\frac{1+\frac{1+\frac{1+\frac{1}{2}}{2}}{2}}{2}+\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$
+ 2->>3: $$\frac{\lim_{x\rightarrow0}{\frac{1}{x}}}{\frac{-b\pm\sqrt{b^2-4ac}}{2a}}$$
+ note right of 3: $$\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$
+ 3->>4: $$\lim_{x\rightarrow0}{\frac{1}{x}}$$;
+ note right of 4: multiline
+ 4->>1: multiline
using #lt;br /#gt;
+ note right of 1: multiline
$$\frac{1}{2}$$
3rd line
+
+
+
+ sequenceDiagram
+ autonumber
+ participant 1 as $$\alpha$$lex
+ participant 2 as $$\beta$$ob
+ participant 3 as $$\theta$$iffany
+ 1->>2: Hello John, does $$\frac{1}{2}+1=2$$?
+ loop $$\frac{1}{2}+1=2$$
+ 2->>2: $$\frac{1}{2}+1=\frac{3}{2}$$
+ end
+ Note right of 2: $$x = \begin{cases} 1 &\text{if } \frac{1}{2}+1=2 \\ 0 &\text{if } \frac{1}{2}+1\ne2 \end{cases}$$
+ 2-->>1: $$\frac{1}{2}+1\ne2\implies 1$$
+ 2->>3: $$\frac{\text{d}}{\text{d}x}{3x^2+2x+1}$$
+ 3-->>2: $$6x+2$$
+
+
+
+
+
+ sequenceDiagram
+ actor Alice
+ actor John
+ Alice-xJohn: Hello John, how are you?
+ John--xAlice: Great!
+
+
+