fix: render the participants in same order as they are created

demos/sequence.html

@@ -164,6 +164,13 @@
       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({
@@ -174,7 +181,7 @@
         flowchart: { curve: 'basis' },
         gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50 },
-        // sequenceDiagram: { actorMargin: 300 } // deprecated
+        sequenceDiagram: { actorMargin: 300 }, // deprecated
       });
     </script>
   </body>

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,