feat(flowchart): 5 SVG shape templates (process/decision/terminator/subroutine/document)

Amit Haridas

src/flowchart/flowchart-shapes.js

@@ -0,0 +1,65 @@
+/**
+ * SVG shape templates for the 5 supported Mermaid flowchart node kinds.
+ * Each `shapeSvg` returns ONE SVG element string — the canvas wraps it in a
+ * <g data-node-id="…"> alongside a <text> label.
+ *
+ * Pure module: no DOM, no globals, no side effects.
+ *
+ * @module flowchart-shapes
+ */
+
+'use strict';
+
+const SHAPE_KINDS = ['process', 'decision', 'terminator', 'subroutine', 'document'];
+const DEFAULT_WIDTH = 140;
+const DEFAULT_HEIGHT = 60;
+const LABEL_PADDING_X = 16;
+const LABEL_PADDING_Y = 12;
+
+function shapeSvg(kind, x, y, width, height) {
+  if (!SHAPE_KINDS.includes(kind)) {
+    throw new Error(`flowchart-shapes: unknown shape kind "${kind}"`);
+  }
+  switch (kind) {
+    case 'process':
+      return `<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="4" ry="4" />`;
+    case 'terminator':
+      return `<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="${height / 2}" ry="${height / 2}" />`;
+    case 'subroutine': {
+      const inset = 4;
+      return (
+        `<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="4" ry="4" />` +
+        `<rect x="${x + inset}" y="${y + inset}" width="${width - 2 * inset}" height="${height - 2 * inset}" rx="4" ry="4" />`
+      );
+    }
+    case 'decision': {
+      const cx = x + width / 2;
+      const cy = y + height / 2;
+      const left = `${x},${cy}`;
+      const top = `${cx},${y}`;
+      const right = `${x + width},${cy}`;
+      const bottom = `${cx},${y + height}`;
+      return `<polygon points="${left} ${top} ${right} ${bottom}" />`;
+    }
+    case 'document': {
+      // Parallelogram: top-right and bottom-right indented by ~20% of height.
+      const skew = Math.max(10, Math.round(height * 0.25));
+      const tl = `${x + skew},${y}`;
+      const tr = `${x + width},${y}`;
+      const br = `${x + width - skew},${y + height}`;
+      const bl = `${x},${y + height}`;
+      return `<polygon points="${tl} ${tr} ${br} ${bl}" />`;
+    }
+    default:
+      throw new Error(`flowchart-shapes: unknown shape kind "${kind}"`);
+  }
+}
+
+module.exports = {
+  shapeSvg,
+  SHAPE_KINDS,
+  DEFAULT_WIDTH,
+  DEFAULT_HEIGHT,
+  LABEL_PADDING_X,
+  LABEL_PADDING_Y,
+};