6638: add support for additional message types for sequence diagram

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>

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

@@ -88,6 +88,10 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 ":"                             								return 'TXT';
 "+"                                                             return '+';
 "-"                                                             return '-';
+"=>"                                                            return 'SOLID_ARROW_TOP';
+"==>"                                                           return 'SOLID_ARROW_BOTTOM';
+"=->"                                                           return 'STICK_ARROW_TOP';
+"==->"                                                          return 'STICK_ARROW_BOTTOM';
 <<EOF>>                                                         return 'NEWLINE';
 .                                                               return 'INVALID';
 
@@ -313,6 +317,10 @@ signaltype
 	: SOLID_OPEN_ARROW  { $$ = yy.LINETYPE.SOLID_OPEN; }
 	| DOTTED_OPEN_ARROW { $$ = yy.LINETYPE.DOTTED_OPEN; }
 	| SOLID_ARROW       { $$ = yy.LINETYPE.SOLID; }
+	| SOLID_ARROW_TOP    { $$ = yy.LINETYPE.SOLID_TOP; }
+	| SOLID_ARROW_BOTTOM { $$ = yy.LINETYPE.SOLID_BOTTOM; }
+	| STICK_ARROW_TOP    { $$ = yy.LINETYPE.STICK_TOP; }
+	| STICK_ARROW_BOTTOM { $$ = yy.LINETYPE.STICK_BOTTOM; }
   | BIDIRECTIONAL_SOLID_ARROW       { $$ = yy.LINETYPE.BIDIRECTIONAL_SOLID; }
 	| DOTTED_ARROW      { $$ = yy.LINETYPE.DOTTED; }
 	| BIDIRECTIONAL_DOTTED_ARROW      { $$ = yy.LINETYPE.BIDIRECTIONAL_DOTTED; }

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

