Updated Image Shape Icon for image width and height

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

@@ -162,6 +162,12 @@ export const addVertex = function (
         vertex.text = '';
       }
     }
+    if (doc.w) {
+      vertex.assetWidth = Number(doc.w);
+    }
+    if (doc.h) {
+      vertex.assetHeight = Number(doc.h);
+    }
   }
 };
 
@@ -890,6 +896,8 @@ const addNodeFromVertex = (
       icon: vertex.icon,
       pos: vertex.pos,
       img: vertex.img,
+      assetWidth: vertex.assetWidth,
+      assetHeight: vertex.assetHeight,
     });
   }
 };

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

@@ -15,6 +15,8 @@ export interface FlowVertex {
   form?: string;
   pos?: 't' | 'b';
   img?: string;
+  assetWidth?: number;
+  assetHeight?: number;
 }
 
 export interface FlowText {

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

@@ -16,14 +16,21 @@ export const imageSquare = async (parent: SVG, node: Node) => {
   const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
   const { cssStyles } = node;
 
-  const imageWidth = node?.width ?? 100;
-  const imageHeight = node?.height ?? 100;
+  const img = new Image();
+  img.src = node?.img ?? '';
 
-  const width = Math.max(bbox.width + (node.padding ?? 0), imageWidth);
-  const height = Math.max(bbox.height + (node.padding ?? 0), imageHeight);
+  await img.decode();
+  const imageNaturalWidth = Number(img.naturalWidth.toString().replace('px', ''));
+  const imageNaturalHeight = Number(img.naturalHeight.toString().replace('px', ''));
 
-  // const imageSizeWidth = width / 2;   // Image will be smaller than the full width
-  const imageSizeHeight = height * 0.1; // Image will be smaller than the full height
+  const imageWidth = node?.assetWidth ?? imageNaturalWidth;
+  const imageHeight = node?.assetHeight ?? imageNaturalHeight;
+
+  const width = Math.max(bbox.width + (node.padding ?? 0), imageWidth, node?.width ?? 0);
+  const height = Math.max(bbox.height + (node.padding ?? 0), imageHeight, node?.height ?? 0);
+
+  // const imageSizeWidth = width / 2;
+  const imageSizeHeight = height * 0.1;
 
   const skeletonWidth = width + (node?.padding ?? 0);
   const skeletonHeight = height + imageSizeHeight + bbox.height;
@@ -58,13 +65,12 @@ export const imageSquare = async (parent: SVG, node: Node) => {
     image.attr('height', imageHeight);
 
     const yPos =
-      imagePosition === 't'
+      imagePosition === 'b'
         ? -(skeletonHeight / 2 - imageSizeHeight / 2)
         : skeletonHeight / 2 - height - imageSizeHeight / 2;
     image.attr('transform', `translate(${-imageWidth / 2}, ${yPos})`);
   }
 
-  // Apply styles for the shape
   if (cssStyles && node.look !== 'handDrawn') {
     iconShape.selectAll('path').attr('style', cssStyles);
   }
@@ -73,12 +79,10 @@ export const imageSquare = async (parent: SVG, node: Node) => {
     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'
+    imagePosition === 'b'
       ? skeletonHeight / 2 - bbox.height - (bbox.y - (bbox.top ?? 0))
       : -skeletonHeight / 2 + (node?.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0));
 

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

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

packages/mermaid/src/types.ts

@@ -5,6 +5,8 @@ export interface NodeMetaData {
   form?: string;
   pos?: 't' | 'b';
   img?: string;
+  w?: string;
+  h?: string;
 }
 export interface Point {
   x: number;