marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-21 08:19:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6887 from mermaid-js/docs/flowchart-image-node-doc-fix

Browse Source 
docs(flowchart): fix image node documentation
This commit is contained in:
Sidharth Vinod
2025-08-25 11:09:44 +00:00
committed by GitHub
parent 6995248443 075e1b5e1f
commit 6d9fad01a9
2 changed files with 22 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/syntax/flowchart.md
View File

@@ -983,11 +983,23 @@ flowchart TD
- `b` - `b`
- **w**: The width of the image. If not defined, this will default to the natural width of the image. - **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. - **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` - `on`
- `off` - `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 ## Links between nodes

10
packages/mermaid/src/docs/syntax/flowchart.md
View File

@@ -590,11 +590,17 @@ flowchart TD
- `b` - `b`
- **w**: The width of the image. If not defined, this will default to the natural width of the image. - **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. - **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` - `on`
- `off` - `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 ## Links between nodes