Adding trapezoid and inverse trapezoid vertex options.

dist/index.html

@@ -106,7 +106,8 @@
     </div>
   <div class="mermaid">
     graph TD
-    A[Christmas] -->|Get money| B(Go shopping)
+    A[/[Christmas]\]
+    A -->|Get money| B[\[Go shopping]/]
     B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br/>sssssssssssssssssssssssssss}
     C -->|One| D[Laptop]
     C -->|Two| E[iPhone]

src/diagrams/flowchart/flowRenderer.js

@@ -105,6 +105,12 @@ export const addVertices = function (vert, g) {
       case 'odd':
         _shape = 'rect_left_inv_arrow'
         break
+      case 'trapezoid':
+        _shape = 'trapezoid'
+        break
+      case 'inv_trapezoid':
+        _shape = 'inv_trapezoid'
+        break
       case 'odd_right':
         _shape = 'rect_left_inv_arrow'
         break
@@ -335,6 +341,48 @@ export const draw = function (text, id) {
     return shapeSvg
   }
 
+  // Add custom shape for box with inverted arrow on left side
+  render.shapes().trapezoid = function (parent, bbox, node) {
+    const w = bbox.width
+    const h = bbox.height
+    const points = [
+      { x: -h / 2, y: 0 },
+      { x: w + h / 2, y: 0 },
+      { x: w, y: -h },
+      { x: 0, y: -h }
+    ]
+    const shapeSvg = parent.insert('polygon', ':first-child')
+      .attr('points', points.map(function (d) {
+        return d.x + ',' + d.y
+      }).join(' '))
+      .attr('transform', 'translate(' + (-w / 2) + ',' + (h * 2 / 4) + ')')
+    node.intersect = function (point) {
+      return dagreD3.intersect.polygon(node, points, point)
+    }
+    return shapeSvg
+  }
+
+  // Add custom shape for box with inverted arrow on left side
+  render.shapes().inv_trapezoid = function (parent, bbox, node) {
+    const w = bbox.width
+    const h = bbox.height
+    const points = [
+      { x: 0, y: 0 },
+      { x: w, y: 0 },
+      { x: w + h / 2, y: -h },
+      { x: -h / 2, y: -h }
+    ]
+    const shapeSvg = parent.insert('polygon', ':first-child')
+      .attr('points', points.map(function (d) {
+        return d.x + ',' + d.y
+      }).join(' '))
+      .attr('transform', 'translate(' + (-w / 2) + ',' + (h * 2 / 4) + ')')
+    node.intersect = function (point) {
+      return dagreD3.intersect.polygon(node, points, point)
+    }
+    return shapeSvg
+  }
+
   // Add custom shape for box with inverted arrow on right side
   render.shapes().rect_right_inv_arrow = function (parent, bbox, node) {
     const w = bbox.width

src/diagrams/flowchart/parser/flow.jison

@@ -66,8 +66,10 @@
 \%                    return 'PCT';
 "="                   return 'EQUALS';
 \=                    return 'EQUALS';
+"\\"                  return 'BACKSLASH';
+"/"                   return 'SLASH';
 [A-Za-z]+             return 'ALPHA';
-[!"#$%&'*+,-.`?\\_/]  return 'PUNCTUATION';
+[!"#$%&'*+,-.`?_]  return 'PUNCTUATION';
 [\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6]|
 [\u00F8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377]|
 [\u037A-\u037D\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5]|
@@ -264,6 +266,14 @@ vertex:  alphaNum SQS text SQE
         {$$ = $1;yy.addVertex($1,$3,'odd');}
     | alphaNum TAGEND text SQE spaceList
         {$$ = $1;yy.addVertex($1,$3,'odd');}
+    | alphaNum SQS SLASH SQS text SQE BACKSLASH SQE
+        {$$ = $1;yy.addVertex($1,$5,'trapezoid');}
+    | alphaNum SQS SLASH SQS text SQE BACKSLASH SQE spaceList
+        {$$ = $1;yy.addVertex($1,$5,'trapezoid');}
+    | alphaNum SQS BACKSLASH SQS text SQE SLASH SQE
+        {$$ = $1;yy.addVertex($1,$5,'inv_trapezoid');}
+    | alphaNum SQS BACKSLASH SQS text SQE SLASH SQE spaceList
+        {$$ = $1;yy.addVertex($1,$5,'inv_trapezoid');}
 /*  | alphaNum SQS text TAGSTART
         {$$ = $1;yy.addVertex($1,$3,'odd_right');}
     | alphaNum SQS text TAGSTART spaceList
@@ -446,7 +456,7 @@ textToken      : textNoTagsToken | TAGSTART | TAGEND | '=='  | '--' | PCT | DEFA
 
 textNoTagsToken: alphaNumToken | SPACE | MINUS | keywords ;
 
-alphaNumToken  : ALPHA | PUNCTUATION | UNICODE_TEXT | NUM | COLON | COMMA | PLUS | EQUALS | MULT | DOT | BRKT ;
+alphaNumToken  : ALPHA | PUNCTUATION | SLASH | BACKSLASH | UNICODE_TEXT | NUM | COLON | COMMA | PLUS | EQUALS | MULT | DOT | BRKT ;
 
 graphCodeTokens:  PIPE | PS | PE | SQS | SQE | DIAMOND_START | DIAMOND_STOP | TAG_START | TAG_END | ARROW_CROSS | ARROW_POINT | ARROW_CIRCLE | ARROW_OPEN | QUOTE | SEMI ;
 %%