@@ -62,6 +62,10 @@ const LINETYPE = {
   PAR_OVER_START: 32,
   BIDIRECTIONAL_SOLID: 33,
   BIDIRECTIONAL_DOTTED: 34,
+  SOLID_TOP: 41,
+  SOLID_BOTTOM: 42,
+  STICK_TOP: 43,
+  STICK_BOTTOM: 44,
 } as const;
 
 const ARROWTYPE = {

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

@@ -456,6 +456,20 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
   line.attr('stroke-width', 2);
   line.attr('stroke', 'none'); // handled by theme/css anyway
   line.style('fill', 'none'); // remove any fill colour
+
+  if (type === diagObj.db.LINETYPE.SOLID_TOP) {
+    line.attr('marker-end', 'url(' + url + '#solidTopArrowHead)');
+  }
+  if (type === diagObj.db.LINETYPE.SOLID_BOTTOM) {
+    line.attr('marker-end', 'url(' + url + '#solidBottomArrowHead)');
+  }
+  if (type === diagObj.db.LINETYPE.STICK_TOP) {
+    line.attr('marker-end', 'url(' + url + '#stickTopArrowHead)');
+  }
+  if (type === diagObj.db.LINETYPE.STICK_BOTTOM) {
+    line.attr('marker-end', 'url(' + url + '#stickBottomArrowHead)');
+  }
+
   if (type === diagObj.db.LINETYPE.SOLID || type === diagObj.db.LINETYPE.DOTTED) {
     line.attr('marker-end', 'url(' + url + '#arrowhead)');
   }
@@ -824,6 +838,10 @@ export const draw = async function (_text: string, id: string, _version: string,
   svgDraw.insertArrowCrossHead(diagram);
   svgDraw.insertArrowFilledHead(diagram);
   svgDraw.insertSequenceNumber(diagram);
+  svgDraw.insertSolidTopArrowHead(diagram);
+  svgDraw.insertSolidBottomArrowHead(diagram);
+  svgDraw.insertStickTopArrowHead(diagram);
+  svgDraw.insertStickBottomArrowHead(diagram);
 
   /**
    * @param msg - The message to draw.
@@ -1035,6 +1053,10 @@ export const draw = async function (_text: string, id: string, _version: string,
         diagObj.db.LINETYPE.SOLID_OPEN,
         diagObj.db.LINETYPE.DOTTED_OPEN,
         diagObj.db.LINETYPE.SOLID,
+        diagObj.db.LINETYPE.SOLID_TOP,
+        diagObj.db.LINETYPE.SOLID_BOTTOM,
+        diagObj.db.LINETYPE.STICK_TOP,
+        diagObj.db.LINETYPE.STICK_BOTTOM,
         diagObj.db.LINETYPE.DOTTED,
         diagObj.db.LINETYPE.SOLID_CROSS,
         diagObj.db.LINETYPE.DOTTED_CROSS,
@@ -1430,6 +1452,10 @@ const buildMessageModel = function (msg, actors, diagObj) {
       diagObj.db.LINETYPE.SOLID_OPEN,
       diagObj.db.LINETYPE.DOTTED_OPEN,
       diagObj.db.LINETYPE.SOLID,
+      diagObj.db.LINETYPE.SOLID_TOP,
+      diagObj.db.LINETYPE.SOLID_BOTTOM,
+      diagObj.db.LINETYPE.STICK_TOP,
+      diagObj.db.LINETYPE.STICK_BOTTOM,
       diagObj.db.LINETYPE.DOTTED,
       diagObj.db.LINETYPE.SOLID_CROSS,
       diagObj.db.LINETYPE.DOTTED_CROSS,
@@ -1480,7 +1506,14 @@ const buildMessageModel = function (msg, actors, diagObj) {
      * Shorten the length of arrow at the end and move the marker forward (using refX) to have a clean arrowhead
      * This is not required for open arrows that don't have arrowheads
      */
-    if (![diagObj.db.LINETYPE.SOLID_OPEN, diagObj.db.LINETYPE.DOTTED_OPEN].includes(msg.type)) {
+    if (
+      ![
+        diagObj.db.LINETYPE.SOLID_OPEN,
+        diagObj.db.LINETYPE.DOTTED_OPEN,
+        diagObj.db.LINETYPE.STICK_TOP,
+        diagObj.db.LINETYPE.STICK_BOTTOM,
+      ].includes(msg.type)
+    ) {
       stopx += adjustValue(3);
     }
 

packages/mermaid/src/diagrams/sequence/svgDraw.js

@@ -1099,6 +1099,77 @@ const _drawMenuItemTextCandidateFunc = (function () {
   };
 })();
 
+/**
+ * Setup arrow head and define the marker. The result is appended to the svg.
+ *
+ * @param elem
+ */
+export const insertSolidTopArrowHead = function (elem) {
+  elem
+    .append('defs')
+    .append('marker')
+    .attr('id', 'solidTopArrowHead')
+    .attr('refX', 7.9)
+    .attr('refY', 5.25)
+    .attr('markerUnits', 'userSpaceOnUse')
+    .attr('markerWidth', 12)
+    .attr('markerHeight', 12)
+    .attr('orient', 'auto-start-reverse')
+    .append('path')
+    .attr('d', 'M 0 -0.25 L 10 6 L 0 6 z'); // this is actual shape for arrowhead
+};
+
+export const insertSolidBottomArrowHead = function (elem) {
+  elem
+    .append('defs')
+    .append('marker')
+    .attr('id', 'solidBottomArrowHead')
+    .attr('refX', 7.9)
+    .attr('refY', 4.7)
+    .attr('markerUnits', 'userSpaceOnUse')
+    .attr('markerWidth', 12)
+    .attr('markerHeight', 12)
+    .attr('orient', 'auto-start-reverse')
+    .append('path')
+    .attr('d', 'M 0.1 10 L 10 4 L 0 4 z');
+};
+
+export const insertStickTopArrowHead = function (elem) {
+  elem
+    .append('defs')
+    .append('marker')
+    .attr('id', ' stickTopArrowHead')
+    .attr('refX', 10.5)
+    .attr('refY', 10)
+    .attr('markerUnits', 'userSpaceOnUse')
+    .attr('markerWidth', 12)
+    .attr('markerHeight', 12)
+    .attr('orient', 'auto-start-reverse')
+    .append('path')
+    .attr('d', 'M 0 0 L 10 10')
+    .attr('stroke', 'black')
+    .attr('stroke-width', 1.5)
+    .attr('fill', 'none');
+};
+
+export const insertStickBottomArrowHead = function (elem) {
+  elem
+    .append('defs')
+    .append('marker')
+    .attr('id', ' stickBottomArrowHead')
+    .attr('refX', 10)
+    .attr('refY', 5.25)
+    .attr('markerUnits', 'userSpaceOnUse')
+    .attr('markerWidth', 12)
+    .attr('markerHeight', 12)
+    .attr('orient', 'auto-start-reverse')
+    .append('path')
+    .attr('d', 'M 10 5 L 0 10') // Diagonal line down from (10,5) to (0,10)
+    .attr('stroke', 'black')
+    .attr('stroke-width', 1.5)
+    .attr('fill', 'none');
+};
+
 export default {
   drawRect,
   drawText,
@@ -1121,4 +1192,9 @@ export default {
   getNoteRect,
   fixLifeLineHeights,
   sanitizeUrl,
+
+  insertSolidTopArrowHead,
+  insertSolidBottomArrowHead,
+  insertStickTopArrowHead,
+  insertStickBottomArrowHead,
 };