Fix for issues #249. Adding configuration option for when to use absolute references for arrow heads. Default is off.

Jasmine tests running in browser via karma.
2025-09-22 08:50:13 +02:00 · 2015-11-21 11:51:15 +01:00
parent 4eb38e4cfd
commit 51858c02eb
25 changed files with 585 additions and 598 deletions
--- a/test/examples/seq.html
+++ b/test/examples/seq.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+
+    <script src="./dist/mermaid.js"></script>
+    <link rel="stylesheet" href="seq.css"/>
+    <script>
+        mermaid.initialize({
+                sequenceDiagram:{
+                    mirrorActors:true,
+                    height:35,
+                    topPadding:125
+
+                }
+
+        });
+        //mermaid.sequenceConfig = '{"diagramMarginX":50,"diagramMarginY":10,"actorMargin":50,"width":150,"height":45,"boxMargin":10,"boxTextMargin":5,"noteMargin":10,"messageMargin":35, "mirrorActors":true}';
+        //mermaid.sequenceConfig = JSON.parse('{"diagramMarginX":50,"diagramMarginY":10,"actorMargin":50,"width":150,"height":165,"boxMargin":10,"boxTextMargin":5,"noteMargin":10,"messageMargin":35}');
+
+    </script>
+    <script>
+        function apa(){
+            console.log('CLICKED');
+        }
+    </script>
+
+</head>
+    <body>
+        <h1>Autowrap</h1>
+
+    <div class="mermaid">
+        sequenceDiagram
+        Merchant->>Customer: foo
+        Note left of Person:One row for the a
+        Note right of Person: Bob thinks a long long time, so long that the text does not fit In a row. Bob thinks a long long time, so long that the text does not fit In a row. Bob thinks a long long time, so long that the text does not fit In a row. Bob thinks a long long time, so long that the text does not fit In a row.
+
+        Person-->>Customer: bar
+
+        Note left of Person: Foo checks up on him
+    </div>
+    <div class="mermaid">
+        sequenceDiagram
+        Alice->>Bob: Hello Bob, how are you?
+        Bob-->>John: How about you John?
+        Bob--xAlice: I am good thanks!
+        Bob-xJohn: I am good thanks!
+        Note right of John: Bob thinks a long long time, so long that the text does not fit In a row. Bob thinks a long long time, so long that the text does not fit In a row. Bob thinks a long long time, so long that the text does not fit In a row. Bob thinks a long long time, so long that the text does not fit In a row.
+
+        Bob-->Alice: Checking with John...
+        Alice->John: Yes... John, how are you?
+    </div>
+    <h1>No line breaks</h1>
+    <div class="mermaid">
+        sequenceDiagram;Alice->>Bob: Hello Bob, how are you?;Bob-->Bob: Hmmm?;Bob-->Alice: Ok;
+    </div>
+    <div class="mermaid">
+        sequenceDiagram;loop Daily query;Alice->>Bob: Hello Bob, how are you?;alt is sick;Bob->>Alice: Not so good :(;else is well;Bob->>Alice: Feeling fresh like a daisy;end;opt Extra response;Bob->>Alice: Thanks for asking;end;end;
+    </div>
+    <h1>Message types</h1>
+
+    <div class="mermaid">
+        sequenceDiagram
+        Alice->>Bob: Hello Bob, how are you?
+        Bob-->>John: How about you John?
+        Bob--xAlice: I am good thanks!
+        Bob-xJohn: I am good thanks!
+        Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
+
+        Bob-->Alice: Checking with John...
+        Alice->John: Yes... John, how are you?
+    </div>
+    <h1>Loops, alt and opt</h1>
+    <div class="mermaid">
+        sequenceDiagram
+        loop Daily query
+            Alice->>Bob: Hello Bob, how are you?
+            alt is sick
+                Bob->>Alice: Not so good :(
+            else is well
+                Bob->>Alice: Feeling fresh like a daisy
+            end
+        opt Extra response
+        Bob->>Alice: Thanks for asking
+        end
+
+        end
+    </div>
+    <h1>Message to self in loop</h1>
+    <div class="mermaid">
+        sequenceDiagram
+        participant Alice
+        participant Bob
+        Alice->>John: Hello John, how are you?
+        loop Healthcheck
+            John->>John: Fight against hypochondria
+        end
+        Note right of John: Rational thoughts<br/>prevail...
+        John-->>Alice: Great!
+        John->>Bob: How about you?
+        Bob-->>John: Jolly good!
+        </div>
+    <h1>Bounding test & async message to self</h1>
+    <div class="mermaid">
+        sequenceDiagram
+        participant Alice
+        participant Bob
+        participant John the Long
+        Alice->Bob: Hello Bob, how are you?
+        loop Outer loop
+        Note left of Alice: Bob thinks about <br/> things <br/> to think about
+        Bob-xBob: I am good thanks!
+        loop Inner loop
+        Bob->>John the Long: How about you John?
+        Note right of John the Long: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit.
+        end
+        end
+
+        Bob-->>Alice: Checking with John...
+        Alice->>John the Long: Yes... John, how are you?
+        John the Long-->>Alice: Super!
+    </div>
+    <br/>
+
+
+
+
+    </body>
+</html>