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':