diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index f18e99abf8..ef1181c947 100644 --- a/cypress/integration/rendering/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -242,6 +242,33 @@ describe('Sequence diagram', () => { ` ); }); + it('should render a sequence diagram with markdown notes', () => { + imgSnapshotTest( + ` + sequenceDiagram + participant a as Alice + participant j as John + a->>j: Hello John, how are you? + note over a, j: [ This is a **bold** note + \`\`\`json + { + "name": "Alice", + "age": 30 + } + \`\`\` + ] + j-->>a: Great! + note right of a: + [ + This is another \`markdown\` note + ] + `, + { + logLevel: 0, + sequence: { mirrorActors: false, noteFontSize: 18, noteFontFamily: 'Arial' }, + } + ); + }); describe('font settings', () => { it('should render different note fonts when configured', () => { imgSnapshotTest( diff --git a/demos/sequence.html b/demos/sequence.html index eca935ff5b..242abcffb2 100644 --- a/demos/sequence.html +++ b/demos/sequence.html @@ -249,6 +249,57 @@

Sequence diagram demos

Alice<<->>Bob: Wow, we said that at the same time! Bob<<-->>Alice: Bidirectional Arrows are so cool + +
+ + 
+    sequenceDiagram
+      actor Alice
+      actor John
+      Alice-xJohn: Hello John, how are you?
+      note over Alice,John: [ *This* is some `markdown` text
+      ```json
+      {
+        "title": "This is a note",
+        "description": "This is a note with a description"
+      }
+      ```
+      ]
+      John--xAlice: Great!
+      note left of Alice: [ This is some `markdown` text
+      ```json
+      {
+        "title": "This is a note",
+        from: "Alice",
+        to: "John",
+        "subtitle": "A very pretty one note",
+        "description": "This is a note with a description"
+      }
+      ```
+      ]
+      John--xMaria: And you?
+      note over John,Maria: [ This is some `markdown` text
+      ```json
+      {
+        "title": "This is a note",
+        "subtitle": "A very pretty one",
+        "description": "This is a note with a description",
+        "things": ["one", "two", "three"]
+      }
+      ```
+      There can _even_ be `more markdown`:
+      ```
+        const note = "pretty";
+        if (note === "pretty") {
+          console.log("This is a note with a description");
+        } else {
+          // do something else
+        }
+      ```
+      ]
+      Maria--xBob: I'm fine, thanks!
+
+