marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-07 01:26:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

docs(flowchart): fix image node documentation

Browse Source
This commit is contained in:
Alois Klink
2025-08-21 19:26:54 +05:30
committed by omkarht
parent 7171237b96
commit 2bc5b6d2fa
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