From f8137ea7c15405a6b4dff3c132cdd220b040dfaf Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Sun, 16 Feb 2020 15:26:08 +0100 Subject: [PATCH] #1257 Adding the autonumber keyword + tests and docs --- .../rendering/sequencediagram.spec.js | 33 +++++++++++++++++ cypress/platform/current.html | 15 +++++--- docs/sequenceDiagram.md | 37 +++++++++++++++++++ .../sequence/parser/sequenceDiagram.jison | 2 + src/diagrams/sequence/sequenceDb.js | 8 +++- src/diagrams/sequence/sequenceDiagram.spec.js | 21 +++++++++++ src/diagrams/sequence/sequenceRenderer.js | 2 +- 7 files changed, 111 insertions(+), 7 deletions(-) diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index 5f12bacaf..c084b73c1 100644 --- a/cypress/integration/rendering/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -149,5 +149,38 @@ context('Sequence diagram', () => { {} ); }); + it('should render autonumber when configured with such', () => { + imgSnapshotTest( + ` + sequenceDiagram + Alice->>John: Hello John, how are you? + loop Healthcheck + John->>John: Fight against hypochondria + end + Note right of John: Rational thoughts! + John-->>Alice: Great! + John->>Bob: How about you? + Bob-->>John: Jolly good! + `, + {sequence: { actorMargin: 50, showSequenceNumbers: true }} + ); + }); + it('should render autonumber when autonumber keyword is used', () => { + imgSnapshotTest( + ` + sequenceDiagram + autonumber + Alice->>John: Hello John, how are you? + loop Healthcheck + John->>John: Fight against hypochondria + end + Note right of John: Rational thoughts! + John-->>Alice: Great! + John->>Bob: How about you? + Bob-->>John: Jolly good! + `, + {} + ); + }); }); }); diff --git a/cypress/platform/current.html b/cypress/platform/current.html index a5c6d2bec..d23b60201 100644 --- a/cypress/platform/current.html +++ b/cypress/platform/current.html @@ -16,10 +16,15 @@

info below

