From 4202488da044521db8b8dca09446e3aab000b924 Mon Sep 17 00:00:00 2001 From: NicolasNewman Date: Sat, 6 May 2023 17:19:31 +0900 Subject: [PATCH] feat(katex): added KaTeX support to sequence diagrams --- demos/sequence.html | 257 ++++++++++-------- .../mermaid/src/diagrams/common/common.ts | 35 ++- .../src/diagrams/sequence/sequenceRenderer.ts | 52 ++-- .../mermaid/src/diagrams/sequence/svgDraw.js | 86 +++++- 4 files changed, 284 insertions(+), 146 deletions(-) diff --git a/demos/sequence.html b/demos/sequence.html index aa2332520..d20f8561f 100644 --- a/demos/sequence.html +++ b/demos/sequence.html @@ -16,134 +16,167 @@

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
-			participant John as John
Second Line
-			autonumber 10 10
-			rect rgb(200, 220, 100)
-			rect rgb(200, 255, 200)
+        participant Alice
+        participant Bob
+        participant John as John
Second Line
+        autonumber 10 10
+        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
-
-
- 
-    sequenceDiagram
-      accTitle: Sequence diagram title is here
-      accDescr: Hello friends
-
-    participant Alice
-    participant Bob
-    participant John as John
Second Line
-    rect rgb(200, 220, 100)
-    rect rgb(200, 255, 200)
-    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-->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
-    alt either this
-    Alice->>John: Yes
-    else or this
-    Alice->>John: No
-    else or this will happen
-    Alice->John: Maybe
-    end
-    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
- 
-    sequenceDiagram
-    participant 1 as multiline
using #lt;br#gt;
-    participant 2 as multiline
using #lt;br/#gt;
-    participant 3 as multiline
using #lt;br /#gt;
-    participant 4 as multiline
using #lt;br /#gt;
-    1->>2: multiline
using #lt;br#gt;
-    note right of 2: multiline
using #lt;br#gt;
-    2->>3: multiline
using #lt;br/#gt;
-    note right of 3: multiline
using #lt;br/#gt;
-    3->>4: multiline
using #lt;br /#gt;
-    note right of 4: multiline
using #lt;br /#gt;
-    4->>1: multiline
using #lt;br /#gt;
-    note right of 1: multiline
using #lt;br /#gt;
-
-
+ sequenceDiagram + accTitle: Sequence diagram title is here + accDescr: Hello friends - 
-    sequenceDiagram
-    autonumber
-    Alice->>John: Hello John,
how are you?
-    autonumber 50 10
-    Alice->>John: John,
can you hear me?
-    John-->>Alice: Hi Alice,
I can hear you!
-    autonumber off
-    John-->>Alice: I feel great!
-
+ participant Alice + participant Bob + participant John as John
Second Line + rect rgb(200, 220, 100) + rect rgb(200, 255, 200) + 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-->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 + alt either this + Alice->>John: Yes + else or this + Alice->>John: No + else or this will happen + Alice->John: Maybe + end + par this happens in parallel + Alice -->> Bob: Parallel message 1 + and + Alice -->> John: Parallel message 2 + end + 
       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 ?
-
using #lt;br#gt; + participant 2 as multiline
using #lt;br/#gt; + participant 3 as multiline
using #lt;br /#gt; + participant 4 as multiline
using #lt;br /#gt; + 1->>2: multiline
using #lt;br#gt; + note right of 2: multiline
using #lt;br#gt; + 2->>3: multiline
using #lt;br/#gt; + note right of 3: multiline
using #lt;br/#gt; + 3->>4: multiline
using #lt;br /#gt; + note right of 4: multiline
using #lt;br /#gt; + 4->>1: multiline
using #lt;br /#gt; + note right of 1: multiline
using #lt;br /#gt; + +
+ + 
+      sequenceDiagram
+      autonumber
+      Alice->>John: Hello John,
how are you?
+      autonumber 50 10
+      Alice->>John: John,
can you hear me?
+      John-->>Alice: Hi Alice,
I can hear you!
+      autonumber off
+      John-->>Alice: I feel great!
+
+
+ + 
+        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 ?
+
+ 
+    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$$
+
+
+