gitpitch/docs/_snippets/diagrams-mermaid-properties.md

Mermaid Properties

The mermaid widget supports the following mermaid specific properties:

Mermaid Style Properties

• **theme=**default | dark | forest | neutral
• **bg=**transparent | color

Image Properties

The mermaid widget is an image native widget meaning it also directly supports image widget properties:

Image Sizing Properties

• **width=**px
• **height=**px

Image Power Properties

• **opacity=**0.1..1
• **rotate=**0..360
• **skewx=**0..360
• **skewy=**0..360
• **filter=**blur | bright | contrast | grayscale | hue | invert | saturate | sepia

Image Accessibility Properties

• **alt=**alt-text-for-screen-readers
• **title=**title-text-for-tooltips

Grid Native Props

The mermaid widget is a grid native widget meaning it also directly supports grid layouts properties:

Grid Block Drag-and-Drop Properties

• **drag=**width height
• **drop=**x y | topleft | top | topright | left | center | right | bottomleft | bottom | bottomright

Grid Block Flow Properties

• **flow=**col | row | stack

Grid Block Styling Properties

• **bg=**color
• **bg=**path/to/image.file _opacity _color
• **pad=**top right bottom left
• **border=**width style color
• **set=**space-separated-css-style-names

Grid Block Text Control Properties

• **fit=**0.1..9.99
• **font=**font-family

Grid Block Behavior Properties

• **animate=**slideup | slidedown | slideleft | slideright | tada | flip | fadein | fadeout
• **animate=**bounceup | bouncedown | bounceleft | bounceright | speedleft | speedright
• **audio=**path/to/sound.file
• **stretch=**true | false
• **sync=**true | false | index

Grid Block Power Properties

• **opacity=**0.1..1
• **rotate=**0..360
• **skewx=**0..360
• **skewy=**0..360
• **filter=**blur | bright | contrast | grayscale | hue | invert | saturate | sepia