Merge branch 'master' into develop

cypress/platform/current.html

@@ -59,8 +59,8 @@ graph LR
         State4 --> [*]
       }
       </div>
-      <div class="mermaid2 mermaid-apa" style="width: 100%; height: 20%;">
-        stateDiagram
+      <div class="mermaid mermaid-apa" style="width: 100%; height: 20%;">
+        stateDiagram-v2
         [*] --> Still
         Still --> [*]
       </div>

docs/flowchart.md

@@ -65,7 +65,7 @@ graph LR
     id1[This is the text in the box]
 ```
 ```mermaid
-flowchart LR
+graph LR
     id1[This is the text in the box]
 ```
 
@@ -73,66 +73,66 @@ flowchart LR
 ### A node with round edges
 
 ```
-flowchart LR
+graph LR
     id1(This is the text in the box)
 ```
 ```mermaid
-flowchart LR
+graph LR
     id1(This is the text in the box)
 ```
 
 ### A stadium-shaped node
 
 ```
-flowchart LR
+graph LR
     id1([This is the text in the box])
 ```
 ```mermaid
-flowchart LR
+graph LR
     id1([This is the text in the box])
 ```
 
 ### A node in a subroutine shape
 
 ```
-flowchart LR
+graph LR
     id1[[This is the text in the box]]
 ```
 ```mermaid
-flowchart LR
+graph LR
     id1[[This is the text in the box]]
 ```
 
 ### A node in a cylindrical shape
 
 ```
-flowchart LR
+graph LR
     id1[(Database)]
 ```
 ```mermaid
-flowchart LR
+graph LR
     id1[(Database)]
 ```
 
 ### A node in the form of a circle
 
 ```
-flowchart LR
+graph LR
     id1((This is the text in the circle))
 ```
 ```mermaid
-flowchart LR
+graph LR
     id1((This is the text in the circle))
 ```
 
 ### A node in an asymetric shape
 
 ```
-flowchart LR
+graph LR
     id1>This is the text in the box]
 ```
 ```mermaid
-flowchart LR
+graph LR
     id1>This is the text in the box]
 ```
 Currently only the shape above is possible and not its mirror. *This might change with future releases.*
@@ -140,22 +140,22 @@ Currently only the shape above is possible and not its mirror. *This might chang
 ### A node (rhombus)
 
 ```
-flowchart LR
+graph LR
     id1{This is the text in the box}
 ```
 ```mermaid
-flowchart LR
+graph LR
     id1{This is the text in the box}
 ```
 
 ### A hexagon node
 
 ```
-flowchart LR
+graph LR
     id1{{This is the text in the box}}
 ```
 ```mermaid
-flowchart LR
+graph LR
     id1{{This is the text in the box}}
 ```
 
@@ -209,22 +209,22 @@ Nodes can be connected with links/edges. It is possible to have different types
 ### A link with arrow head
 
 ```
-flowchart LR
+graph LR
     A-->B
 ```
 ```mermaid
-flowchart LR
+graph LR
     A-->B
 ```
 
 ### An open link
 
 ```
-flowchart LR
+graph LR
     A --- B
 ```
 ```mermaid
-flowchart LR
+graph LR
     A --- B
 ```
 
@@ -235,84 +235,84 @@ graph LR
     A-- This is the text! ---B
 ```
 ```mermaid
-flowchart LR
+graph LR
     A-- This is the text ---B
 ```
 
 or
 
 ```
-flowchart LR
+graph LR
     A---|This is the text|B
 ```
 ```mermaid
-flowchart LR
+graph LR
     A---|This is the text|B
 ```
 
 ### A link with arrow head and text
 
 ```
-flowchart LR
+graph LR
     A-->|text|B
 ```
 ```mermaid
-flowchart LR
+graph LR
     A-->|text|B
 ```
 
 or
 
 ```
-flowchart LR
+graph LR
     A-- text -->B
 ```
 ```mermaid
-flowchart LR
+graph LR
     A-- text -->B
 ```
 
 ### Dotted link
 
 ```
-flowchart LR;
+graph LR;
    A-.->B;
 ```
 ```mermaid
-flowchart LR;
+graph LR;
    A-.->B;
 ```
 
 ### Dotted link with text
 
 ```
-flowchart LR
+graph LR
    A-. text .-> B
 ```
 ```mermaid
-flowchart LR
+graph LR
    A-. text .-> B
 ```
 
 ### Thick link
 
 ```
-flowchart LR
+graph LR
    A ==> B
 ```
 ```mermaid
-flowchart LR
+graph LR
    A ==> B
 ```
 
 ### Thick link with text
 
 ```
-flowchart LR
+graph LR
    A == text ==> B
 ```
 ```mermaid
-flowchart LR
+graph LR
    A == text ==> B
 ```
 
