Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
584a789
6638: add support for additional message types for sequence diagram
omkarht Jul 21, 2025
fda640c
fix: adjusted arrowhead design
omkarht Jul 21, 2025
6b9c15d
added reverse arrow head types
omkarht Jul 22, 2025
252b183
added arrowhead types for dotted line type
omkarht Jul 22, 2025
ba9db26
Lexing : Added Support for new arrow types through lexing
omkarht Jul 22, 2025
cb4ed60
chore: added rendering test cases for arrow head type
omkarht Jul 23, 2025
e8d6daf
add support for central connection circle after arrow in lifeline dir…
omkarht Jul 28, 2025
0e40d8e
fix: fixed failing test cases
omkarht Jul 28, 2025
62faacd
fix: fixed failing test cases
omkarht Jul 28, 2025
81a6a36
Merge branch 'develop' into 6638-sequence-diagram-additional-messages
omkarht Jul 28, 2025
7ca0665
fix: fixed failing test case
omkarht Jul 28, 2025
40990bb
Merge branch 'develop' into 6638-sequence-diagram-additional-messages
omkarht Jul 29, 2025
3e5d2db
Merge branch 'develop' into 6638-sequence-diagram-additional-messages
omkarht Aug 6, 2025
bd47c57
chore: refactored code
omkarht Aug 6, 2025
74c96db
docs: document new syntax for half-arrow message and central connection
omkarht Aug 7, 2025
0b42bdb
Merge branch 'develop' into 6638-sequence-diagram-additional-messages
omkarht Aug 11, 2025
2b58df9
fix: refactored documentation
omkarht Aug 19, 2025
5a05540
Merge branch 'develop' of https://github.com/mermaid-js/mermaid into …
omkarht Aug 21, 2025
73e9849
chore: added changeset
omkarht Aug 21, 2025
39f90de
Merge branch 'develop' into 6638-sequence-diagram-additional-messages
omkarht Aug 22, 2025
1988d24
fix: fixed reverse arrows placing for autonumber
omkarht Aug 22, 2025
045699d
Merge branch 'develop' of https://github.com/mermaid-js/mermaid into …
omkarht Aug 25, 2025
c530bae
Merge branch 'develop' into 6638-sequence-diagram-additional-messages
omkarht Aug 28, 2025
c40faac
Merge branch 'develop' into 6638-sequence-diagram-additional-messages
omkarht Aug 29, 2025
ac4aa94
Merge branch 'develop' into 6638-sequence-diagram-additional-messages
omkarht Sep 2, 2025
11cd3f1
feat: add central connection rendering and parsing tests
omkarht Sep 2, 2025
82ef7b5
docs: add version placeholders for new features
omkarht Sep 2, 2025
29aad6d
Merge branch 'develop' into 6638-sequence-diagram-additional-messages
omkarht Sep 4, 2025
f6fa026
Merge branch 'develop' into 6638-sequence-diagram-additional-messages
omkarht Sep 4, 2025
2cdaf03
Merge branch 'develop' into 6638-sequence-diagram-additional-messages
omkarht Sep 5, 2025
daeb85b
Merge branch 'develop' into 6638-sequence-diagram-additional-messages
omkarht Sep 11, 2025
e3ef5e4
fix: fixed central connection for bidirectional dotted arrow
omkarht Sep 11, 2025
4dbabba
Merge branch 'develop' into 6638-sequence-diagram-additional-messages
omkarht Sep 15, 2025
3964ce0
Merge branch 'develop' into 6638-sequence-diagram-additional-messages
omkarht Sep 15, 2025
d3de3ec
Merge branch 'develop' into 6638-sequence-diagram-additional-messages
omkarht Sep 17, 2025
bd25b88
Merge branch 'develop' into 6638-sequence-diagram-additional-messages
omkarht Sep 22, 2025
b75dcb8
Merge branch 'develop' into 6638-sequence-diagram-additional-messages
omkarht Sep 23, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/loud-results-melt.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'mermaid': minor
---

feat: Add half-arrowheads (solid & stick) and central connection support
121 changes: 121 additions & 0 deletions cypress/integration/rendering/sequencediagram-v2.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -655,5 +655,126 @@ describe('Sequence Diagram Special Cases', () => {
expect(svg).to.not.have.attr('style');
});
});

