From 23cbf50413e82a2f9160fddb648bfa69c44a8d17 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Mon, 6 Nov 2023 18:47:38 +0530 Subject: [PATCH 1/5] fix: render the participants in same order as they are created --- demos/sequence.html | 9 ++++++++- packages/mermaid/src/diagrams/sequence/svgDraw.js | 3 ++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/demos/sequence.html b/demos/sequence.html index b2733a384e..035dc7385d 100644 --- a/demos/sequence.html +++ b/demos/sequence.html @@ -164,6 +164,13 @@

Sequence diagram demos

end + 
+    sequenceDiagram
+      actor Alice
+      actor John
+      Alice-xJohn: Hello John, how are you?
+      John--xAlice: Great!
+
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js index f81147c10c..87899df1ec 100644 --- a/packages/mermaid/src/diagrams/sequence/svgDraw.js +++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js @@ -324,7 +324,7 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) { const center = actor.x + actor.width / 2; const centerY = actorY + 5; - const boxpluslineGroup = elem.append('g').lower(); + const boxpluslineGroup = elem.append('g').raise(); var g = boxpluslineGroup; if (!isFooter) { @@ -1038,6 +1038,7 @@ export default { drawText, drawLabel, drawActor, + drawActorTypeParticipant, drawBox, drawPopup, anchorElement, From 78c1a3d98027393e99a96031b4fe0e943a248886 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Mon, 6 Nov 2023 18:57:47 +0530 Subject: [PATCH 2/5] fix --- demos/sequence.html | 2 +- packages/mermaid/src/diagrams/sequence/svgDraw.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/demos/sequence.html b/demos/sequence.html index 035dc7385d..d7bce2fef2 100644 --- a/demos/sequence.html +++ b/demos/sequence.html @@ -181,7 +181,7 @@

Sequence diagram demos

flowchart: { curve: 'basis' }, gantt: { axisFormat: '%m/%d/%Y' }, sequence: { actorMargin: 50 }, - sequenceDiagram: { actorMargin: 300 }, // deprecated + // sequenceDiagram: { actorMargin: 300 }, // deprecated }); diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js index 87899df1ec..fd490e5ae6 100644 --- a/packages/mermaid/src/diagrams/sequence/svgDraw.js +++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js @@ -1038,7 +1038,6 @@ export default { drawText, drawLabel, drawActor, - drawActorTypeParticipant, drawBox, drawPopup, anchorElement, From dff8b783b8f85bb9b6b71986fdbce80f3ddfb204 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Mon, 6 Nov 2023 19:02:10 +0530 Subject: [PATCH 3/5] fix --- packages/mermaid/src/diagrams/sequence/svgDraw.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js index fd490e5ae6..31e6dc2a89 100644 --- a/packages/mermaid/src/diagrams/sequence/svgDraw.js +++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js @@ -324,7 +324,7 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) { const center = actor.x + actor.width / 2; const centerY = actorY + 5; - const boxpluslineGroup = elem.append('g').raise(); + const boxpluslineGroup = elem.append('g'); var g = boxpluslineGroup; if (!isFooter) { From 396ea3cec2e541199c817bd863a8c7b24ee17a8e Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Mon, 6 Nov 2023 19:55:53 +0530 Subject: [PATCH 4/5] Update demos/sequence.html --- demos/sequence.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demos/sequence.html b/demos/sequence.html index d7bce2fef2..3345fed17a 100644 --- a/demos/sequence.html +++ b/demos/sequence.html @@ -181,7 +181,7 @@

Sequence diagram demos

flowchart: { curve: 'basis' }, gantt: { axisFormat: '%m/%d/%Y' }, sequence: { actorMargin: 50 }, - // sequenceDiagram: { actorMargin: 300 }, // deprecated + // sequenceDiagram: { actorMargin: 300 } // deprecated }); From 01bbcc597af5c20e03847e3fdadc0fe3f9b6b731 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Thu, 9 Nov 2023 17:49:25 +0530 Subject: [PATCH 5/5] draw top actors with lines first followed by messages --- .../mermaid/src/diagrams/sequence/sequenceRenderer.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts index b8962395ee..7c38a80163 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts +++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts @@ -829,6 +829,11 @@ export const draw = function (_text: string, id: string, _version: string, diagO bounds.insert(activationData.startx, verticalPos - 10, activationData.stopx, verticalPos); } + log.debug('createdActors', createdActors); + log.debug('destroyedActors', destroyedActors); + + drawActors(diagram, actors, actorKeys, false); + // Draw the messages/signals let sequenceIndex = 1; let sequenceIndexStep = 1; @@ -1028,14 +1033,12 @@ export const draw = function (_text: string, id: string, _version: string, diagO } }); - log.debug('createdActors', createdActors); - log.debug('destroyedActors', destroyedActors); - - drawActors(diagram, actors, actorKeys, false); messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStartY, diagObj)); + if (conf.mirrorActors) { drawActors(diagram, actors, actorKeys, true); } + backgrounds.forEach((e) => svgDraw.drawBackgroundRect(diagram, e)); fixLifeLineHeights(diagram, actors, actorKeys, conf);