feat: add name field to the actors

demos/sequence.html

@@ -187,6 +187,13 @@
         Note left of Bob: Alice/Bob Note
       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';

packages/mermaid/src/diagrams/common/commonTypes.ts

@@ -11,6 +11,7 @@ export interface RectData {
   ry?: number;
   attrs?: Record<string, string | number>;
   anchor?: string;
+  name: string;
 }
 
 export interface Bound {

packages/mermaid/src/diagrams/common/svgDrawCommon.ts

@@ -21,6 +21,7 @@ export const drawRect = (element: SVG | Group, rectData: RectData): D3RectElemen
   rectElement.attr('stroke', rectData.stroke);
   rectElement.attr('width', rectData.width);
   rectElement.attr('height', rectData.height);
+  rectElement.attr('name', rectData.name);
   rectData.rx !== undefined && rectElement.attr('rx', rectData.rx);
   rectData.ry !== undefined && rectElement.attr('ry', rectData.ry);
 

packages/mermaid/src/diagrams/sequence/svgDraw.js

@@ -333,6 +333,7 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
   rect.class = cssclass;
   rect.rx = 3;
   rect.ry = 3;
+  rect.name = actor.name;
   const rectElem = drawRect(g, rect);
   actor.rectData = rect;
 
@@ -397,6 +398,7 @@ const drawActorTypeActor = function (elem, actor, conf, isFooter) {
     cssClass += ` ${TOP_ACTOR_CLASS}`;
   }
   actElem.attr('class', cssClass);
+  actElem.attr('name', actor.name);
 
   const rect = svgDrawCommon.getNoteRect();
   rect.x = actor.x;