Make changes to allow for decimal values for sequence numbers, added corresponding unit tests, and updated docs.

Author: milesspencer35

cypress/integration/rendering/sequencediagram.spec.js

@@ -242,6 +242,18 @@ describe('Sequence diagram', () => {
       `
     );
   });
+  it('should render a sequence diagram with sequence numbers that are decimals and increase by a decimal value', () => {
+    imgSnapshotTest(
+      `
+      sequenceDiagram
+      autonumber 10.1 .01
+      Alice->Bob: Hello Bob, how are you?
+      Bob-->Alice: I am good thanks!
+      Alice->Bob: That is good to hear!
+      Bob->Alice: See you later!
+    `
+    );
+  });
   describe('font settings', () => {
     it('should render different note fonts when configured', () => {
       imgSnapshotTest(

docs/syntax/sequenceDiagram.md

@@ -895,6 +895,16 @@ sequenceDiagram
     Bob-->>John: Jolly good!
 ```
 
+### Start and Increment values (v\<MERMAID_RELEASE_VERSION>+)
+
+It is possible to specify a starting value and an increment value for automatic numbering. Both the starting value and increment value can include decimals up to the hundredths place.
+
+Use the following syntax in your diagram definition:
+
+```
+autonumber <start> <increment>
+```
+
 ## Actor Menus
 
 Actors can have popup-menus containing individualized links to external pages. For example, if an actor represented a web service, useful links might include a link to the service health dashboard, repo containing the code for the service, or a wiki page describing the service.

packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison

@@ -27,7 +27,7 @@
 <INITIAL,ID,ALIAS,LINE>\#[^\n]*   															/* skip comments */
 \%%(?!\{)[^\n]*                                                 /* skip comments */
 [^\}]\%\%[^\n]*                                                 /* skip comments */
-[0-9]+(?=[ \n]+)       											return 'NUM';
+([0-9]+(\.[0-9]{1,2})?|\.[0-9]{1,2})(?=[ \n]+)    				return 'NUM';
 <ID>\@\{                                                        { this.begin('CONFIG'); return 'CONFIG_START'; }
 <CONFIG>[^\}]+                                                  { return 'CONFIG_CONTENT'; }
 <CONFIG>\}                                                      { this.popState(); this.popState(); return 'CONFIG_END'; }

packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js

@@ -479,6 +479,44 @@ Bob-->Alice: I am good thanks!`;
     expect(diagram.db.showSequenceNumbers()).toBe(true);
   });
 
+  it('should allow sequence numbers to have decimals up to the hundredths place', async () => {
+    const str = `
+        sequenceDiagram
+        autonumber 10.1 .01
+        Alice->Bob:Hello Bob, how are you?
+        Note right of Bob: Bob thinks
+        Bob-->Alice: I am good thanks!
+      `;
+
+    let error = false;
+    try {
+      const diagram = await Diagram.fromText(str);
+      await diagram.renderer.draw(str, 'tst', '1.2.3', diagram); // needs to be rendered for the correct value of visibility auto numbers
+    } catch (e) {
+      error = true;
+    }
+    expect(error).toBe(false);
+  });
+
+  it('should not allow sequence numbers to have decimals to the thousandths place or greater', async () => {
+    const str = `
+      sequenceDiagram
+      autonumber 10.001
+      Alice->Bob:Hello Bob, how are you?
+      Note right of Bob: Bob thinks
+      Bob-->Alice: I am good thanks!
+    `;
+
+    let error = false;
+    try {
+      const diagram = await Diagram.fromText(str);
+      await diagram.renderer.draw(str, 'tst', '1.2.3', diagram); // needs to be rendered for the correct value of visibility auto numbers
+    } catch (e) {
+      error = true;
+    }
+    expect(error).toBe(true);
+  });
+
   it('should handle a sequenceDiagram definition with a title:', async () => {
     const diagram = await Diagram.fromText(`
 sequenceDiagram
@@ -2211,6 +2249,40 @@ end`;
     expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
     expect(bounds.stopy).toBe(models.lastLoop().stopy);
   });
+
+  it('should increment the sequence number with a decimal in the hundredths place', async () => {
+    const str = `
+      sequenceDiagram
+      autonumber 10.01 .01
+      Alice->Bob:Hello Bob, how are you?
+      Bob-->Alice: I am good thanks!
+      Alice-->Bob: Have a good day!
+    `;
+
+    const diagram = await Diagram.fromText(str);
+    await diagram.renderer.draw(str, 'tst', '1.2.3', diagram); // needs to be rendered for the correct value of visibility auto numbers
+    expect(diagram.db.showSequenceNumbers()).toBe(true);
+    expect(diagram.db.getMessages()[1].msgModel.sequenceIndex).toBe(10.01);
+    expect(diagram.db.getMessages()[2].msgModel.sequenceIndex).toBe(10.02);
+    expect(diagram.db.getMessages()[3].msgModel.sequenceIndex).toBe(10.03);
+  });
+
+  it('should increment the sequence number with a decimal in the tenths place', async () => {
+    const str = `
+      sequenceDiagram
+      autonumber 10.1 .1
+      Alice->Bob:Hello Bob, how are you?
+      Bob-->Alice: I am good thanks!
+      Alice-->Bob: Have a good day!
+    `;
+
+    const diagram = await Diagram.fromText(str);
+    await diagram.renderer.draw(str, 'tst', '1.2.3', diagram); // needs to be rendered for the correct value of visibility auto numbers
+    expect(diagram.db.showSequenceNumbers()).toBe(true);
+    expect(diagram.db.getMessages()[1].msgModel.sequenceIndex).toBe(10.1);
+    expect(diagram.db.getMessages()[2].msgModel.sequenceIndex).toBe(10.2);
+    expect(diagram.db.getMessages()[3].msgModel.sequenceIndex).toBe(10.3);
+  });
 });
 
 describe('when rendering a sequenceDiagram with actor mirror activated', () => {

packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts

@@ -602,6 +602,15 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
       x = 3.5;
     }
 
+    let fontSize = '12px';
+    const sequenceIndexLength = sequenceIndex.toString().length;
+
+    if (sequenceIndexLength > 5) {
+      fontSize = '7px';
+    } else if (sequenceIndexLength > 3) {
+      fontSize = '9px';
+    }
+
     diagram
       .append('line')
       .attr('x1', startx)
@@ -617,7 +626,7 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
       .attr('x', startx)
       .attr('y', lineStartY + 4)
       .attr('font-family', 'sans-serif')
-      .attr('font-size', '12px')
+      .attr('font-size', fontSize)
       .attr('text-anchor', 'middle')
       .attr('class', 'sequenceNumber')
       .text(sequenceIndex)
@@ -1221,7 +1230,8 @@ export const draw = async function (_text: string, id: string, _version: string,
         diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED,
       ].includes(msg.type)
     ) {
-      sequenceIndex = sequenceIndex + sequenceIndexStep;
+      // hitting a floating point number error, so round to 2 decimal places
+      sequenceIndex = Math.round((sequenceIndex + sequenceIndexStep) * 100) / 100;
     }
     index++;
   }

packages/mermaid/src/docs/syntax/sequenceDiagram.md

@@ -607,6 +607,16 @@ sequenceDiagram
     Bob-->>John: Jolly good!
 ```
 
+### Start and Increment values (v<MERMAID_RELEASE_VERSION>+)
+
+It is possible to specify a starting value and an increment value for automatic numbering. Both the starting value and increment value can include decimals up to the hundredths place.
+
+Use the following syntax in your diagram definition:
+
+```
+autonumber <start> <increment>
+```
+
 ## Actor Menus
 
 Actors can have popup-menus containing individualized links to external pages. For example, if an actor represented a web service, useful links might include a link to the service health dashboard, repo containing the code for the service, or a wiki page describing the service.