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;