added 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, nodeIndex) {
   const g = elem.append('g')
   const txtCenter = startx + (stopx - startx) / 2
 
@@ -259,6 +261,18 @@ 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 + '#nodenumber)')
+    g.append('text')
+      .attr('x', startx - 4)
+      .attr('y', verticalPos + 5)
+      .attr('font-family', 'sans-serif')
+      .attr('font-size', '16px')
+      .attr('class', 'nodeNumber')
+      .text(nodeIndex + 1)
+  }
 }
 
 export const drawActors = function (diagram, actors, actorKeys, verticalPos) {
@@ -331,6 +345,7 @@ export const draw = function (text, id) {
   // The arrow head definition is attached to the svg once
   svgDraw.insertArrowHead(diagram)
   svgDraw.insertArrowCrossHead(diagram)
+  svgDraw.insertNodeNumber(diagram)
 
   function activeEnd (msg, verticalPos) {
     const activationData = bounds.endActivation(msg)
@@ -346,7 +361,7 @@ export const draw = function (text, id) {
   // const lastMsg
 
   // Draw the messages/signals
-  messages.forEach(function (msg) {
+  messages.forEach(function (msg, nodeIndex) {
     let loopData
     switch (msg.type) {
       case parser.yy.LINETYPE.NOTE:
@@ -440,7 +455,7 @@ 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, nodeIndex)
           const allBounds = fromBounds.concat(toBounds)
           bounds.insert(Math.min.apply(null, allBounds), verticalPos, Math.max.apply(null, allBounds), verticalPos)
         } catch (e) {

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 insertNodeNumber = function (elem) {
+  elem.append('defs').append('marker')
+    .attr('id', 'nodenumber')
+    .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', 10)
+    // .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,
+  insertNodeNumber,
   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;
+$nodeNumberColor: white;
 
 /* Gantt chart variables */
 

src/themes/default/index.scss

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

src/themes/forest/index.scss

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

src/themes/neutral/index.scss

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

src/themes/sequence.scss

@@ -29,6 +29,14 @@ text.actor {
   fill: $signalColor;
 }
 
+.nodeNumber {
+  fill: $nodeNumberColor;
+}
+
+#nodenumber {
+  fill: $signalColor;
+}
+
 #crosshead path {
   fill: $signalColor !important;
   stroke: $signalColor !important;