diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index cf65485c7..c5925fa6a 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -52,6 +52,138 @@ context('Sequence diagram', () => {
{}
);
});
+ it('should render loops with a slight margin', () => {
+ imgSnapshotTest(
+ `
+ sequenceDiagram
+ Alice->>Bob: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+ loop Loopy
+ Bob->>Alice: Pasten
+ end `,
+ {}
+ );
+ });
+ context('font settings', () => {
+ it('should render different note fonts when configured', () => {
+ imgSnapshotTest(
+ `
+ sequenceDiagram
+ Alice->>Bob: I'm short
+ note left of Alice: I should have bigger fonts
+ Bob->>Alice: Short as well
+ `,
+ { sequence: { noteFontSize: 18, noteFontFamily: 'Arial' } }
+ );
+ });
+ it('should render different message fonts when configured', () => {
+ imgSnapshotTest(
+ `
+ sequenceDiagram
+ Alice->>Bob: I'm short
+ Bob->>Alice: Short as well
+ `,
+ { sequence: { messageFontSize: 18, messageFontFamily: 'Arial' } }
+ );
+ });
+ it('should render different actor fonts when configured', () => {
+ imgSnapshotTest(
+ `
+ sequenceDiagram
+ Alice->>Bob: I'm short
+ Bob->>Alice: Short as well
+ `,
+ { sequence: { actorFontSize: 18, actorFontFamily: 'Arial' } }
+ );
+ });
+ it('should render notes aligned to the left when configured', () => {
+ imgSnapshotTest(
+ `
+ sequenceDiagram
+ Alice->>Bob: I'm short
+ note left of Alice: I am left aligned
+ Bob->>Alice: Short as well
+ `,
+ { sequence: { noteAlign: 'left' } }
+ );
+ });
+ it('should render notes aligned to the right when configured', () => {
+ imgSnapshotTest(
+ `
+ sequenceDiagram
+ Alice->>Bob: I'm short
+ note left of Alice: I am right aligned
+ Bob->>Alice: Short as well
+ `,
+ { sequence: { noteAlign: 'right' } }
+ );
+ });
+ });
+ context('auth width scaling', () => {
+ it('should render long actor descriptions', () => {
+ imgSnapshotTest(
+ `
+ sequenceDiagram
+ participant A as Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+ A->>Bob: Hola
+ Bob-->A: Pasten !
+ `,
+ {}
+ );
+ });
+ it('should render long notes left of actor', () => {
+ imgSnapshotTest(
+ `
+ sequenceDiagram
+ Alice->>Bob: Hola
+ Note left of Alice: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+ Bob->>Alice: I'm short though
+ `,
+ {}
+ );
+ });
+ it('should render long notes right of actor', () => {
+ imgSnapshotTest(
+ `
+ sequenceDiagram
+ Alice->>Bob: Hola
+ Note right of Alice: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+ Bob->>Alice: I'm short though
+ `,
+ {}
+ );
+ });
+ it('should render long notes over actor', () => {
+ imgSnapshotTest(
+ `
+ sequenceDiagram
+ Alice->>Bob: Hola
+ Note over Alice: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+ Bob->>Alice: I'm short though
+ `,
+ {}
+ );
+ });
+ it('should render long messages from an actor to the left to one to the right', () => {
+ imgSnapshotTest(
+ `
+ sequenceDiagram
+ Alice->>Bob: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+ Bob->>Alice: I'm short though
+ `,
+ {}
+ );
+ });
+ it('should render long messages from an actor to the right to one to the left', () => {
+ imgSnapshotTest(
+ `
+ sequenceDiagram
+ Alice->>Bob: I'm short
+ Bob->>Alice: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+ `,
+ {}
+ );
+ });
+ });
context('background rects', () => {
it('should render a single and nested rects', () => {
imgSnapshotTest(
@@ -162,7 +294,7 @@ context('Sequence diagram', () => {
John->>Bob: How about you?
Bob-->>John: Jolly good!
`,
- {sequence: { actorMargin: 50, showSequenceNumbers: true }}
+ { sequence: { actorMargin: 50, showSequenceNumbers: true } }
);
});
it('should render autonumber when autonumber keyword is used', () => {
@@ -179,7 +311,7 @@ context('Sequence diagram', () => {
John->>Bob: How about you?
Bob-->>John: Jolly good!
`,
- {}
+ {}
);
});
it('should render autonumber with different line breaks', () => {
@@ -192,7 +324,7 @@ context('Sequence diagram', () => {
John-->>Alice: Hi Alice,
I can hear you!
John-->>Alice: I feel great!
`,
- {}
+ {}
);
});
});
diff --git a/docs/sequenceDiagram.md b/docs/sequenceDiagram.md
index bc8262ebe..16948a9cb 100755
--- a/docs/sequenceDiagram.md
+++ b/docs/sequenceDiagram.md
@@ -9,6 +9,7 @@ sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
```
+
```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
@@ -31,6 +32,7 @@ sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
```
+
```mermaid
sequenceDiagram
participant John
@@ -50,6 +52,7 @@ sequenceDiagram
A->>J: Hello John, how are you?
J->>A: Great!
```
+
```mermaid
sequenceDiagram
participant A as Alice
@@ -68,14 +71,14 @@ Messages can be of two displayed either solid or with a dotted line.
There are six types of arrows currently supported:
-Type | Description
---- | ---
--> | Solid line without arrow
---> | Dotted line without arrow
-->> | Solid line with arrowhead
--->> | Dotted line with arrowhead
--x | Solid line with a cross at the end (async)
---x | Dotted line with a cross at the end (async)
+| Type | Description |
+| ---- | ------------------------------------------- |
+| -> | Solid line without arrow |
+| --> | Dotted line without arrow |
+| ->> | Solid line with arrowhead |
+| -->> | Dotted line with arrowhead |
+| -x | Solid line with a cross at the end (async) |
+| --x | Dotted line with a cross at the end (async) |
## Activations
@@ -88,6 +91,7 @@ sequenceDiagram
John-->>Alice: Great!
deactivate John
```
+
```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
@@ -103,6 +107,7 @@ sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
```
+
```mermaid
sequenceDiagram
Alice->>+John: Hello John, how are you?
@@ -118,6 +123,7 @@ sequenceDiagram
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
```
+
```mermaid
sequenceDiagram
Alice->>+John: Hello John, how are you?
@@ -138,6 +144,7 @@ sequenceDiagram
participant John
Note right of John: Text in note
```
+
```mermaid
sequenceDiagram
participant John
@@ -151,6 +158,7 @@ sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
```
+
```mermaid
sequenceDiagram
Alice->John: Hello John, how are you?
@@ -176,6 +184,7 @@ sequenceDiagram
John-->Alice: Great!
end
```
+
```mermaid
sequenceDiagram
Alice->John: Hello John, how are you?
@@ -218,6 +227,7 @@ sequenceDiagram
Bob->>Alice: Thanks for asking
end
```
+
```mermaid
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
@@ -281,11 +291,13 @@ sequenceDiagram
It is possible to highlight flows by providing colored background rects. This is done by the notation
The colors are defined using rgb and rgba syntax.
+
```
rect rgb(0, 255, 0)
... content ...
end
```
+
```
rect rgba(0, 0, 255, .1)
... content ...
@@ -327,6 +339,7 @@ sequenceDiagram
## sequenceNumbers
It is possible to get a sequence number attached to each arrow in a sequence diagram. This can be configured when adding mermaid to the website as shown below:
+
```