mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-10-13 11:09:39 +02:00
Compare commits
70 Commits
architectu
...
fix-markdo
Author | SHA1 | Date | |
---|---|---|---|
![]() |
1f8ba5591d | ||
![]() |
cd6f7a3019 | ||
![]() |
1f0cb96d16 | ||
![]() |
db4a837e9b | ||
![]() |
047b7fccc7 | ||
![]() |
a53c0d4305 | ||
![]() |
13f2040b37 | ||
![]() |
e351a7a488 | ||
![]() |
fe8597d0c8 | ||
![]() |
178ea182c3 | ||
![]() |
c728d864c8 | ||
![]() |
99f17bea3a | ||
![]() |
c1c14e401a | ||
![]() |
8b3057f27c | ||
![]() |
717d3b3bb2 | ||
![]() |
2f8d9ba958 | ||
![]() |
ace0367afd | ||
![]() |
b983626587 | ||
![]() |
09b74f1c29 | ||
![]() |
880da21908 | ||
![]() |
38191243be | ||
![]() |
b75dcb8a82 | ||
![]() |
4c1e170f4a | ||
![]() |
bd25b88a01 | ||
![]() |
d3de3ecbbb | ||
![]() |
3964ce0a0f | ||
![]() |
4dbabba8e8 | ||
![]() |
e3ef5e4208 | ||
![]() |
daeb85bac2 | ||
![]() |
2cdaf03ada | ||
![]() |
f6fa0260e7 | ||
![]() |
29aad6d23c | ||
![]() |
82ef7b5fdb | ||
![]() |
11cd3f1262 | ||
![]() |
ac4aa94e78 | ||
![]() |
c40faac80d | ||
![]() |
c530baed3f | ||
![]() |
045699de10 | ||
![]() |
1988d24227 | ||
![]() |
39f90debe7 | ||
![]() |
73e9849f99 | ||
![]() |
5a05540a5f | ||
![]() |
2b58df9665 | ||
![]() |
3a23372af4 | ||
![]() |
cd6f7192bf | ||
![]() |
ebb77578e8 | ||
![]() |
4d76af679b | ||
![]() |
b7b05f4a55 | ||
![]() |
44a6434e59 | ||
![]() |
37269b47b5 | ||
![]() |
560abf4218 | ||
![]() |
0943edc114 | ||
![]() |
40402a2bd9 | ||
![]() |
dc51c027d6 | ||
![]() |
0b42bdba07 | ||
![]() |
74c96db3e2 | ||
![]() |
bd47c57eaf | ||
![]() |
3e5d2db514 | ||
![]() |
40990bb096 | ||
![]() |
7ca0665764 | ||
![]() |
81a6a361ab | ||
![]() |
62faacdeeb | ||
![]() |
0e40d8e8a8 | ||
![]() |
e8d6daf4f6 | ||
![]() |
cb4ed605b2 | ||
![]() |
ba9db26bfa | ||
![]() |
252b1837f7 | ||
![]() |
6b9c15d7f0 | ||
![]() |
fda640c90c | ||
![]() |
584a789183 |
5
.changeset/gold-ducks-sort.md
Normal file
5
.changeset/gold-ducks-sort.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'mermaid': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: Proper separation between strings and markdown strings
|
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
|
5
.changeset/slow-lemons-know.md
Normal file
5
.changeset/slow-lemons-know.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'@mermaid': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: Mindmap breaking in ELK layout
|
5
.changeset/sweet-games-build.md
Normal file
5
.changeset/sweet-games-build.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'mermaid': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix(er-diagram): prevent syntax error when using 'u', numbers, and decimals in node names
|
@@ -369,4 +369,92 @@ ORDER ||--|{ LINE-ITEM : contains
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('Special characters and numbers syntax', () => {
|
||||||
|
it('should render ER diagram with numeric entity names', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
erDiagram
|
||||||
|
1 ||--|| ORDER : places
|
||||||
|
ORDER ||--|{ 2 : contains
|
||||||
|
2 ||--o{ 3.5 : references
|
||||||
|
`,
|
||||||
|
{ logLevel: 1 }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render ER diagram with "u" character in entity names and cardinality', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
erDiagram
|
||||||
|
CUSTOMER ||--|| u : has
|
||||||
|
u ||--|| ORDER : places
|
||||||
|
PROJECT u--o{ TEAM_MEMBER : "parent"
|
||||||
|
`,
|
||||||
|
{ logLevel: 1 }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render ER diagram with decimal numbers in relationships', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
erDiagram
|
||||||
|
2.5 ||--|| 1.5 : has
|
||||||
|
CUSTOMER ||--o{ 3.14 : references
|
||||||
|
1.0 ||--|{ ORDER : contains
|
||||||
|
`,
|
||||||
|
{ logLevel: 1 }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render ER diagram with numeric entity names and attributes', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
erDiagram
|
||||||
|
1 {
|
||||||
|
string name
|
||||||
|
int value
|
||||||
|
}
|
||||||
|
1 ||--|| ORDER : places
|
||||||
|
ORDER {
|
||||||
|
float price
|
||||||
|
string description
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
{ logLevel: 1 }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render complex ER diagram with mixed special entity names', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
erDiagram
|
||||||
|
CUSTOMER ||--o{ 1 : places
|
||||||
|
1 ||--|{ u : contains
|
||||||
|
1.5
|
||||||
|
u ||--|| 2.5 : processes
|
||||||
|
2.5 {
|
||||||
|
string id
|
||||||
|
float value
|
||||||
|
}
|
||||||
|
u {
|
||||||
|
varchar(50) name
|
||||||
|
int count
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
{ logLevel: 1 }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('should render ER diagram with numeric entity names and attributes', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`erDiagram
|
||||||
|
PRODUCT ||--o{ ORDER-ITEM : has
|
||||||
|
1.5
|
||||||
|
u
|
||||||
|
1
|
||||||
|
`,
|
||||||
|
{ logLevel: 1 }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
@@ -1174,8 +1174,8 @@ end
|
|||||||
end
|
end
|
||||||
githost["Github, Gitlab, BitBucket, etc."]
|
githost["Github, Gitlab, BitBucket, etc."]
|
||||||
githost2["\`Github, Gitlab, BitBucket, etc.\`"]
|
githost2["\`Github, Gitlab, BitBucket, etc.\`"]
|
||||||
a["1."]
|
a["\`1.\`"]
|
||||||
b["- x"]
|
b["\`- x\`"]
|
||||||
`;
|
`;
|
||||||
|
|
||||||
it('should render raw strings', () => {
|
it('should render raw strings', () => {
|
||||||
|
@@ -973,4 +973,49 @@ graph TD
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
it('#5824: should be able to render string and markdown labels', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
flowchart TB
|
||||||
|
mermaid{"What is\nyourmermaid version?"} --> v10["<11"] --"\`<**1**1\`"--> fine["No bug"]
|
||||||
|
mermaid --> v11[">= v11"] -- ">= v11" --> broken["Affected by https://github.com/mermaid-js/mermaid/issues/5824"]
|
||||||
|
subgraph subgraph1["\`How to fix **fix**\`"]
|
||||||
|
broken --> B["B"]
|
||||||
|
end
|
||||||
|
githost["Github, Gitlab, BitBucket, etc."]
|
||||||
|
githost2["\`Github, Gitlab, BitBucket, etc.\`"]
|
||||||
|
a["1."]
|
||||||
|
b["- x"]
|
||||||
|
`,
|
||||||
|
{
|
||||||
|
flowchart: { htmlLabels: true },
|
||||||
|
securityLevel: 'loose',
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('69: should render subgraphs with adhoc list headings', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
graph TB
|
||||||
|
subgraph "1. first"
|
||||||
|
a1-->a2
|
||||||
|
end
|
||||||
|
subgraph 2. second
|
||||||
|
b1-->b2
|
||||||
|
end
|
||||||
|
`,
|
||||||
|
{ fontFamily: 'courier' }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
it('70: should render subgraphs with markdown headings', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
graph TB
|
||||||
|
subgraph "\`**strong**\`"
|
||||||
|
a1-->a2
|
||||||
|
end
|
||||||
|
`,
|
||||||
|
{ fontFamily: 'courier' }
|
||||||
|
);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
@@ -655,5 +655,126 @@ describe('Sequence Diagram Special Cases', () => {
|
|||||||
expect(svg).to.not.have.attr('style');
|
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 } }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@@ -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`
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
@@ -110,6 +110,48 @@
|
|||||||
config:
|
config:
|
||||||
layout: elk
|
layout: elk
|
||||||
---
|
---
|
||||||
|
mindmap
|
||||||
|
root((mindmap))
|
||||||
|
Origins
|
||||||
|
Long history
|
||||||
|
::icon(fa fa-book)
|
||||||
|
Popularisation
|
||||||
|
British popular psychology author Tony Buzan
|
||||||
|
Research
|
||||||
|
On effectiveness<br/>and features
|
||||||
|
On Automatic creation
|
||||||
|
Uses
|
||||||
|
Creative techniques
|
||||||
|
Strategic planning
|
||||||
|
Argument mapping
|
||||||
|
Tools
|
||||||
|
id)I am a cloud(
|
||||||
|
id))I am a bang((
|
||||||
|
Tools
|
||||||
|
</pre>
|
||||||
|
<pre id="diagram4" class="mermaid">
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
layout: elk
|
||||||
|
---
|
||||||
|
flowchart
|
||||||
|
aid0
|
||||||
|
</pre
|
||||||
|
>
|
||||||
|
<pre id="diagram4" class="mermaid">
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
layout: elk
|
||||||
|
---
|
||||||
|
mindmap
|
||||||
|
aid0
|
||||||
|
|
||||||
|
</pre>
|
||||||
|
<pre id="diagram4" class="mermaid">
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
layout: ogdc
|
||||||
|
---
|
||||||
flowchart-elk TB
|
flowchart-elk TB
|
||||||
c1-->a2
|
c1-->a2
|
||||||
subgraph one
|
subgraph one
|
||||||
|
@@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
# Interface: ParseOptions
|
# Interface: ParseOptions
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L88)
|
Defined in: [packages/mermaid/src/types.ts:89](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L89)
|
||||||
|
|
||||||
## Properties
|
## Properties
|
||||||
|
|
||||||
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mer
|
|||||||
|
|
||||||
> `optional` **suppressErrors**: `boolean`
|
> `optional` **suppressErrors**: `boolean`
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/types.ts:93](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L93)
|
Defined in: [packages/mermaid/src/types.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L94)
|
||||||
|
|
||||||
If `true`, parse will return `false` instead of throwing error when the diagram is invalid.
|
If `true`, parse will return `false` instead of throwing error when the diagram is invalid.
|
||||||
The `parseError` function will not be called.
|
The `parseError` function will not be called.
|
||||||
|
@@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
# Interface: ParseResult
|
# Interface: ParseResult
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L96)
|
Defined in: [packages/mermaid/src/types.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L97)
|
||||||
|
|
||||||
## Properties
|
## Properties
|
||||||
|
|
||||||
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:96](https://github.com/mermaid-js/mer
|
|||||||
|
|
||||||
> **config**: [`MermaidConfig`](MermaidConfig.md)
|
> **config**: [`MermaidConfig`](MermaidConfig.md)
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/types.ts:104](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L104)
|
Defined in: [packages/mermaid/src/types.ts:105](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L105)
|
||||||
|
|
||||||
The config passed as YAML frontmatter or directives
|
The config passed as YAML frontmatter or directives
|
||||||
|
|
||||||
@@ -28,6 +28,6 @@ The config passed as YAML frontmatter or directives
|
|||||||
|
|
||||||
> **diagramType**: `string`
|
> **diagramType**: `string`
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/types.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L100)
|
Defined in: [packages/mermaid/src/types.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L101)
|
||||||
|
|
||||||
The diagram type, e.g. 'flowchart', 'sequence', etc.
|
The diagram type, e.g. 'flowchart', 'sequence', etc.
|
||||||
|
@@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
# Interface: RenderResult
|
# Interface: RenderResult
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/types.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L114)
|
Defined in: [packages/mermaid/src/types.ts:115](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L115)
|
||||||
|
|
||||||
## Properties
|
## Properties
|
||||||
|
|
||||||
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:114](https://github.com/mermaid-js/me
|
|||||||
|
|
||||||
> `optional` **bindFunctions**: (`element`) => `void`
|
> `optional` **bindFunctions**: (`element`) => `void`
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/types.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L132)
|
Defined in: [packages/mermaid/src/types.ts:133](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L133)
|
||||||
|
|
||||||
Bind function to be called after the svg has been inserted into the DOM.
|
Bind function to be called after the svg has been inserted into the DOM.
|
||||||
This is necessary for adding event listeners to the elements in the svg.
|
This is necessary for adding event listeners to the elements in the svg.
|
||||||
@@ -45,7 +45,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
|
|||||||
|
|
||||||
> **diagramType**: `string`
|
> **diagramType**: `string`
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/types.ts:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L122)
|
Defined in: [packages/mermaid/src/types.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L123)
|
||||||
|
|
||||||
The diagram type, e.g. 'flowchart', 'sequence', etc.
|
The diagram type, e.g. 'flowchart', 'sequence', etc.
|
||||||
|
|
||||||
@@ -55,6 +55,6 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
|
|||||||
|
|
||||||
> **svg**: `string`
|
> **svg**: `string`
|
||||||
|
|
||||||
Defined in: [packages/mermaid/src/types.ts:118](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L118)
|
Defined in: [packages/mermaid/src/types.ts:119](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L119)
|
||||||
|
|
||||||
The svg code for the rendered graph.
|
The svg code for the rendered graph.
|
||||||
|
@@ -329,7 +329,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 |
|
||||||
| -------- | ---------------------------------------------------- |
|
| -------- | ---------------------------------------------------- |
|
||||||
@@ -344,6 +348,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 (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
|
## 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:
|
||||||
|
@@ -64,7 +64,7 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@applitools/eyes-cypress": "^3.55.2",
|
"@applitools/eyes-cypress": "^3.55.2",
|
||||||
"@argos-ci/cypress": "^6.1.1",
|
"@argos-ci/cypress": "^6.1.3",
|
||||||
"@changesets/changelog-github": "^0.5.1",
|
"@changesets/changelog-github": "^0.5.1",
|
||||||
"@changesets/cli": "^2.29.7",
|
"@changesets/cli": "^2.29.7",
|
||||||
"@cspell/eslint-plugin": "^8.19.4",
|
"@cspell/eslint-plugin": "^8.19.4",
|
||||||
|
@@ -67,7 +67,22 @@ export const render = async (
|
|||||||
|
|
||||||
// Add the element to the DOM
|
// Add the element to the DOM
|
||||||
if (!node.isGroup) {
|
if (!node.isGroup) {
|
||||||
const child = node as NodeWithVertex;
|
// const child = node as NodeWithVertex;
|
||||||
|
const child: NodeWithVertex = {
|
||||||
|
id: node.id,
|
||||||
|
width: node.width,
|
||||||
|
height: node.height,
|
||||||
|
// Store the original node data for later use
|
||||||
|
label: node.label,
|
||||||
|
isGroup: node.isGroup,
|
||||||
|
shape: node.shape,
|
||||||
|
padding: node.padding,
|
||||||
|
cssClasses: node.cssClasses,
|
||||||
|
cssStyles: node.cssStyles,
|
||||||
|
look: node.look,
|
||||||
|
// Include parentId for subgraph processing
|
||||||
|
parentId: node.parentId,
|
||||||
|
};
|
||||||
graph.children.push(child);
|
graph.children.push(child);
|
||||||
nodeDb[node.id] = node;
|
nodeDb[node.id] = node;
|
||||||
|
|
||||||
@@ -150,7 +165,7 @@ export const render = async (
|
|||||||
domId: { node: () => any; attr: (arg0: string, arg1: string) => void };
|
domId: { node: () => any; attr: (arg0: string, arg1: string) => void };
|
||||||
}) {
|
}) {
|
||||||
if (node) {
|
if (node) {
|
||||||
nodeDb[node.id] = node;
|
nodeDb[node.id] ??= {};
|
||||||
nodeDb[node.id].offset = {
|
nodeDb[node.id].offset = {
|
||||||
posX: node.x + relX,
|
posX: node.x + relX,
|
||||||
posY: node.y + relY,
|
posY: node.y + relY,
|
||||||
@@ -860,11 +875,13 @@ export const render = async (
|
|||||||
log.info('APA01 layout result:', JSON.stringify(g, null, 2));
|
log.info('APA01 layout result:', JSON.stringify(g, null, 2));
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
log.error('APA01 ELK layout error:', error);
|
log.error('APA01 ELK layout error:', error);
|
||||||
|
log.error('APA01 elkGraph that caused error:', JSON.stringify(elkGraph, null, 2));
|
||||||
throw error;
|
throw error;
|
||||||
}
|
}
|
||||||
|
|
||||||
// debugger;
|
// debugger;
|
||||||
await drawNodes(0, 0, g.children, svg, subGraphsEl, 0);
|
await drawNodes(0, 0, g.children, svg, subGraphsEl, 0);
|
||||||
|
|
||||||
g.edges?.map(
|
g.edges?.map(
|
||||||
(edge: {
|
(edge: {
|
||||||
sources: (string | number)[];
|
sources: (string | number)[];
|
||||||
|
@@ -3,9 +3,7 @@ import type { ArchitectureDiagramConfig } from '../../config.type.js';
|
|||||||
import DEFAULT_CONFIG from '../../defaultConfig.js';
|
import DEFAULT_CONFIG from '../../defaultConfig.js';
|
||||||
import type { DiagramDB } from '../../diagram-api/types.js';
|
import type { DiagramDB } from '../../diagram-api/types.js';
|
||||||
import type { D3Element } from '../../types.js';
|
import type { D3Element } from '../../types.js';
|
||||||
import { cleanAndMerge, getEdgeId } from '../../utils.js';
|
import { cleanAndMerge } from '../../utils.js';
|
||||||
import type { LayoutData, Node, Edge } from '../../rendering-util/types.js';
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
clear as commonClear,
|
clear as commonClear,
|
||||||
getAccDescription,
|
getAccDescription,
|
||||||
@@ -353,147 +351,15 @@ export class ArchitectureDB implements DiagramDB {
|
|||||||
public getDiagramTitle = getDiagramTitle;
|
public getDiagramTitle = getDiagramTitle;
|
||||||
public getAccDescription = getAccDescription;
|
public getAccDescription = getAccDescription;
|
||||||
public setAccDescription = setAccDescription;
|
public setAccDescription = setAccDescription;
|
||||||
|
|
||||||
/**
|
|
||||||
* Converts architecture diagram data to LayoutData format for unified rendering
|
|
||||||
*/
|
|
||||||
public getData(): LayoutData {
|
|
||||||
const config = commonGetConfig();
|
|
||||||
const nodes: Node[] = [];
|
|
||||||
const edges: Edge[] = [];
|
|
||||||
|
|
||||||
const groups = this.getGroups();
|
|
||||||
for (const group of groups) {
|
|
||||||
const padding = this.getConfigField('padding');
|
|
||||||
const fontSize = this.getConfigField('fontSize');
|
|
||||||
|
|
||||||
const groupWidth = 200;
|
|
||||||
let groupHeight = 150;
|
|
||||||
|
|
||||||
if (group.title || group.icon) {
|
|
||||||
groupHeight += fontSize + padding;
|
|
||||||
}
|
|
||||||
|
|
||||||
nodes.push({
|
|
||||||
id: group.id,
|
|
||||||
label: group.title,
|
|
||||||
parentId: group.in,
|
|
||||||
isGroup: true,
|
|
||||||
shape: 'rect',
|
|
||||||
icon: group.icon,
|
|
||||||
width: groupWidth,
|
|
||||||
height: groupHeight,
|
|
||||||
padding: padding,
|
|
||||||
cssClasses: 'architecture-group',
|
|
||||||
cssCompiledStyles: [
|
|
||||||
'stroke: #cccccc',
|
|
||||||
'stroke-width: 2px',
|
|
||||||
'stroke-dasharray: 8,8',
|
|
||||||
'fill: transparent',
|
|
||||||
],
|
|
||||||
labelStyle: '',
|
|
||||||
look: config.look || 'classic',
|
|
||||||
rx: 5,
|
|
||||||
ry: 5,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const services = this.getServices();
|
|
||||||
for (const service of services) {
|
|
||||||
const iconSize = this.getConfigField('iconSize');
|
|
||||||
let nodeWidth = iconSize;
|
|
||||||
let nodeHeight = iconSize;
|
|
||||||
|
|
||||||
if (service.title) {
|
|
||||||
nodeHeight += iconSize * 0.3;
|
|
||||||
nodeWidth = Math.max(nodeWidth, iconSize * 1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
nodes.push({
|
|
||||||
id: service.id,
|
|
||||||
label: service.title,
|
|
||||||
parentId: service.in,
|
|
||||||
isGroup: false,
|
|
||||||
shape: service.icon || (service as any).iconText ? 'icon' : 'squareRect',
|
|
||||||
icon: service.icon ? `mermaid-architecture:${service.icon}` : 'mermaid-architecture:blank',
|
|
||||||
width: service.width || nodeWidth,
|
|
||||||
height: service.height || nodeHeight,
|
|
||||||
cssClasses: 'architecture-service',
|
|
||||||
look: config.look,
|
|
||||||
padding: this.getConfigField('padding') / 4,
|
|
||||||
description: (service as any).iconText ? [(service as any).iconText] : undefined,
|
|
||||||
assetWidth: iconSize,
|
|
||||||
assetHeight: iconSize,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const junctions = this.getJunctions();
|
|
||||||
for (const junction of junctions) {
|
|
||||||
nodes.push({
|
|
||||||
id: junction.id,
|
|
||||||
parentId: junction.in,
|
|
||||||
isGroup: false,
|
|
||||||
shape: 'squareRect',
|
|
||||||
width: 2,
|
|
||||||
height: 2,
|
|
||||||
cssClasses: 'architecture-junction',
|
|
||||||
look: config.look,
|
|
||||||
type: 'junction' as any,
|
|
||||||
padding: 0,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const architectureEdges = this.getEdges();
|
|
||||||
let edgeCounter = 0;
|
|
||||||
for (const edge of architectureEdges) {
|
|
||||||
const edgeData = {
|
|
||||||
id: getEdgeId(edge.lhsId, edge.rhsId, { counter: edgeCounter, prefix: 'L' }),
|
|
||||||
start: edge.lhsId,
|
|
||||||
end: edge.rhsId,
|
|
||||||
source: edge.lhsId,
|
|
||||||
target: edge.rhsId,
|
|
||||||
label: edge.title || '',
|
|
||||||
labelpos: 'c',
|
|
||||||
type: 'normal',
|
|
||||||
minlen: 2,
|
|
||||||
weight: 1,
|
|
||||||
classes: 'edge-thickness-normal edge-pattern-solid architecture-edge',
|
|
||||||
look: config.look || 'classic',
|
|
||||||
curve: 'linear',
|
|
||||||
arrowTypeStart: edge.lhsInto ? 'point' : 'none',
|
|
||||||
arrowTypeEnd: edge.rhsInto ? 'point' : 'none',
|
|
||||||
arrowheadStyle: 'fill: #333',
|
|
||||||
thickness: 'normal',
|
|
||||||
pattern: 'solid',
|
|
||||||
style: ['stroke: #333333', 'stroke-width: 3px', 'fill: none'],
|
|
||||||
cssCompiledStyles: [],
|
|
||||||
labelStyle: [],
|
|
||||||
lhsDir: edge.lhsDir,
|
|
||||||
rhsDir: edge.rhsDir,
|
|
||||||
lhsInto: edge.lhsInto,
|
|
||||||
rhsInto: edge.rhsInto,
|
|
||||||
lhsGroup: edge.lhsGroup,
|
|
||||||
rhsGroup: edge.rhsGroup,
|
|
||||||
} as Edge & {
|
|
||||||
lhsDir: any;
|
|
||||||
rhsDir: any;
|
|
||||||
lhsInto?: boolean;
|
|
||||||
rhsInto?: boolean;
|
|
||||||
lhsGroup?: boolean;
|
|
||||||
rhsGroup?: boolean;
|
|
||||||
};
|
|
||||||
|
|
||||||
edges.push(edgeData);
|
|
||||||
edgeCounter++;
|
|
||||||
}
|
|
||||||
|
|
||||||
const result = {
|
|
||||||
nodes,
|
|
||||||
edges,
|
|
||||||
config,
|
|
||||||
dataStructures: this.getDataStructures(),
|
|
||||||
};
|
|
||||||
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Typed wrapper for resolving an architecture diagram's config fields. Returns the default value if undefined
|
||||||
|
* @param field - the config field to access
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
// export function getConfigField<T extends keyof ArchitectureDiagramConfig>(
|
||||||
|
// field: T
|
||||||
|
// ): Required<ArchitectureDiagramConfig>[T] {
|
||||||
|
// return db.getConfig()[field];
|
||||||
|
// }
|
||||||
|
@@ -2,7 +2,7 @@ import type { DiagramDefinition } from '../../diagram-api/types.js';
|
|||||||
import { parser } from './architectureParser.js';
|
import { parser } from './architectureParser.js';
|
||||||
import { ArchitectureDB } from './architectureDb.js';
|
import { ArchitectureDB } from './architectureDb.js';
|
||||||
import styles from './architectureStyles.js';
|
import styles from './architectureStyles.js';
|
||||||
import { renderer } from './architectureRenderer-unified.js';
|
import { renderer } from './architectureRenderer.js';
|
||||||
|
|
||||||
export const diagram: DiagramDefinition = {
|
export const diagram: DiagramDefinition = {
|
||||||
parser,
|
parser,
|
||||||
|
@@ -1,50 +0,0 @@
|
|||||||
import { getConfig } from '../../diagram-api/diagramAPI.js';
|
|
||||||
import type { DiagramStyleClassDef } from '../../diagram-api/types.js';
|
|
||||||
import { log } from '../../logger.js';
|
|
||||||
import { getDiagramElement } from '../../rendering-util/insertElementsForSize.js';
|
|
||||||
import { getRegisteredLayoutAlgorithm, render } from '../../rendering-util/render.js';
|
|
||||||
import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
|
|
||||||
import type { LayoutData } from '../../rendering-util/types.js';
|
|
||||||
import utils from '../../utils.js';
|
|
||||||
|
|
||||||
import { registerIconPacks } from '../../rendering-util/icons.js';
|
|
||||||
import { architectureIcons } from './architectureIcons.js';
|
|
||||||
|
|
||||||
export const getClasses = function (
|
|
||||||
_text: string,
|
|
||||||
_diagramObj: any
|
|
||||||
): Map<string, DiagramStyleClassDef> {
|
|
||||||
return new Map();
|
|
||||||
};
|
|
||||||
|
|
||||||
export const draw = async function (_text: string, id: string, _version: string, diag: any) {
|
|
||||||
registerIconPacks([
|
|
||||||
{
|
|
||||||
name: architectureIcons.prefix,
|
|
||||||
icons: architectureIcons,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
const { securityLevel, architecture: conf, layout } = getConfig();
|
|
||||||
|
|
||||||
const data4Layout = diag.db.getData() as LayoutData;
|
|
||||||
|
|
||||||
const svg = getDiagramElement(id, securityLevel);
|
|
||||||
|
|
||||||
data4Layout.type = diag.type;
|
|
||||||
data4Layout.layoutAlgorithm = getRegisteredLayoutAlgorithm(layout, { fallback: 'dagre' });
|
|
||||||
|
|
||||||
data4Layout.nodeSpacing = 100;
|
|
||||||
data4Layout.rankSpacing = 100;
|
|
||||||
data4Layout.markers = ['point'];
|
|
||||||
data4Layout.diagramId = id;
|
|
||||||
|
|
||||||
log.debug('Architecture layout data:', data4Layout);
|
|
||||||
await render(data4Layout, svg);
|
|
||||||
|
|
||||||
const padding = conf?.padding ?? 8;
|
|
||||||
utils.insertTitle(svg, 'architectureTitleText', 0, diag.db.getDiagramTitle());
|
|
||||||
|
|
||||||
setupViewPortForSVG(svg, padding, 'architecture', conf?.useMaxWidth ?? true);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const renderer = { draw };
|
|
@@ -2,7 +2,6 @@ import type { DiagramDBBase } from '../../diagram-api/types.js';
|
|||||||
import type { ArchitectureDiagramConfig } from '../../config.type.js';
|
import type { ArchitectureDiagramConfig } from '../../config.type.js';
|
||||||
import type { D3Element } from '../../types.js';
|
import type { D3Element } from '../../types.js';
|
||||||
import type cytoscape from 'cytoscape';
|
import type cytoscape from 'cytoscape';
|
||||||
import type { LayoutData } from '../../rendering-util/types.js';
|
|
||||||
|
|
||||||
/*=======================================*\
|
/*=======================================*\
|
||||||
| Architecture Diagram Types |
|
| Architecture Diagram Types |
|
||||||
@@ -257,8 +256,7 @@ export interface ArchitectureDB extends DiagramDBBase<ArchitectureDiagramConfig>
|
|||||||
getEdges: () => ArchitectureEdge[];
|
getEdges: () => ArchitectureEdge[];
|
||||||
setElementForId: (id: string, element: D3Element) => void;
|
setElementForId: (id: string, element: D3Element) => void;
|
||||||
getElementById: (id: string) => D3Element;
|
getElementById: (id: string) => D3Element;
|
||||||
getData: () => LayoutData;
|
getDataStructures: () => ArchitectureDataStructures;
|
||||||
getDirection: () => string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export type ArchitectureAdjacencyList = Record<string, ArchitectureDirectionPairMap>;
|
export type ArchitectureAdjacencyList = Record<string, ArchitectureDirectionPairMap>;
|
||||||
|
@@ -66,12 +66,15 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili
|
|||||||
\}\| return 'ONE_OR_MORE';
|
\}\| return 'ONE_OR_MORE';
|
||||||
"one" return 'ONLY_ONE';
|
"one" return 'ONLY_ONE';
|
||||||
"only one" return 'ONLY_ONE';
|
"only one" return 'ONLY_ONE';
|
||||||
"1" return 'ONLY_ONE';
|
[0-9]+\.[0-9]+ return 'DECIMAL_NUM';
|
||||||
|
"1"(?=\s+[A-Za-z_"']) return 'ONLY_ONE';
|
||||||
|
"1" return 'ENTITY_ONE';
|
||||||
|
[0-9]+ return 'NUM';
|
||||||
\|\| return 'ONLY_ONE';
|
\|\| return 'ONLY_ONE';
|
||||||
o\| return 'ZERO_OR_ONE';
|
o\| return 'ZERO_OR_ONE';
|
||||||
o\{ return 'ZERO_OR_MORE';
|
o\{ return 'ZERO_OR_MORE';
|
||||||
\|\{ return 'ONE_OR_MORE';
|
\|\{ return 'ONE_OR_MORE';
|
||||||
\s*u return 'MD_PARENT';
|
u(?=[\.\-\|]) return 'MD_PARENT';
|
||||||
\.\. return 'NON_IDENTIFYING';
|
\.\. return 'NON_IDENTIFYING';
|
||||||
\-\- return 'IDENTIFYING';
|
\-\- return 'IDENTIFYING';
|
||||||
"to" return 'IDENTIFYING';
|
"to" return 'IDENTIFYING';
|
||||||
@@ -80,13 +83,15 @@ o\{ return 'ZERO_OR_MORE';
|
|||||||
\-\. return 'NON_IDENTIFYING';
|
\-\. return 'NON_IDENTIFYING';
|
||||||
<style>([^\x00-\x7F]|\w|\-|\*)+ return 'STYLE_TEXT';
|
<style>([^\x00-\x7F]|\w|\-|\*)+ return 'STYLE_TEXT';
|
||||||
<style>';' return 'SEMI';
|
<style>';' return 'SEMI';
|
||||||
([^\x00-\x7F]|\w|\-|\*)+ return 'UNICODE_TEXT';
|
([^\x00-\x7F]|\w|\-|\*|\.)+ return 'UNICODE_TEXT';
|
||||||
[0-9] return 'NUM';
|
|
||||||
. return yytext[0];
|
. return yytext[0];
|
||||||
<<EOF>> return 'EOF';
|
<<EOF>> return 'EOF';
|
||||||
|
|
||||||
/lex
|
/lex
|
||||||
|
|
||||||
|
%left 'ONLY_ONE'
|
||||||
|
%left 'ZERO_OR_ONE' 'ZERO_OR_MORE' 'ONE_OR_MORE' 'MD_PARENT'
|
||||||
|
|
||||||
%start start
|
%start start
|
||||||
%% /* language grammar */
|
%% /* language grammar */
|
||||||
|
|
||||||
@@ -228,6 +233,9 @@ styleComponent: STYLE_TEXT | NUM | COLON | BRKT;
|
|||||||
entityName
|
entityName
|
||||||
: 'ENTITY_NAME' { $$ = $1.replace(/"/g, ''); }
|
: 'ENTITY_NAME' { $$ = $1.replace(/"/g, ''); }
|
||||||
| 'UNICODE_TEXT' { $$ = $1; }
|
| 'UNICODE_TEXT' { $$ = $1; }
|
||||||
|
| 'NUM' { $$ = $1; }
|
||||||
|
| 'DECIMAL_NUM' { $$ = $1; }
|
||||||
|
| 'ENTITY_ONE' { $$ = $1; }
|
||||||
;
|
;
|
||||||
|
|
||||||
attributes
|
attributes
|
||||||
|
@@ -1001,4 +1001,90 @@ describe('when parsing ER diagram it...', function () {
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('syntax fixes for special characters and numbers', function () {
|
||||||
|
describe('standalone entity names', function () {
|
||||||
|
it('should allow number "1" as standalone entity', function () {
|
||||||
|
erDiagram.parser.parse(`erDiagram\nCUSTOMER }|..|{ DELIVERY-ADDRESS : has\n1`);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should allow character "u" as standalone entity', function () {
|
||||||
|
erDiagram.parser.parse(`erDiagram\nCUSTOMER }|..|{ DELIVERY-ADDRESS : has\nu`);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should allow decimal numbers as standalone entities', function () {
|
||||||
|
erDiagram.parser.parse(`erDiagram\nCUSTOMER }|..|{ DELIVERY-ADDRESS : has\n2.5`);
|
||||||
|
erDiagram.parser.parse(`erDiagram\nCUSTOMER }|..|{ DELIVERY-ADDRESS : has\n1.5`);
|
||||||
|
erDiagram.parser.parse(`erDiagram\nCUSTOMER }|..|{ DELIVERY-ADDRESS : has\n0.1`);
|
||||||
|
erDiagram.parser.parse(`erDiagram\nCUSTOMER }|..|{ DELIVERY-ADDRESS : has\n99.99`);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('entity names with attributes', function () {
|
||||||
|
it('should allow "u" as entity name with attributes', function () {
|
||||||
|
erDiagram.parser.parse(`erDiagram\nu {\nstring name\nint id\n}`);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should allow number "1" as entity name with attributes', function () {
|
||||||
|
erDiagram.parser.parse(`erDiagram\n1 {\nstring name\nint id\n}`);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should allow decimal numbers as entity names with attributes', function () {
|
||||||
|
erDiagram.parser.parse(`erDiagram\n2.5 {\nstring name\nint id\n}`);
|
||||||
|
erDiagram.parser.parse(`erDiagram\n1.5 {\nstring value\n}`);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('entity names in relationships', function () {
|
||||||
|
it('should allow "u" in relationships', function () {
|
||||||
|
erDiagram.parser.parse(`erDiagram\nCUSTOMER ||--|| u : has`);
|
||||||
|
erDiagram.parser.parse(`erDiagram\nu ||--|| ORDER : places`);
|
||||||
|
erDiagram.parser.parse(`erDiagram\nu ||--|| v : connects`);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should allow numbers in relationships', function () {
|
||||||
|
erDiagram.parser.parse(`erDiagram\nCUSTOMER ||--|| 1 : has`);
|
||||||
|
erDiagram.parser.parse(`erDiagram\n1 ||--|| ORDER : places`);
|
||||||
|
erDiagram.parser.parse(`erDiagram\n1 ||--|| 2 : connects`);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should allow decimal numbers in relationships', function () {
|
||||||
|
erDiagram.parser.parse(`erDiagram\nCUSTOMER ||--|| 2.5 : has`);
|
||||||
|
erDiagram.parser.parse(`erDiagram\n1.5 ||--|| ORDER : places`);
|
||||||
|
erDiagram.parser.parse(`erDiagram\n2.5 ||--|| 5.5 : connects`);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('mixed scenarios', function () {
|
||||||
|
it('should handle complex diagram with special entity names', function () {
|
||||||
|
erDiagram.parser.parse(
|
||||||
|
`erDiagram
|
||||||
|
CUSTOMER ||--o{ 1 : places
|
||||||
|
1 ||--|{ u : contains
|
||||||
|
u {
|
||||||
|
string name
|
||||||
|
int quantity
|
||||||
|
}
|
||||||
|
"2.5" ||--|| ORDER : processes
|
||||||
|
ORDER {
|
||||||
|
int id
|
||||||
|
date created
|
||||||
|
}
|
||||||
|
`
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle attributes with numbers in names (but not starting)', function () {
|
||||||
|
erDiagram.parser.parse(
|
||||||
|
`erDiagram
|
||||||
|
ENTITY {
|
||||||
|
string name1
|
||||||
|
int value2
|
||||||
|
float point3_5
|
||||||
|
}
|
||||||
|
`
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
@@ -85,6 +85,17 @@ export class FlowDB implements DiagramDB {
|
|||||||
return common.sanitizeText(txt, this.config);
|
return common.sanitizeText(txt, this.config);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private sanitizeNodeLabelType(labelType?: string) {
|
||||||
|
switch (labelType) {
|
||||||
|
case 'markdown':
|
||||||
|
case 'string':
|
||||||
|
case 'text':
|
||||||
|
return labelType;
|
||||||
|
default:
|
||||||
|
return 'markdown';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Function to lookup domId from id in the graph definition.
|
* Function to lookup domId from id in the graph definition.
|
||||||
*
|
*
|
||||||
@@ -208,6 +219,7 @@ export class FlowDB implements DiagramDB {
|
|||||||
|
|
||||||
if (doc?.label) {
|
if (doc?.label) {
|
||||||
vertex.text = doc?.label;
|
vertex.text = doc?.label;
|
||||||
|
vertex.labelType = this.sanitizeNodeLabelType(doc?.labelType);
|
||||||
}
|
}
|
||||||
if (doc?.icon) {
|
if (doc?.icon) {
|
||||||
vertex.icon = doc?.icon;
|
vertex.icon = doc?.icon;
|
||||||
@@ -267,7 +279,7 @@ export class FlowDB implements DiagramDB {
|
|||||||
if (edge.text.startsWith('"') && edge.text.endsWith('"')) {
|
if (edge.text.startsWith('"') && edge.text.endsWith('"')) {
|
||||||
edge.text = edge.text.substring(1, edge.text.length - 1);
|
edge.text = edge.text.substring(1, edge.text.length - 1);
|
||||||
}
|
}
|
||||||
edge.labelType = linkTextObj.type;
|
edge.labelType = this.sanitizeNodeLabelType(linkTextObj.type);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (type !== undefined) {
|
if (type !== undefined) {
|
||||||
@@ -702,7 +714,7 @@ You have to call mermaid.initialize.`
|
|||||||
title: title.trim(),
|
title: title.trim(),
|
||||||
classes: [],
|
classes: [],
|
||||||
dir,
|
dir,
|
||||||
labelType: _title.type,
|
labelType: this.sanitizeNodeLabelType(_title?.type),
|
||||||
};
|
};
|
||||||
|
|
||||||
log.info('Adding', subGraph.id, subGraph.nodes, subGraph.dir);
|
log.info('Adding', subGraph.id, subGraph.nodes, subGraph.dir);
|
||||||
@@ -1012,6 +1024,7 @@ You have to call mermaid.initialize.`
|
|||||||
const baseNode = {
|
const baseNode = {
|
||||||
id: vertex.id,
|
id: vertex.id,
|
||||||
label: vertex.text,
|
label: vertex.text,
|
||||||
|
labelType: vertex.labelType,
|
||||||
labelStyle: '',
|
labelStyle: '',
|
||||||
parentId,
|
parentId,
|
||||||
padding: config.flowchart?.padding || 8,
|
padding: config.flowchart?.padding || 8,
|
||||||
@@ -1088,6 +1101,7 @@ You have to call mermaid.initialize.`
|
|||||||
id: subGraph.id,
|
id: subGraph.id,
|
||||||
label: subGraph.title,
|
label: subGraph.title,
|
||||||
labelStyle: '',
|
labelStyle: '',
|
||||||
|
labelType: subGraph.labelType,
|
||||||
parentId: parentDB.get(subGraph.id),
|
parentId: parentDB.get(subGraph.id),
|
||||||
padding: 8,
|
padding: 8,
|
||||||
cssCompiledStyles: this.getCompiledStyles(subGraph.classes),
|
cssCompiledStyles: this.getCompiledStyles(subGraph.classes),
|
||||||
@@ -1119,6 +1133,7 @@ You have to call mermaid.initialize.`
|
|||||||
end: rawEdge.end,
|
end: rawEdge.end,
|
||||||
type: rawEdge.type ?? 'normal',
|
type: rawEdge.type ?? 'normal',
|
||||||
label: rawEdge.text,
|
label: rawEdge.text,
|
||||||
|
labelType: rawEdge.labelType,
|
||||||
labelpos: 'c',
|
labelpos: 'c',
|
||||||
thickness: rawEdge.stroke,
|
thickness: rawEdge.stroke,
|
||||||
minlen: rawEdge.length,
|
minlen: rawEdge.length,
|
||||||
|
@@ -29,7 +29,7 @@ export interface FlowVertex {
|
|||||||
domId: string;
|
domId: string;
|
||||||
haveCallback?: boolean;
|
haveCallback?: boolean;
|
||||||
id: string;
|
id: string;
|
||||||
labelType: 'text';
|
labelType: 'markdown' | 'string' | 'text';
|
||||||
link?: string;
|
link?: string;
|
||||||
linkTarget?: string;
|
linkTarget?: string;
|
||||||
props?: any;
|
props?: any;
|
||||||
@@ -62,7 +62,7 @@ export interface FlowEdge {
|
|||||||
style?: string[];
|
style?: string[];
|
||||||
length?: number;
|
length?: number;
|
||||||
text: string;
|
text: string;
|
||||||
labelType: 'text';
|
labelType: 'markdown' | 'string' | 'text';
|
||||||
classes: string[];
|
classes: string[];
|
||||||
id?: string;
|
id?: string;
|
||||||
animation?: 'fast' | 'slow';
|
animation?: 'fast' | 'slow';
|
||||||
|
@@ -62,6 +62,7 @@ const getData = function () {
|
|||||||
const node = {
|
const node = {
|
||||||
id: section.id,
|
id: section.id,
|
||||||
label: sanitizeText(section.label ?? '', conf),
|
label: sanitizeText(section.label ?? '', conf),
|
||||||
|
labelType: 'markdown',
|
||||||
isGroup: true,
|
isGroup: true,
|
||||||
ticket: section.ticket,
|
ticket: section.ticket,
|
||||||
shape: 'kanbanSection',
|
shape: 'kanbanSection',
|
||||||
@@ -76,6 +77,7 @@ const getData = function () {
|
|||||||
id: item.id,
|
id: item.id,
|
||||||
parentId: section.id,
|
parentId: section.id,
|
||||||
label: sanitizeText(item.label ?? '', conf),
|
label: sanitizeText(item.label ?? '', conf),
|
||||||
|
labelType: 'markdown',
|
||||||
isGroup: false,
|
isGroup: false,
|
||||||
ticket: item?.ticket,
|
ticket: item?.ticket,
|
||||||
priority: item?.priority,
|
priority: item?.priority,
|
||||||
|
@@ -260,6 +260,7 @@ export class MindmapDB {
|
|||||||
id: node.id.toString(),
|
id: node.id.toString(),
|
||||||
domId: 'node_' + node.id.toString(),
|
domId: 'node_' + node.id.toString(),
|
||||||
label: node.descr,
|
label: node.descr,
|
||||||
|
labelType: 'markdown',
|
||||||
isGroup: false,
|
isGroup: false,
|
||||||
shape: getShapeFromType(node.type),
|
shape: getShapeFromType(node.type),
|
||||||
width: node.width,
|
width: node.width,
|
||||||
|
@@ -16,6 +16,7 @@ export interface MindmapNode {
|
|||||||
x?: number;
|
x?: number;
|
||||||
y?: number;
|
y?: number;
|
||||||
isRoot?: boolean;
|
isRoot?: boolean;
|
||||||
|
labelType?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export type FilledMindMapNode = RequiredDeep<MindmapNode>;
|
export type FilledMindMapNode = RequiredDeep<MindmapNode>;
|
||||||
|
@@ -78,7 +78,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';
|
||||||
@@ -89,10 +89,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';
|
||||||
|
|
||||||
@@ -304,6 +330,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}]}
|
||||||
;
|
;
|
||||||
@@ -337,7 +377,28 @@ 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; }
|
||||||
| BIDIRECTIONAL_SOLID_ARROW { $$ = yy.LINETYPE.BIDIRECTIONAL_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; }
|
||||||
| DOTTED_ARROW { $$ = yy.LINETYPE.DOTTED; }
|
| DOTTED_ARROW { $$ = yy.LINETYPE.DOTTED; }
|
||||||
| BIDIRECTIONAL_DOTTED_ARROW { $$ = yy.LINETYPE.BIDIRECTIONAL_DOTTED; }
|
| BIDIRECTIONAL_DOTTED_ARROW { $$ = yy.LINETYPE.BIDIRECTIONAL_DOTTED; }
|
||||||
| SOLID_CROSS { $$ = yy.LINETYPE.SOLID_CROSS; }
|
| SOLID_CROSS { $$ = yy.LINETYPE.SOLID_CROSS; }
|
||||||
|
@@ -64,6 +64,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 = {
|
||||||
@@ -244,7 +268,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 ?? '');
|
||||||
@@ -271,6 +296,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;
|
||||||
}
|
}
|
||||||
@@ -563,6 +589,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;
|
||||||
@@ -606,7 +638,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!",
|
||||||
@@ -181,6 +187,254 @@ describe('more than one sequence diagram', () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('Central Connection Parsing', () => {
|
||||||
|
describe('when parsing central connection syntax', () => {
|
||||||
|
it('should parse actor ()->>() actor syntax as CENTRAL_CONNECTION_DUAL', async () => {
|
||||||
|
const diagram = await Diagram.fromText(`
|
||||||
|
sequenceDiagram
|
||||||
|
participant Alice
|
||||||
|
participant Bob
|
||||||
|
Alice ()->>() Bob: Hello Bob, how are you?
|
||||||
|
`);
|
||||||
|
|
||||||
|
const messages = diagram.db.getMessages();
|
||||||
|
expect(messages).toHaveLength(3); // addMessage + centralConnection + centralConnectionReverse
|
||||||
|
|
||||||
|
// Find the actual message (type: 'addMessage')
|
||||||
|
const actualMessage = messages.find((msg) => msg.type !== undefined && msg.from && msg.to);
|
||||||
|
expect(actualMessage).toMatchObject({
|
||||||
|
from: 'Alice',
|
||||||
|
to: 'Bob',
|
||||||
|
message: 'Hello Bob, how are you?',
|
||||||
|
centralConnection: 61, // CENTRAL_CONNECTION_DUAL
|
||||||
|
activate: true,
|
||||||
|
type: 0, // SOLID (based on test output)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should parse actor ()-->>() actor syntax as CENTRAL_CONNECTION_DUAL', async () => {
|
||||||
|
const diagram = await Diagram.fromText(`
|
||||||
|
sequenceDiagram
|
||||||
|
participant Alice
|
||||||
|
participant Bob
|
||||||
|
Alice ()-->>() Bob: Hello Bob, how are you?
|
||||||
|
`);
|
||||||
|
|
||||||
|
const messages = diagram.db.getMessages();
|
||||||
|
expect(messages).toHaveLength(3); // addMessage + centralConnection + centralConnectionReverse
|
||||||
|
|
||||||
|
const actualMessage = messages.find((msg) => msg.type !== undefined && msg.from && msg.to);
|
||||||
|
expect(actualMessage).toMatchObject({
|
||||||
|
from: 'Alice',
|
||||||
|
to: 'Bob',
|
||||||
|
message: 'Hello Bob, how are you?',
|
||||||
|
centralConnection: 61, // CENTRAL_CONNECTION_DUAL
|
||||||
|
activate: true,
|
||||||
|
type: 1, // DOTTED (based on test output)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should parse actor ->>() actor syntax as CENTRAL_CONNECTION', async () => {
|
||||||
|
const diagram = await Diagram.fromText(`
|
||||||
|
sequenceDiagram
|
||||||
|
participant Alice
|
||||||
|
participant Bob
|
||||||
|
Alice ->>() Bob: Hello Bob, how are you?
|
||||||
|
`);
|
||||||
|
|
||||||
|
const messages = diagram.db.getMessages();
|
||||||
|
expect(messages).toHaveLength(2); // addMessage + centralConnection (no activation for this pattern)
|
||||||
|
|
||||||
|
const actualMessage = messages.find((msg) => msg.type !== undefined && msg.from && msg.to);
|
||||||
|
expect(actualMessage).toMatchObject({
|
||||||
|
from: 'Alice',
|
||||||
|
to: 'Bob',
|
||||||
|
message: 'Hello Bob, how are you?',
|
||||||
|
centralConnection: 59, // CENTRAL_CONNECTION
|
||||||
|
activate: true,
|
||||||
|
type: 0, // SOLID (based on actual parsing)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should parse actor ()-->> actor syntax as CENTRAL_CONNECTION_REVERSE', async () => {
|
||||||
|
const diagram = await Diagram.fromText(`
|
||||||
|
sequenceDiagram
|
||||||
|
participant Alice
|
||||||
|
participant Bob
|
||||||
|
Alice ()-->> Bob: Hello Bob, how are you?
|
||||||
|
`);
|
||||||
|
|
||||||
|
const messages = diagram.db.getMessages();
|
||||||
|
expect(messages).toHaveLength(2); // addMessage + centralConnectionReverse
|
||||||
|
|
||||||
|
const actualMessage = messages.find((msg) => msg.type !== undefined && msg.from && msg.to);
|
||||||
|
expect(actualMessage).toMatchObject({
|
||||||
|
from: 'Alice',
|
||||||
|
to: 'Bob',
|
||||||
|
message: 'Hello Bob, how are you?',
|
||||||
|
centralConnection: 60, // CENTRAL_CONNECTION_REVERSE
|
||||||
|
activate: false,
|
||||||
|
type: 1, // DOTTED (based on test output)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should parse actor ()->> actor syntax as CENTRAL_CONNECTION_REVERSE', async () => {
|
||||||
|
const diagram = await Diagram.fromText(`
|
||||||
|
sequenceDiagram
|
||||||
|
participant Alice
|
||||||
|
participant Bob
|
||||||
|
Alice ()->> Bob: Hello Bob, how are you?
|
||||||
|
`);
|
||||||
|
|
||||||
|
const messages = diagram.db.getMessages();
|
||||||
|
expect(messages).toHaveLength(2); // addMessage + centralConnectionReverse
|
||||||
|
|
||||||
|
const actualMessage = messages.find((msg) => msg.type !== undefined && msg.from && msg.to);
|
||||||
|
expect(actualMessage).toMatchObject({
|
||||||
|
from: 'Alice',
|
||||||
|
to: 'Bob',
|
||||||
|
message: 'Hello Bob, how are you?',
|
||||||
|
centralConnection: 60, // CENTRAL_CONNECTION_REVERSE
|
||||||
|
activate: false,
|
||||||
|
type: 0, // SOLID (based on test output)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should parse actor ()<<-->>() actor syntax as CENTRAL_CONNECTION_DUAL', async () => {
|
||||||
|
const diagram = await Diagram.fromText(`
|
||||||
|
sequenceDiagram
|
||||||
|
participant Alice
|
||||||
|
participant Bob
|
||||||
|
Alice ()<<-->>() Bob: Hello Bob, how are you?
|
||||||
|
`);
|
||||||
|
|
||||||
|
const messages = diagram.db.getMessages();
|
||||||
|
expect(messages).toHaveLength(3); // addMessage + centralConnection + centralConnectionReverse
|
||||||
|
|
||||||
|
const actualMessage = messages.find((msg) => msg.type !== undefined && msg.from && msg.to);
|
||||||
|
expect(actualMessage).toMatchObject({
|
||||||
|
from: 'Alice',
|
||||||
|
to: 'Bob',
|
||||||
|
message: 'Hello Bob, how are you?',
|
||||||
|
centralConnection: 61, // CENTRAL_CONNECTION_DUAL
|
||||||
|
activate: true,
|
||||||
|
type: 34, // BIDIRECTIONAL_DOTTED
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should parse actor ()<<->>() actor syntax as CENTRAL_CONNECTION_DUAL', async () => {
|
||||||
|
const diagram = await Diagram.fromText(`
|
||||||
|
sequenceDiagram
|
||||||
|
participant Alice
|
||||||
|
participant Bob
|
||||||
|
Alice ()<<->>() Bob: Hello Bob, how are you?
|
||||||
|
`);
|
||||||
|
|
||||||
|
const messages = diagram.db.getMessages();
|
||||||
|
expect(messages).toHaveLength(3); // addMessage + centralConnection + centralConnectionReverse
|
||||||
|
|
||||||
|
const actualMessage = messages.find((msg) => msg.type !== undefined && msg.from && msg.to);
|
||||||
|
expect(actualMessage).toMatchObject({
|
||||||
|
from: 'Alice',
|
||||||
|
to: 'Bob',
|
||||||
|
message: 'Hello Bob, how are you?',
|
||||||
|
centralConnection: 61, // CENTRAL_CONNECTION_DUAL
|
||||||
|
activate: true,
|
||||||
|
type: 33, // BIDIRECTIONAL_SOLID
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle multiple central connection types in one diagram', async () => {
|
||||||
|
const diagram = await Diagram.fromText(`
|
||||||
|
sequenceDiagram
|
||||||
|
participant Alice
|
||||||
|
participant Bob
|
||||||
|
participant Charlie
|
||||||
|
Alice ()->>() Bob: Message 1
|
||||||
|
Bob ()-->> Charlie: Message 2
|
||||||
|
Charlie ()<<-->>() Alice: Message 3
|
||||||
|
`);
|
||||||
|
|
||||||
|
const messages = diagram.db.getMessages();
|
||||||
|
expect(messages).toHaveLength(8); // 3 addMessages + 5 central connection markers
|
||||||
|
|
||||||
|
// Filter to get only the actual messages
|
||||||
|
const actualMessages = messages.filter((msg) => msg.type !== undefined && msg.from && msg.to);
|
||||||
|
expect(actualMessages).toHaveLength(3);
|
||||||
|
|
||||||
|
expect(actualMessages[0]).toMatchObject({
|
||||||
|
from: 'Alice',
|
||||||
|
to: 'Bob',
|
||||||
|
centralConnection: 61, // CENTRAL_CONNECTION_DUAL (()->>())
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(actualMessages[1]).toMatchObject({
|
||||||
|
from: 'Bob',
|
||||||
|
to: 'Charlie',
|
||||||
|
centralConnection: 60, // CENTRAL_CONNECTION_REVERSE (()-->>)
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(actualMessages[2]).toMatchObject({
|
||||||
|
from: 'Charlie',
|
||||||
|
to: 'Alice',
|
||||||
|
centralConnection: 61, // CENTRAL_CONNECTION_DUAL (()<<-->>())
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should handle central connections with different arrow types', async () => {
|
||||||
|
const diagram = await Diagram.fromText(`
|
||||||
|
sequenceDiagram
|
||||||
|
participant Alice
|
||||||
|
participant Bob
|
||||||
|
Alice ()-x() Bob: Cross message
|
||||||
|
Alice ()--x() Bob: Dotted cross message
|
||||||
|
`);
|
||||||
|
|
||||||
|
const messages = diagram.db.getMessages();
|
||||||
|
expect(messages).toHaveLength(6); // 2 addMessages + 4 central connection markers
|
||||||
|
|
||||||
|
const actualMessages = messages.filter((msg) => msg.type !== undefined && msg.from && msg.to);
|
||||||
|
expect(actualMessages).toHaveLength(2);
|
||||||
|
|
||||||
|
expect(actualMessages[0]).toMatchObject({
|
||||||
|
from: 'Alice',
|
||||||
|
to: 'Bob',
|
||||||
|
centralConnection: 61, // CENTRAL_CONNECTION_DUAL (()-x())
|
||||||
|
type: 3, // SOLID_CROSS
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(actualMessages[1]).toMatchObject({
|
||||||
|
from: 'Alice',
|
||||||
|
to: 'Bob',
|
||||||
|
centralConnection: 61, // CENTRAL_CONNECTION_DUAL (()--x())
|
||||||
|
type: 4, // DOTTED_CROSS
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should not break existing parsing without central connections', async () => {
|
||||||
|
const diagram = await Diagram.fromText(`
|
||||||
|
sequenceDiagram
|
||||||
|
participant Alice
|
||||||
|
participant Bob
|
||||||
|
Alice ->> Bob: Normal message
|
||||||
|
Bob -->> Alice: Normal dotted message
|
||||||
|
Alice -x Bob: Normal cross message
|
||||||
|
`);
|
||||||
|
|
||||||
|
const messages = diagram.db.getMessages();
|
||||||
|
expect(messages).toHaveLength(3);
|
||||||
|
|
||||||
|
messages.forEach((msg) => {
|
||||||
|
expect(msg.centralConnection).toBe(0); // No central connection
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(messages[0].type).toBe(0); // SOLID (based on actual parsing)
|
||||||
|
expect(messages[1].type).toBe(1); // DOTTED (based on actual parsing)
|
||||||
|
expect(messages[2].type).toBe(3); // SOLID_CROSS
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
describe('when parsing a sequenceDiagram', function () {
|
describe('when parsing a sequenceDiagram', function () {
|
||||||
let diagram;
|
let diagram;
|
||||||
beforeEach(async function () {
|
beforeEach(async function () {
|
||||||
@@ -2058,6 +2312,36 @@ 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();
|
||||||
|
});
|
||||||
describe('when parsing extended participant syntax', () => {
|
describe('when parsing extended participant syntax', () => {
|
||||||
it('should parse participants with different quote styles and whitespace', async () => {
|
it('should parse participants with different quote styles and whitespace', async () => {
|
||||||
const diagram = await Diagram.fromText(`
|
const diagram = await Diagram.fromText(`
|
||||||
|
@@ -282,6 +282,49 @@ 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 fromActor = actors.get(msg.from);
|
||||||
|
const toActor = actors.get(msg.to);
|
||||||
|
const fromCenter = fromActor.x + fromActor.width / 2;
|
||||||
|
const toCenter = toActor.x + toActor.width / 2;
|
||||||
|
|
||||||
|
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);
|
||||||
|
};
|
||||||
|
|
||||||
|
const { CENTRAL_CONNECTION, CENTRAL_CONNECTION_REVERSE, CENTRAL_CONNECTION_DUAL } =
|
||||||
|
diagObj.db.LINETYPE;
|
||||||
|
|
||||||
|
switch (msg.centralConnection) {
|
||||||
|
case CENTRAL_CONNECTION:
|
||||||
|
drawCircle(toCenter);
|
||||||
|
break;
|
||||||
|
case CENTRAL_CONNECTION_REVERSE:
|
||||||
|
drawCircle(fromCenter);
|
||||||
|
break;
|
||||||
|
case CENTRAL_CONNECTION_DUAL:
|
||||||
|
drawCircle(fromCenter);
|
||||||
|
drawCircle(toCenter);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const messageFont = (cnf) => {
|
const messageFont = (cnf) => {
|
||||||
return {
|
return {
|
||||||
fontFamily: cnf.messageFontFamily,
|
fontFamily: cnf.messageFontFamily,
|
||||||
@@ -367,7 +410,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();
|
||||||
@@ -433,6 +476,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 (hasCentralConnection(msg, diagObj)) {
|
||||||
|
drawCentralConnection(diagram, msg, msgModel, diagObj, startx, stopx, lineStartY);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// Make an SVG Container
|
// Make an SVG Container
|
||||||
// Draw the line
|
// Draw the line
|
||||||
@@ -441,7 +487,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');
|
||||||
@@ -457,6 +511,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)');
|
||||||
}
|
}
|
||||||
@@ -481,7 +580,18 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
|
|||||||
type === diagObj.db.LINETYPE.BIDIRECTIONAL_SOLID ||
|
type === diagObj.db.LINETYPE.BIDIRECTIONAL_SOLID ||
|
||||||
type === diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED;
|
type === diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED;
|
||||||
|
|
||||||
if (isBidirectional) {
|
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;
|
const SEQUENCE_NUMBER_RADIUS = 6;
|
||||||
|
|
||||||
if (startx < stopx) {
|
if (startx < stopx) {
|
||||||
@@ -489,6 +599,7 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
|
|||||||
} else {
|
} else {
|
||||||
line.attr('x1', startx + SEQUENCE_NUMBER_RADIUS);
|
line.attr('x1', startx + SEQUENCE_NUMBER_RADIUS);
|
||||||
}
|
}
|
||||||
|
x = 3.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
diagram
|
diagram
|
||||||
@@ -498,7 +609,8 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
|
|||||||
.attr('x2', startx)
|
.attr('x2', startx)
|
||||||
.attr('y2', lineStartY)
|
.attr('y2', lineStartY)
|
||||||
.attr('stroke-width', 0)
|
.attr('stroke-width', 0)
|
||||||
.attr('marker-start', 'url(' + url + '#sequencenumber)');
|
.attr('marker-start', 'url(' + url + '#sequencenumber)')
|
||||||
|
.attr('transform', `translate(-${x}, 0)`);
|
||||||
|
|
||||||
diagram
|
diagram
|
||||||
.append('text')
|
.append('text')
|
||||||
@@ -508,7 +620,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)`);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -857,6 +970,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.
|
||||||
@@ -897,6 +1014,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;
|
||||||
@@ -1055,7 +1178,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);
|
||||||
@@ -1068,6 +1191,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,
|
||||||
@@ -1087,7 +1231,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);
|
||||||
@@ -1461,12 +1605,85 @@ const buildNoteModel = async function (msg, actors, diagObj) {
|
|||||||
return noteModel;
|
return noteModel;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Central connection positioning constants
|
||||||
|
const CENTRAL_CONNECTION_BASE_OFFSET = 4;
|
||||||
|
const CENTRAL_CONNECTION_BIDIRECTIONAL_OFFSET = 6;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if a message has central connection
|
||||||
|
* @param msg - The message object
|
||||||
|
* @param diagObj - The diagram object containing LINETYPE constants
|
||||||
|
* @returns True if the message has any type of central connection
|
||||||
|
*/
|
||||||
|
const hasCentralConnection = function (msg, diagObj) {
|
||||||
|
const { CENTRAL_CONNECTION, CENTRAL_CONNECTION_REVERSE, CENTRAL_CONNECTION_DUAL } =
|
||||||
|
diagObj.db.LINETYPE;
|
||||||
|
return [CENTRAL_CONNECTION, CENTRAL_CONNECTION_REVERSE, CENTRAL_CONNECTION_DUAL].includes(
|
||||||
|
msg.centralConnection
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Calculate the positioning offset for central connection arrows
|
||||||
|
* @param msg - The message object
|
||||||
|
* @param diagObj - The diagram object containing LINETYPE constants
|
||||||
|
* @param isArrowToRight - Whether the arrow is pointing to the right
|
||||||
|
* @returns The offset to apply to startx position
|
||||||
|
*/
|
||||||
|
const calculateCentralConnectionOffset = function (msg, diagObj, isArrowToRight) {
|
||||||
|
const {
|
||||||
|
CENTRAL_CONNECTION_REVERSE,
|
||||||
|
CENTRAL_CONNECTION_DUAL,
|
||||||
|
BIDIRECTIONAL_SOLID,
|
||||||
|
BIDIRECTIONAL_DOTTED,
|
||||||
|
} = diagObj.db.LINETYPE;
|
||||||
|
|
||||||
|
let offset = 0;
|
||||||
|
|
||||||
|
if (
|
||||||
|
msg.centralConnection === CENTRAL_CONNECTION_REVERSE ||
|
||||||
|
msg.centralConnection === CENTRAL_CONNECTION_DUAL
|
||||||
|
) {
|
||||||
|
offset += CENTRAL_CONNECTION_BASE_OFFSET;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
msg.centralConnection === CENTRAL_CONNECTION_DUAL &&
|
||||||
|
(msg.type === BIDIRECTIONAL_SOLID || msg.type === BIDIRECTIONAL_DOTTED)
|
||||||
|
) {
|
||||||
|
offset += isArrowToRight ? 0 : -CENTRAL_CONNECTION_BIDIRECTIONAL_OFFSET;
|
||||||
|
}
|
||||||
|
|
||||||
|
return offset;
|
||||||
|
};
|
||||||
|
|
||||||
const buildMessageModel = function (msg, actors, diagObj) {
|
const buildMessageModel = function (msg, actors, diagObj) {
|
||||||
if (
|
if (
|
||||||
![
|
![
|
||||||
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,
|
||||||
@@ -1484,6 +1701,8 @@ 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;
|
||||||
|
|
||||||
|
// Apply central connection positioning adjustments
|
||||||
|
startx += calculateCentralConnectionOffset(msg, diagObj, isArrowToRight);
|
||||||
// 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;
|
||||||
|
|
||||||
@@ -1517,7 +1736,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);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1525,9 +1767,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);
|
||||||
}
|
}
|
||||||
|
@@ -1709,6 +1709,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,
|
||||||
@@ -1731,4 +1802,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'
|
||||||
|
@@ -216,7 +216,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 |
|
||||||
| -------- | ---------------------------------------------------- |
|
| -------- | ---------------------------------------------------- |
|
||||||
@@ -231,6 +235,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 (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!
|
||||||
|
```
|
||||||
|
|
||||||
## 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']
|
||||||
`);
|
`);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@@ -30,11 +30,17 @@ const rect = async (parent, node) => {
|
|||||||
// Create the label and insert it after the rect
|
// Create the label and insert it after the rect
|
||||||
const labelEl = shapeSvg.insert('g').attr('class', 'cluster-label ');
|
const labelEl = shapeSvg.insert('g').attr('class', 'cluster-label ');
|
||||||
|
|
||||||
const text = await createText(labelEl, node.label, {
|
let text;
|
||||||
style: node.labelStyle,
|
if (node.labelType === 'markdown') {
|
||||||
useHtmlLabels,
|
text = await createText(labelEl, node.label, {
|
||||||
isNode: true,
|
style: node.labelStyle,
|
||||||
});
|
useHtmlLabels,
|
||||||
|
isNode: true,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
const labelElement = await createLabel(node.label, node.labelStyle, false, true);
|
||||||
|
text = labelEl.node()?.appendChild(labelElement);
|
||||||
|
}
|
||||||
|
|
||||||
// Get the size of the label
|
// Get the size of the label
|
||||||
let bbox = text.getBBox();
|
let bbox = text.getBBox();
|
||||||
|
@@ -29,7 +29,7 @@ import {
|
|||||||
import rough from 'roughjs';
|
import rough from 'roughjs';
|
||||||
import createLabel from './createLabel.js';
|
import createLabel from './createLabel.js';
|
||||||
import { addEdgeMarkers } from './edgeMarker.ts';
|
import { addEdgeMarkers } from './edgeMarker.ts';
|
||||||
import { isLabelStyle, styles2String } from './shapes/handDrawnShapeStyles.js';
|
import { isLabelStyle } from './shapes/handDrawnShapeStyles.js';
|
||||||
|
|
||||||
export const edgeLabels = new Map();
|
export const edgeLabels = new Map();
|
||||||
export const terminalLabels = new Map();
|
export const terminalLabels = new Map();
|
||||||
@@ -47,14 +47,16 @@ export const getLabelStyles = (styleArray) => {
|
|||||||
export const insertEdgeLabel = async (elem, edge) => {
|
export const insertEdgeLabel = async (elem, edge) => {
|
||||||
let useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
|
let useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
|
||||||
|
|
||||||
const { labelStyles } = styles2String(edge);
|
const labelElement =
|
||||||
edge.labelStyle = labelStyles;
|
edge.labelType === 'markdown'
|
||||||
const labelElement = await createText(elem, edge.label, {
|
? await createText(elem, edge.label, {
|
||||||
style: edge.labelStyle,
|
style: getLabelStyles(edge.labelStyle),
|
||||||
useHtmlLabels,
|
useHtmlLabels,
|
||||||
addSvgBackground: true,
|
addSvgBackground: true,
|
||||||
isNode: false,
|
isNode: false,
|
||||||
});
|
})
|
||||||
|
: await createLabel(edge.label, getLabelStyles(edge.labelStyle), undefined, false);
|
||||||
|
|
||||||
log.info('abc82', edge, edge.labelType);
|
log.info('abc82', edge, edge.labelType);
|
||||||
|
|
||||||
// Create outer g, edgeLabel, this will be positioned after graph layout
|
// Create outer g, edgeLabel, this will be positioned after graph layout
|
||||||
|
@@ -1,3 +1,4 @@
|
|||||||
|
import createLabel from '../createLabel.js';
|
||||||
import { createText } from '../../createText.js';
|
import { createText } from '../../createText.js';
|
||||||
import type { Node } from '../../types.js';
|
import type { Node } from '../../types.js';
|
||||||
import { getConfig } from '../../../diagram-api/diagramAPI.js';
|
import { getConfig } from '../../../diagram-api/diagramAPI.js';
|
||||||
@@ -13,7 +14,7 @@ export const labelHelper = async <T extends SVGGraphicsElement>(
|
|||||||
_classes?: string
|
_classes?: string
|
||||||
) => {
|
) => {
|
||||||
let cssClasses;
|
let cssClasses;
|
||||||
const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig()?.htmlLabels);
|
const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig()?.flowchart?.htmlLabels);
|
||||||
if (!_classes) {
|
if (!_classes) {
|
||||||
cssClasses = 'node default';
|
cssClasses = 'node default';
|
||||||
} else {
|
} else {
|
||||||
@@ -40,14 +41,26 @@ export const labelHelper = async <T extends SVGGraphicsElement>(
|
|||||||
label = typeof node.label === 'string' ? node.label : node.label[0];
|
label = typeof node.label === 'string' ? node.label : node.label[0];
|
||||||
}
|
}
|
||||||
|
|
||||||
const text = await createText(labelEl, sanitizeText(decodeEntities(label), getConfig()), {
|
let text;
|
||||||
useHtmlLabels,
|
if (node.labelType === 'markdown') {
|
||||||
width: node.width || getConfig().flowchart?.wrappingWidth,
|
text = await createText(labelEl, sanitizeText(decodeEntities(label), getConfig()), {
|
||||||
// @ts-expect-error -- This is currently not used. Should this be `classes` instead?
|
useHtmlLabels,
|
||||||
cssClasses: 'markdown-node-label',
|
width: node.width || getConfig().flowchart?.wrappingWidth,
|
||||||
style: node.labelStyle,
|
// @ts-expect-error -- This is currently not used. Should this be `classes` instead?
|
||||||
addSvgBackground: !!node.icon || !!node.img,
|
cssClasses: 'markdown-node-label',
|
||||||
});
|
style: node.labelStyle,
|
||||||
|
addSvgBackground: !!node.icon || !!node.img,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
const labelElement = await createLabel(
|
||||||
|
sanitizeText(decodeEntities(label), getConfig()),
|
||||||
|
node.labelStyle,
|
||||||
|
false,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
text = labelEl.node()?.appendChild(labelElement);
|
||||||
|
}
|
||||||
|
|
||||||
// Get the size of the label
|
// Get the size of the label
|
||||||
let bbox = text.getBBox();
|
let bbox = text.getBBox();
|
||||||
const halfPadding = (node?.padding ?? 0) / 2;
|
const halfPadding = (node?.padding ?? 0) / 2;
|
||||||
|
@@ -1,6 +1,7 @@
|
|||||||
export interface NodeMetaData {
|
export interface NodeMetaData {
|
||||||
shape?: string;
|
shape?: string;
|
||||||
label?: string;
|
label?: string;
|
||||||
|
labelType?: string;
|
||||||
icon?: string;
|
icon?: string;
|
||||||
form?: string;
|
form?: string;
|
||||||
pos?: 't' | 'b';
|
pos?: 't' | 'b';
|
||||||
|
44
pnpm-lock.yaml
generated
44
pnpm-lock.yaml
generated
@@ -17,8 +17,8 @@ importers:
|
|||||||
specifier: ^3.55.2
|
specifier: ^3.55.2
|
||||||
version: 3.55.2(encoding@0.1.13)(typescript@5.7.3)
|
version: 3.55.2(encoding@0.1.13)(typescript@5.7.3)
|
||||||
'@argos-ci/cypress':
|
'@argos-ci/cypress':
|
||||||
specifier: ^6.1.1
|
specifier: ^6.1.3
|
||||||
version: 6.1.1(cypress@14.5.4)
|
version: 6.1.3(cypress@14.5.4)
|
||||||
'@changesets/changelog-github':
|
'@changesets/changelog-github':
|
||||||
specifier: ^0.5.1
|
specifier: ^0.5.1
|
||||||
version: 0.5.1(encoding@0.1.13)
|
version: 0.5.1(encoding@0.1.13)
|
||||||
@@ -793,26 +793,26 @@ packages:
|
|||||||
resolution: {integrity: sha512-8mBaNNJ0zUBlb09ycc8aFTKajoqEu+E7M7kdV1IENIwuVOI3ecM6x9vr4ptWQz0LTnel7M+L3NPqAGJqoQ3AKA==}
|
resolution: {integrity: sha512-8mBaNNJ0zUBlb09ycc8aFTKajoqEu+E7M7kdV1IENIwuVOI3ecM6x9vr4ptWQz0LTnel7M+L3NPqAGJqoQ3AKA==}
|
||||||
engines: {node: '>=12.13.0'}
|
engines: {node: '>=12.13.0'}
|
||||||
|
|
||||||
'@argos-ci/api-client@0.11.0':
|
'@argos-ci/api-client@0.12.0':
|
||||||
resolution: {integrity: sha512-mv7LWrJfEDjjs+CmAJaM1GIexpb3A8TwuyTUCTKgDp/SHdbU0uF8uC6lV4P/mfeGIvBYZzIRKq/frd+IETlC2g==}
|
resolution: {integrity: sha512-WfhI+StLJKIKERWQaIm7Kv1/k+YO/CYIp3djDVhZIU6mv/8yalyNXHnkRC6ofq1kPpmRvoag1KW79/C2WsB4Ag==}
|
||||||
engines: {node: '>=20.0.0'}
|
engines: {node: '>=20.0.0'}
|
||||||
|
|
||||||
'@argos-ci/browser@5.0.0':
|
'@argos-ci/browser@5.0.0':
|
||||||
resolution: {integrity: sha512-SKAD7EXoLX4u50dzTIT/ABnpD284+DnBfoJM0ZrTIav2eiiVJyknNKSznF5w118lYGnYvugTXbKMnukGPzJeOA==}
|
resolution: {integrity: sha512-SKAD7EXoLX4u50dzTIT/ABnpD284+DnBfoJM0ZrTIav2eiiVJyknNKSznF5w118lYGnYvugTXbKMnukGPzJeOA==}
|
||||||
engines: {node: '>=20.0.0'}
|
engines: {node: '>=20.0.0'}
|
||||||
|
|
||||||
'@argos-ci/core@4.1.5':
|
'@argos-ci/core@4.2.0':
|
||||||
resolution: {integrity: sha512-tPsbnSuHEClkdGLUU/qHTNsMe3kAPBvz0DK0nkv6Z18N0imEbzVg+ggmcTmc2x2yEm7i1V456Z2MLhFvTqXnlw==}
|
resolution: {integrity: sha512-3RNyBZ84pYfQ8dn/Ivv5ls2x2rgqFuh8wA8e4ugggA5lx2dE7a6yghJw8cPzud+zbHrpOntl/HBM3akh2SXLkw==}
|
||||||
engines: {node: '>=20.0.0'}
|
engines: {node: '>=20.0.0'}
|
||||||
|
|
||||||
'@argos-ci/cypress@6.1.1':
|
'@argos-ci/cypress@6.1.3':
|
||||||
resolution: {integrity: sha512-fs6K2o7vEiAjBtQhrB6cp7YG6beYBRI9WyVbAHRVYyhdEic36agAqQ7/q3tx8d+uf7nXjjtZuW7KGUxjBmC9MA==}
|
resolution: {integrity: sha512-JlBabUsksKXH7QT2M47dhBNHRxNwW+GQ1lvBT/mgGaFJX8P/GqLkEEmKolf1YBn28MFemQmjuK4G+z5Pjs3rLg==}
|
||||||
engines: {node: '>=20.0.0'}
|
engines: {node: '>=20.0.0'}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
cypress: ^12.0.0 || ^13.0.0 || ^14.0.0
|
cypress: ^12.0.0 || ^13.0.0 || ^14.0.0
|
||||||
|
|
||||||
'@argos-ci/util@3.1.0':
|
'@argos-ci/util@3.1.1':
|
||||||
resolution: {integrity: sha512-QM0IwJGm9YsRdsvTAskQab9iXpQOTOOLb+h9Yev76L2TzoLZ2tM9QO+pYNNlX9YLK5dYr/H/pBNQ1lWr130Jjw==}
|
resolution: {integrity: sha512-sGb9PS7yqdVVtxpxRD1Nfter3kaioC4nPPTknVmMSqo2GQKO1gdmjMJtwHY+Nf9FgiMfwpTCnk8Rrf0pjS3Sug==}
|
||||||
engines: {node: '>=20.0.0'}
|
engines: {node: '>=20.0.0'}
|
||||||
|
|
||||||
'@asamuzakjp/css-color@3.2.0':
|
'@asamuzakjp/css-color@3.2.0':
|
||||||
@@ -7603,8 +7603,8 @@ packages:
|
|||||||
resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
|
resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
|
||||||
engines: {node: '>=12'}
|
engines: {node: '>=12'}
|
||||||
|
|
||||||
openapi-fetch@0.14.0:
|
openapi-fetch@0.14.1:
|
||||||
resolution: {integrity: sha512-PshIdm1NgdLvb05zp8LqRQMNSKzIlPkyMxYFxwyHR+UlKD4t2nUjkDhNxeRbhRSEd3x5EUNh2w5sJYwkhOH4fg==}
|
resolution: {integrity: sha512-l7RarRHxlEZYjMLd/PR0slfMVse2/vvIAGm75/F7J6MlQ8/b9uUQmUF2kCPrQhJqMXSxmYWObVgeYXbFYzZR+A==}
|
||||||
|
|
||||||
openapi-typescript-helpers@0.0.15:
|
openapi-typescript-helpers@0.0.15:
|
||||||
resolution: {integrity: sha512-opyTPaunsklCBpTK8JGef6mfPhLSnyy5a0IN9vKtx3+4aExf+KxEqYwIy3hqkedXIB97u357uLMJsOnm3GVjsw==}
|
resolution: {integrity: sha512-opyTPaunsklCBpTK8JGef6mfPhLSnyy5a0IN9vKtx3+4aExf+KxEqYwIy3hqkedXIB97u357uLMJsOnm3GVjsw==}
|
||||||
@@ -10298,19 +10298,19 @@ snapshots:
|
|||||||
|
|
||||||
'@applitools/utils@1.12.0': {}
|
'@applitools/utils@1.12.0': {}
|
||||||
|
|
||||||
'@argos-ci/api-client@0.11.0':
|
'@argos-ci/api-client@0.12.0':
|
||||||
dependencies:
|
dependencies:
|
||||||
debug: 4.4.3(supports-color@8.1.1)
|
debug: 4.4.3(supports-color@8.1.1)
|
||||||
openapi-fetch: 0.14.0
|
openapi-fetch: 0.14.1
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- supports-color
|
||||||
|
|
||||||
'@argos-ci/browser@5.0.0': {}
|
'@argos-ci/browser@5.0.0': {}
|
||||||
|
|
||||||
'@argos-ci/core@4.1.5':
|
'@argos-ci/core@4.2.0':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@argos-ci/api-client': 0.11.0
|
'@argos-ci/api-client': 0.12.0
|
||||||
'@argos-ci/util': 3.1.0
|
'@argos-ci/util': 3.1.1
|
||||||
convict: 6.2.4
|
convict: 6.2.4
|
||||||
debug: 4.4.3(supports-color@8.1.1)
|
debug: 4.4.3(supports-color@8.1.1)
|
||||||
fast-glob: 3.3.3
|
fast-glob: 3.3.3
|
||||||
@@ -10319,17 +10319,17 @@ snapshots:
|
|||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- supports-color
|
||||||
|
|
||||||
'@argos-ci/cypress@6.1.1(cypress@14.5.4)':
|
'@argos-ci/cypress@6.1.3(cypress@14.5.4)':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@argos-ci/browser': 5.0.0
|
'@argos-ci/browser': 5.0.0
|
||||||
'@argos-ci/core': 4.1.5
|
'@argos-ci/core': 4.2.0
|
||||||
'@argos-ci/util': 3.1.0
|
'@argos-ci/util': 3.1.1
|
||||||
cypress: 14.5.4
|
cypress: 14.5.4
|
||||||
cypress-wait-until: 3.0.2
|
cypress-wait-until: 3.0.2
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- supports-color
|
||||||
|
|
||||||
'@argos-ci/util@3.1.0': {}
|
'@argos-ci/util@3.1.1': {}
|
||||||
|
|
||||||
'@asamuzakjp/css-color@3.2.0':
|
'@asamuzakjp/css-color@3.2.0':
|
||||||
dependencies:
|
dependencies:
|
||||||
@@ -18528,7 +18528,7 @@ snapshots:
|
|||||||
is-docker: 2.2.1
|
is-docker: 2.2.1
|
||||||
is-wsl: 2.2.0
|
is-wsl: 2.2.0
|
||||||
|
|
||||||
openapi-fetch@0.14.0:
|
openapi-fetch@0.14.1:
|
||||||
dependencies:
|
dependencies:
|
||||||
openapi-typescript-helpers: 0.0.15
|
openapi-typescript-helpers: 0.0.15
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user