Merge pull request #5241 from Ronid1/feature/4653-add_actor-top_class…

…_to_sequence_diagram Feature/4653 add actor-top class to sequence diagram
mermaid-js · Jan 31, 2024 · 7503694 · 7503694
2 parents aa50db8 + 941d9d1
commit 7503694
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 29 deletions.
diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
@@ -375,6 +375,26 @@ context('Sequence diagram', () => {
         {}
       );
     });
+    it('should have actor-top and actor-bottom classes on top and bottom actor box and symbol', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+          actor Bob
+          Alice->>Bob: Hi Bob
+          Bob->>Alice: Hi Alice
+      `,
+        {}
+      );
+      cy.get('.actor').should('have.class', 'actor-top');
+      cy.get('.actor-man').should('have.class', 'actor-top');
+      cy.get('.actor.actor-top').should('not.have.class', 'actor-bottom');
+      cy.get('.actor-man.actor-top').should('not.have.class', 'actor-bottom');
+
+      cy.get('.actor').should('have.class', 'actor-bottom');
+      cy.get('.actor-man').should('have.class', 'actor-bottom');
+      cy.get('.actor.actor-bottom').should('not.have.class', 'actor-top');
+      cy.get('.actor-man.actor-bottom').should('not.have.class', 'actor-top');
+    });
     it('should render long notes left of actor', () => {
       imgSnapshotTest(
         `

diff --git a/docs/syntax/sequenceDiagram.md b/docs/syntax/sequenceDiagram.md
@@ -740,20 +740,22 @@ Styling of a sequence diagram is done by defining a number of css classes. Durin
 
 ### Classes used
 
-| Class        | Description                                                 |
-| ------------ | ----------------------------------------------------------- |
-| actor        | Style for the actor box at the top of the diagram.          |
-| text.actor   | Styles for text in the actor box at the top of the diagram. |
-| actor-line   | The vertical line for an actor.                             |
-| messageLine0 | Styles for the solid message line.                          |
-| messageLine1 | Styles for the dotted message line.                         |
-| messageText  | Defines styles for the text on the message arrows.          |
-| labelBox     | Defines styles label to left in a loop.                     |
-| labelText    | Styles for the text in label for loops.                     |
-| loopText     | Styles for the text in the loop box.                        |
-| loopLine     | Defines styles for the lines in the loop box.               |
-| note         | Styles for the note box.                                    |
-| noteText     | Styles for the text on in the note boxes.                   |
+| Class        | Description                                                    |
+| ------------ | -------------------------------------------------------------- |
+| actor        | Styles for the actor box.                                      |
+| actor-top    | Styles for the actor figure/ box at the top of the diagram.    |
+| actor-bottom | Styles for the actor figure/ box at the bottom of the diagram. |
+| text.actor   | Styles for text in the actor box.                              |
+| actor-line   | The vertical line for an actor.                                |
+| messageLine0 | Styles for the solid message line.                             |
+| messageLine1 | Styles for the dotted message line.                            |
+| messageText  | Defines styles for the text on the message arrows.             |
+| labelBox     | Defines styles label to left in a loop.                        |
+| labelText    | Styles for the text in label for loops.                        |
+| loopText     | Styles for the text in the loop box.                           |
+| loopLine     | Defines styles for the lines in the loop box.                  |
+| note         | Styles for the note box.                                       |
+| noteText     | Styles for the text on in the note boxes.                      |
 
 ### Sample stylesheet
 

diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -5,6 +5,8 @@ import { ZERO_WIDTH_SPACE, parseFontSize } from '../../utils.js';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 
 export const ACTOR_TYPE_WIDTH = 18 * 2;
+const TOP_ACTOR_CLASS = 'actor-top';
+const BOTTOM_ACTOR_CLASS = 'actor-bottom';
 
 export const drawRect = function (elem, rectData) {
   return svgDrawCommon.drawRect(elem, rectData);
@@ -319,6 +321,11 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
   } else {
     rect.fill = '#eaeaea';
   }
+  if (isFooter) {
+    cssclass += ` ${BOTTOM_ACTOR_CLASS}`;
+  } else {
+    cssclass += ` ${TOP_ACTOR_CLASS}`;
+  }
   rect.x = actor.x;
   rect.y = actorY;
   rect.width = actor.width;
@@ -383,7 +390,13 @@ const drawActorTypeActor = function (elem, actor, conf, isFooter) {
     actor.actorCnt = actorCnt;
   }
   const actElem = elem.append('g');
-  actElem.attr('class', 'actor-man');
+  let cssClass = 'actor-man';
+  if (isFooter) {
+    cssClass += ` ${BOTTOM_ACTOR_CLASS}`;
+  } else {
+    cssClass += ` ${TOP_ACTOR_CLASS}`;
+  }
+  actElem.attr('class', cssClass);
 
   const rect = svgDrawCommon.getNoteRect();
   rect.x = actor.x;

diff --git a/packages/mermaid/src/docs/syntax/sequenceDiagram.md b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
@@ -518,20 +518,22 @@ Styling of a sequence diagram is done by defining a number of css classes. Durin
 
 ### Classes used
 
-| Class        | Description                                                 |
-| ------------ | ----------------------------------------------------------- |
-| actor        | Style for the actor box at the top of the diagram.          |
-| text.actor   | Styles for text in the actor box at the top of the diagram. |
-| actor-line   | The vertical line for an actor.                             |
-| messageLine0 | Styles for the solid message line.                          |
-| messageLine1 | Styles for the dotted message line.                         |
-| messageText  | Defines styles for the text on the message arrows.          |
-| labelBox     | Defines styles label to left in a loop.                     |
-| labelText    | Styles for the text in label for loops.                     |
-| loopText     | Styles for the text in the loop box.                        |
-| loopLine     | Defines styles for the lines in the loop box.               |
-| note         | Styles for the note box.                                    |
-| noteText     | Styles for the text on in the note boxes.                   |
+| Class        | Description                                                    |
+| ------------ | -------------------------------------------------------------- |
+| actor        | Styles for the actor box.                                      |
+| actor-top    | Styles for the actor figure/ box at the top of the diagram.    |
+| actor-bottom | Styles for the actor figure/ box at the bottom of the diagram. |
+| text.actor   | Styles for text in the actor box.                              |
+| actor-line   | The vertical line for an actor.                                |
+| messageLine0 | Styles for the solid message line.                             |
+| messageLine1 | Styles for the dotted message line.                            |
+| messageText  | Defines styles for the text on the message arrows.             |
+| labelBox     | Defines styles label to left in a loop.                        |
+| labelText    | Styles for the text in label for loops.                        |
+| loopText     | Styles for the text in the loop box.                           |
+| loopLine     | Defines styles for the lines in the loop box.                  |
+| note         | Styles for the note box.                                       |
+| noteText     | Styles for the text on in the note boxes.                      |
 
 ### Sample stylesheet