Sequence numbers

src/diagrams/sequence/sequenceRenderer.js

@@ -33,7 +33,9 @@ const conf = {
   activationWidth: 10,
 
   // text placement as: tspan | fo | old only text as before
-  textPlacement: 'tspan'
+  textPlacement: 'tspan',
+
+  showSequenceNumbers: false
 }
 
 export const bounds = {
@@ -203,7 +205,7 @@ const drawNote = function (elem, startx, verticalPos, msg, forceWidth) {
  * @param txtCenter
  * @param msg
  */
-const drawMessage = function (elem, startx, stopx, verticalPos, msg) {
+const drawMessage = function (elem, startx, stopx, verticalPos, msg, sequenceIndex) {
   const g = elem.append('g')
   const txtCenter = startx + (stopx - startx) / 2
 
@@ -259,6 +261,20 @@ const drawMessage = function (elem, startx, stopx, verticalPos, msg) {
   if (msg.type === parser.yy.LINETYPE.SOLID_CROSS || msg.type === parser.yy.LINETYPE.DOTTED_CROSS) {
     line.attr('marker-end', 'url(' + url + '#crosshead)')
   }
+
+  // add node number
+  if (conf.showSequenceNumbers) {
+    line.attr('marker-start', 'url(' + url + '#sequencenumber)')
+    g.append('text')
+      .attr('x', startx)
+      .attr('y', verticalPos + 4)
+      .attr('font-family', 'sans-serif')
+      .attr('font-size', '12px')
+      .attr('text-anchor', 'middle')
+      .attr('textLength', '16px')
+      .attr('class', 'sequenceNumber')
+      .text(sequenceIndex)
+  }
 }
 
 export const drawActors = function (diagram, actors, actorKeys, verticalPos) {
@@ -331,6 +347,7 @@ export const draw = function (text, id) {
   // The arrow head definition is attached to the svg once
   svgDraw.insertArrowHead(diagram)
   svgDraw.insertArrowCrossHead(diagram)
+  svgDraw.insertSequenceNumber(diagram)
 
   function activeEnd (msg, verticalPos) {
     const activationData = bounds.endActivation(msg)
@@ -346,6 +363,7 @@ export const draw = function (text, id) {
   // const lastMsg
 
   // Draw the messages/signals
+  let sequenceIndex = 1
   messages.forEach(function (msg) {
     let loopData
     switch (msg.type) {
@@ -440,13 +458,24 @@ export const draw = function (text, id) {
           stopx = toBounds[toIdx]
 
           const verticalPos = bounds.getVerticalPos()
-          drawMessage(diagram, startx, stopx, verticalPos, msg)
+          drawMessage(diagram, startx, stopx, verticalPos, msg, sequenceIndex)
           const allBounds = fromBounds.concat(toBounds)
           bounds.insert(Math.min.apply(null, allBounds), verticalPos, Math.max.apply(null, allBounds), verticalPos)
         } catch (e) {
           logger.error('error while drawing message', e)
         }
     }
+    // Increment sequence counter if msg.type is a line (and not another event like activation or note, etc)
+    if ([
+      parser.yy.LINETYPE.SOLID_OPEN,
+      parser.yy.LINETYPE.DOTTED_OPEN,
+      parser.yy.LINETYPE.SOLID,
+      parser.yy.LINETYPE.DOTTED,
+      parser.yy.LINETYPE.SOLID_CROSS,
+      parser.yy.LINETYPE.DOTTED_CROSS
+    ].includes(msg.type)) {
+      sequenceIndex++
+    }
   })
 
   if (conf.mirrorActors) {

src/diagrams/sequence/svgDraw.js

@@ -181,6 +181,23 @@ export const insertArrowHead = function (elem) {
     .append('path')
     .attr('d', 'M 0,0 V 4 L6,2 Z') // this is actual shape for arrowhead
 }
+/**
+ * Setup node number. The result is appended to the svg.
+ */
+export const insertSequenceNumber = function (elem) {
+  elem.append('defs').append('marker')
+    .attr('id', 'sequencenumber')
+    .attr('refX', 15)
+    .attr('refY', 15)
+    .attr('markerWidth', 60)
+    .attr('markerHeight', 40)
+    .attr('orient', 'auto')
+    .append('circle')
+    .attr('cx', 15)
+    .attr('cy', 15)
+    .attr('r', 6)
+    // .style("fill", '#f00');
+}
 /**
  * Setup arrow head and define the marker. The result is appended to the svg.
  */
@@ -307,6 +324,7 @@ export default {
   drawActivation,
   drawLoop,
   insertArrowHead,
+  insertSequenceNumber,
   insertArrowCrossHead,
   getTextObj,
   getNoteRect

src/mermaidAPI.js

@@ -153,7 +153,13 @@ const config = {
      * **useMaxWidth** - when this flag is set the height and width is set to 100% and is then scaling with the
      * available space if not the absolute space required is used
      */
-    useMaxWidth: true
+    useMaxWidth: true,
+
+    /**
+     * **showSequenceNumbers** - this will show the node numbers
+     */
+    showSequenceNumbers: false
+
   },
 
   /** ### gantt

src/themes/dark/index.scss

@@ -30,6 +30,7 @@ $labelBoxBorderColor: $actorBorder;
 $labelTextColor: $mainContrastColor;
 $noteBorderColor: $border2;
 $noteBkgColor: #fff5ad;
+$sequenceNumberColor: white;
 
 /* Gantt chart variables */
 

src/themes/default/index.scss

@@ -28,6 +28,7 @@ $labelBoxBorderColor: $actorBorder;
 $labelTextColor: $actorTextColor;
 $noteBorderColor: $border2;
 $noteBkgColor: #fff5ad;
+$sequenceNumberColor: white;
 
 /* Gantt chart variables */
 

src/themes/forest/index.scss

@@ -29,6 +29,7 @@ $labelBoxBorderColor: #326932;
 $labelTextColor: $actorTextColor;
 $noteBorderColor: $border2;
 $noteBkgColor: #fff5ad;
+$sequenceNumberColor: white;
 
 /* Gantt chart variables */
 

src/themes/neutral/index.scss

@@ -33,6 +33,7 @@ $labelBoxBorderColor: $actorBorder;
 $labelTextColor: white;
 $noteBorderColor: darken($note, 60%);
 $noteBkgColor: $note;
+$sequenceNumberColor: white;
 
 /* Gantt chart variables */
 

src/themes/sequence.scss

@@ -29,6 +29,14 @@ text.actor {
   fill: $signalColor;
 }
 
+.sequenceNumber {
+  fill: $sequenceNumberColor;
+}
+
+#sequencenumber {
+  fill: $signalColor;
+}
+
 #crosshead path {
   fill: $signalColor !important;
   stroke: $signalColor !important;