implemented additional Image-node shape properties

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

@@ -161,6 +161,7 @@ export const addVertex = function (
       if (!doc.label?.trim() && vertex.text === id) {
         vertex.text = '';
       }
+      vertex.constrainedImage = !!doc.constrainedImage;
     }
     if (doc.w) {
       vertex.assetWidth = Number(doc.w);
@@ -899,6 +900,9 @@ const addNodeFromVertex = (
       img: vertex.img,
       assetWidth: vertex.assetWidth,
       assetHeight: vertex.assetHeight,
+      imageAspectRatio: vertex.imageAspectRatio,
+      defaultWidth: vertex.defaultWidth,
+      constrainedImage: vertex.constrainedImage,
     });
   }
 };

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

@@ -17,6 +17,9 @@ export interface FlowVertex {
   img?: string;
   assetWidth?: number;
   assetHeight?: number;
+  defaultWidth?: number;
+  imageAspectRatio?: number;
+  constrainedImage?: boolean;
 }
 
 export interface FlowText {

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

@@ -17,18 +17,22 @@ export const imageSquare = async (
 
   const imageNaturalWidth = Number(img.naturalWidth.toString().replace('px', ''));
   const imageNaturalHeight = Number(img.naturalHeight.toString().replace('px', ''));
+  node.imageAspectRatio = imageNaturalWidth / imageNaturalHeight;
 
   const { labelStyles } = styles2String(node);
 
   node.labelStyle = labelStyles;
 
   const defaultWidth = flowchart?.wrappingWidth;
+  node.defaultWidth = flowchart?.wrappingWidth;
 
   const imageWidth = Math.max(
     node.label ? (defaultWidth ?? 0) : 0,
     node?.assetWidth ?? imageNaturalWidth
   );
-  const imageHeight = node?.assetHeight ?? imageNaturalHeight;
+  const imageHeight = node.constrainedImage
+    ? imageWidth / node.imageAspectRatio
+    : (node?.assetHeight ?? imageNaturalHeight);
   node.width = Math.max(imageWidth, defaultWidth ?? 0);
   const { shapeSvg, bbox, label } = await labelHelper(parent, node, 'image-shape default');
 

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

@@ -69,6 +69,9 @@ export interface Node {
   img?: string;
   assetWidth?: number;
   assetHeight?: number;
+  defaultWidth?: number;
+  imageAspectRatio?: number;
+  constrainedImage?: boolean;
 }
 
 // Common properties for any edge in the system

packages/mermaid/src/types.ts

@@ -7,6 +7,7 @@ export interface NodeMetaData {
   img?: string;
   w?: string;
   h?: string;
+  constrainedImage?: boolean;
 }
 import type { MermaidConfig } from './config.type.js';