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) {