marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-02 21:59:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch '3358-blocks-diagram' of github.com:mermaid-js/mermaid into 3358-blocks-diagram

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-02-01 10:41:11 +01:00
parent 16149abcc0 13d0b61757
commit d3c5b02008
6 changed files with 81 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts
View File

@@ -53,7 +53,7 @@ export interface QuadrantBuildType {
borderLines?: QuadrantLineType[];
}
export interface quadrantBuilderData {
export interface QuadrantBuilderData {
titleText: string;
quadrant1Text: string;
quadrant2Text: string;
@@ -116,7 +116,7 @@ interface CalculateSpaceData {
export class QuadrantBuilder {
private config: QuadrantBuilderConfig;
private themeConfig: QuadrantBuilderThemeConfig;
private data: quadrantBuilderData;
private data: QuadrantBuilderData;
constructor() {
this.config = this.getDefaultConfig();
@@ -124,7 +124,7 @@ export class QuadrantBuilder {
this.data = this.getDefaultData();
}
getDefaultData(): quadrantBuilderData {
getDefaultData(): QuadrantBuilderData {
return {
titleText: '',
quadrant1Text: '',
@@ -194,7 +194,7 @@ export class QuadrantBuilder {
log.info('clear called');
}
setData(data: Partial<quadrantBuilderData>) {
setData(data: Partial<QuadrantBuilderData>) {
this.data = { ...this.data, ...data };
}

15
packages/mermaid/src/diagrams/sequence/svgDraw.js
View File

@@ -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;

30
packages/mermaid/src/docs/syntax/sequenceDiagram.md
View File

@@ -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