From 2bc5b6d2fa7eb9e5dd75c06046d31e4a361f1369 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Thu, 21 Aug 2025 19:26:54 +0530 Subject: [PATCH 1/3] docs(flowchart): fix image node documentation --- docs/syntax/flowchart.md | 16 ++++++++++++++-- packages/mermaid/src/docs/syntax/flowchart.md | 10 ++++++++-- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index daaa29581..08c145f6f 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -983,11 +983,23 @@ flowchart TD - `b` - **w**: The width of the image. If not defined, this will default to the natural width of the image. - **h**: The height of the image. If not defined, this will default to the natural height of the image. -- **constraint**: Determines if the image should constrain the node size. This setting also ensures the image maintains its original aspect ratio, adjusting the height (`h`) accordingly to the width (`w`). If not defined, this will default to `off` Possible values are: +- **constraint**: Determines if the image should constrain the node size. This setting also ensures the image maintains its original aspect ratio, adjusting the width (`w`) accordingly to the height (`h`). If not defined, this will default to `off` Possible values are: - `on` - `off` -These new shapes provide additional flexibility and visual appeal to your flowcharts, making them more informative and engaging. +If you want to resize an image, but keep the same aspect ratio, set `h`, and set `constraint: on` to constrain the aspect ratio. E.g. + +```mermaid-example +flowchart TD + %% My image with a constrained aspect ratio + A@{ img: "https://mermaid.js.org/favicon.svg", label: "My example image label", pos: "t", h: 60, constraint: "on" } +``` + +```mermaid +flowchart TD + %% My image with a constrained aspect ratio + A@{ img: "https://mermaid.js.org/favicon.svg", label: "My example image label", pos: "t", h: 60, constraint: "on" } +``` ## Links between nodes diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index a19dcff21..341143c47 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -590,11 +590,17 @@ flowchart TD - `b` - **w**: The width of the image. If not defined, this will default to the natural width of the image. - **h**: The height of the image. If not defined, this will default to the natural height of the image. -- **constraint**: Determines if the image should constrain the node size. This setting also ensures the image maintains its original aspect ratio, adjusting the height (`h`) accordingly to the width (`w`). If not defined, this will default to `off` Possible values are: +- **constraint**: Determines if the image should constrain the node size. This setting also ensures the image maintains its original aspect ratio, adjusting the width (`w`) accordingly to the height (`h`). If not defined, this will default to `off` Possible values are: - `on` - `off` -These new shapes provide additional flexibility and visual appeal to your flowcharts, making them more informative and engaging. +If you want to resize an image, but keep the same aspect ratio, set `h`, and set `constraint: on` to constrain the aspect ratio. E.g. + +```mermaid +flowchart TD + %% My image with a constrained aspect ratio + A@{ img: "https://mermaid.js.org/favicon.svg", label: "My example image label", pos: "t", h: 60, constraint: "on" } +``` ## Links between nodes From e438e035bc5f1a2e061be9a5fb558e9ea1e81fa9 Mon Sep 17 00:00:00 2001 From: omkarht Date: Thu, 21 Aug 2025 19:34:27 +0530 Subject: [PATCH 2/3] chore: added changeset --- .changeset/thick-fans-run.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/thick-fans-run.md diff --git a/.changeset/thick-fans-run.md b/.changeset/thick-fans-run.md new file mode 100644 index 000000000..62659b24d --- /dev/null +++ b/.changeset/thick-fans-run.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +docs: fix incorrect image node documentation From 93467a6fce72b8232c1c41e85048a06b8d66b5a6 Mon Sep 17 00:00:00 2001 From: omkarht Date: Mon, 25 Aug 2025 12:58:17 +0530 Subject: [PATCH 3/3] fix: removed changeset on-behalf-of: @Mermaid-Chart --- .changeset/thick-fans-run.md | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 .changeset/thick-fans-run.md diff --git a/.changeset/thick-fans-run.md b/.changeset/thick-fans-run.md deleted file mode 100644 index 62659b24d..000000000 --- a/.changeset/thick-fans-run.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': patch ---- - -docs: fix incorrect image node documentation