- 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!
@@ -36,7 +41,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
fontFamily: '"Noto Sans SC", sans-serif'
});
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)