mermaid-js · knsv · May 30, 2020 · May 16, 2020 · May 16, 2020 · May 16, 2020
diff --git a/cypress/platform/current.html b/cypress/platform/current.html
@@ -19,17 +19,17 @@
   <body>
     <h1>info below</h1>
       <div class="mermaid" style="width: 100%; height: 20%;">
-      stateDiagram-v2
-
-      [*] --> S1
-      state "Some long name" as S1: The
+    flowchart TD
+        db[(PostgreSQL<br/>database)]
+        broker{RabbitMQ<br/>broker}
+        db --> broker
+        box --> broker
       </div>
-      <div class="mermaid" style="width: 100%; height: 20%;">
-      stateDiagram-v2
+        broker --> db
+        broker --> box
+        db --> broker
+        box --> broker
 
-      [*] --> S1
-      state "Some long name" as S1: The description\nwith multiple lines
-      </div>
       <div class="mermaid2" style="width: 50%; height: 20%;">
 flowchart LR
     A{{A}}-- apa -->B{{B}};
@@ -59,11 +59,6 @@ <h1>info below</h1>
         State4 --> [*]
       }
       </div>
-      <div class="mermaid2 mermaid-apa" style="width: 100%; height: 20%;">
-        stateDiagram
-        [*] --> Still
-        Still --> [*]
-      </div>
       <div class="mermaid2" style="width: 100%; height: 100%;">
         stateDiagram-v2
         [*] --> Still

diff --git a/docs/flowchart.md b/docs/flowchart.md
@@ -65,97 +65,97 @@ 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 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.*
 
 ### 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,106 +235,106 @@ 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
 ```
 
 ### Chaining of links
 
 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"

diff --git a/docs/index.html b/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>
-<!--  -->
+<!--  -->
diff --git a/package.json b/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": [

diff --git a/src/dagre-wrapper/edges.js b/src/dagre-wrapper/edges.js
@@ -107,8 +107,24 @@ 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]));
+    logger.info(
+      'Last point',
+      points[points.length - 1],
+      head,
+      head.intersect(points[points.length - 1])
+    );
+    points.push(head.intersect(points[points.length - 1]));
+  }
   if (edge.toCluster) {
     logger.trace('edge', edge);
     logger.trace('to cluster', clusterDb[edge.toCluster]);