GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1854 from mermaid-js/1528_sequence_async_arrows

Browse Source 
#1528 Adding async arrow type in sequence diagrams
This commit is contained in:
Knut Sveidqvist 2021-01-12 21:40:02 +01:00 committed by GitHub
commit 071fd8b569
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 78 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
cypress/platform/knsv.html
View File

@ -55,9 +55,13 @@ flowchart TD
class T TestSub
linkStyle 0,1 color:orange, stroke: orange;
</div>
-> ->> ->>> -)
<div class="mermaid" style="width: 50%; height: 20%;">
graph TD
C -->|fa:fa-car Car| F[fa:fa-car Car]
sequenceDiagram
Actor1 -) Actor2:Async
Actor1 --) Actor2:Async dotted
Actor1 ->> Actor2:Sync
Actor1 -->> Actor2:Sync dotted
</div>
<div class="mermaid" style="width: 50%; height: 20%;">
flowchart TD

6
src/diagrams/sequence/parser/sequenceDiagram.jison
View File

@ -56,13 +56,15 @@
"autonumber" return 'autonumber';
"," return ',';
";" return 'NEWLINE';
[^\+\->:\n,;]+((?!(\-x|\-\-x))[\-]*[^\+\->:\n,;]+)* { yytext = yytext.trim(); return 'ACTOR'; }
[^\+\->:\n,;]+((?!(\-x|\-\-x|\-\)|\-\-\)))[\-]*[^\+\->:\n,;]+)* { yytext = yytext.trim(); return 'ACTOR'; }
"->>" return 'SOLID_ARROW';
"-->>" return 'DOTTED_ARROW';
"->" return 'SOLID_OPEN_ARROW';
"-->" return 'DOTTED_OPEN_ARROW';
\-[x] return 'SOLID_CROSS';
\-\-[x] return 'DOTTED_CROSS';
\-[\)] return 'SOLID_POINT';
\-\-[\)] return 'DOTTED_POINT';
":"(?:(?:no)?wrap:)?[^#\n;]+ return 'TXT';
"+" return '+';
"-" return '-';
@ -206,6 +208,8 @@ signaltype
| DOTTED_ARROW { $$ = yy.LINETYPE.DOTTED; }
| SOLID_CROSS { $$ = yy.LINETYPE.SOLID_CROSS; }
| DOTTED_CROSS { $$ = yy.LINETYPE.DOTTED_CROSS; }
| SOLID_POINT { $$ = yy.LINETYPE.SOLID_POINT; }
| DOTTED_POINT { $$ = yy.LINETYPE.DOTTED_POINT; }
;
text2

4
src/diagrams/sequence/sequenceDb.js
View File

@ -168,7 +168,9 @@ export const LINETYPE = {
PAR_AND: 20,
PAR_END: 21,
RECT_START: 22,
RECT_END: 23
RECT_END: 23,
SOLID_POINT: 24,
DOTTED_POINT: 25
};
export const ARROWTYPE = {

30
src/diagrams/sequence/sequenceDiagram.spec.js
View File

@ -161,6 +161,36 @@ Alice--xBob:Hello Bob, how are you?`;
expect(messages.length).toBe(1);
expect(messages[0].type).toBe(parser.yy.LINETYPE.DOTTED_CROSS);
});
it('it should handle in sync messages', function() {
const str = `
sequenceDiagram
Alice-)Bob:Hello Bob, how are you?`;
mermaidAPI.parse(str);
const actors = parser.yy.getActors();
expect(actors.Alice.description).toBe('Alice');
expect(actors.Bob.description).toBe('Bob');
const messages = parser.yy.getMessages();
expect(messages.length).toBe(1);
expect(messages[0].type).toBe(parser.yy.LINETYPE.SOLID_POINT);
});
it('it should handle in sync dotted messages', function() {
const str = `
sequenceDiagram
Alice--)Bob:Hello Bob, how are you?`;
mermaidAPI.parse(str);
const actors = parser.yy.getActors();
expect(actors.Alice.description).toBe('Alice');
expect(actors.Bob.description).toBe('Bob');
const messages = parser.yy.getMessages();
expect(messages.length).toBe(1);
expect(messages[0].type).toBe(parser.yy.LINETYPE.DOTTED_POINT);
});
it('it should handle in arrow messages', function() {
const str = `
sequenceDiagram