describe('Central Connection Rendering Tests', () => {
it('should render central connection circles on actor vertical lines', () => {
imgSnapshotTest(
`sequenceDiagram
participant Alice
participant Bob
participant Charlie
Alice ()->>() Bob: Central connection
Bob ()-->> Charlie: Reverse central connection
Charlie ()<<-->>() Alice: Dual central connection`,
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
);
});

it('should render central connections with different arrow types', () => {
imgSnapshotTest(
`sequenceDiagram
participant Alice
participant Bob
Alice ()->>() Bob: Solid open arrow
Alice ()-->>() Bob: Dotted open arrow
Alice ()-x() Bob: Solid cross
Alice ()--x() Bob: Dotted cross
Alice ()->() Bob: Solid arrow`,
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
);
});

it('should render central connections with bidirectional arrows', () => {
imgSnapshotTest(
`sequenceDiagram
participant Alice
participant Bob
Alice ()<<->>() Bob: Bidirectional solid
Alice ()<<-->>() Bob: Bidirectional dotted`,
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
);
});

it('should render central connections with activations', () => {
imgSnapshotTest(
`sequenceDiagram
participant Alice
participant Bob
participant Charlie
Alice ()->>() Bob: Activate Bob
activate Bob
Bob ()-->> Charlie: Message to Charlie
Bob ()->>() Alice: Response to Alice
deactivate Bob`,
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
);
});

it('should render central connections mixed with normal messages', () => {
imgSnapshotTest(
`sequenceDiagram
participant Alice
participant Bob
participant Charlie
Alice ->> Bob: Normal message
Bob ()->>() Charlie: Central connection
Charlie -->> Alice: Normal dotted message
Alice ()<<-->>() Bob: Dual central connection
Bob -x Charlie: Normal cross message`,
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
);
});

it('should render central connections with notes', () => {
imgSnapshotTest(
`sequenceDiagram
participant Alice
participant Bob
participant Charlie
Alice ()->>() Bob: Central connection
Note over Alice,Bob: Central connection note
Bob ()-->> Charlie: Reverse central connection
Note right of Charlie: Response note
Charlie ()<<-->>() Alice: Dual central connection`,
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
);
});

it('should render central connections with loops and alternatives', () => {
imgSnapshotTest(
`sequenceDiagram
participant Alice
participant Bob
participant Charlie
loop Every minute
Alice ()->>() Bob: Central heartbeat
Bob ()-->> Charlie: Forward heartbeat
end
alt Success
Charlie ()<<-->>() Alice: Success response
else Failure
Charlie ()-x() Alice: Failure response
end`,
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
);
});

it('should render central connections with different participant types', () => {
imgSnapshotTest(
`sequenceDiagram
participant Alice
actor Bob
participant Charlie@{"type":"boundary"}
participant David@{"type":"control"}
participant Eve@{"type":"entity"}
Alice ()->>() Bob: To actor
Bob ()-->> Charlie: To boundary
Charlie ()->>() David: To control
David ()<<-->>() Eve: To entity
Eve ()-x() Alice: Back to participant`,
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
);
});
});
});
});
163 changes: 163 additions & 0 deletions cypress/integration/rendering/sequencediagram.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -1053,4 +1053,167 @@ describe('Sequence diagram', () => {
]);
});
});
describe('render new arrow type', () => {
it('should render Solid half arrow top', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice -|\\ John: Hello John, how are you?
Alice-|\\ John: Hi Alice, I can hear you!
Alice -|\\ John: Test
`
);
});
it('should render Solid half arrow bottom', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice-|/John: Hello John, how are you?
Alice-|/John: Hi Alice, I can hear you!
Alice-|/John: Test
`
);
});

it('should render Stick half arrow top ', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice-\\\\John: Hello John, how are you?
Alice-\\\\John: Hi Alice, I can hear you!
Alice-\\\\John: Test
`
);
});
it('should render Stick half arrow bottom ', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice-//John: Hello John, how are you?
Alice-//John: Hi Alice, I can hear you!
Alice-//John: Test
`
);
});
it('should render Solid half arrow top reverse ', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice/|-John: Hello Alice, how are you?
Alice/|-John: Hi Alice, I can hear you!
Alice/|-John: Test

`
);
});

it('should render Solid half arrow bottom reverse ', () => {
imgSnapshotTest(
`sequenceDiagram
Alice \\|- John: Hello Alice, how are you?
Alice \\|- John: Hi Alice, I can hear you!
Alice \\|- John: Test`
);
});

it('should render Stick half arrow top reverse ', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice //-John: Hello Alice, how are you?
Alice //-John: Hi Alice, I can hear you!
Alice //-John: Test`
);
});

