diff --git a/docs/config/setup/interfaces/mermaid.LayoutData.md b/docs/config/setup/interfaces/mermaid.LayoutData.md
index 7a8a302d8..4e5b631ff 100644
--- a/docs/config/setup/interfaces/mermaid.LayoutData.md
+++ b/docs/config/setup/interfaces/mermaid.LayoutData.md
@@ -20,7 +20,7 @@
 
 #### Defined in
 
-[packages/mermaid/src/rendering-util/types.ts:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L122)
+[packages/mermaid/src/rendering-util/types.ts:125](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L125)
 
 ---
 
@@ -30,7 +30,7 @@
 
 #### Defined in
 
-[packages/mermaid/src/rendering-util/types.ts:121](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L121)
+[packages/mermaid/src/rendering-util/types.ts:124](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L124)
 
 ---
 
@@ -40,4 +40,4 @@
 
 #### Defined in
 
-[packages/mermaid/src/rendering-util/types.ts:120](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L120)
+[packages/mermaid/src/rendering-util/types.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L123)
diff --git a/docs/config/setup/interfaces/mermaid.ParseOptions.md b/docs/config/setup/interfaces/mermaid.ParseOptions.md
index 37eacb4cd..52b4af49e 100644
--- a/docs/config/setup/interfaces/mermaid.ParseOptions.md
+++ b/docs/config/setup/interfaces/mermaid.ParseOptions.md
@@ -19,4 +19,4 @@ The `parseError` function will not be called.
 
 #### Defined in
 
-[packages/mermaid/src/types.ts:57](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L57)
+[packages/mermaid/src/types.ts:56](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L56)
diff --git a/docs/config/setup/interfaces/mermaid.ParseResult.md b/docs/config/setup/interfaces/mermaid.ParseResult.md
index 21e89e81d..fb7856a4c 100644
--- a/docs/config/setup/interfaces/mermaid.ParseResult.md
+++ b/docs/config/setup/interfaces/mermaid.ParseResult.md
@@ -36,7 +36,7 @@ Omit.defaultConfig
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:327](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L327)
+[packages/mermaid/src/types.ts:67](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L67)
 
 ---
 
@@ -52,7 +52,7 @@ Omit.diagram
 
 #### Defined in
 
-[packages/mermaid/src/types.ts:72](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L72)
+[packages/mermaid/src/types.ts:63](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L63)
 
 ---
 
diff --git a/docs/config/setup/interfaces/mermaid.RenderResult.md b/docs/config/setup/interfaces/mermaid.RenderResult.md
index f9954437a..4c5604022 100644
--- a/docs/config/setup/interfaces/mermaid.RenderResult.md
+++ b/docs/config/setup/interfaces/mermaid.RenderResult.md
@@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
 
 #### Defined in
 
-[packages/mermaid/src/types.ts:95](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L95)
+[packages/mermaid/src/types.ts:90](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L90)
 
 ---
 
@@ -51,7 +51,7 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
 
 #### Defined in
 
-[packages/mermaid/src/types.ts:85](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L85)
+[packages/mermaid/src/types.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L80)
 
 ---
 
@@ -63,4 +63,4 @@ The svg code for the rendered graph.
 
 #### Defined in
 
-[packages/mermaid/src/types.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L81)
+[packages/mermaid/src/types.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L76)
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
index df73b5430..9080f6c88 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts
+++ b/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);
@@ -900,6 +901,9 @@ const addNodeFromVertex = (
       img: vertex.img,
       assetWidth: vertex.assetWidth,
       assetHeight: vertex.assetHeight,
+      imageAspectRatio: vertex.imageAspectRatio,
+      defaultWidth: vertex.defaultWidth,
+      constrainedImage: vertex.constrainedImage,
     });
   }
 };
diff --git a/packages/mermaid/src/diagrams/flowchart/types.ts b/packages/mermaid/src/diagrams/flowchart/types.ts
index 97dc54fa7..c60b1e8c1 100644
--- a/packages/mermaid/src/diagrams/flowchart/types.ts
+++ b/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 {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts
index 551223ef4..0a9932f06 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts
+++ b/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');
 
diff --git a/packages/mermaid/src/rendering-util/types.ts b/packages/mermaid/src/rendering-util/types.ts
index 510e94b94..ff04af7b0 100644
--- a/packages/mermaid/src/rendering-util/types.ts
+++ b/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
@@ -100,6 +103,7 @@ export interface Edge {
   pattern?: string;
   thickness?: 'normal' | 'thick' | 'invisible' | 'dotted';
   look?: string;
+  showPoints?: boolean;
 }
 
 export interface RectOptions {
diff --git a/packages/mermaid/src/types.ts b/packages/mermaid/src/types.ts
index 7712dc231..67640325e 100644
--- a/packages/mermaid/src/types.ts
+++ b/packages/mermaid/src/types.ts
@@ -10,6 +10,7 @@ export interface NodeMetaData {
   img?: string;
   w?: string;
   h?: string;
+  constrainedImage?: boolean;
 }
 
 export interface Point {