Added image shape icon

packages/mermaid/src/diagrams/flowchart/flowDb.ts

@@ -156,6 +156,12 @@ export const addVertex = function (
     if (doc?.pos) {
       vertex.pos = doc?.pos;
     }
+    if (doc?.img) {
+      vertex.img = doc?.img;
+    }
+    if (doc?.pos) {
+      vertex.pos = doc?.pos;
+    }
   }
 };
 
@@ -804,6 +810,9 @@ export const lex = {
 };
 
 const getTypeFromVertex = (vertex: FlowVertex) => {
+  if (vertex?.img) {
+    return 'imageSquare';
+  }
   if (vertex?.icon) {
     if (vertex.form === 'circle') {
       return 'iconCircle';
@@ -880,6 +889,7 @@ const addNodeFromVertex = (
       tooltip: getTooltip(vertex.id),
       icon: vertex.icon,
       pos: vertex.pos,
+      img: vertex.img,
     });
   }
 };

packages/mermaid/src/diagrams/flowchart/types.ts

@@ -14,6 +14,7 @@ export interface FlowVertex {
   icon?: string;
   form?: string;
   pos?: 't' | 'b';
+  img?: string;
 }
 
 export interface FlowText {

packages/mermaid/src/rendering-util/rendering-elements/nodes.js

@@ -54,6 +54,7 @@ import { curlyBraces } from './shapes/curlyBraces.js';
 import { iconSquare } from './shapes/iconSquare.js';
 import { iconCircle } from './shapes/iconCircle.js';
 import { icon } from './shapes/icon.js';
+import { imageSquare } from './shapes/imageSquare.js';
 
 //Use these names as the left side to render shapes.
 const shapes = {
@@ -230,6 +231,7 @@ const shapes = {
   iconSquare,
   iconCircle,
   icon,
+  imageSquare,
 };
 
 const nodeElems = new Map();

packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts

@@ -0,0 +1,105 @@
+import { log } from '$root/logger.js';
+import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
+import type { Node } from '$root/rendering-util/types.d.ts';
+import type { SVG } from '$root/diagram-api/types.js';
+import {
+  styles2String,
+  userNodeOverrides,
+} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import rough from 'roughjs';
+import intersect from '../intersect/index.js';
+import { createPathFromPoints } from './util.js';
+
+export const imageSquare = async (parent: SVG, node: Node) => {
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+  const { cssStyles } = node;
+
+  const imageWidth = node.width ?? 50;
+  const imageHeight = node.height ?? 50;
+
+  // Ensure width and height accommodate the text (bbox) and image
+  const width = Math.max(bbox.width + (node.padding ?? 0), imageWidth);
+  const height = Math.max(bbox.height + (node.padding ?? 0), imageHeight);
+
+  // const imageSizeWidth = width / 2;   // Image will be smaller than the full width
+  const imageSizeHeight = height / 2; // Image will be smaller than the full height
+
+  const skeletonWidth = width; // The shape's width matches the text width
+  const skeletonHeight = height + imageSizeHeight + bbox.height; // The height includes space for the label and image
+
+  const imagePosition = node?.pos ?? 'b';
+
+  // Define the points for the rectangle (shape)
+  const points = [
+    { x: 0, y: 0 },
+    { x: skeletonWidth, y: 0 },
+    { x: skeletonWidth, y: skeletonHeight },
+    { x: 0, y: skeletonHeight },
+  ];
+
+  // @ts-ignore - rough is not typed
+  const rc = rough.svg(shapeSvg);
+  const options = userNodeOverrides(node, {});
+
+  if (node.look !== 'handDrawn') {
+    options.roughness = 0;
+    options.fillStyle = 'solid';
+  }
+
+  // Create the path for the rectangle shape
+  const linePath = createPathFromPoints(points);
+  const lineNode = rc.path(linePath, options);
+
+  const iconShape = shapeSvg.insert(() => lineNode, ':first-child');
+  if (node.img) {
+    const image = shapeSvg.append('image');
+
+    // Set the image attributes
+    image.attr('href', node.img);
+    image.attr('width', width);
+    image.attr('height', height);
+
+    // Center the image horizontally and position it at the bottom
+    // image.attr('x', -(skeletonWidth / 2 ));
+    // image.attr('y', -(skeletonHeight / 2 - height - imageSizeHeight /2));  // Position at the bottom
+
+    // Apply transformation if needed to fine-tune
+    const yPos =
+      imagePosition === 't'
+        ? -(skeletonHeight / 2 - imageSizeHeight / 2)
+        : skeletonHeight / 2 - height - imageSizeHeight / 2;
+    image.attr('transform', `translate(${-(skeletonWidth / 2)}, ${yPos})`);
+  }
+
+  // Apply styles for the shape
+  if (cssStyles && node.look !== 'handDrawn') {
+    iconShape.selectAll('path').attr('style', cssStyles);
+  }
+
+  if (nodeStyles && node.look !== 'handDrawn') {
+    iconShape.selectAll('path').attr('style', nodeStyles);
+  }
+
+  // Position the shape at the center
+  iconShape.attr('transform', `translate(${-skeletonWidth / 2},${-skeletonHeight / 2})`);
+
+  // Position the label at the top center of the shape
+  const yPos =
+    imagePosition === 't' ? imageSizeHeight / 2 : -skeletonHeight / 2 + (node?.padding ?? 0) / 2;
+
+  label.attr('transform', `translate(${-bbox.width / 2},${yPos})`);
+
+  updateNodeBounds(node, iconShape);
+
+  // Add the image inside the shape
+
+  node.intersect = function (point) {
+    log.info('iconSquare intersect', node, point);
+    const pos = intersect.polygon(node, points, point);
+    return pos;
+  };
+
+  return shapeSvg;
+};

packages/mermaid/src/rendering-util/types.d.ts

@@ -67,6 +67,7 @@ interface Node {
   look?: string;
   icon?: string;
   pos?: 't' | 'b';
+  img?: string;
 }
 
 // Common properties for any edge in the system

packages/mermaid/src/types.ts

@@ -4,6 +4,7 @@ export interface NodeMetaData {
   icon?: string;
   form?: string;
   pos?: 't' | 'b';
+  img?: string;
 }
 export interface Point {
   x: number;