@@ -320,21 +320,21 @@ flowchart LR
 
 It is possible declare many links in the same line as per below:
 ```
-flowchart LR
+graph LR
    A -- text --> B -- text2 --> C
 ```
 ```mermaid
-flowchart LR
+graph LR
    A -- text --> B -- text2 --> C
 ```
 
 It is also possible to declare multiple nodes links in the same line as per below:
 ```
-flowchart LR
+graph LR
    a --> b & c--> d
 ```
 ```mermaid
-flowchart LR
+graph LR
    a --> b & c--> d
 ```
 
@@ -399,11 +399,11 @@ flowchart LR
 It is possible to put text within quotes in order to render more troublesome characters. As in the example below:
 
 ```
-flowchart LR
+graph LR
     id1["This is the (text) in the box"]
 ```
 ```mermaid
-flowchart LR
+graph LR
     id1["This is the (text) in the box"]
 ```
 
@@ -412,11 +412,11 @@ flowchart LR
 It is possible to escape characters using the syntax examplified here.
 
 ```
-    flowchart LR
+    graph LR
         A["A double quote:#quot;"] -->B["A dec char:#9829;"]
 ```
 ```mermaid
-    flowchart LR
+    graph LR
         A["A double quote:#quot;"] -->B["A dec char:#9829;"]
 ```
 
@@ -534,7 +534,7 @@ Examples of tooltip usage below:
 ```
 
 ```
-flowchart LR;
+graph LR;
     A-->B;
     click A callback "Tooltip for a callback"
     click B "http://www.github.com" "This is a tooltip for a link"

docs/index.html

@@ -7,8 +7,8 @@
   <meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
-  <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@8.5.0/dist/mermaid.min.js"></script> -->
-  <script src="http://localhost:9000/mermaid.js"></script>
+  <script src="//cdn.jsdelivr.net/npm/mermaid@8.5.1/dist/mermaid.min.js"></script>
+  <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
@@ -70,4 +70,4 @@
   <scrpt src="//unpkg.com/docsify/lib/plugins/ga.min.js"></scrpt>
 </body>
 </html>
-<!--  -->
+<!--  -->

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "8.5.0",
+  "version": "8.5.1",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "dist/mermaid.core.js",
   "keywords": [

src/dagre-wrapper/edges.js

@@ -107,8 +107,19 @@ const intersection = (node, outsidePoint, insidePoint) => {
   }
 };
 
-export const insertEdge = function(elem, edge, clusterDb, diagramType) {
+//(edgePaths, e, edge, clusterDb, diagramtype, graph)
+export const insertEdge = function(elem, e, edge, clusterDb, diagramType, graph) {
   let points = edge.points;
+
+  const tail = graph.node(e.v);
+  var head = graph.node(e.w);
+
+  if (head.intersect && tail.intersect) {
+    points = points.slice(1, edge.points.length - 1);
+
+    points.unshift(tail.intersect(points[0]));
+    points.push(head.intersect(points[points.length - 1]));
+  }
   if (edge.toCluster) {
     logger.trace('edge', edge);
     logger.trace('to cluster', clusterDb[edge.toCluster]);

src/dagre-wrapper/index.js

@@ -124,7 +124,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
     const edge = graph.edge(e);
     log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);
 
-    insertEdge(edgePaths, edge, clusterDb, diagramtype);
+    insertEdge(edgePaths, e, edge, clusterDb, diagramtype, graph);
     positionEdgeLabel(edge);
   });
 

src/dagre-wrapper/nodes.js

@@ -11,7 +11,7 @@ const question = (parent, node) => {
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
-  const s = (w + h) * 0.9;
+  const s = w + h;
   const points = [
     { x: s / 2, y: 0 },
     { x: s, y: -s / 2 },
@@ -22,7 +22,8 @@ const question = (parent, node) => {
   const questionElem = insertPolygonShape(shapeSvg, s, s, points);
   updateNodeBounds(node, questionElem);
   node.intersect = function(point) {
-    return intersect.polugon(node, points, point);
+    logger.warn('Intersect called');
+    return intersect.polygon(node, points, point);
   };
 
   return shapeSvg;
@@ -414,7 +415,7 @@ const circle = (parent, node) => {
   updateNodeBounds(node, circle);
 
   node.intersect = function(point) {
-    return intersect.circle(node, point);
+    return intersect.circle(node, node.rx, point);
   };
 
   return shapeSvg;
@@ -464,7 +465,7 @@ const start = (parent, node) => {
   updateNodeBounds(node, circle);
 
   node.intersect = function(point) {
-    return intersect.circle(node, point);
+    return intersect.circle(node, 7, point);
   };
 
   return shapeSvg;
@@ -527,7 +528,7 @@ const end = (parent, node) => {
   updateNodeBounds(node, circle);
 
   node.intersect = function(point) {
-    return intersect.circle(node, point);
+    return intersect.circle(node, 7, point);
   };
 
   return shapeSvg;

src/mermaidAPI.js

@@ -551,7 +551,7 @@ function parse(text) {
       break;
     case 'flowchart-v2':
       flowDb.clear();
-      parser = flowRendererV2;
+      parser = flowParser;
       parser.parser.yy = flowDb;
       break;
     case 'sequence':