Property reference
Every property on the Mermaid Chart component, with the type and default as shipped in the component schema.
Top level
| Property | Type | Default | Description |
|---|---|---|---|
definition | string | sample flowchart | The Mermaid diagram definition to render. |
theme | string | "default" | Mermaid theme — see Themes. |
securityLevel | string | "strict" | How much the diagram is trusted. See Security levels. |
showError | boolean | true | Show Mermaid parse and render errors inside the component. |
fitMode | string | "contain" | How the diagram is fit into the viewport — see Fit modes. |
padding | number | 8 | Padding in pixels around the rendered diagram. |
zoomLevel | number | 1 | Current zoom multiplier. Two-way — see Zoom and pan. |
style | object | {} | Standard Perspective style properties. |
Themes
theme accepts one of:
| Value | Notes |
|---|---|
default | Light background. The Mermaid default. |
base | Minimal theme intended to be customized. |
dark | Use this on dark Perspective views — the default theme assumes a light background. |
forest | Green palette. |
neutral | Greyscale, prints well. |
Fit modes
fitMode controls how the rendered SVG is scaled into the component’s viewport before any zoom is applied:
| Value | Behaviour |
|---|---|
contain | Scale so the whole diagram fits. The default, and the safe choice. |
width | Fill the available width. Good for tall diagrams — they overflow vertically instead of shrinking. |
height | Fill the available height. Good for wide diagrams. |
none | No fitting. The diagram renders at its natural size. |
showError
When true (the default), Mermaid parse and render failures are displayed inside the component. Leave it on while you’re developing.
On a production operator screen you may prefer false so a bad definition renders as empty space rather than an error message — but be aware this also hides genuine problems, so make sure something else surfaces them.
zoom
Controls how the diagram can be zoomed. See Zoom and pan for behaviour.
| Property | Type | Default | Description |
|---|---|---|---|
zoom.enabled | boolean | true | Allow the diagram to be zoomed at all. |
zoom.showControls | boolean | true | Show the zoom buttons over the diagram. |
zoom.wheel | boolean | true | Allow Ctrl/Cmd + mouse wheel zooming. |
zoom.initial | number | 1 | Zoom multiplier applied on top of the initial fit. |
zoom.min | number | 0.25 | Minimum zoom multiplier. |
zoom.max | number | 4 | Maximum zoom multiplier. |
zoom.step | number | 0.25 | Increment used by the buttons and by wheel zoom. |
zoom.enabled: falseremoves zooming entirely. If you only want to hide the buttons but keep wheel zoom, leaveenabledon and setshowControls: false.
download
Controls the export menu. See Downloading a diagram.
| Property | Type | Default | Description |
|---|---|---|---|
download.enabled | boolean | true | Allow the diagram to be downloaded. |
download.showControls | boolean | true | Show the Download button over the diagram. |
download.svg | boolean | true | Offer SVG (vector) download in the format menu. |
SVG is currently the only export format, so
download.svg: falseeffectively removes the download menu.