From a8f9e3f0b034a09b9ddc24ec72c5284221b08326 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Sun, 3 May 2020 13:31:09 +0200 Subject: [PATCH 1/4] #1386 Adding some docs and adjusted sizing for state diagrams --- docs/flowchart.md | 45 +++++++++++++++- docs/stateDiagram.md | 62 +++++++++++++---------- src/diagrams/flowchart/flowRenderer-v2.js | 2 +- src/diagrams/state/stateRenderer-v2.js | 23 +++++++-- 4 files changed, 99 insertions(+), 33 deletions(-) diff --git a/docs/flowchart.md b/docs/flowchart.md index 1e3d00510..970f494e7 100644 --- a/docs/flowchart.md +++ b/docs/flowchart.md @@ -35,6 +35,9 @@ Possible directions are: * TD - same as TB +## flowchart + +This renders a flowchart in the same way as graph but with a new rendering method opening up for long requested features as more arrow types, multi directional arrows and link to and from subgraphs. Apart from the graph type flowchart/graph the syntax is the same. This is currently experimental but when the beta persioid is over both the graph and flowchart keyswords will render in the new way. This means it is ok to start betat testing flowcharts. ## Nodes & shapes @@ -74,7 +77,7 @@ graph LR id1(This is the text in the box) ``` ```mermaid -graph LR +flowchart LR id1(This is the text in the box) ``` @@ -85,7 +88,7 @@ graph LR id1([This is the text in the box]) ``` ```mermaid -graph LR +flowchart LR id1([This is the text in the box]) ``` @@ -437,6 +440,44 @@ graph TB end ``` +## Beta: flowcharts + +With the graphtype flowcharts it is also possible to set edges to and from subgraphs as in the graph below. + +``` +flowchart TB + c1-->a2 + subgraph one + a1-->a2 + end + subgraph two + b1-->b2 + end + subgraph three + c1-->c2 + end + one --> two + three --> two + two --> c2 + ``` + +```mermaid +flowchart TB + c1-->a2 + subgraph one + a1-->a2 + end + subgraph two + b1-->b2 + end + subgraph three + c1-->c2 + end + one --> two + three --> two + two --> c2 + ``` + ## Interaction It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`. diff --git a/docs/stateDiagram.md b/docs/stateDiagram.md index 9f7199a4c..1fc71a0cb 100755 --- a/docs/stateDiagram.md +++ b/docs/stateDiagram.md @@ -5,7 +5,7 @@ Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make it easier for users to share diagrams between mermaid and plantUml. ```markdown -stateDiagram +stateDiagram-v2 [*] --> Still Still --> [*] @@ -15,6 +15,16 @@ stateDiagram Crash --> [*] ``` +```mermaid +stateDiagram-v2 + [*] --> Still + Still --> [*] + + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*] +``` ```mermaid stateDiagram [*] --> Still @@ -33,36 +43,36 @@ In state diagrams systems are described in terms of its states and how the syste A state can be declares in multiple ways. The simplest way is to define a state id as a description. ```markdown -stateDiagram +stateDiagram-v2 s1 ``` ```mermaid -stateDiagram +stateDiagram-v2 s1 ``` Another way is by using the state keyword with a description as per below: ```markdown -stateDiagram +stateDiagram-v2 state "This is a state description" as s2 ``` ```mermaid -stateDiagram +stateDiagram-v2 state "This is a state description" as s2 ``` Another way to define a state with a description is to define the state id followed by a colon and the description: ```markdown -stateDiagram +stateDiagram-v2 s2 : This is a state description ``` ```mermaid -stateDiagram +stateDiagram-v2 s2 : This is a state description ``` @@ -73,24 +83,24 @@ Transitions are path/edges when one state passes into another. This is represent When you define a transition between two states and the states are not already defined the undefined states are defined with the id from the transition. You can later add descriptions to states defined this way. ```markdown -stateDiagram +stateDiagram-v2 s1 --> s2 ``` ```mermaid -stateDiagram +stateDiagram-v2 s1 --> s2 ``` It is possible to add text to a transition. To describe what it represents. ```markdown -stateDiagram +stateDiagram-v2 s1 --> s2: A transition ``` ```mermaid -stateDiagram +stateDiagram-v2 s1 --> s2: A transition ``` @@ -99,13 +109,13 @@ stateDiagram There are two special states indicating the start and stop of the diagram. These are written with the [\*] syntax and the direction of the transition to it defines it either as a start or a stop state. ```markdown -stateDiagram +stateDiagram-v2 [*] --> s1 s1 --> [*] ``` ```mermaid -stateDiagram +stateDiagram-v2 [*] --> s1 s1 --> [*] ``` @@ -118,7 +128,7 @@ have several internal states. These are called composite states in this terminol In order to define a composite state you need to use the state keyword followed by and id and the body of the composite state between \{\}. See the example below: ```markdown -stateDiagram +stateDiagram-v2 [*] --> First state First { [*] --> second @@ -127,7 +137,7 @@ stateDiagram ``` ```mermaid -stateDiagram +stateDiagram-v2 [*] --> First state First { [*] --> second @@ -138,7 +148,7 @@ stateDiagram You can do this in several layers: ```markdown -stateDiagram +stateDiagram-v2 [*] --> First state First { @@ -157,7 +167,7 @@ stateDiagram ``` ```mermaid -stateDiagram-v2 +stateDiagram-v2-v2 [*] --> First state First { @@ -177,7 +187,7 @@ stateDiagram-v2 You can also define transitions also between composite states: ```markdown -stateDiagram +stateDiagram-v2 [*] --> First First --> Second First --> Third @@ -197,7 +207,7 @@ stateDiagram ``` ```mermaid -stateDiagram +stateDiagram-v2 [*] --> First First --> Second First --> Third @@ -223,7 +233,7 @@ stateDiagram It is possible to specify a fork in the diagram using <<fork>> <<join>>. ```markdown - stateDiagram + stateDiagram-v2 state fork_state <> [*] --> fork_state fork_state --> State2 @@ -237,7 +247,7 @@ It is possible to specify a fork in the diagram using <<fork>> <& ``` ```mermaid - stateDiagram + stateDiagram-v2 state fork_state <> [*] --> fork_state fork_state --> State2 @@ -258,7 +268,7 @@ Sometimes nothing says it better then a Post-it note. That is also the case in s Here you can choose to put the note to the *right of* or to the *left of* a node. ```markdown - stateDiagram + stateDiagram-v2 State1: The state with a note note right of State1 Important information! You can write @@ -269,7 +279,7 @@ Here you can choose to put the note to the *right of* or to the *left of* a node ``` ```mermaid - stateDiagram + stateDiagram-v2 State1: The state with a note note right of State1 Important information! You can write @@ -285,7 +295,7 @@ Here you can choose to put the note to the *right of* or to the *left of* a node As in plantUml you can specify concurrency using the -- symbol. ```markdown - stateDiagram + stateDiagram-v2 [*] --> Active state Active { @@ -304,7 +314,7 @@ As in plantUml you can specify concurrency using the -- symbol. ``` ```mermaid - stateDiagram + stateDiagram-v2 [*] --> Active state Active { @@ -327,7 +337,7 @@ As in plantUml you can specify concurrency using the -- symbol. Comments can be entered within a state diagram chart, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax ``` -stateDiagram +stateDiagram-v2 [*] --> Still Still --> [*] %% this is a comment diff --git a/src/diagrams/flowchart/flowRenderer-v2.js b/src/diagrams/flowchart/flowRenderer-v2.js index e382e0174..1ea4acd76 100644 --- a/src/diagrams/flowchart/flowRenderer-v2.js +++ b/src/diagrams/flowchart/flowRenderer-v2.js @@ -239,7 +239,7 @@ export const addEdges = function(edges, g) { edgeData.arrowheadStyle = 'fill: #333'; edgeData.labelpos = 'c'; - if (getConfig().flowchart.htmlLabels) { + if (getConfig().flowchart.htmlLabels && false) { // eslint-disable-line edgeData.labelType = 'html'; edgeData.label = '' + edge.text + ''; } else { diff --git a/src/diagrams/state/stateRenderer-v2.js b/src/diagrams/state/stateRenderer-v2.js index d14e46a09..5b7f894d9 100644 --- a/src/diagrams/state/stateRenderer-v2.js +++ b/src/diagrams/state/stateRenderer-v2.js @@ -286,10 +286,25 @@ export const draw = function(text, id) { svg.attr('width', width * 1.75); svg.attr('class', 'statediagram'); // diagram.attr('height', bounds.height * 3 + conf.padding * 2); - svg.attr( - 'viewBox', - `${bounds.x - conf.padding} ${bounds.y - conf.padding} ` + width + ' ' + height - ); + // svg.attr( + // 'viewBox', + // `${bounds.x - conf.padding} ${bounds.y - conf.padding} ` + width + ' ' + height + // ); + + const svgBounds = svg.node().getBBox(); + + if (conf.useMaxWidth) { + svg.attr('width', '100%'); + svg.attr('style', `max-width: ${width}px;`); + } else { + svg.attr('height', height); + svg.attr('width', width); + } + + // Ensure the viewBox includes the whole svgBounds area with extra space for padding + const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`; + logger.debug(`viewBox ${vBox}`); + svg.attr('viewBox', vBox); // Add label rects for non html labels if (!conf.htmlLabels) { From a20e6086ccb89ba3884c0d402613f2e26632dbb9 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Sun, 3 May 2020 21:52:44 +0200 Subject: [PATCH 2/4] #1386 Adding subroutine support for new rendering engine --- cypress/platform/current.html | 18 ++---------------- docs/flowchart.md | 34 ++++++++++++++++++++++++++++++++++ src/dagre-wrapper/nodes.js | 29 +++++++++++++++++++++++++++++ 3 files changed, 65 insertions(+), 16 deletions(-) diff --git a/cypress/platform/current.html b/cypress/platform/current.html index 6bcf91507..cb041e7f4 100644 --- a/cypress/platform/current.html +++ b/cypress/platform/current.html @@ -40,22 +40,8 @@ G-->c
-stateDiagram-v2 - [*] --> First - - state First { - [*] --> Second - - state Second { - [*] --> second - second --> Third - - state Third { - [*] --> third - third --> [*] - } - } - } +flowchart LR + id1[[This is the text in the box]]
diff --git a/docs/flowchart.md b/docs/flowchart.md index 970f494e7..2cfd1f191 100644 --- a/docs/flowchart.md +++ b/docs/flowchart.md @@ -359,6 +359,40 @@ graph TB B --> D ``` +## Beta: New arrow types + +When using flowchart instead of graph there is the are new types of arrows supported as per below: + +``` +flowchart LR + A --o B + B --x C +``` + +```mermaid +flowchart LR + A --o B + B --x C +``` + + +## Beta: multi directional arrows + +When using flowchart instead of graph there is the possibility to use multidirectional arrows. + +``` +flowchart LR + A o--o B + B <--> C + C x--x D +``` + +```mermaid +flowchart LR + A o--o B + B <--> C + C x--x D +``` ## Special characters that break syntax diff --git a/src/dagre-wrapper/nodes.js b/src/dagre-wrapper/nodes.js index 3a1370f3f..212d6b055 100644 --- a/src/dagre-wrapper/nodes.js +++ b/src/dagre-wrapper/nodes.js @@ -384,6 +384,34 @@ const circle = (parent, node) => { return shapeSvg; }; + +const subroutine = (parent, node) => { + const { shapeSvg, bbox } = labelHelper(parent, node); + + const w = bbox.width + node.padding; + const h = bbox.height + node.padding; + const points = [ + { x: 0, y: 0 }, + { x: w, y: 0 }, + { x: w, y: -h }, + { x: 0, y: -h }, + { x: 0, y: 0 }, + { x: -8, y: 0 }, + { x: w + 8, y: 0 }, + { x: w + 8, y: -h }, + { x: -8, y: -h }, + { x: -8, y: 0 } + ]; + const el = insertPolygonShape(shapeSvg, w, h, points); + updateNodeBounds(node, el); + + node.intersect = function(point) { + return intersect.polygon(node, point); + }; + + return shapeSvg; +}; + const start = (parent, node) => { const shapeSvg = parent .insert('g') @@ -487,6 +515,7 @@ const shapes = { start, end, note, + subroutine, fork: forkJoin, join: forkJoin }; From 9a3ec31191467cb4f650c1d0cebaf59f907babbb Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 6 May 2020 18:51:12 +0200 Subject: [PATCH 3/4] #1386 Adding support for click events and links --- cypress/platform/current.html | 12 ++- docs/flowchart.md | 136 ++++++++++++------------- src/dagre-wrapper/edges.js | 6 +- src/dagre-wrapper/nodes.js | 2 +- src/dagre-wrapper/shapes/util.js | 1 + src/diagrams/flowchart/flowRenderer.js | 2 +- src/mermaidAPI.js | 3 +- 7 files changed, 87 insertions(+), 75 deletions(-) diff --git a/cypress/platform/current.html b/cypress/platform/current.html index cb041e7f4..7bfa3ab8d 100644 --- a/cypress/platform/current.html +++ b/cypress/platform/current.html @@ -41,7 +41,14 @@
flowchart LR - id1[[This is the text in the box]] + A{{A}}-->B{{B}}; + click A callback "Tooltip" + click B "http://www.github.com" "This is a link" + +
+
+flowchart LR + A{{A}}-->B{{B}};
@@ -263,8 +270,9 @@ stateDiagram-v2 // sequenceDiagram: { actorMargin: 300 } // deprecated fontFamily: '"arial", sans-serif', curve: 'linear', + securityLevel: 'loose' }); - + function callback(){alert('It worked');} diff --git a/docs/flowchart.md b/docs/flowchart.md index 2cfd1f191..7e8218728 100644 --- a/docs/flowchart.md +++ b/docs/flowchart.md @@ -18,11 +18,11 @@ graph TD This declares a graph oriented from left to right (`LR`). ``` -graph LR +flowchart LR Start --> Stop ``` ```mermaid -graph LR +flowchart LR Start --> Stop ``` @@ -44,12 +44,12 @@ This renders a flowchart in the same way as graph but with a new rendering metho ### A node (default) ``` -graph LR +flowchart LR id ``` ```mermaid -graph LR +flowchart LR id ``` Note that the id is what is displayed in the box. @@ -61,11 +61,11 @@ found for the node that will be used. Also if you define edges for the node late one previously defined will be used when rendering the box. ``` -graph LR +flowchart LR id1[This is the text in the box] ``` ```mermaid -graph LR +flowchart LR id1[This is the text in the box] ``` @@ -73,7 +73,7 @@ graph LR ### A node with round edges ``` -graph LR +flowchart LR id1(This is the text in the box) ``` ```mermaid @@ -84,7 +84,7 @@ flowchart LR ### A stadium-shaped node ``` -graph LR +flowchart LR id1([This is the text in the box]) ``` ```mermaid @@ -95,44 +95,44 @@ flowchart LR ### A node in a subroutine shape ``` -graph LR +flowchart LR id1[[This is the text in the box]] ``` ```mermaid -graph LR +flowchart LR id1[[This is the text in the box]] ``` ### A node in a cylindrical shape ``` -graph LR +flowchart LR id1[(Database)] ``` ```mermaid -graph LR +flowchart LR id1[(Database)] ``` ### A node in the form of a circle ``` -graph LR +flowchart LR id1((This is the text in the circle)) ``` ```mermaid -graph LR +flowchart LR id1((This is the text in the circle)) ``` ### A node in an asymetric shape ``` -graph LR +flowchart LR id1>This is the text in the box] ``` ```mermaid -graph LR +flowchart 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) ``` -graph LR +flowchart LR id1{This is the text in the box} ``` ```mermaid -graph LR +flowchart LR id1{This is the text in the box} ``` ### A hexagon node ``` -graph LR +flowchart LR id1{{This is the text in the box}} ``` ```mermaid -graph LR +flowchart LR id1{{This is the text in the box}} ``` @@ -209,110 +209,110 @@ Nodes can be connected with links/edges. It is possible to have different types ### A link with arrow head ``` -graph LR +flowchart LR A-->B ``` ```mermaid -graph LR +flowchart LR A-->B ``` ### An open link ``` -graph LR +flowchart LR A --- B ``` ```mermaid -graph LR +flowchart LR A --- B ``` ### Text on links ``` -graph LR - A-- This is the text ---B +flowchart LR + A-- This is the text! ---B ``` ```mermaid -graph LR +flowchart LR A-- This is the text ---B ``` or ``` -graph LR +flowchart LR A---|This is the text|B ``` ```mermaid -graph LR +flowchart LR A---|This is the text|B ``` ### A link with arrow head and text ``` -graph LR +flowchart LR A-->|text|B ``` ```mermaid -graph LR +flowchart LR A-->|text|B ``` or ``` -graph LR +flowchart LR A-- text -->B ``` ```mermaid -graph LR +flowchart LR A-- text -->B ``` ### Dotted link ``` -graph LR; +flowchart LR; A-.->B; ``` ```mermaid -graph LR; +flowchart LR; A-.->B; ``` ### Dotted link with text ``` -graph LR +flowchart LR A-. text .-> B ``` ```mermaid -graph LR +flowchart LR A-. text .-> B ``` ### Thick link ``` -graph LR +flowchart LR A ==> B ``` ```mermaid -graph LR +flowchart LR A ==> B ``` ### Thick link with text ``` -graph LR +flowchart LR A == text ==> B ``` ```mermaid -graph LR +flowchart LR A == text ==> B ``` @@ -320,31 +320,31 @@ graph LR It is possible declare many links in the same line as per below: ``` -graph LR +flowchart LR A -- text --> B -- text2 --> C ``` ```mermaid -graph LR +flowchart LR A -- text --> B -- text2 --> C ``` It is also possible to declare multiple nodes links in the same line as per below: ``` -graph LR +flowchart LR a --> b & c--> d ``` ```mermaid -graph LR +flowchart LR a --> b & c--> d ``` You can then describe dependencies in a very expressive way. Like the onliner below: ``` -graph TB +flowchart TB A & B--> C & D ``` ```mermaid -graph TB +flowchart TB A & B--> C & D ``` If you describe the same diagram using the the basic syntax, it will take four lines. A @@ -352,7 +352,7 @@ word of warning, one could go overboard with this making the graph harder to rea markdown form. The Swedish word `lagom` comes to mind. It means, not to much and not to little. This goes for expressive syntaxes as well. ``` -graph TB +flowchart TB A --> C A --> D B --> C @@ -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: ``` -graph LR +flowchart LR id1["This is the (text) in the box"] ``` ```mermaid -graph LR +flowchart LR id1["This is the (text) in the box"] ``` @@ -412,11 +412,11 @@ graph LR It is possible to escape characters using the syntax examplified here. ``` - graph LR + flowchart LR A["A double quote:#quot;"] -->B["A dec char:#9829;"] ``` ```mermaid - graph LR + flowchart LR A["A double quote:#quot;"] -->B["A dec char:#9829;"] ``` @@ -431,7 +431,7 @@ end An example below: ``` -graph TB +flowchart TB c1-->a2 subgraph one a1-->a2 @@ -444,7 +444,7 @@ graph TB end ``` ```mermaid -graph TB +flowchart TB c1-->a2 subgraph one a1-->a2 @@ -460,14 +460,14 @@ graph TB You can also set an excplicit id for the subgraph. ``` -graph TB +flowchart TB c1-->a2 subgraph ide1 [one] a1-->a2 end ``` ```mermaid -graph TB +flowchart TB c1-->a2 subgraph id1 [one] a1-->a2 @@ -534,7 +534,7 @@ Examples of tooltip usage below: ``` ``` -graph LR; +flowchart LR; A-->B; click A callback "Tooltip for a callback" click B "http://www.github.com" "This is a tooltip for a link" @@ -543,7 +543,7 @@ graph LR; The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip. ```mermaid -graph LR; +flowchart LR A-->B; click A callback "Tooltip" click B "http://www.github.com" "This is a link" @@ -556,7 +556,7 @@ Beginners tip, a full example using interactive links in a html context: ```
- graph LR; + flowchart LR; A-->B; click A callback "Tooltip" click B "http://www.github.com" "This is a link" @@ -586,7 +586,7 @@ Beginners tip, a full example using interactive links in a html context: Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax ``` -graph LR +flowchart LR %% this is a comment A -- text --> B{node} A -- text --> B -- text2 --> C ``` @@ -610,13 +610,13 @@ linkStyle 3 stroke:#ff3,stroke-width:4px,color:red; It is possible to apply specific styles such as a thicker border or a different background color to a node. ``` -graph LR +flowchart LR id1(Start)-->id2(Stop) style id1 fill:#f9f,stroke:#333,stroke-width:4px style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5 ``` ```mermaid -graph LR +flowchart LR id1(Start)-->id2(Stop) style id1 fill:#f9f,stroke:#333,stroke-width:4px style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5 @@ -650,12 +650,12 @@ It is also possible to attach a class to a list of nodes in one statement: A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below: ``` -graph LR +flowchart LR A:::someclass --> B classDef someclass fill:#f96; ``` ```mermaid -graph LR +flowchart LR A:::someclass --> B classDef someclass fill:#f96; ``` @@ -681,13 +681,13 @@ below: **Example definition** ``` -graph LR; +flowchart LR; A-->B[AAABBB]; B-->D; class A cssClass; ``` ```mermaid -graph LR; +flowchart LR; A-->B[AAABBB]; B-->D; class A cssClass; @@ -734,7 +734,7 @@ graph TD Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges. ``` -graph LR +flowchart LR A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] @@ -742,7 +742,7 @@ graph LR ``` ```mermaid -graph LR +flowchart LR A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] diff --git a/src/dagre-wrapper/edges.js b/src/dagre-wrapper/edges.js index b5e067c7f..a493298d8 100644 --- a/src/dagre-wrapper/edges.js +++ b/src/dagre-wrapper/edges.js @@ -34,8 +34,10 @@ export const insertEdgeLabel = (elem, edge) => { export const positionEdgeLabel = edge => { logger.info('Moving label', edge.id, edge.label, edgeLabels[edge.id]); - const el = edgeLabels[edge.id]; - el.attr('transform', 'translate(' + edge.x + ', ' + edge.y + ')'); + if (edge.label) { + const el = edgeLabels[edge.id]; + el.attr('transform', 'translate(' + edge.x + ', ' + edge.y + ')'); + } }; // const getRelationType = function(type) { diff --git a/src/dagre-wrapper/nodes.js b/src/dagre-wrapper/nodes.js index 212d6b055..c66f02be9 100644 --- a/src/dagre-wrapper/nodes.js +++ b/src/dagre-wrapper/nodes.js @@ -255,7 +255,7 @@ const rect = (parent, node) => { const rect = shapeSvg.insert('rect', ':first-child'); rect - .attr('class', 'basic') + .attr('class', 'basic label-container') .attr('rx', node.rx) .attr('ry', node.ry) .attr('x', -bbox.width / 2 - halfPadding) diff --git a/src/dagre-wrapper/shapes/util.js b/src/dagre-wrapper/shapes/util.js index 632652e16..cf7ff123f 100644 --- a/src/dagre-wrapper/shapes/util.js +++ b/src/dagre-wrapper/shapes/util.js @@ -46,5 +46,6 @@ export function insertPolygonShape(parent, w, h, points) { }) .join(' ') ) + .attr('class', 'label-container') .attr('transform', 'translate(' + -w / 2 + ',' + h / 2 + ')'); } diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js index bbb8af944..f23ee3168 100644 --- a/src/diagrams/flowchart/flowRenderer.js +++ b/src/diagrams/flowchart/flowRenderer.js @@ -424,7 +424,7 @@ export const draw = function(text, id) { } // Add label rects for non html labels - if (!conf.htmlLabels) { + if (!conf.htmlLabels || true) { // eslint-disable-line const labels = document.querySelectorAll('[id="' + id + '"] .edgeLabel .label'); for (let k = 0; k < labels.length; k++) { const label = labels[k]; diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index 48626821f..954678967 100644 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -736,7 +736,7 @@ const render = function(id, _txt, cb, container) { } // classDef - if (graphType === 'flowchart') { + if (graphType === 'flowchart' || graphType === 'flowchart-v2') { const classes = flowRenderer.getClasses(txt); for (const className in classes) { style += `\n.${className} > * { ${classes[className].styles.join( @@ -858,6 +858,7 @@ const render = function(id, _txt, cb, container) { if (typeof cb !== 'undefined') { switch (graphType) { case 'flowchart': + case 'flowchart-v2': cb(svgCode, flowDb.bindFunctions); break; case 'gantt': From 6203c27244bde29639ce080cdb30307fa7d14d4f Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 6 May 2020 18:58:26 +0200 Subject: [PATCH 4/4] #1386 Updated docs --- docs/flowchart.md | 48 +++++++++++++++++++++++------------------------ 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/docs/flowchart.md b/docs/flowchart.md index 7e8218728..40d8b2ec3 100644 --- a/docs/flowchart.md +++ b/docs/flowchart.md @@ -18,11 +18,11 @@ graph TD This declares a graph oriented from left to right (`LR`). ``` -flowchart LR +graph LR Start --> Stop ``` ```mermaid -flowchart LR +graph LR Start --> Stop ``` @@ -44,12 +44,12 @@ This renders a flowchart in the same way as graph but with a new rendering metho ### A node (default) ``` -flowchart LR +graph LR id ``` ```mermaid -flowchart LR +graph LR id ``` Note that the id is what is displayed in the box. @@ -61,7 +61,7 @@ found for the node that will be used. Also if you define edges for the node late one previously defined will be used when rendering the box. ``` -flowchart LR +graph LR id1[This is the text in the box] ``` ```mermaid @@ -231,7 +231,7 @@ flowchart LR ### Text on links ``` -flowchart LR +graph LR A-- This is the text! ---B ``` ```mermaid @@ -340,11 +340,11 @@ flowchart LR You can then describe dependencies in a very expressive way. Like the onliner below: ``` -flowchart TB +graph TB A & B--> C & D ``` ```mermaid -flowchart TB +graph TB A & B--> C & D ``` If you describe the same diagram using the the basic syntax, it will take four lines. A @@ -352,7 +352,7 @@ word of warning, one could go overboard with this making the graph harder to rea markdown form. The Swedish word `lagom` comes to mind. It means, not to much and not to little. This goes for expressive syntaxes as well. ``` -flowchart TB +graph TB A --> C A --> D B --> C @@ -431,7 +431,7 @@ end An example below: ``` -flowchart TB +graph TB c1-->a2 subgraph one a1-->a2 @@ -444,7 +444,7 @@ flowchart TB end ``` ```mermaid -flowchart TB +graph TB c1-->a2 subgraph one a1-->a2 @@ -460,14 +460,14 @@ flowchart TB You can also set an excplicit id for the subgraph. ``` -flowchart TB +graph TB c1-->a2 subgraph ide1 [one] a1-->a2 end ``` ```mermaid -flowchart TB +graph TB c1-->a2 subgraph id1 [one] a1-->a2 @@ -543,7 +543,7 @@ flowchart LR; The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip. ```mermaid -flowchart LR +graph LR A-->B; click A callback "Tooltip" click B "http://www.github.com" "This is a link" @@ -556,7 +556,7 @@ Beginners tip, a full example using interactive links in a html context: ```
- flowchart LR; + graph LR; A-->B; click A callback "Tooltip" click B "http://www.github.com" "This is a link" @@ -586,7 +586,7 @@ Beginners tip, a full example using interactive links in a html context: Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax ``` -flowchart LR +graph LR %% this is a comment A -- text --> B{node} A -- text --> B -- text2 --> C ``` @@ -610,13 +610,13 @@ linkStyle 3 stroke:#ff3,stroke-width:4px,color:red; It is possible to apply specific styles such as a thicker border or a different background color to a node. ``` -flowchart LR +graph LR id1(Start)-->id2(Stop) style id1 fill:#f9f,stroke:#333,stroke-width:4px style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5 ``` ```mermaid -flowchart LR +graph LR id1(Start)-->id2(Stop) style id1 fill:#f9f,stroke:#333,stroke-width:4px style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5 @@ -650,12 +650,12 @@ It is also possible to attach a class to a list of nodes in one statement: A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below: ``` -flowchart LR +graph LR A:::someclass --> B classDef someclass fill:#f96; ``` ```mermaid -flowchart LR +graph LR A:::someclass --> B classDef someclass fill:#f96; ``` @@ -681,13 +681,13 @@ below: **Example definition** ``` -flowchart LR; +graph LR; A-->B[AAABBB]; B-->D; class A cssClass; ``` ```mermaid -flowchart LR; +graph LR; A-->B[AAABBB]; B-->D; class A cssClass; @@ -734,7 +734,7 @@ graph TD Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges. ``` -flowchart LR +graph LR A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] @@ -742,7 +742,7 @@ flowchart LR ``` ```mermaid -flowchart LR +graph LR A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one]