GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1388 from mermaid-js/1386_finetuning_rendering_engine

Browse Source 
1386 finetuning rendering engine
This commit is contained in:
Knut Sveidqvist 2020-05-13 17:36:12 +02:00 committed by GitHub
commit d7d248fd04
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 226 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
cypress/platform/current.html
View File

@ -40,22 +40,15 @@
G-->c G-->c
</div> </div>
<div class="mermaid" style="width: 50%; height: 20%;"> <div class="mermaid" style="width: 50%; height: 20%;">
stateDiagram-v2 flowchart LR
[*] --> First A{{A}}-->B{{B}};
click A callback "Tooltip"
click B "http://www.github.com" "This is a link"
state First { </div>
[*] --> Second <div class="mermaid" style="width: 50%; height: 20%;">
flowchart LR
state Second { A{{A}}-->B{{B}};
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
</div> </div>
<div class="mermaid2" style="width: 50%; height: 20%;"> <div class="mermaid2" style="width: 50%; height: 20%;">
@ -277,8 +270,9 @@ stateDiagram-v2
// sequenceDiagram: { actorMargin: 300 } // deprecated // sequenceDiagram: { actorMargin: 300 } // deprecated
fontFamily: '"arial", sans-serif', fontFamily: '"arial", sans-serif',
curve: 'linear', curve: 'linear',
securityLevel: 'loose'
}); });
</script> function callback(){alert('It worked');}
</script> </script>
</body> </body>
</html> </html>

169
docs/flowchart.md
View File