it('should render Stick half arrow bottom reverse ', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice \\\\-John: Hello Alice, how are you?
Alice \\\\-John: Hi Alice, I can hear you!
Alice \\\\-John: Test`
);
});

it('should render Solid half arrow top dotted', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice --|\\John: Hello John, how are you?
Alice --|\\John: Hi Alice, I can hear you!
Alice --|\\John: Test`
);
});

it('should render Solid half arrow bottom dotted', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice --|/John: Hello John, how are you?
Alice --|/John: Hi Alice, I can hear you!
Alice --|/John: Test`
);
});

it('should render Stick half arrow top dotted', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice--\\\\John: Hello John, how are you?
Alice--\\\\John: Hi Alice, I can hear you!
Alice--\\\\John: Test`
);
});

it('should render Stick half arrow bottom dotted', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice--//John: Hello John, how are you?
Alice--//John: Hi Alice, I can hear you!
Alice--//John: Test`
);
});

it('should render Solid half arrow top reverse dotted', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice/|--John: Hello Alice, how are you?
Alice/|--John: Hi Alice, I can hear you!
Alice/|--John: Test`
);
});

it('should render Solid half arrow bottom reverse dotted', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice\\|--John: Hello Alice, how are you?
Alice\\|--John: Hi Alice, I can hear you!
Alice\\|--John: Test`
);
});

it('should render Stick half arrow top reverse dotted ', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice//--John: Hello Alice, how are you?
Alice//--John: Hi Alice, I can hear you!
Alice//--John: Test`
);
});

it('should render Stick half arrow bottom reverse dotted ', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice\\\\--John: Hello Alice, how are you?
Alice\\\\--John: Hi Alice, I can hear you!
Alice\\\\--John: Test`
);
});
});
});
58 changes: 57 additions & 1 deletion docs/syntax/sequenceDiagram.md
Original file line number Diff line number Diff line change
Expand Up @@ -329,7 +329,11 @@ Messages can be of two displayed either solid or with a dotted line.
[Actor][Arrow][Actor]:Message text
```

There are ten types of arrows currently supported:
Lines can be solid or dotted, and can end with various types of arrowheads, crosses, or open arrows.

#### Supported Arrow Types

**Standard Arrow Types**

| Type | Description |
| -------- | ---------------------------------------------------- |
Expand All @@ -344,6 +348,58 @@ There are ten types of arrows currently supported:
| `-)` | Solid line with an open arrow at the end (async) |
| `--)` | Dotted line with a open arrow at the end (async) |

**Half-Arrows (v\<MERMAID_RELEASE_VERSION>+)**

The following half-arrow types are supported for more expressive sequence diagrams. Both solid and dotted variants are available by increasing the number of dashes (`-` → `--`).

---

| Type | Description |
| ------- | ---------------------------------------------------- |
| `-\|\` | Solid line with top half arrowhead |
| `--\|\` | Dotted line with top half arrowhead |
| `-\|/` | Solid line with bottom half arrowhead |
| `--\|/` | Dotted line with bottom half arrowhead |
| `/\|-` | Solid line with reverse top half arrowhead |
| `/\|--` | Dotted line with reverse top half arrowhead |
| `\\-` | Solid line with reverse bottom half arrowhead |
| `\\--` | Dotted line with reverse bottom half arrowhead |
| `-\\` | Solid line with top stick half arrowhead |
| `--\\` | Dotted line with top stick half arrowhead |
| `-//` | Solid line with bottom stick half arrowhead |
| `--//` | Dotted line with bottom stick half arrowhead |
| `//-` | Solid line with reverse top stick half arrowhead |
| `//--` | Dotted line with reverse top stick half arrowhead |
| `\\-` | Solid line with reverse bottom stick half arrowhead |
| `\\--` | Dotted line with reverse bottom stick half arrowhead |

## Central Connections (v\<MERMAID_RELEASE_VERSION>+)

Mermaid sequence diagrams support **central lifeline connections** using a `()`.
This is useful to represent messages or signals that connect to a central point, rather than from one actor directly to another.

To indicate a central connection, append `()` to the arrow syntax.

#### Basic Syntax

```mermaid-example
sequenceDiagram
participant Alice
participant John
Alice->>()John: Hello John
Alice()->>John: How are you?
John()->>()Alice: Great!
```

```mermaid
sequenceDiagram
participant Alice
participant John
Alice->>()John: Hello John
Alice()->>John: How are you?
John()->>()Alice: Great!
```

## Activations

It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:
Expand Down
Loading
Loading