diff --git a/demos/sequence.html b/demos/sequence.html
index d6b4e3769d..e975486b93 100644
--- a/demos/sequence.html
+++ b/demos/sequence.html
@@ -187,6 +187,13 @@
Sequence diagram demos
Note left of Bob: Alice/Bob Note
end
+
+ sequenceDiagram
+ actor Alice
+ actor John
+ Alice-xJohn: Hello John, how are you?
+ John--xAlice: Great!
+
diff --git a/packages/mermaid/src/diagrams/common/commonTypes.ts b/packages/mermaid/src/diagrams/common/commonTypes.ts
index 84c26db6e1..36473f3e42 100644
--- a/packages/mermaid/src/diagrams/common/commonTypes.ts
+++ b/packages/mermaid/src/diagrams/common/commonTypes.ts
@@ -11,6 +11,7 @@ export interface RectData {
ry?: number;
attrs?: Record;
anchor?: string;
+ name?: string;
}
export interface Bound {
diff --git a/packages/mermaid/src/diagrams/common/svgDrawCommon.ts b/packages/mermaid/src/diagrams/common/svgDrawCommon.ts
index 706d43ab9d..cf962f33ec 100644
--- a/packages/mermaid/src/diagrams/common/svgDrawCommon.ts
+++ b/packages/mermaid/src/diagrams/common/svgDrawCommon.ts
@@ -21,6 +21,9 @@ export const drawRect = (element: SVG | Group, rectData: RectData): D3RectElemen
rectElement.attr('stroke', rectData.stroke);
rectElement.attr('width', rectData.width);
rectElement.attr('height', rectData.height);
+ if (rectData.name) {
+ rectElement.attr('name', rectData.name);
+ }
rectData.rx !== undefined && rectElement.attr('rx', rectData.rx);
rectData.ry !== undefined && rectElement.attr('ry', rectData.ry);
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
index 12767f8898..cca70e9ccc 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -375,6 +375,7 @@ const drawActorTypeParticipant = async 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;
@@ -439,6 +440,7 @@ const drawActorTypeActor = async 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;