13
src/diagrams/sequence/sequenceRenderer.js
View File

@ -360,6 +360,7 @@ const drawMessage = function(g, msgModel) {
if (
type === parser.yy.LINETYPE.DOTTED ||
type === parser.yy.LINETYPE.DOTTED_CROSS ||
type === parser.yy.LINETYPE.DOTTED_POINT ||
type === parser.yy.LINETYPE.DOTTED_OPEN
) {
line.style('stroke-dasharray', '3, 3');
@ -386,6 +387,9 @@ const drawMessage = function(g, msgModel) {
if (type === parser.yy.LINETYPE.SOLID || type === parser.yy.LINETYPE.DOTTED) {
line.attr('marker-end', 'url(' + url + '#arrowhead)');
}
if (type === parser.yy.LINETYPE.SOLID_POINT || type === parser.yy.LINETYPE.DOTTED_POINT) {
line.attr('marker-end', 'url(' + url + '#filled-head)');
}
if (type === parser.yy.LINETYPE.SOLID_CROSS || type === parser.yy.LINETYPE.DOTTED_CROSS) {
line.attr('marker-end', 'url(' + url + '#crosshead)');
@ -523,6 +527,7 @@ export const draw = function(text, id) {
// The arrow head definition is attached to the svg once
svgDraw.insertArrowHead(diagram);
svgDraw.insertArrowCrossHead(diagram);
svgDraw.insertArrowFilledHead(diagram);
svgDraw.insertSequenceNumber(diagram);
function activeEnd(msg, verticalPos) {
@ -667,7 +672,9 @@ export const draw = function(text, id) {
parser.yy.LINETYPE.SOLID,
parser.yy.LINETYPE.DOTTED,
parser.yy.LINETYPE.SOLID_CROSS,
parser.yy.LINETYPE.DOTTED_CROSS
parser.yy.LINETYPE.DOTTED_CROSS,
parser.yy.LINETYPE.SOLID_POINT,
parser.yy.LINETYPE.DOTTED_POINT
].includes(msg.type)
) {
sequenceIndex++;
@ -955,7 +962,9 @@ const buildMessageModel = function(msg, actors) {
parser.yy.LINETYPE.SOLID,
parser.yy.LINETYPE.DOTTED,
parser.yy.LINETYPE.SOLID_CROSS,
parser.yy.LINETYPE.DOTTED_CROSS
parser.yy.LINETYPE.DOTTED_CROSS,
parser.yy.LINETYPE.SOLID_POINT,
parser.yy.LINETYPE.DOTTED_POINT
].includes(msg.type)
) {
process = true;

28
src/diagrams/sequence/svgDraw.js
View File

@ -373,13 +373,30 @@ export const insertArrowHead = function(elem) {
.append('defs')
.append('marker')
.attr('id', 'arrowhead')
.attr('refX', 5)
.attr('refY', 2)
.attr('markerWidth', 6)
.attr('markerHeight', 4)
.attr('refX', 9)
.attr('refY', 5)
.attr('markerUnits', 'userSpaceOnUse')
.attr('markerWidth', 12)
.attr('markerHeight', 12)
.attr('orient', 'auto')
.append('path')
.attr('d', 'M 0,0 V 4 L6,2 Z'); // this is actual shape for arrowhead
.attr('d', 'M 0 0 L 10 5 L 0 10 z'); // this is actual shape for arrowhead
};
/**
* Setup arrow head and define the marker. The result is appended to the svg.
*/
export const insertArrowFilledHead = function(elem) {
elem
.append('defs')
.append('marker')
.attr('id', 'filled-head')
.attr('refX', 18)
.attr('refY', 7)
.attr('markerWidth', 20)
.attr('markerHeight', 28)
.attr('orient', 'auto')
.append('path')
.attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');
};
/**
* Setup node number. The result is appended to the svg.
@ -554,6 +571,7 @@ export default {
drawLoop,
drawBackgroundRect,
insertArrowHead,
insertArrowFilledHead,
insertSequenceNumber,
insertArrowCrossHead,
getTextObj,