Merge pull request #1259 from mermaid-js/bug/1257_autonumbering

#1257 Adding the autonumber keyword + tests and docs

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!
+      `,
+      {}
+      );
+    });
   });
 });

cypress/platform/current.html

@@ -20,10 +20,15 @@
     <h1>info below</h1>
     <div style="display: flex;width: 100%; height: 100%">
       <div class="mermaid" style="width: 100%; height: 100%">
-        stateDiagram
+        sequenceDiagram
-
+        Alice->>John: Hello John, how are you?
-        NotFound --> NotFound: Status
+        loop Healthcheck
-              NotFound --> NotFound: Stop
+            John->>John: Fight against hypochondria
+        end
+        Note right of John: Rational thoughts!
+        John-->>Alice: Great!
+        John->>Bob: How about you?
+        Bob-->>John: Jolly good!
 
       </div>
 </div>
@@ -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'
       });

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:
+```
+    <script>
+      mermaid.initialize({
+        sequence: { showSequenceNumbers: true },
+      });
+    </script>
+```
+
+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

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'

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,

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' +

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)