Documentation - Alternative Diagram renderer and layouts
For certain diagram types, alternative layouts can be activated to improve content visualization in specific situations. These layout options provide enhanced readability and better representation of complex data structures.
ELK Renderer for Flowcharts
The ELK Renderer (see https://mermaid.js.org/syntax/flowchart.html#renderer) can be activated via the flowchart-elk keyword:
flowchart-elk TD
[...]The following example demonstrates how different renderers display the same Flowchart Diagram:
Standard renderer
ELK Renderer
ELK Renderer State, ER and Class Diagrams
To enable the ELK Renderer for state, ER or Class Diagrams, add the following Mermaid configuration section just before your diagram code:
---
config:
layout: elk
---
[...]The following example demonstrates how different renderers display the same Class Diagram:
Standard renderer
ELK Renderer
Tidy-tree Layout for Mindmaps
The ELK Renderer (see https://mermaid.js.org/config/tidy-tree.html) can be activated via the config: layout: tidy-tree directive:
---
config:
layout: tidy-tree
---
mindmap
[...]The following example demonstrates how different renderers display the same mindmap:
Standard renderer
Tidy-tree Layout