mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-08-24 02:37:05 +02:00
Compare commits
28 Commits
@mermaid-j
...
6638-seque
Author | SHA1 | Date | |
---|---|---|---|
![]() |
1988d24227 | ||
![]() |
39f90debe7 | ||
![]() |
29886b8dd4 | ||
![]() |
e0b45c2d2b | ||
![]() |
d4c76968e9 | ||
![]() |
73e9849f99 | ||
![]() |
5a05540a5f | ||
![]() |
7171237b96 | ||
![]() |
066883f4cd | ||
![]() |
2b58df9665 | ||
![]() |
c534d3d364 | ||
![]() |
4db72f5357 | ||
![]() |
0b42bdba07 | ||
![]() |
74c96db3e2 | ||
![]() |
bd47c57eaf | ||
![]() |
3e5d2db514 | ||
![]() |
40990bb096 | ||
![]() |
7ca0665764 | ||
![]() |
81a6a361ab | ||
![]() |
62faacdeeb | ||
![]() |
0e40d8e8a8 | ||
![]() |
e8d6daf4f6 | ||
![]() |
cb4ed605b2 | ||
![]() |
ba9db26bfa | ||
![]() |
252b1837f7 | ||
![]() |
6b9c15d7f0 | ||
![]() |
fda640c90c | ||
![]() |
584a789183 |
5
.changeset/crazy-loops-matter.md
Normal file
5
.changeset/crazy-loops-matter.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'mermaid': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: Handle arrows correctly when auto number is enabled
|
5
.changeset/loud-results-melt.md
Normal file
5
.changeset/loud-results-melt.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'mermaid': minor
|
||||||
|
---
|
||||||
|
|
||||||
|
feat: Add half-arrowheads (solid & stick) and central connection support
|
2
.github/workflows/e2e-timings.yml
vendored
2
.github/workflows/e2e-timings.yml
vendored
@@ -58,7 +58,7 @@ jobs:
|
|||||||
echo "EOF" >> $GITHUB_OUTPUT
|
echo "EOF" >> $GITHUB_OUTPUT
|
||||||
|
|
||||||
- name: Commit and create pull request
|
- name: Commit and create pull request
|
||||||
uses: peter-evans/create-pull-request@1310d7dab503600742045e6fd4b84dda64352858
|
uses: peter-evans/create-pull-request@cb4d3bfce175d44325c6b7697f81e0afe8a79bdf
|
||||||
with:
|
with:
|
||||||
add-paths: |
|
add-paths: |
|
||||||
cypress/timings.json
|
cypress/timings.json
|
||||||
|
@@ -893,6 +893,17 @@ describe('Sequence diagram', () => {
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should handle bidirectional arrows with autonumber', () => {
|
||||||
|
imgSnapshotTest(`
|
||||||
|
sequenceDiagram
|
||||||
|
autonumber
|
||||||
|
participant A
|
||||||
|
participant B
|
||||||
|
A<<->>B: This is a bidirectional message
|
||||||
|
A->B: This is a normal message`);
|
||||||
|
});
|
||||||
|
|
||||||
it('should support actor links and properties when not mirrored EXPERIMENTAL: USE WITH CAUTION', () => {
|
it('should support actor links and properties when not mirrored EXPERIMENTAL: USE WITH CAUTION', () => {
|
||||||
//Be aware that the syntax for "properties" is likely to be changed.
|
//Be aware that the syntax for "properties" is likely to be changed.
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
@@ -1042,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`
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
@@ -209,7 +209,11 @@ Messages can be of two displayed either solid or with a dotted line.
|
|||||||
[Actor][Arrow][Actor]:Message text
|
[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 |
|
| Type | Description |
|
||||||
| -------- | ---------------------------------------------------- |
|
| -------- | ---------------------------------------------------- |
|
||||||
@@ -224,6 +228,58 @@ There are ten types of arrows currently supported:
|
|||||||
| `-)` | Solid line with an open arrow at the end (async) |
|
| `-)` | Solid line with an open arrow at the end (async) |
|
||||||
| `--)` | Dotted line with a open arrow at the end (async) |
|
| `--)` | Dotted line with a open arrow at the end (async) |
|
||||||
|
|
||||||
|
**Half-Arrows**
|
||||||
|
|
||||||
|
The following half-arrow types are now 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
|
||||||
|
|
||||||
|
Mermaid sequence diagrams now 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
|
## Activations
|
||||||
|
|
||||||
It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:
|
It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:
|
||||||
|
@@ -73,7 +73,7 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili
|
|||||||
"off" return 'off';
|
"off" return 'off';
|
||||||
"," return ',';
|
"," return ',';
|
||||||
";" return 'NEWLINE';
|
";" return 'NEWLINE';
|
||||||
[^+<\->\->:\n,;]+((?!(\-x|\-\-x|\-\)|\-\-\)))[\-]*[^\+<\->\->:\n,;]+)* { yytext = yytext.trim(); return 'ACTOR'; }
|
[^\/\\\+\()\+<\->\->:\n,;]+((?!(\-x|\-\-x|\-\)|\-\-\)|\-\|\\|\-\\|\-\/|\-\/\/|\-\|\/|\/\|\-|\\\|\-|\/\/\-|\\\\\-|\/\|\-|\-\-\|\\|\-\-|\(\)))[\-]*[^\+<\->\->:\n,;]+)* { yytext = yytext.trim(); return 'ACTOR'; } //final_4.11
|
||||||
"->>" return 'SOLID_ARROW';
|
"->>" return 'SOLID_ARROW';
|
||||||
"<<->>" return 'BIDIRECTIONAL_SOLID_ARROW';
|
"<<->>" return 'BIDIRECTIONAL_SOLID_ARROW';
|
||||||
"-->>" return 'DOTTED_ARROW';
|
"-->>" return 'DOTTED_ARROW';
|
||||||
@@ -84,10 +84,36 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili
|
|||||||
\-\-[x] return 'DOTTED_CROSS';
|
\-\-[x] return 'DOTTED_CROSS';
|
||||||
\-[\)] return 'SOLID_POINT';
|
\-[\)] return 'SOLID_POINT';
|
||||||
\-\-[\)] return 'DOTTED_POINT';
|
\-\-[\)] return 'DOTTED_POINT';
|
||||||
|
|
||||||
|
//normal-dotted
|
||||||
|
\-\-\|\\ return 'SOLID_ARROW_TOP_DOTTED';
|
||||||
|
\-\-\|\/ return 'SOLID_ARROW_BOTTOM_DOTTED';
|
||||||
|
\-\-\\\\ return 'STICK_ARROW_TOP_DOTTED';
|
||||||
|
\-\-\/\/ return 'STICK_ARROW_BOTTOM_DOTTED';
|
||||||
|
|
||||||
|
//reverse-dotted
|
||||||
|
\/\|\-\- return 'SOLID_ARROW_TOP_REVERSE_DOTTED';
|
||||||
|
\\\|\-\- return 'SOLID_ARROW_BOTTOM_REVERSE_DOTTED';
|
||||||
|
\/\/\-\- return 'STICK_ARROW_TOP_REVERSE_DOTTED';
|
||||||
|
\\\\\-\- return 'STICK_ARROW_BOTTOM_REVERSE_DOTTED';
|
||||||
|
|
||||||
|
//normal
|
||||||
|
\-\|\\ return 'SOLID_ARROW_TOP';
|
||||||
|
\-\|\/ return 'SOLID_ARROW_BOTTOM';
|
||||||
|
\-\\\\ return 'STICK_ARROW_TOP';
|
||||||
|
\-\/\/ return 'STICK_ARROW_BOTTOM';
|
||||||
|
|
||||||
|
//reverse
|
||||||
|
\/\|\- return 'SOLID_ARROW_TOP_REVERSE';
|
||||||
|
\\\|\- return 'SOLID_ARROW_BOTTOM_REVERSE';
|
||||||
|
\/\/\- return 'STICK_ARROW_TOP_REVERSE';
|
||||||
|
\\\\\- return 'STICK_ARROW_BOTTOM_REVERSE';
|
||||||
|
|
||||||
":"(?:(?:no)?wrap:)?[^#\n;]* return 'TXT';
|
":"(?:(?:no)?wrap:)?[^#\n;]* return 'TXT';
|
||||||
":" return 'TXT';
|
":" return 'TXT';
|
||||||
"+" return '+';
|
"+" return '+';
|
||||||
"-" return '-';
|
"-" return '-';
|
||||||
|
"()" return '()';
|
||||||
<<EOF>> return 'NEWLINE';
|
<<EOF>> return 'NEWLINE';
|
||||||
. return 'INVALID';
|
. return 'INVALID';
|
||||||
|
|
||||||
@@ -297,6 +323,20 @@ signal
|
|||||||
{ $$ = [$1,$4,{type: 'addMessage', from:$1.actor, to:$4.actor, signalType:$2, msg:$5},
|
{ $$ = [$1,$4,{type: 'addMessage', from:$1.actor, to:$4.actor, signalType:$2, msg:$5},
|
||||||
{type: 'activeEnd', signalType: yy.LINETYPE.ACTIVE_END, actor: $1.actor}
|
{type: 'activeEnd', signalType: yy.LINETYPE.ACTIVE_END, actor: $1.actor}
|
||||||
]}
|
]}
|
||||||
|
| actor signaltype '()' actor text2
|
||||||
|
{ $$ = [$1,$4,{type: 'addMessage', from:$1.actor, to:$4.actor, signalType:$2, msg:$5, activate: true, centralConnection: yy.LINETYPE.CENTRAL_CONNECTION},
|
||||||
|
{type: 'centralConnection', signalType: yy.LINETYPE.CENTRAL_CONNECTION, actor: $4.actor, }
|
||||||
|
]}
|
||||||
|
|
||||||
|
| actor '()' signaltype actor text2
|
||||||
|
{ $$ = [$1,$4,{type: 'addMessage', from:$1.actor, to:$4.actor, signalType:$3, msg:$5, activate: false, centralConnection: yy.LINETYPE.CENTRAL_CONNECTION_REVERSE},
|
||||||
|
{type: 'centralConnectionReverse', signalType: yy.LINETYPE.CENTRAL_CONNECTION_REVERSE, actor: $1.actor}
|
||||||
|
]}
|
||||||
|
| actor '()' signaltype '()' actor text2
|
||||||
|
{ $$ = [$1,$5,{type: 'addMessage', from:$1.actor, to:$5.actor, signalType:$3, msg:$6, activate: true, centralConnection: yy.LINETYPE.CENTRAL_CONNECTION_DUAL},
|
||||||
|
{type: 'centralConnection', signalType: yy.LINETYPE.CENTRAL_CONNECTION, actor: $5.actor, },
|
||||||
|
{type: 'centralConnectionReverse', signalType: yy.LINETYPE.CENTRAL_CONNECTION_REVERSE, actor: $1.actor}
|
||||||
|
]}
|
||||||
| actor signaltype actor text2
|
| actor signaltype actor text2
|
||||||
{ $$ = [$1,$3,{type: 'addMessage', from:$1.actor, to:$3.actor, signalType:$2, msg:$4}]}
|
{ $$ = [$1,$3,{type: 'addMessage', from:$1.actor, to:$3.actor, signalType:$2, msg:$4}]}
|
||||||
;
|
;
|
||||||
@@ -313,6 +353,27 @@ signaltype
|
|||||||
: SOLID_OPEN_ARROW { $$ = yy.LINETYPE.SOLID_OPEN; }
|
: SOLID_OPEN_ARROW { $$ = yy.LINETYPE.SOLID_OPEN; }
|
||||||
| DOTTED_OPEN_ARROW { $$ = yy.LINETYPE.DOTTED_OPEN; }
|
| DOTTED_OPEN_ARROW { $$ = yy.LINETYPE.DOTTED_OPEN; }
|
||||||
| SOLID_ARROW { $$ = yy.LINETYPE.SOLID; }
|
| SOLID_ARROW { $$ = yy.LINETYPE.SOLID; }
|
||||||
|
|
||||||
|
| SOLID_ARROW_TOP { $$ = yy.LINETYPE.SOLID_TOP; }
|
||||||
|
| SOLID_ARROW_BOTTOM { $$ = yy.LINETYPE.SOLID_BOTTOM; }
|
||||||
|
| STICK_ARROW_TOP { $$ = yy.LINETYPE.STICK_TOP; }
|
||||||
|
| STICK_ARROW_BOTTOM { $$ = yy.LINETYPE.STICK_BOTTOM; }
|
||||||
|
|
||||||
|
| SOLID_ARROW_TOP_DOTTED { $$ = yy.LINETYPE.SOLID_TOP_DOTTED; }
|
||||||
|
| SOLID_ARROW_BOTTOM_DOTTED { $$ = yy.LINETYPE.SOLID_BOTTOM_DOTTED; }
|
||||||
|
| STICK_ARROW_TOP_DOTTED { $$ = yy.LINETYPE.STICK_TOP_DOTTED; }
|
||||||
|
| STICK_ARROW_BOTTOM_DOTTED { $$ = yy.LINETYPE.STICK_BOTTOM_DOTTED; }
|
||||||
|
|
||||||
|
| SOLID_ARROW_TOP_REVERSE { $$ = yy.LINETYPE.SOLID_ARROW_TOP_REVERSE; }
|
||||||
|
| SOLID_ARROW_BOTTOM_REVERSE { $$ = yy.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE; }
|
||||||
|
| STICK_ARROW_TOP_REVERSE { $$ = yy.LINETYPE.STICK_ARROW_TOP_REVERSE; }
|
||||||
|
| STICK_ARROW_BOTTOM_REVERSE { $$ = yy.LINETYPE.STICK_ARROW_BOTTOM_REVERSE; }
|
||||||
|
|
||||||
|
| SOLID_ARROW_TOP_REVERSE_DOTTED { $$ = yy.LINETYPE.SOLID_ARROW_TOP_REVERSE_DOTTED; }
|
||||||
|
| SOLID_ARROW_BOTTOM_REVERSE_DOTTED { $$ = yy.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE_DOTTED; }
|
||||||
|
| STICK_ARROW_TOP_REVERSE_DOTTED { $$ = yy.LINETYPE.STICK_ARROW_TOP_REVERSE_DOTTED; }
|
||||||
|
| STICK_ARROW_BOTTOM_REVERSE_DOTTED { $$ = yy.LINETYPE.STICK_ARROW_BOTTOM_REVERSE_DOTTED; }
|
||||||
|
|
||||||
| BIDIRECTIONAL_SOLID_ARROW { $$ = yy.LINETYPE.BIDIRECTIONAL_SOLID; }
|
| BIDIRECTIONAL_SOLID_ARROW { $$ = yy.LINETYPE.BIDIRECTIONAL_SOLID; }
|
||||||
| DOTTED_ARROW { $$ = yy.LINETYPE.DOTTED; }
|
| DOTTED_ARROW { $$ = yy.LINETYPE.DOTTED; }
|
||||||
| BIDIRECTIONAL_DOTTED_ARROW { $$ = yy.LINETYPE.BIDIRECTIONAL_DOTTED; }
|
| BIDIRECTIONAL_DOTTED_ARROW { $$ = yy.LINETYPE.BIDIRECTIONAL_DOTTED; }
|
||||||
|
@@ -62,6 +62,30 @@ const LINETYPE = {
|
|||||||
PAR_OVER_START: 32,
|
PAR_OVER_START: 32,
|
||||||
BIDIRECTIONAL_SOLID: 33,
|
BIDIRECTIONAL_SOLID: 33,
|
||||||
BIDIRECTIONAL_DOTTED: 34,
|
BIDIRECTIONAL_DOTTED: 34,
|
||||||
|
|
||||||
|
SOLID_TOP: 41,
|
||||||
|
SOLID_BOTTOM: 42,
|
||||||
|
STICK_TOP: 43,
|
||||||
|
STICK_BOTTOM: 44,
|
||||||
|
|
||||||
|
SOLID_ARROW_TOP_REVERSE: 45,
|
||||||
|
SOLID_ARROW_BOTTOM_REVERSE: 46,
|
||||||
|
STICK_ARROW_TOP_REVERSE: 47,
|
||||||
|
STICK_ARROW_BOTTOM_REVERSE: 48,
|
||||||
|
|
||||||
|
SOLID_TOP_DOTTED: 51,
|
||||||
|
SOLID_BOTTOM_DOTTED: 52,
|
||||||
|
STICK_TOP_DOTTED: 53,
|
||||||
|
STICK_BOTTOM_DOTTED: 54,
|
||||||
|
|
||||||
|
SOLID_ARROW_TOP_REVERSE_DOTTED: 55,
|
||||||
|
SOLID_ARROW_BOTTOM_REVERSE_DOTTED: 56,
|
||||||
|
STICK_ARROW_TOP_REVERSE_DOTTED: 57,
|
||||||
|
STICK_ARROW_BOTTOM_REVERSE_DOTTED: 58,
|
||||||
|
|
||||||
|
CENTRAL_CONNECTION: 59,
|
||||||
|
CENTRAL_CONNECTION_REVERSE: 60,
|
||||||
|
CENTRAL_CONNECTION_DUAL: 61,
|
||||||
} as const;
|
} as const;
|
||||||
|
|
||||||
const ARROWTYPE = {
|
const ARROWTYPE = {
|
||||||
@@ -218,7 +242,8 @@ export class SequenceDB implements DiagramDB {
|
|||||||
idTo?: Message['to'],
|
idTo?: Message['to'],
|
||||||
message?: { text: string; wrap: boolean },
|
message?: { text: string; wrap: boolean },
|
||||||
messageType?: number,
|
messageType?: number,
|
||||||
activate = false
|
activate = false,
|
||||||
|
centralConnection?: number
|
||||||
) {
|
) {
|
||||||
if (messageType === this.LINETYPE.ACTIVE_END) {
|
if (messageType === this.LINETYPE.ACTIVE_END) {
|
||||||
const cnt = this.activationCount(idFrom ?? '');
|
const cnt = this.activationCount(idFrom ?? '');
|
||||||
@@ -245,6 +270,7 @@ export class SequenceDB implements DiagramDB {
|
|||||||
wrap: message?.wrap ?? this.autoWrap(),
|
wrap: message?.wrap ?? this.autoWrap(),
|
||||||
type: messageType,
|
type: messageType,
|
||||||
activate,
|
activate,
|
||||||
|
centralConnection: centralConnection ?? 0,
|
||||||
});
|
});
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
@@ -537,6 +563,12 @@ export class SequenceDB implements DiagramDB {
|
|||||||
case 'activeStart':
|
case 'activeStart':
|
||||||
this.addSignal(param.actor, undefined, undefined, param.signalType);
|
this.addSignal(param.actor, undefined, undefined, param.signalType);
|
||||||
break;
|
break;
|
||||||
|
case 'centralConnection':
|
||||||
|
this.addSignal(param.actor, undefined, undefined, param.signalType);
|
||||||
|
break;
|
||||||
|
case 'centralConnectionReverse':
|
||||||
|
this.addSignal(param.actor, undefined, undefined, param.signalType);
|
||||||
|
break;
|
||||||
case 'activeEnd':
|
case 'activeEnd':
|
||||||
this.addSignal(param.actor, undefined, undefined, param.signalType);
|
this.addSignal(param.actor, undefined, undefined, param.signalType);
|
||||||
break;
|
break;
|
||||||
@@ -580,7 +612,14 @@ export class SequenceDB implements DiagramDB {
|
|||||||
this.state.records.lastDestroyed = undefined;
|
this.state.records.lastDestroyed = undefined;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.addSignal(param.from, param.to, param.msg, param.signalType, param.activate);
|
this.addSignal(
|
||||||
|
param.from,
|
||||||
|
param.to,
|
||||||
|
param.msg,
|
||||||
|
param.signalType,
|
||||||
|
param.activate,
|
||||||
|
param.centralConnection
|
||||||
|
);
|
||||||
break;
|
break;
|
||||||
case 'boxStart':
|
case 'boxStart':
|
||||||
this.addBox(param.boxData);
|
this.addBox(param.boxData);
|
||||||
|
@@ -104,6 +104,7 @@ describe('more than one sequence diagram', () => {
|
|||||||
[
|
[
|
||||||
{
|
{
|
||||||
"activate": false,
|
"activate": false,
|
||||||
|
"centralConnection": 0,
|
||||||
"from": "Alice",
|
"from": "Alice",
|
||||||
"id": "0",
|
"id": "0",
|
||||||
"message": "Hello Bob, how are you?",
|
"message": "Hello Bob, how are you?",
|
||||||
@@ -113,6 +114,7 @@ describe('more than one sequence diagram', () => {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
"activate": false,
|
"activate": false,
|
||||||
|
"centralConnection": 0,
|
||||||
"from": "Bob",
|
"from": "Bob",
|
||||||
"id": "1",
|
"id": "1",
|
||||||
"message": "I am good thanks!",
|
"message": "I am good thanks!",
|
||||||
@@ -131,6 +133,7 @@ describe('more than one sequence diagram', () => {
|
|||||||
[
|
[
|
||||||
{
|
{
|
||||||
"activate": false,
|
"activate": false,
|
||||||
|
"centralConnection": 0,
|
||||||
"from": "Alice",
|
"from": "Alice",
|
||||||
"id": "0",
|
"id": "0",
|
||||||
"message": "Hello Bob, how are you?",
|
"message": "Hello Bob, how are you?",
|
||||||
@@ -140,6 +143,7 @@ describe('more than one sequence diagram', () => {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
"activate": false,
|
"activate": false,
|
||||||
|
"centralConnection": 0,
|
||||||
"from": "Bob",
|
"from": "Bob",
|
||||||
"id": "1",
|
"id": "1",
|
||||||
"message": "I am good thanks!",
|
"message": "I am good thanks!",
|
||||||
@@ -160,6 +164,7 @@ describe('more than one sequence diagram', () => {
|
|||||||
[
|
[
|
||||||
{
|
{
|
||||||
"activate": false,
|
"activate": false,
|
||||||
|
"centralConnection": 0,
|
||||||
"from": "Alice",
|
"from": "Alice",
|
||||||
"id": "0",
|
"id": "0",
|
||||||
"message": "Hello John, how are you?",
|
"message": "Hello John, how are you?",
|
||||||
@@ -169,6 +174,7 @@ describe('more than one sequence diagram', () => {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
"activate": false,
|
"activate": false,
|
||||||
|
"centralConnection": 0,
|
||||||
"from": "John",
|
"from": "John",
|
||||||
"id": "1",
|
"id": "1",
|
||||||
"message": "I am good thanks!",
|
"message": "I am good thanks!",
|
||||||
@@ -2058,4 +2064,34 @@ Bob->>Alice:Got it!
|
|||||||
expect(messages[0].from).toBe('Alice');
|
expect(messages[0].from).toBe('Alice');
|
||||||
expect(messages[0].to).toBe('Bob');
|
expect(messages[0].to).toBe('Bob');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('1 should parse ', async () => {
|
||||||
|
const diagram = await Diagram.fromText(`
|
||||||
|
sequenceDiagram
|
||||||
|
actor Bob
|
||||||
|
actor Alice
|
||||||
|
Bob -|\\ Alice: Hello Alice, how are you?
|
||||||
|
Bob -|/ Alice: Hello Alice, how are you?
|
||||||
|
Bob -// Alice: Hello Alice, how are you?
|
||||||
|
Bob -\\\\ Alice: Hello Alice, how are you?
|
||||||
|
|
||||||
|
Bob \\|- Alice: Hello Alice, how are you?
|
||||||
|
Bob /|- Alice: Hello Alice, how are you?
|
||||||
|
Bob //- Alice: Hello Alice, how are you?
|
||||||
|
Bob \\\\- Alice: Hello Alice, how are you?
|
||||||
|
`);
|
||||||
|
|
||||||
|
const messages = diagram.db.getMessages();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('2 should parse ', async () => {
|
||||||
|
const diagram = await Diagram.fromText(`
|
||||||
|
sequenceDiagram
|
||||||
|
actor Bob
|
||||||
|
actor Alice
|
||||||
|
Alice ()<<->>() Bob: hey?
|
||||||
|
`);
|
||||||
|
|
||||||
|
const messages = diagram.db.getMessages();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
@@ -281,6 +281,44 @@ const drawNote = async function (elem: any, noteModel: NoteModel) {
|
|||||||
bounds.models.addNote(noteModel);
|
bounds.models.addNote(noteModel);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const drawCentralConnection = function (
|
||||||
|
elem: any,
|
||||||
|
msg: any,
|
||||||
|
msgModel: any,
|
||||||
|
diagObj: Diagram,
|
||||||
|
startx: number,
|
||||||
|
stopx: number,
|
||||||
|
lineStartY: number
|
||||||
|
) {
|
||||||
|
const actors = diagObj.db.getActors();
|
||||||
|
const [fromLeft] = activationBounds(msg.from, actors);
|
||||||
|
const [toLeft] = activationBounds(msg.to, actors);
|
||||||
|
const isArrowToRight = fromLeft <= toLeft;
|
||||||
|
|
||||||
|
const g = elem.append('g');
|
||||||
|
|
||||||
|
const drawCircle = (cx: number) => {
|
||||||
|
g.append('circle')
|
||||||
|
.attr('cx', cx)
|
||||||
|
.attr('cy', lineStartY)
|
||||||
|
.attr('r', 5)
|
||||||
|
.attr('width', 10)
|
||||||
|
.attr('height', 10);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (msg.centralConnection === diagObj.db.LINETYPE.CENTRAL_CONNECTION) {
|
||||||
|
const cx = isArrowToRight ? stopx + 5 : stopx - 8;
|
||||||
|
drawCircle(cx);
|
||||||
|
} else if (msg.centralConnection === diagObj.db.LINETYPE.CENTRAL_CONNECTION_REVERSE) {
|
||||||
|
const cx = isArrowToRight ? startx - 5 : stopx + 8;
|
||||||
|
drawCircle(cx);
|
||||||
|
} else if (msg.centralConnection === diagObj.db.LINETYPE.CENTRAL_CONNECTION_DUAL) {
|
||||||
|
const offset = isArrowToRight ? 5 : -5;
|
||||||
|
drawCircle(stopx + offset);
|
||||||
|
drawCircle(startx - offset);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const messageFont = (cnf) => {
|
const messageFont = (cnf) => {
|
||||||
return {
|
return {
|
||||||
fontFamily: cnf.messageFontFamily,
|
fontFamily: cnf.messageFontFamily,
|
||||||
@@ -366,7 +404,7 @@ async function boundMessage(_diagram, msgModel): Promise<number> {
|
|||||||
* @param lineStartY - The Y coordinate at which the message line starts
|
* @param lineStartY - The Y coordinate at which the message line starts
|
||||||
* @param diagObj - The diagram object.
|
* @param diagObj - The diagram object.
|
||||||
*/
|
*/
|
||||||
const drawMessage = async function (diagram, msgModel, lineStartY: number, diagObj: Diagram) {
|
const drawMessage = async function (diagram, msgModel, lineStartY: number, diagObj: Diagram, msg) {
|
||||||
const { startx, stopx, starty, message, type, sequenceIndex, sequenceVisible } = msgModel;
|
const { startx, stopx, starty, message, type, sequenceIndex, sequenceVisible } = msgModel;
|
||||||
const textDims = utils.calculateTextDimensions(message, messageFont(conf));
|
const textDims = utils.calculateTextDimensions(message, messageFont(conf));
|
||||||
const textObj = svgDrawCommon.getTextObj();
|
const textObj = svgDrawCommon.getTextObj();
|
||||||
@@ -432,6 +470,9 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
|
|||||||
line.attr('y1', lineStartY);
|
line.attr('y1', lineStartY);
|
||||||
line.attr('x2', stopx);
|
line.attr('x2', stopx);
|
||||||
line.attr('y2', lineStartY);
|
line.attr('y2', lineStartY);
|
||||||
|
if (msg.centralConnection) {
|
||||||
|
drawCentralConnection(diagram, msg, msgModel, diagObj, startx, stopx, lineStartY);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// Make an SVG Container
|
// Make an SVG Container
|
||||||
// Draw the line
|
// Draw the line
|
||||||
@@ -440,7 +481,15 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
|
|||||||
type === diagObj.db.LINETYPE.DOTTED_CROSS ||
|
type === diagObj.db.LINETYPE.DOTTED_CROSS ||
|
||||||
type === diagObj.db.LINETYPE.DOTTED_POINT ||
|
type === diagObj.db.LINETYPE.DOTTED_POINT ||
|
||||||
type === diagObj.db.LINETYPE.DOTTED_OPEN ||
|
type === diagObj.db.LINETYPE.DOTTED_OPEN ||
|
||||||
type === diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED
|
type === diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED ||
|
||||||
|
type === diagObj.db.LINETYPE.SOLID_TOP_DOTTED ||
|
||||||
|
type === diagObj.db.LINETYPE.SOLID_BOTTOM_DOTTED ||
|
||||||
|
type === diagObj.db.LINETYPE.STICK_TOP_DOTTED ||
|
||||||
|
type === diagObj.db.LINETYPE.STICK_BOTTOM_DOTTED ||
|
||||||
|
type === diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE_DOTTED ||
|
||||||
|
type === diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE_DOTTED ||
|
||||||
|
type === diagObj.db.LINETYPE.STICK_ARROW_TOP_REVERSE_DOTTED ||
|
||||||
|
type === diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE_DOTTED
|
||||||
) {
|
) {
|
||||||
line.style('stroke-dasharray', '3, 3');
|
line.style('stroke-dasharray', '3, 3');
|
||||||
line.attr('class', 'messageLine1');
|
line.attr('class', 'messageLine1');
|
||||||
@@ -456,6 +505,51 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
|
|||||||
line.attr('stroke-width', 2);
|
line.attr('stroke-width', 2);
|
||||||
line.attr('stroke', 'none'); // handled by theme/css anyway
|
line.attr('stroke', 'none'); // handled by theme/css anyway
|
||||||
line.style('fill', 'none'); // remove any fill colour
|
line.style('fill', 'none'); // remove any fill colour
|
||||||
|
|
||||||
|
if (type === diagObj.db.LINETYPE.SOLID_TOP || type === diagObj.db.LINETYPE.SOLID_TOP_DOTTED) {
|
||||||
|
line.attr('marker-end', 'url(' + url + '#solidTopArrowHead)');
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
type === diagObj.db.LINETYPE.SOLID_BOTTOM ||
|
||||||
|
type === diagObj.db.LINETYPE.SOLID_BOTTOM_DOTTED
|
||||||
|
) {
|
||||||
|
line.attr('marker-end', 'url(' + url + '#solidBottomArrowHead)');
|
||||||
|
}
|
||||||
|
if (type === diagObj.db.LINETYPE.STICK_TOP || type === diagObj.db.LINETYPE.STICK_TOP_DOTTED) {
|
||||||
|
line.attr('marker-end', 'url(' + url + '#stickTopArrowHead)');
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
type === diagObj.db.LINETYPE.STICK_BOTTOM ||
|
||||||
|
type === diagObj.db.LINETYPE.STICK_BOTTOM_DOTTED
|
||||||
|
) {
|
||||||
|
line.attr('marker-end', 'url(' + url + '#stickBottomArrowHead)');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
type === diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE ||
|
||||||
|
type === diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE_DOTTED
|
||||||
|
) {
|
||||||
|
line.attr('marker-start', 'url(' + url + '#solidBottomArrowHead)');
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
type === diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE ||
|
||||||
|
type === diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE_DOTTED
|
||||||
|
) {
|
||||||
|
line.attr('marker-start', 'url(' + url + '#solidTopArrowHead)');
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
type === diagObj.db.LINETYPE.STICK_ARROW_TOP_REVERSE ||
|
||||||
|
type === diagObj.db.LINETYPE.STICK_ARROW_TOP_REVERSE_DOTTED
|
||||||
|
) {
|
||||||
|
line.attr('marker-start', 'url(' + url + '#stickBottomArrowHead)');
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
type === diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE ||
|
||||||
|
type === diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE_DOTTED
|
||||||
|
) {
|
||||||
|
line.attr('marker-start', 'url(' + url + '#stickTopArrowHead)');
|
||||||
|
}
|
||||||
|
|
||||||
if (type === diagObj.db.LINETYPE.SOLID || type === diagObj.db.LINETYPE.DOTTED) {
|
if (type === diagObj.db.LINETYPE.SOLID || type === diagObj.db.LINETYPE.DOTTED) {
|
||||||
line.attr('marker-end', 'url(' + url + '#arrowhead)');
|
line.attr('marker-end', 'url(' + url + '#arrowhead)');
|
||||||
}
|
}
|
||||||
@@ -476,7 +570,42 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
|
|||||||
|
|
||||||
// add node number
|
// add node number
|
||||||
if (sequenceVisible || conf.showSequenceNumbers) {
|
if (sequenceVisible || conf.showSequenceNumbers) {
|
||||||
line.attr('marker-start', 'url(' + url + '#sequencenumber)');
|
const isBidirectional =
|
||||||
|
type === diagObj.db.LINETYPE.BIDIRECTIONAL_SOLID ||
|
||||||
|
type === diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED;
|
||||||
|
|
||||||
|
const isReverseArrowType =
|
||||||
|
type === diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE ||
|
||||||
|
type === diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE_DOTTED ||
|
||||||
|
type === diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE ||
|
||||||
|
type === diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE_DOTTED ||
|
||||||
|
type === diagObj.db.LINETYPE.STICK_ARROW_TOP_REVERSE ||
|
||||||
|
type === diagObj.db.LINETYPE.STICK_ARROW_TOP_REVERSE_DOTTED ||
|
||||||
|
type === diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE ||
|
||||||
|
type === diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE_DOTTED;
|
||||||
|
|
||||||
|
let x = 0;
|
||||||
|
if (isBidirectional || isReverseArrowType) {
|
||||||
|
const SEQUENCE_NUMBER_RADIUS = 6;
|
||||||
|
|
||||||
|
if (startx < stopx) {
|
||||||
|
line.attr('x1', startx + 2 * SEQUENCE_NUMBER_RADIUS);
|
||||||
|
} else {
|
||||||
|
line.attr('x1', startx + SEQUENCE_NUMBER_RADIUS);
|
||||||
|
}
|
||||||
|
x = 3.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
diagram
|
||||||
|
.append('line')
|
||||||
|
.attr('x1', startx)
|
||||||
|
.attr('y1', lineStartY)
|
||||||
|
.attr('x2', startx)
|
||||||
|
.attr('y2', lineStartY)
|
||||||
|
.attr('stroke-width', 0)
|
||||||
|
.attr('marker-start', 'url(' + url + '#sequencenumber)')
|
||||||
|
.attr('transform', `translate(-${x}, 0)`);
|
||||||
|
|
||||||
diagram
|
diagram
|
||||||
.append('text')
|
.append('text')
|
||||||
.attr('x', startx)
|
.attr('x', startx)
|
||||||
@@ -485,7 +614,8 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
|
|||||||
.attr('font-size', '12px')
|
.attr('font-size', '12px')
|
||||||
.attr('text-anchor', 'middle')
|
.attr('text-anchor', 'middle')
|
||||||
.attr('class', 'sequenceNumber')
|
.attr('class', 'sequenceNumber')
|
||||||
.text(sequenceIndex);
|
.text(sequenceIndex)
|
||||||
|
.attr('transform', `translate(-${x}, 0)`);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -824,6 +954,10 @@ export const draw = async function (_text: string, id: string, _version: string,
|
|||||||
svgDraw.insertArrowCrossHead(diagram);
|
svgDraw.insertArrowCrossHead(diagram);
|
||||||
svgDraw.insertArrowFilledHead(diagram);
|
svgDraw.insertArrowFilledHead(diagram);
|
||||||
svgDraw.insertSequenceNumber(diagram);
|
svgDraw.insertSequenceNumber(diagram);
|
||||||
|
svgDraw.insertSolidTopArrowHead(diagram);
|
||||||
|
svgDraw.insertSolidBottomArrowHead(diagram);
|
||||||
|
svgDraw.insertStickTopArrowHead(diagram);
|
||||||
|
svgDraw.insertStickBottomArrowHead(diagram);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param msg - The message to draw.
|
* @param msg - The message to draw.
|
||||||
@@ -864,6 +998,12 @@ export const draw = async function (_text: string, id: string, _version: string,
|
|||||||
case diagObj.db.LINETYPE.ACTIVE_START:
|
case diagObj.db.LINETYPE.ACTIVE_START:
|
||||||
bounds.newActivation(msg, diagram, actors);
|
bounds.newActivation(msg, diagram, actors);
|
||||||
break;
|
break;
|
||||||
|
case diagObj.db.LINETYPE.CENTRAL_CONNECTION:
|
||||||
|
bounds.newActivation(msg, diagram, actors);
|
||||||
|
break;
|
||||||
|
case diagObj.db.LINETYPE.CENTRAL_CONNECTION_REVERSE:
|
||||||
|
bounds.newActivation(msg, diagram, actors);
|
||||||
|
break;
|
||||||
case diagObj.db.LINETYPE.ACTIVE_END:
|
case diagObj.db.LINETYPE.ACTIVE_END:
|
||||||
activeEnd(msg, bounds.getVerticalPos());
|
activeEnd(msg, bounds.getVerticalPos());
|
||||||
break;
|
break;
|
||||||
@@ -1022,7 +1162,7 @@ export const draw = async function (_text: string, id: string, _version: string,
|
|||||||
createdActors,
|
createdActors,
|
||||||
destroyedActors
|
destroyedActors
|
||||||
);
|
);
|
||||||
messagesToDraw.push({ messageModel: msgModel, lineStartY: lineStartY });
|
messagesToDraw.push({ messageModel: msgModel, lineStartY: lineStartY, msg });
|
||||||
bounds.models.addMessage(msgModel);
|
bounds.models.addMessage(msgModel);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
log.error('error while drawing message', e);
|
log.error('error while drawing message', e);
|
||||||
@@ -1035,6 +1175,27 @@ export const draw = async function (_text: string, id: string, _version: string,
|
|||||||
diagObj.db.LINETYPE.SOLID_OPEN,
|
diagObj.db.LINETYPE.SOLID_OPEN,
|
||||||
diagObj.db.LINETYPE.DOTTED_OPEN,
|
diagObj.db.LINETYPE.DOTTED_OPEN,
|
||||||
diagObj.db.LINETYPE.SOLID,
|
diagObj.db.LINETYPE.SOLID,
|
||||||
|
|
||||||
|
diagObj.db.LINETYPE.SOLID_TOP,
|
||||||
|
diagObj.db.LINETYPE.SOLID_BOTTOM,
|
||||||
|
diagObj.db.LINETYPE.STICK_TOP,
|
||||||
|
diagObj.db.LINETYPE.STICK_BOTTOM,
|
||||||
|
|
||||||
|
diagObj.db.LINETYPE.SOLID_TOP_DOTTED,
|
||||||
|
diagObj.db.LINETYPE.SOLID_BOTTOM_DOTTED,
|
||||||
|
diagObj.db.LINETYPE.STICK_TOP_DOTTED,
|
||||||
|
diagObj.db.LINETYPE.STICK_BOTTOM_DOTTED,
|
||||||
|
|
||||||
|
diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE,
|
||||||
|
diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE,
|
||||||
|
diagObj.db.LINETYPE.STICK_ARROW_TOP_REVERSE,
|
||||||
|
diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE,
|
||||||
|
|
||||||
|
diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE_DOTTED,
|
||||||
|
diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE_DOTTED,
|
||||||
|
diagObj.db.LINETYPE.STICK_ARROW_TOP_REVERSE_DOTTED,
|
||||||
|
diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE_DOTTED,
|
||||||
|
|
||||||
diagObj.db.LINETYPE.DOTTED,
|
diagObj.db.LINETYPE.DOTTED,
|
||||||
diagObj.db.LINETYPE.SOLID_CROSS,
|
diagObj.db.LINETYPE.SOLID_CROSS,
|
||||||
diagObj.db.LINETYPE.DOTTED_CROSS,
|
diagObj.db.LINETYPE.DOTTED_CROSS,
|
||||||
@@ -1054,7 +1215,7 @@ export const draw = async function (_text: string, id: string, _version: string,
|
|||||||
await drawActors(diagram, actors, actorKeys, false);
|
await drawActors(diagram, actors, actorKeys, false);
|
||||||
|
|
||||||
for (const e of messagesToDraw) {
|
for (const e of messagesToDraw) {
|
||||||
await drawMessage(diagram, e.messageModel, e.lineStartY, diagObj);
|
await drawMessage(diagram, e.messageModel, e.lineStartY, diagObj, e.msg);
|
||||||
}
|
}
|
||||||
if (conf.mirrorActors) {
|
if (conf.mirrorActors) {
|
||||||
await drawActors(diagram, actors, actorKeys, true);
|
await drawActors(diagram, actors, actorKeys, true);
|
||||||
@@ -1430,6 +1591,27 @@ const buildMessageModel = function (msg, actors, diagObj) {
|
|||||||
diagObj.db.LINETYPE.SOLID_OPEN,
|
diagObj.db.LINETYPE.SOLID_OPEN,
|
||||||
diagObj.db.LINETYPE.DOTTED_OPEN,
|
diagObj.db.LINETYPE.DOTTED_OPEN,
|
||||||
diagObj.db.LINETYPE.SOLID,
|
diagObj.db.LINETYPE.SOLID,
|
||||||
|
|
||||||
|
diagObj.db.LINETYPE.SOLID_TOP,
|
||||||
|
diagObj.db.LINETYPE.SOLID_BOTTOM,
|
||||||
|
diagObj.db.LINETYPE.STICK_TOP,
|
||||||
|
diagObj.db.LINETYPE.STICK_BOTTOM,
|
||||||
|
|
||||||
|
diagObj.db.LINETYPE.SOLID_TOP_DOTTED,
|
||||||
|
diagObj.db.LINETYPE.SOLID_BOTTOM_DOTTED,
|
||||||
|
diagObj.db.LINETYPE.STICK_TOP_DOTTED,
|
||||||
|
diagObj.db.LINETYPE.STICK_BOTTOM_DOTTED,
|
||||||
|
|
||||||
|
diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE,
|
||||||
|
diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE,
|
||||||
|
diagObj.db.LINETYPE.STICK_ARROW_TOP_REVERSE,
|
||||||
|
diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE,
|
||||||
|
|
||||||
|
diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE_DOTTED,
|
||||||
|
diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE_DOTTED,
|
||||||
|
diagObj.db.LINETYPE.STICK_ARROW_TOP_REVERSE_DOTTED,
|
||||||
|
diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE_DOTTED,
|
||||||
|
|
||||||
diagObj.db.LINETYPE.DOTTED,
|
diagObj.db.LINETYPE.DOTTED,
|
||||||
diagObj.db.LINETYPE.SOLID_CROSS,
|
diagObj.db.LINETYPE.SOLID_CROSS,
|
||||||
diagObj.db.LINETYPE.DOTTED_CROSS,
|
diagObj.db.LINETYPE.DOTTED_CROSS,
|
||||||
@@ -1447,6 +1629,12 @@ const buildMessageModel = function (msg, actors, diagObj) {
|
|||||||
let startx = isArrowToRight ? fromRight : fromLeft;
|
let startx = isArrowToRight ? fromRight : fromLeft;
|
||||||
let stopx = isArrowToRight ? toLeft : toRight;
|
let stopx = isArrowToRight ? toLeft : toRight;
|
||||||
|
|
||||||
|
if (
|
||||||
|
msg.centralConnection === diagObj.db.LINETYPE.CENTRAL_CONNECTION_REVERSE ||
|
||||||
|
msg.centralConnection === diagObj.db.LINETYPE.CENTRAL_CONNECTION_DUAL
|
||||||
|
) {
|
||||||
|
startx += 4;
|
||||||
|
}
|
||||||
// As the line width is considered, the left and right values will be off by 2.
|
// As the line width is considered, the left and right values will be off by 2.
|
||||||
const isArrowToActivation = Math.abs(toLeft - toRight) > 2;
|
const isArrowToActivation = Math.abs(toLeft - toRight) > 2;
|
||||||
|
|
||||||
@@ -1480,7 +1668,30 @@ const buildMessageModel = function (msg, actors, diagObj) {
|
|||||||
* Shorten the length of arrow at the end and move the marker forward (using refX) to have a clean arrowhead
|
* Shorten the length of arrow at the end and move the marker forward (using refX) to have a clean arrowhead
|
||||||
* This is not required for open arrows that don't have arrowheads
|
* This is not required for open arrows that don't have arrowheads
|
||||||
*/
|
*/
|
||||||
if (![diagObj.db.LINETYPE.SOLID_OPEN, diagObj.db.LINETYPE.DOTTED_OPEN].includes(msg.type)) {
|
if (
|
||||||
|
![
|
||||||
|
diagObj.db.LINETYPE.SOLID_OPEN,
|
||||||
|
diagObj.db.LINETYPE.DOTTED_OPEN,
|
||||||
|
|
||||||
|
diagObj.db.LINETYPE.STICK_TOP,
|
||||||
|
diagObj.db.LINETYPE.STICK_BOTTOM,
|
||||||
|
|
||||||
|
diagObj.db.LINETYPE.STICK_TOP_DOTTED,
|
||||||
|
diagObj.db.LINETYPE.STICK_BOTTOM_DOTTED,
|
||||||
|
|
||||||
|
diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE_DOTTED,
|
||||||
|
diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE_DOTTED,
|
||||||
|
|
||||||
|
diagObj.db.LINETYPE.STICK_ARROW_TOP_REVERSE,
|
||||||
|
diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE,
|
||||||
|
|
||||||
|
diagObj.db.LINETYPE.STICK_ARROW_TOP_REVERSE_DOTTED,
|
||||||
|
diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE_DOTTED,
|
||||||
|
|
||||||
|
diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE,
|
||||||
|
diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE,
|
||||||
|
].includes(msg.type)
|
||||||
|
) {
|
||||||
stopx += adjustValue(3);
|
stopx += adjustValue(3);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1488,9 +1699,14 @@ const buildMessageModel = function (msg, actors, diagObj) {
|
|||||||
* Shorten start position of bidirectional arrow to accommodate for second arrowhead
|
* Shorten start position of bidirectional arrow to accommodate for second arrowhead
|
||||||
*/
|
*/
|
||||||
if (
|
if (
|
||||||
[diagObj.db.LINETYPE.BIDIRECTIONAL_SOLID, diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED].includes(
|
[
|
||||||
msg.type
|
diagObj.db.LINETYPE.BIDIRECTIONAL_SOLID,
|
||||||
)
|
diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED,
|
||||||
|
diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE_DOTTED,
|
||||||
|
diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE_DOTTED,
|
||||||
|
diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE,
|
||||||
|
diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE,
|
||||||
|
].includes(msg.type)
|
||||||
) {
|
) {
|
||||||
startx -= adjustValue(3);
|
startx -= adjustValue(3);
|
||||||
}
|
}
|
||||||
|
@@ -1103,6 +1103,77 @@ const _drawMenuItemTextCandidateFunc = (function () {
|
|||||||
};
|
};
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Setup arrow head and define the marker. The result is appended to the svg.
|
||||||
|
*
|
||||||
|
* @param elem
|
||||||
|
*/
|
||||||
|
export const insertSolidTopArrowHead = function (elem) {
|
||||||
|
elem
|
||||||
|
.append('defs')
|
||||||
|
.append('marker')
|
||||||
|
.attr('id', 'solidTopArrowHead')
|
||||||
|
.attr('refX', 7.9)
|
||||||
|
.attr('refY', 7.25)
|
||||||
|
.attr('markerUnits', 'userSpaceOnUse')
|
||||||
|
.attr('markerWidth', 12)
|
||||||
|
.attr('markerHeight', 12)
|
||||||
|
.attr('orient', 'auto-start-reverse')
|
||||||
|
.append('path')
|
||||||
|
.attr('d', 'M 0 0 L 10 8 L 0 8 z'); // this is actual shape for arrowhead
|
||||||
|
};
|
||||||
|
|
||||||
|
export const insertSolidBottomArrowHead = function (elem) {
|
||||||
|
elem
|
||||||
|
.append('defs')
|
||||||
|
.append('marker')
|
||||||
|
.attr('id', 'solidBottomArrowHead')
|
||||||
|
.attr('refX', 7.9)
|
||||||
|
.attr('refY', 0.75)
|
||||||
|
.attr('markerUnits', 'userSpaceOnUse')
|
||||||
|
.attr('markerWidth', 12)
|
||||||
|
.attr('markerHeight', 12)
|
||||||
|
.attr('orient', 'auto-start-reverse')
|
||||||
|
.append('path')
|
||||||
|
.attr('d', 'M 0 0 L 10 0 L 0 8 z');
|
||||||
|
};
|
||||||
|
|
||||||
|
export const insertStickTopArrowHead = function (elem) {
|
||||||
|
elem
|
||||||
|
.append('defs')
|
||||||
|
.append('marker')
|
||||||
|
.attr('id', 'stickTopArrowHead')
|
||||||
|
.attr('refX', 7.5)
|
||||||
|
.attr('refY', 7)
|
||||||
|
.attr('markerUnits', 'userSpaceOnUse')
|
||||||
|
.attr('markerWidth', 12)
|
||||||
|
.attr('markerHeight', 12)
|
||||||
|
.attr('orient', 'auto-start-reverse')
|
||||||
|
.append('path')
|
||||||
|
.attr('d', 'M 0 0 L 7 7')
|
||||||
|
.attr('stroke', 'black')
|
||||||
|
.attr('stroke-width', 1.5)
|
||||||
|
.attr('fill', 'none');
|
||||||
|
};
|
||||||
|
|
||||||
|
export const insertStickBottomArrowHead = function (elem) {
|
||||||
|
elem
|
||||||
|
.append('defs')
|
||||||
|
.append('marker')
|
||||||
|
.attr('id', 'stickBottomArrowHead')
|
||||||
|
.attr('refX', 7.5)
|
||||||
|
.attr('refY', 0)
|
||||||
|
.attr('markerUnits', 'userSpaceOnUse')
|
||||||
|
.attr('markerWidth', 12)
|
||||||
|
.attr('markerHeight', 12)
|
||||||
|
.attr('orient', 'auto-start-reverse')
|
||||||
|
.append('path')
|
||||||
|
.attr('d', 'M 0 7 L 7 0')
|
||||||
|
.attr('stroke', 'black')
|
||||||
|
.attr('stroke-width', 1.5)
|
||||||
|
.attr('fill', 'none');
|
||||||
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
drawRect,
|
drawRect,
|
||||||
drawText,
|
drawText,
|
||||||
@@ -1125,4 +1196,8 @@ export default {
|
|||||||
getNoteRect,
|
getNoteRect,
|
||||||
fixLifeLineHeights,
|
fixLifeLineHeights,
|
||||||
sanitizeUrl,
|
sanitizeUrl,
|
||||||
|
insertSolidTopArrowHead,
|
||||||
|
insertSolidBottomArrowHead,
|
||||||
|
insertStickTopArrowHead,
|
||||||
|
insertStickBottomArrowHead,
|
||||||
};
|
};
|
||||||
|
@@ -35,6 +35,7 @@ export interface Message {
|
|||||||
type?: number;
|
type?: number;
|
||||||
activate?: boolean;
|
activate?: boolean;
|
||||||
placement?: string;
|
placement?: string;
|
||||||
|
centralConnection?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface AddMessageParams {
|
export interface AddMessageParams {
|
||||||
@@ -50,6 +51,8 @@ export interface AddMessageParams {
|
|||||||
| 'destroyParticipant'
|
| 'destroyParticipant'
|
||||||
| 'activeStart'
|
| 'activeStart'
|
||||||
| 'activeEnd'
|
| 'activeEnd'
|
||||||
|
| 'centralConnection'
|
||||||
|
| 'centralConnectionReverse'
|
||||||
| 'addNote'
|
| 'addNote'
|
||||||
| 'addLinks'
|
| 'addLinks'
|
||||||
| 'addALink'
|
| 'addALink'
|
||||||
|
@@ -144,7 +144,11 @@ Messages can be of two displayed either solid or with a dotted line.
|
|||||||
[Actor][Arrow][Actor]:Message text
|
[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 |
|
| Type | Description |
|
||||||
| -------- | ---------------------------------------------------- |
|
| -------- | ---------------------------------------------------- |
|
||||||
@@ -159,6 +163,49 @@ There are ten types of arrows currently supported:
|
|||||||
| `-)` | Solid line with an open arrow at the end (async) |
|
| `-)` | Solid line with an open arrow at the end (async) |
|
||||||
| `--)` | Dotted line with a open arrow at the end (async) |
|
| `--)` | Dotted line with a open arrow at the end (async) |
|
||||||
|
|
||||||
|
**Half-Arrows**
|
||||||
|
|
||||||
|
The following half-arrow types are now 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
|
||||||
|
|
||||||
|
Mermaid sequence diagrams now 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!
|
||||||
|
```
|
||||||
|
|
||||||
## Activations
|
## Activations
|
||||||
|
|
||||||
It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:
|
It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:
|
||||||
|
@@ -207,7 +207,7 @@ describe('when using mermaid and ', () => {
|
|||||||
[Error: Parse error on line 2:
|
[Error: Parse error on line 2:
|
||||||
...equenceDiagramAlice:->Bob: Hello Bob, h...
|
...equenceDiagramAlice:->Bob: Hello Bob, h...
|
||||||
----------------------^
|
----------------------^
|
||||||
Expecting 'SOLID_OPEN_ARROW', 'DOTTED_OPEN_ARROW', 'SOLID_ARROW', 'BIDIRECTIONAL_SOLID_ARROW', 'DOTTED_ARROW', 'BIDIRECTIONAL_DOTTED_ARROW', 'SOLID_CROSS', 'DOTTED_CROSS', 'SOLID_POINT', 'DOTTED_POINT', got 'TXT']
|
Expecting '()', 'SOLID_OPEN_ARROW', 'DOTTED_OPEN_ARROW', 'SOLID_ARROW', 'SOLID_ARROW_TOP', 'SOLID_ARROW_BOTTOM', 'STICK_ARROW_TOP', 'STICK_ARROW_BOTTOM', 'SOLID_ARROW_TOP_DOTTED', 'SOLID_ARROW_BOTTOM_DOTTED', 'STICK_ARROW_TOP_DOTTED', 'STICK_ARROW_BOTTOM_DOTTED', 'SOLID_ARROW_TOP_REVERSE', 'SOLID_ARROW_BOTTOM_REVERSE', 'STICK_ARROW_TOP_REVERSE', 'STICK_ARROW_BOTTOM_REVERSE', 'SOLID_ARROW_TOP_REVERSE_DOTTED', 'SOLID_ARROW_BOTTOM_REVERSE_DOTTED', 'STICK_ARROW_TOP_REVERSE_DOTTED', 'STICK_ARROW_BOTTOM_REVERSE_DOTTED', 'BIDIRECTIONAL_SOLID_ARROW', 'DOTTED_ARROW', 'BIDIRECTIONAL_DOTTED_ARROW', 'SOLID_CROSS', 'DOTTED_CROSS', 'SOLID_POINT', 'DOTTED_POINT', got 'TXT']
|
||||||
`);
|
`);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user