diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 7ba9a8646..43dfbce63 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -49,16 +49,10 @@
flowchart
- A --> D@{ shape: roundedRect
- }@
-
- A --> D@{ shape: roundedRect, icon: car }@
-
- D@{ shape: roundedRect }@ --> B
- A@{
- shape: hexagon,
- icon: car
- }@ --> B
+
+ node_3@{ shape: triangle }@
+
+
flowchart
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
index 664164fa3..1598f2f5e 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
@@ -26,6 +26,7 @@ import { lean_left } from './shapes/leanLeft.js';
import { trapezoid } from './shapes/trapezoid.js';
import { inv_trapezoid } from './shapes/invertedTrapezoid.js';
import { labelRect } from './shapes/labelRect.js';
+import { triangle } from './shapes/triangle.js';
const shapes = {
state,
@@ -55,6 +56,7 @@ const shapes = {
card,
shadedProcess,
anchor,
+ triangle,
};
const nodeElems = new Map();
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts
new file mode 100644
index 000000000..fbd58aeb3
--- /dev/null
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts
@@ -0,0 +1,83 @@
+import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
+import intersect from '../intersect/index.js';
+import type { Node } from '$root/rendering-util/types.d.ts';
+import {
+ styles2String,
+ userNodeOverrides,
+} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+import rough from 'roughjs';
+
+import { insertPolygonShape } from './insertPolygonShape.js';
+
+export const createHexagonPathD = (
+ x: number,
+ y: number,
+ width: number,
+ height: number,
+ m: number
+): string => {
+ return [
+ `M${x + m},${y}`,
+ `L${x + width - m},${y}`,
+ `L${x + width},${y - height / 2}`,
+ `L${x + width - m},${y - height}`,
+ `L${x + m},${y - height}`,
+ `L${x},${y - height / 2}`,
+ 'Z',
+ ].join(' ');
+};
+
+export const triangle = async (parent: SVGAElement, node: Node): Promise => {
+ const { labelStyles, nodeStyles } = styles2String(node);
+ node.labelStyle = labelStyles;
+ const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+
+ const f = 4;
+ const h = bbox.height + node.padding;
+ const m = h / f;
+ const w = bbox.width + 2 * m + node.padding;
+ const points = [
+ { x: m, y: 0 },
+ { x: w - m, y: 0 },
+ { x: w, y: -h / 2 },
+ { x: w - m, y: -h },
+ { x: m, y: -h },
+ { x: 0, y: -h / 2 },
+ ];
+
+ let polygon: d3.Selection;
+ const { cssStyles } = node;
+
+ if (node.look === 'handdrawn') {
+ // @ts-ignore - rough is not typed
+ const rc = rough.svg(shapeSvg);
+ const options = userNodeOverrides(node, {});
+ const pathData = createHexagonPathD(0, 0, w, h, m);
+ const roughNode = rc.path(pathData, options);
+
+ polygon = shapeSvg
+ .insert(() => roughNode, ':first-child')
+ .attr('transform', `translate(${-w / 2}, ${h / 2})`);
+
+ if (cssStyles) {
+ polygon.attr('style', cssStyles);
+ }
+ } else {
+ polygon = insertPolygonShape(shapeSvg, w, h, points);
+ }
+
+ if (nodeStyles) {
+ polygon.attr('style', nodeStyles);
+ }
+
+ node.width = w;
+ node.height = h;
+
+ updateNodeBounds(node, polygon);
+
+ node.intersect = function (point) {
+ return intersect.polygon(node, points, point);
+ };
+
+ return shapeSvg;
+};