Support flowchart curve as option

sourojitd · Mar 17, 2018 · f1d2808 · f1d2808
1 parent 52d0605
commit f1d2808
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 9 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -9,9 +9,9 @@
 <body>
   <div class="mermaid">
 graph TB
-subgraph One
-	a1-->a2
-end
+	subgraph One
+		a1-->a2
+	end
   </div>
   <div class="mermaid">
       graph LR
@@ -143,6 +143,7 @@
       theme: 'forest',
       themeCSS: '.node rect { fill: red; }',
       logLevel: 3,
+      flowchart: { curve: 'basis' },
       gantt: { axisFormat: '%m/%d/%Y' },
       sequence: { actorMargin: 50 },
     });

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "8.0.0-beta.6",
+  "version": "8.0.0-beta.7",
   "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/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
@@ -5,6 +5,7 @@ import flowDb from './flowDb'
 import flow from './parser/flow'
 import dagreD3 from 'dagre-d3-renderer'
 import { logger } from '../../logger'
+import { interpolateToCurve } from '../../utils'
 
 const conf = {
 }
@@ -174,9 +175,11 @@ export const addEdges = function (edges, g) {
     edgeData.style = style
 
     if (typeof edge.interpolate !== 'undefined') {
-      edgeData.lineInterpolate = edge.interpolate
+      edgeData.curve = interpolateToCurve(edge.interpolate, d3.curveLinear)
     } else if (typeof edges.defaultInterpolate !== 'undefined') {
-      edgeData.lineInterpolate = edges.defaultInterpolate
+      edgeData.curve = interpolateToCurve(edges.defaultInterpolate, d3.curveLinear)
+    } else {
+      edgeData.curve = interpolateToCurve(conf.curve, d3.curveLinear)
     }
 
     if (typeof edge.text === 'undefined') {

diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
@@ -87,7 +87,9 @@ const config = {
      * **useMaxWidth** - Flag for setting whether or not a all available width should be used for
      * the diagram.
      */
-    useMaxWidth: true
+    useMaxWidth: true,
+
+    curve: 'linear'
   },
 
   /**

diff --git a/todo.md b/todo.md
@@ -1,8 +1,7 @@
 - Get familar with jison
 - git graph requires a blank line at the end. why?
 - Create a desktop client
-- Flowchart `interpolate` is useless because there is no rendering code using it
-
+- Replace all `lineInterpolate` with `curve`
 
 I have the feeling that the flowchart DSL is not very readable or expressive despite it is short.
 And it is too limited for complicated requirements such as: https://github.com/knsv/mermaid/issues/592