@ -35,6 +35,9 @@ Possible directions are:
* TD - same as TB * 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 ## Nodes & shapes
@ -62,7 +65,7 @@ graph LR
id1[This is the text in the box] id1[This is the text in the box]
``` ```
```mermaid ```mermaid
graph LR flowchart LR
id1[This is the text in the box] id1[This is the text in the box]
``` ```
@ -70,66 +73,66 @@ graph LR
### A node with round edges ### A node with round edges
``` ```
graph LR flowchart LR
id1(This is the text in the box) id1(This is the text in the box)
``` ```
```mermaid ```mermaid
graph LR flowchart LR
id1(This is the text in the box) id1(This is the text in the box)
``` ```
### A stadium-shaped node ### A stadium-shaped node
``` ```
graph LR flowchart LR
id1([This is the text in the box]) id1([This is the text in the box])
``` ```
```mermaid ```mermaid
graph LR flowchart LR
id1([This is the text in the box]) id1([This is the text in the box])
``` ```
### A node in a subroutine shape ### A node in a subroutine shape
``` ```
graph LR flowchart LR
id1[[This is the text in the box]] id1[[This is the text in the box]]
``` ```
```mermaid ```mermaid
graph LR flowchart LR
id1[[This is the text in the box]] id1[[This is the text in the box]]
``` ```
### A node in a cylindrical shape ### A node in a cylindrical shape
``` ```
graph LR flowchart LR
id1[(Database)] id1[(Database)]
``` ```
```mermaid ```mermaid
graph LR flowchart LR
id1[(Database)] id1[(Database)]
``` ```
### A node in the form of a circle ### A node in the form of a circle
``` ```
graph LR flowchart LR
id1((This is the text in the circle)) id1((This is the text in the circle))
``` ```
```mermaid ```mermaid
graph LR flowchart LR
id1((This is the text in the circle)) id1((This is the text in the circle))
``` ```
### A node in an asymetric shape ### A node in an asymetric shape
``` ```
graph LR flowchart LR
id1>This is the text in the box] id1>This is the text in the box]
``` ```
```mermaid ```mermaid
graph LR flowchart LR
id1>This is the text in the box] 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.* Currently only the shape above is possible and not its mirror. *This might change with future releases.*
@ -137,22 +140,22 @@ Currently only the shape above is possible and not its mirror. *This might chang
### A node (rhombus) ### A node (rhombus)
``` ```
graph LR flowchart LR
id1{This is the text in the box} id1{This is the text in the box}
``` ```
```mermaid ```mermaid
graph LR flowchart LR
id1{This is the text in the box} id1{This is the text in the box}
``` ```
### A hexagon node ### A hexagon node
``` ```
graph LR flowchart LR
id1{{This is the text in the box}} id1{{This is the text in the box}}
``` ```
```mermaid ```mermaid
graph LR flowchart LR
id1{{This is the text in the box}} id1{{This is the text in the box}}
``` ```
@ -206,22 +209,22 @@ Nodes can be connected with links/edges. It is possible to have different types
### A link with arrow head ### A link with arrow head
``` ```
graph LR flowchart LR
A-->B A-->B
``` ```
```mermaid ```mermaid
graph LR flowchart LR
A-->B A-->B
``` ```
### An open link ### An open link
``` ```
graph LR flowchart LR
A --- B A --- B
``` ```
```mermaid ```mermaid
graph LR flowchart LR
A --- B A --- B
``` ```
@ -229,87 +232,87 @@ graph LR
``` ```
graph LR graph LR
A-- This is the text ---B A-- This is the text! ---B
``` ```
```mermaid ```mermaid
graph LR flowchart LR
A-- This is the text ---B A-- This is the text ---B
``` ```
or or
``` ```
graph LR flowchart LR
A---|This is the text|B A---|This is the text|B
``` ```
```mermaid ```mermaid
graph LR flowchart LR
A---|This is the text|B A---|This is the text|B
``` ```
### A link with arrow head and text ### A link with arrow head and text
``` ```
graph LR flowchart LR
A-->|text|B A-->|text|B
``` ```
```mermaid ```mermaid
graph LR flowchart LR
A-->|text|B A-->|text|B
``` ```
or or
``` ```
graph LR flowchart LR
A-- text -->B A-- text -->B
``` ```
```mermaid ```mermaid
graph LR flowchart LR
A-- text -->B A-- text -->B
``` ```
### Dotted link ### Dotted link
``` ```
graph LR; flowchart LR;
A-.->B; A-.->B;
``` ```
```mermaid ```mermaid
graph LR; flowchart LR;
A-.->B; A-.->B;
``` ```
### Dotted link with text ### Dotted link with text
``` ```
graph LR flowchart LR
A-. text .-> B A-. text .-> B
``` ```
```mermaid ```mermaid
graph LR flowchart LR
A-. text .-> B A-. text .-> B
``` ```
### Thick link ### Thick link
``` ```
graph LR flowchart LR
A ==> B A ==> B
``` ```
```mermaid ```mermaid
graph LR flowchart LR
A ==> B A ==> B
``` ```
### Thick link with text ### Thick link with text
``` ```
graph LR flowchart LR
A == text ==> B A == text ==> B
``` ```
```mermaid ```mermaid
graph LR flowchart LR
A == text ==> B A == text ==> B
``` ```
@ -317,21 +320,21 @@ graph LR
It is possible declare many links in the same line as per below: It is possible declare many links in the same line as per below:
``` ```
graph LR flowchart LR
A -- text --> B -- text2 --> C A -- text --> B -- text2 --> C
``` ```
```mermaid ```mermaid
graph LR flowchart LR
A -- text --> B -- text2 --> C A -- text --> B -- text2 --> C
``` ```
It is also possible to declare multiple nodes links in the same line as per below: It is also possible to declare multiple nodes links in the same line as per below:
``` ```
graph LR flowchart LR
a --> b & c--> d a --> b & c--> d
``` ```
```mermaid ```mermaid
graph LR flowchart LR
a --> b & c--> d a --> b & c--> d
``` ```
@ -356,17 +359,51 @@ graph TB
B --> D 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 ## Special characters that break syntax
It is possible to put text within quotes in order to render more troublesome characters. As in the example below: 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"] id1["This is the (text) in the box"]
``` ```
```mermaid ```mermaid
graph LR flowchart LR
id1["This is the (text) in the box"] id1["This is the (text) in the box"]
``` ```
@ -375,11 +412,11 @@ graph LR
It is possible to escape characters using the syntax examplified here. 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;"] A["A double quote:#quot;"] -->B["A dec char:#9829;"]
``` ```
```mermaid ```mermaid
graph LR flowchart LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"] A["A double quote:#quot;"] -->B["A dec char:#9829;"]
``` ```
@ -437,6 +474,44 @@ graph TB
end 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 ## 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'`. 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'`.
@ -459,7 +534,7 @@ Examples of tooltip usage below:
``` ```
``` ```
graph LR; flowchart LR;
A-->B; A-->B;
click A callback "Tooltip for a callback" click A callback "Tooltip for a callback"
click B "http://www.github.com" "This is a tooltip for a link" click B "http://www.github.com" "This is a tooltip for a link"
@ -468,7 +543,7 @@ graph LR;
The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip. The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip.
```mermaid ```mermaid
graph LR; graph LR
A-->B; A-->B;
click A callback "Tooltip" click A callback "Tooltip"
click B "http://www.github.com" "This is a link" click B "http://www.github.com" "This is a link"

