diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 13de19ba0..f9a9f3756 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -58,12 +58,21 @@
----
-title: Simple flowchart with invisible edges
----
-flowchart TD
-A ~~~ B
-
+
+flowchart
+Node1:::class1 --> Node2:::class2
+Node1:::class1 --> Node3:::class2
+Node3 --> Node4((I am a circle)):::larger
+
+classDef class1 fill:lightblue
+classDef class2 fill:pink
+classDef larger font-size:30px,fill:yellow
+
stateDiagram-v2
diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js
index 6c6733358..e7988c8b5 100644
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -8,8 +8,25 @@ import note from './shapes/note.js';
import { parseMember } from '../diagrams/class/svgDraw.js';
import { evaluate } from '../diagrams/common/common.js';
+const formatClass = (str) => {
+ if (str) {
+ return ' ' + str;
+ }
+ return '';
+};
+const getClassesFromNode = (node, otherClasses) => {
+ return `${otherClasses ? otherClasses : 'node default'}${formatClass(node.classes)} ${formatClass(
+ node.class
+ )}`;
+};
+
const question = async (parent, node) => {
- const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+ const { shapeSvg, bbox } = await labelHelper(
+ parent,
+ node,
+ getClassesFromNode(node, undefined),
+ true
+ );
const w = bbox.width + node.padding;
const h = bbox.height + node.padding;
@@ -70,7 +87,12 @@ const choice = (parent, node) => {
};
const hexagon = async (parent, node) => {
- const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+ const { shapeSvg, bbox } = await labelHelper(
+ parent,
+ node,
+ getClassesFromNode(node, undefined),
+ true
+ );
const f = 4;
const h = bbox.height + node.padding;
@@ -97,7 +119,12 @@ const hexagon = async (parent, node) => {
};
const rect_left_inv_arrow = async (parent, node) => {
- const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+ const { shapeSvg, bbox } = await labelHelper(
+ parent,
+ node,
+ getClassesFromNode(node, undefined),
+ true
+ );
const w = bbox.width + node.padding;
const h = bbox.height + node.padding;
@@ -123,7 +150,7 @@ const rect_left_inv_arrow = async (parent, node) => {
};
const lean_right = async (parent, node) => {
- const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+ const { shapeSvg, bbox } = await labelHelper(parent, node, getClassesFromNode(node), true);
const w = bbox.width + node.padding;
const h = bbox.height + node.padding;
@@ -146,7 +173,12 @@ const lean_right = async (parent, node) => {
};
const lean_left = async (parent, node) => {
- const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+ const { shapeSvg, bbox } = await labelHelper(
+ parent,
+ node,
+ getClassesFromNode(node, undefined),
+ true
+ );
const w = bbox.width + node.padding;
const h = bbox.height + node.padding;
@@ -169,7 +201,12 @@ const lean_left = async (parent, node) => {
};
const trapezoid = async (parent, node) => {
- const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+ const { shapeSvg, bbox } = await labelHelper(
+ parent,
+ node,
+ getClassesFromNode(node, undefined),
+ true
+ );
const w = bbox.width + node.padding;
const h = bbox.height + node.padding;
@@ -192,7 +229,12 @@ const trapezoid = async (parent, node) => {
};
const inv_trapezoid = async (parent, node) => {
- const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+ const { shapeSvg, bbox } = await labelHelper(
+ parent,
+ node,
+ getClassesFromNode(node, undefined),
+ true
+ );
const w = bbox.width + node.padding;
const h = bbox.height + node.padding;
@@ -215,7 +257,12 @@ const inv_trapezoid = async (parent, node) => {
};
const rect_right_inv_arrow = async (parent, node) => {
- const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+ const { shapeSvg, bbox } = await labelHelper(
+ parent,
+ node,
+ getClassesFromNode(node, undefined),
+ true
+ );
const w = bbox.width + node.padding;
const h = bbox.height + node.padding;
@@ -239,7 +286,12 @@ const rect_right_inv_arrow = async (parent, node) => {
};
const cylinder = async (parent, node) => {
- const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+ const { shapeSvg, bbox } = await labelHelper(
+ parent,
+ node,
+ getClassesFromNode(node, undefined),
+ true
+ );
const w = bbox.width + node.padding;
const rx = w / 2;
@@ -314,7 +366,7 @@ const rect = async (parent, node) => {
const { shapeSvg, bbox, halfPadding } = await labelHelper(
parent,
node,
- 'node ' + node.classes,
+ 'node ' + node.classes + ' ' + node.class,
true
);
@@ -360,7 +412,7 @@ const rect = async (parent, node) => {
const labelRect = async (parent, node) => {
const { shapeSvg } = await labelHelper(parent, node, 'label', true);
- log.trace('Classes = ', node.classes);
+ log.trace('Classes = ', node.class);
// add the rect
const rect = shapeSvg.insert('rect', ':first-child');
@@ -545,7 +597,12 @@ const rectWithTitle = (parent, node) => {
};
const stadium = async (parent, node) => {
- const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+ const { shapeSvg, bbox } = await labelHelper(
+ parent,
+ node,
+ getClassesFromNode(node, undefined),
+ true
+ );
const h = bbox.height + node.padding;
const w = bbox.width + h / 4 + node.padding;
@@ -571,7 +628,12 @@ const stadium = async (parent, node) => {
};
const circle = async (parent, node) => {
- const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, undefined, true);
+ const { shapeSvg, bbox, halfPadding } = await labelHelper(
+ parent,
+ node,
+ getClassesFromNode(node, undefined),
+ true
+ );
const circle = shapeSvg.insert('circle', ':first-child');
// center the circle around its coordinate
@@ -596,7 +658,12 @@ const circle = async (parent, node) => {
};
const doublecircle = async (parent, node) => {
- const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, undefined, true);
+ const { shapeSvg, bbox, halfPadding } = await labelHelper(
+ parent,
+ node,
+ getClassesFromNode(node, undefined),
+ true
+ );
const gap = 5;
const circleGroup = shapeSvg.insert('g', ':first-child');
const outerCircle = circleGroup.insert('circle');
@@ -634,7 +701,12 @@ const doublecircle = async (parent, node) => {
};
const subroutine = async (parent, node) => {
- const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+ const { shapeSvg, bbox } = await labelHelper(
+ parent,
+ node,
+ getClassesFromNode(node, undefined),
+ true
+ );
const w = bbox.width + node.padding;
const h = bbox.height + node.padding;
diff --git a/packages/mermaid/src/dagre-wrapper/shapes/util.js b/packages/mermaid/src/dagre-wrapper/shapes/util.js
index 3eaedb4b9..95b82ddc0 100644
--- a/packages/mermaid/src/dagre-wrapper/shapes/util.js
+++ b/packages/mermaid/src/dagre-wrapper/shapes/util.js
@@ -13,6 +13,7 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
} else {
classes = _classes;
}
+
// Add outer g element
const shapeSvg = parent
.insert('g')
@@ -49,7 +50,6 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
)
);
}
-
// Get the size of the label
let bbox = text.getBBox();
const halfPadding = node.padding / 2;