diff --git a/demos/sequence.html b/demos/sequence.html
index 3345fed17..b2733a384 100644
--- a/demos/sequence.html
+++ b/demos/sequence.html
@@ -164,13 +164,6 @@
       end
     </pre>
 
-    <pre class="mermaid">
-    sequenceDiagram
-      actor Alice
-      actor John
-      Alice-xJohn: Hello John, how are you?
-      John--xAlice: Great!
-    </pre>
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
index 7c38a8016..b8962395e 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -829,11 +829,6 @@ 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;
@@ -1033,12 +1028,14 @@ export const draw = function (_text: string, id: string, _version: string, diagO
     }
   });
 
-  messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStartY, diagObj));
+  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);
 
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
index 31e6dc2a8..f81147c10 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');
+  const boxpluslineGroup = elem.append('g').lower();
   var g = boxpluslineGroup;
 
   if (!isFooter) {