62
docs/stateDiagram.md
View File

@ -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. 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 ```markdown
stateDiagram stateDiagram-v2
[*] --> Still [*] --> Still
Still --> [*] Still --> [*]
@ -15,6 +15,16 @@ stateDiagram
Crash --> [*] Crash --> [*]
``` ```
```mermaid
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```
```mermaid ```mermaid
stateDiagram stateDiagram
[*] --> Still [*] --> Still
@ -33,36 +43,36 @@ In state diagrams systems are described in terms of its states and how the syste
A state can be declared in multiple ways. The simplest way is to define a state id as a description. A state can be declared in multiple ways. The simplest way is to define a state id as a description.
```markdown ```markdown
stateDiagram stateDiagram-v2
s1 s1
``` ```
```mermaid ```mermaid
stateDiagram stateDiagram-v2
s1 s1
``` ```
Another way is by using the state keyword with a description as per below: Another way is by using the state keyword with a description as per below:
```markdown ```markdown
stateDiagram stateDiagram-v2
state "This is a state description" as s2 state "This is a state description" as s2
``` ```
```mermaid ```mermaid
stateDiagram stateDiagram-v2
state "This is a state description" as s2 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: Another way to define a state with a description is to define the state id followed by a colon and the description:
```markdown ```markdown
stateDiagram stateDiagram-v2
s2 : This is a state description s2 : This is a state description
``` ```
```mermaid ```mermaid
stateDiagram stateDiagram-v2
s2 : This is a state description 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. 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 ```markdown
stateDiagram stateDiagram-v2
s1 --> s2 s1 --> s2
``` ```
```mermaid ```mermaid
stateDiagram stateDiagram-v2
s1 --> s2 s1 --> s2
``` ```
It is possible to add text to a transition. To describe what it represents. It is possible to add text to a transition. To describe what it represents.
```markdown ```markdown
stateDiagram stateDiagram-v2
s1 --> s2: A transition s1 --> s2: A transition
``` ```
```mermaid ```mermaid
stateDiagram stateDiagram-v2
s1 --> s2: A transition 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. 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 ```markdown
stateDiagram stateDiagram-v2
[*] --> s1 [*] --> s1
s1 --> [*] s1 --> [*]
``` ```
```mermaid ```mermaid
stateDiagram stateDiagram-v2
[*] --> s1 [*] --> s1
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: 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 ```markdown
stateDiagram stateDiagram-v2
[*] --> First [*] --> First
state First { state First {
[*] --> second [*] --> second
@ -127,7 +137,7 @@ stateDiagram
``` ```
```mermaid ```mermaid
stateDiagram stateDiagram-v2
[*] --> First [*] --> First
state First { state First {
[*] --> second [*] --> second
@ -138,7 +148,7 @@ stateDiagram
You can do this in several layers: You can do this in several layers:
```markdown ```markdown
stateDiagram stateDiagram-v2
[*] --> First [*] --> First
state First { state First {
@ -157,7 +167,7 @@ stateDiagram
``` ```
```mermaid ```mermaid
stateDiagram-v2 stateDiagram-v2-v2
[*] --> First [*] --> First
state First { state First {
@ -177,7 +187,7 @@ stateDiagram-v2
You can also define transitions also between composite states: You can also define transitions also between composite states:
```markdown ```markdown
stateDiagram stateDiagram-v2
[*] --> First [*] --> First
First --> Second First --> Second
First --> Third First --> Third
@ -197,7 +207,7 @@ stateDiagram
``` ```
```mermaid ```mermaid
stateDiagram stateDiagram-v2
[*] --> First [*] --> First
First --> Second First --> Second
First --> Third First --> Third
@ -223,7 +233,7 @@ stateDiagram
It is possible to specify a fork in the diagram using &lt;&lt;fork&gt;&gt; &lt;&lt;join&gt;&gt;. It is possible to specify a fork in the diagram using &lt;&lt;fork&gt;&gt; &lt;&lt;join&gt;&gt;.
```markdown ```markdown
stateDiagram stateDiagram-v2
state fork_state <<fork>> state fork_state <<fork>>
[*] --> fork_state [*] --> fork_state
fork_state --> State2 fork_state --> State2
@ -237,7 +247,7 @@ It is possible to specify a fork in the diagram using &lt;&lt;fork&gt;&gt; &lt;&
``` ```
```mermaid ```mermaid
stateDiagram stateDiagram-v2
state fork_state <<fork>> state fork_state <<fork>>
[*] --> fork_state [*] --> fork_state
fork_state --> State2 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. Here you can choose to put the note to the *right of* or to the *left of* a node.
```markdown ```markdown
stateDiagram stateDiagram-v2
State1: The state with a note State1: The state with a note
note right of State1 note right of State1
Important information! You can write 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 ```mermaid
stateDiagram stateDiagram-v2
State1: The state with a note State1: The state with a note
note right of State1 note right of State1
Important information! You can write 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. As in plantUml you can specify concurrency using the -- symbol.
```markdown ```markdown
stateDiagram stateDiagram-v2
[*] --> Active [*] --> Active
state Active { state Active {
@ -304,7 +314,7 @@ As in plantUml you can specify concurrency using the -- symbol.
``` ```
```mermaid ```mermaid
stateDiagram stateDiagram-v2
[*] --> Active [*] --> Active
state 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 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
Still --> [*] Still --> [*]
%% this is a comment %% this is a comment

6
src/dagre-wrapper/edges.js
View File

@ -34,8 +34,10 @@ export const insertEdgeLabel = (elem, edge) => {
export const positionEdgeLabel = edge => { export const positionEdgeLabel = edge => {
logger.info('Moving label', edge.id, edge.label, edgeLabels[edge.id]); logger.info('Moving label', edge.id, edge.label, edgeLabels[edge.id]);
const el = edgeLabels[edge.id]; if (edge.label) {
el.attr('transform', 'translate(' + edge.x + ', ' + edge.y + ')'); const el = edgeLabels[edge.id];
el.attr('transform', 'translate(' + edge.x + ', ' + edge.y + ')');
}
}; };
// const getRelationType = function(type) { // const getRelationType = function(type) {

31
src/dagre-wrapper/nodes.js
View File

@ -255,7 +255,7 @@ const rect = (parent, node) => {
const rect = shapeSvg.insert('rect', ':first-child'); const rect = shapeSvg.insert('rect', ':first-child');
rect rect
.attr('class', 'basic') .attr('class', 'basic label-container')
.attr('rx', node.rx) .attr('rx', node.rx)
.attr('ry', node.ry) .attr('ry', node.ry)
.attr('x', -bbox.width / 2 - halfPadding) .attr('x', -bbox.width / 2 - halfPadding)
@ -384,6 +384,34 @@ const circle = (parent, node) => {
return shapeSvg; 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 start = (parent, node) => {
const shapeSvg = parent const shapeSvg = parent
.insert('g') .insert('g')
@ -487,6 +515,7 @@ const shapes = {
start, start,
end, end,
note, note,
subroutine,
fork: forkJoin, fork: forkJoin,
join: forkJoin join: forkJoin
}; };

1
src/dagre-wrapper/shapes/util.js
View File

@ -46,5 +46,6 @@ export function insertPolygonShape(parent, w, h, points) {
}) })
.join(' ') .join(' ')
) )
.attr('class', 'label-container')
.attr('transform', 'translate(' + -w / 2 + ',' + h / 2 + ')'); .attr('transform', 'translate(' + -w / 2 + ',' + h / 2 + ')');
} }

2
src/diagrams/flowchart/flowRenderer-v2.js
View File

@ -239,7 +239,7 @@ export const addEdges = function(edges, g) {
edgeData.arrowheadStyle = 'fill: #333'; edgeData.arrowheadStyle = 'fill: #333';
edgeData.labelpos = 'c'; edgeData.labelpos = 'c';
if (getConfig().flowchart.htmlLabels) { if (getConfig().flowchart.htmlLabels && false) { // eslint-disable-line
edgeData.labelType = 'html'; edgeData.labelType = 'html';
edgeData.label = '<span class="edgeLabel">' + edge.text + '</span>'; edgeData.label = '<span class="edgeLabel">' + edge.text + '</span>';
} else { } else {

2
src/diagrams/flowchart/flowRenderer.js
View File

@ -424,7 +424,7 @@ export const draw = function(text, id) {
} }
// Add label rects for non html labels // 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'); const labels = document.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
for (let k = 0; k < labels.length; k++) { for (let k = 0; k < labels.length; k++) {
const label = labels[k]; const label = labels[k];

23
src/diagrams/state/stateRenderer-v2.js
View File

@ -286,10 +286,25 @@ export const draw = function(text, id) {
svg.attr('width', width * 1.75); svg.attr('width', width * 1.75);
svg.attr('class', 'statediagram'); svg.attr('class', 'statediagram');
// diagram.attr('height', bounds.height * 3 + conf.padding * 2); // diagram.attr('height', bounds.height * 3 + conf.padding * 2);
svg.attr( // svg.attr(
'viewBox', // 'viewBox',
`${bounds.x - conf.padding} ${bounds.y - conf.padding} ` + width + ' ' + height // `${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 // Add label rects for non html labels
if (!conf.htmlLabels) { if (!conf.htmlLabels) {

3
src/mermaidAPI.js
View File

@ -736,7 +736,7 @@ const render = function(id, _txt, cb, container) {
} }
// classDef // classDef
if (graphType === 'flowchart') { if (graphType === 'flowchart' || graphType === 'flowchart-v2') {
const classes = flowRenderer.getClasses(txt); const classes = flowRenderer.getClasses(txt);
for (const className in classes) { for (const className in classes) {
style += `\n.${className} > * { ${classes[className].styles.join( style += `\n.${className} > * { ${classes[className].styles.join(
@ -858,6 +858,7 @@ const render = function(id, _txt, cb, container) {
if (typeof cb !== 'undefined') { if (typeof cb !== 'undefined') {
switch (graphType) { switch (graphType) {
case 'flowchart': case 'flowchart':
case 'flowchart-v2':
cb(svgCode, flowDb.bindFunctions); cb(svgCode, flowDb.bindFunctions);
break; break;
case 'gantt': case 'gantt':