Style Mermaid

Mermaid supports themes, frontmatter configuration, class definitions, and diagram-specific configuration.

Start with the general presentation settings. They control the canvas background, padding, and frame for every diagram.

Source controls

• Use classDef and class in flowcharts.
• Use frontmatter for supported theme and layout values.
• Use Mermaid theme variables for controlled color changes.

Renderer options

Option	Values	Purpose
layout	dagre or elk; mind maps can also use tidy-tree	Select a layout engine.
Mermaid configuration	Primitive values	Use kebab-case. Replace a configuration dot with an underscore.

Limitations

• diagram.zip removes active content and unsafe external resources from the SVG.
• Security configuration values cannot reduce the renderer security level.

Related pages

• Create a Mermaid diagram
• General presentation settings
• Open Mermaid in the editor