Skip to content

Commit

Permalink
Merge pull request #5272 from Ronid1/feature/5245-sequence_diagrame_a…
Browse files Browse the repository at this point in the history 
…dd_classes_to_actors_text

Feature/5245 sequence diagram add classes to actors text
  • Loading branch information
@sidharthv96
sidharthv96 authored Mar 23, 2024
2 parents 7ddea12 + 6c0be03 commit d5b1028
Show file tree
Hide file tree
Showing 4 changed files with 45 additions and 36 deletions.
5 changes: 4 additions & 1 deletion cypress/integration/rendering/sequencediagram.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -375,7 +375,7 @@ context('Sequence diagram', () => {
{}
);
});
it('should have actor-top and actor-bottom classes on top and bottom actor box and symbol', () => {
it('should have actor-top and actor-bottom classes on top and bottom actor box and symbol and actor-box and actor-man classes for text tags', () => {
imgSnapshotTest(
`
sequenceDiagram
Expand All @@ -394,6 +394,9 @@ context('Sequence diagram', () => {
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');

cy.get('text.actor-box').should('include.text', 'Alice');
cy.get('text.actor-man').should('include.text', 'Bob');
});
it('should render long notes left of actor', () => {
imgSnapshotTest(
Expand Down
34 changes: 18 additions & 16 deletions docs/syntax/sequenceDiagram.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -740,22 +740,24 @@ Styling of a sequence diagram is done by defining a number of css classes. Durin

### Classes used

| 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. |
| 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 of all of the actors. |
| text.actor-box | Styles for text of the actor box. |
| text.actor-man | Styles for text of the actor figure. |
| 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

Expand Down
8 changes: 5 additions & 3 deletions packages/mermaid/src/diagrams/sequence/svgDraw.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import * as configApi from '../../config.js';
export const ACTOR_TYPE_WIDTH = 18 * 2;
const TOP_ACTOR_CLASS = 'actor-top';
const BOTTOM_ACTOR_CLASS = 'actor-bottom';
const ACTOR_BOX_CLASS = 'actor-box';
const ACTOR_MAN_FIGURE_CLASS = 'actor-man';

export const drawRect = function (elem, rectData) {
return svgDrawCommon.drawRect(elem, rectData);
Expand Down Expand Up @@ -395,7 +397,7 @@ const drawActorTypeParticipant = async function (elem, actor, conf, isFooter) {
rect.y,
rect.width,
rect.height,
{ class: 'actor' },
{ class: `actor ${ACTOR_BOX_CLASS}` },
conf
);

Expand Down Expand Up @@ -433,7 +435,7 @@ const drawActorTypeActor = async function (elem, actor, conf, isFooter) {
actor.actorCnt = actorCnt;
}
const actElem = elem.append('g');
let cssClass = 'actor-man';
let cssClass = ACTOR_MAN_FIGURE_CLASS;
if (isFooter) {
cssClass += ` ${BOTTOM_ACTOR_CLASS}`;
} else {
Expand Down Expand Up @@ -497,7 +499,7 @@ const drawActorTypeActor = async function (elem, actor, conf, isFooter) {
rect.y + 35,
rect.width,
rect.height,
{ class: 'actor' },
{ class: `actor ${ACTOR_MAN_FIGURE_CLASS}` },
conf
);

Expand Down
34 changes: 18 additions & 16 deletions packages/mermaid/src/docs/syntax/sequenceDiagram.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -518,22 +518,24 @@ Styling of a sequence diagram is done by defining a number of css classes. Durin

### Classes used

| 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. |
| 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 of all of the actors. |
| text.actor-box | Styles for text of the actor box. |
| text.actor-man | Styles for text of the actor figure. |
| 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

Expand Down

0 comments on commit d5b1028

Please sign in to comment.