From f1d280859443e4d1f4f15d8b38a6486172666969 Mon Sep 17 00:00:00 2001 From: Tyler Long Date: Sat, 17 Mar 2018 23:05:14 +0800 Subject: [PATCH] Support flowchart curve as option --- dist/index.html | 7 ++++--- package.json | 2 +- src/diagrams/flowchart/flowRenderer.js | 7 +++++-- src/mermaidAPI.js | 4 +++- todo.md | 3 +-- 5 files changed, 14 insertions(+), 9 deletions(-) diff --git a/dist/index.html b/dist/index.html index d0549ac93..4af8402e8 100644 --- a/dist/index.html +++ b/dist/index.html @@ -9,9 +9,9 @@
graph TB -subgraph One - a1-->a2 -end + subgraph One + a1-->a2 + end
graph LR @@ -143,6 +143,7 @@ Class08 <--> C2: Cool label 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 index 3201cb12b..052697175 100644 --- 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 index cd589d28f..f4289a8a6 100644 --- 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 index ec0c26fda..07c7a24e9 100644 --- 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 index 2ed550c5c..6f3a087fa 100644 --- 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