- stateDiagram - - NotFound --> NotFound: Status - NotFound --> NotFound: Stop + sequenceDiagram + Alice->>John: Hello John, how are you? + loop Healthcheck + John->>John: Fight against hypochondria + end + Note right of John: Rational thoughts! + John-->>Alice: Great! + John->>Bob: How about you? + Bob-->>John: Jolly good!
@@ -32,7 +37,7 @@ logLevel: 0, flowchart: { curve: 'linear', "htmlLabels": false }, // gantt: { axisFormat: '%m/%d/%Y' }, - sequence: { actorMargin: 50 }, + sequence: { actorMargin: 50, showSequenceNumbers: true }, // sequenceDiagram: { actorMargin: 300 } // deprecated }); diff --git a/docs/sequenceDiagram.md b/docs/sequenceDiagram.md index 280b616fc..bf95d078c 100755 --- a/docs/sequenceDiagram.md +++ b/docs/sequenceDiagram.md @@ -282,6 +282,43 @@ sequenceDiagram John-->>Alice: Great! ``` +## sequenceNumbers + +It is possiebl to get a sequence number attached to each arrow in a sequence diagram. This can be configured when adding mermaid to the website as shown below: +``` + +``` + +It can also be be turned on via the diagram code as in the diagram: +``` +sequenceDiagram + autonumber + Alice->>John: Hello John, how are you? + loop Healthcheck + John->>John: Fight against hypochondria + end + Note right of John: Rational thoughts! + John-->>Alice: Great! + John->>Bob: How about you? + Bob-->>John: Jolly good! +``` +```mermaid +sequenceDiagram + autonumber + Alice->>John: Hello John, how are you? + loop Healthcheck + John->>John: Fight against hypochondria + end + Note right of John: Rational thoughts! + John-->>Alice: Great! + John->>Bob: How about you? + Bob-->>John: Jolly good! +``` + ## Styling Styling of a sequence diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/sequence.scss diff --git a/src/diagrams/sequence/parser/sequenceDiagram.jison b/src/diagrams/sequence/parser/sequenceDiagram.jison index 37ec693ec..520978c05 100644 --- a/src/diagrams/sequence/parser/sequenceDiagram.jison +++ b/src/diagrams/sequence/parser/sequenceDiagram.jison @@ -47,6 +47,7 @@ "deactivate" { this.begin('ID'); return 'deactivate'; } "title" return 'title'; "sequenceDiagram" return 'SD'; +"autonumber" return 'autonumber'; "," return ','; ";" return 'NL'; [^\+\->:\n,;]+ { yytext = yytext.trim(); return 'ACTOR'; } @@ -91,6 +92,7 @@ statement : 'participant' actor 'AS' restOfLine 'NL' {$2.description=$4; $$=$2;} | 'participant' actor 'NL' {$$=$2;} | signal 'NL' + | autonumber {yy.enableSequenceNumbers()} | 'activate' actor 'NL' {$$={type: 'activeStart', signalType: yy.LINETYPE.ACTIVE_START, actor: $2};} | 'deactivate' actor 'NL' {$$={type: 'activeEnd', signalType: yy.LINETYPE.ACTIVE_END, actor: $2};} | note_statement 'NL' diff --git a/src/diagrams/sequence/sequenceDb.js b/src/diagrams/sequence/sequenceDb.js index cb873147e..087d56b42 100644 --- a/src/diagrams/sequence/sequenceDb.js +++ b/src/diagrams/sequence/sequenceDb.js @@ -4,7 +4,7 @@ let actors = {}; let messages = []; const notes = []; let title = ''; - +let sequenceNumbersEnabled = false; export const addActor = function(id, name, description) { // Don't allow description nulling const old = actors[id]; @@ -80,6 +80,10 @@ export const getActorKeys = function() { export const getTitle = function() { return title; }; +export const enableSequenceNumbers = function() { + sequenceNumbersEnabled = true; +}; +export const showSequenceNumbers = () => sequenceNumbersEnabled; export const clear = function() { actors = {}; @@ -210,6 +214,8 @@ export default { addActor, addMessage, addSignal, + enableSequenceNumbers, + showSequenceNumbers, getMessages, getActors, getActor, diff --git a/src/diagrams/sequence/sequenceDiagram.spec.js b/src/diagrams/sequence/sequenceDiagram.spec.js index 5b32c4627..5da9244a6 100644 --- a/src/diagrams/sequence/sequenceDiagram.spec.js +++ b/src/diagrams/sequence/sequenceDiagram.spec.js @@ -33,6 +33,27 @@ describe('when parsing a sequenceDiagram', function() { expect(messages[0].from).toBe('Alice'); expect(messages[2].from).toBe('Bob'); }); + it('it should not show sequence numbers per default', function() { + const str = + 'sequenceDiagram\n' + + 'Alice->Bob:Hello Bob, how are you?\n' + + 'Note right of Bob: Bob thinks\n' + + 'Bob-->Alice: I am good thanks!'; + + parser.parse(str); + expect(parser.yy.showSequenceNumbers()).toBe(false); + }); + it('it should show sequence numbers when autonumber is enabled', function() { + const str = + 'sequenceDiagram\n' + + 'autonumber\n' + + 'Alice->Bob:Hello Bob, how are you?\n' + + 'Note right of Bob: Bob thinks\n' + + 'Bob-->Alice: I am good thanks!'; + + parser.parse(str); + expect(parser.yy.showSequenceNumbers()).toBe(true); + }); it('it should handle a sequenceDiagram definition with a title', function() { const str = 'sequenceDiagram\n' + diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js index 56cd4303d..68482a63e 100644 --- a/src/diagrams/sequence/sequenceRenderer.js +++ b/src/diagrams/sequence/sequenceRenderer.js @@ -342,7 +342,7 @@ const drawMessage = function(elem, startx, stopx, verticalPos, msg, sequenceInde } // add node number - if (conf.showSequenceNumbers) { + if (sequenceDb.showSequenceNumbers() || conf.showSequenceNumbers) { line.attr('marker-start', 'url(' + url + '#sequencenumber)'); g.append('text') .attr('x', startx)