ELK Layout

The default Mermaid flowchart layout is dagre. For more control over spacing and routing, you can switch to the Eclipse Layout Kernel (ELK).

Install the package

npm install @mermaid-js/layout-elk

Mermaid imports ELK dynamically the first time it needs it, so the package only has to be installed in your project — you do not need to import it yourself.

Enable ELK globally

Pass layout: 'elk' through mermaidConfig:

astro.config.mjs

mermaid({
  mermaidConfig: { layout: 'elk' },
})

Setting layout: 'elk' globally applies to flowchart diagrams. This example site leaves the default (dagre) so every diagram type renders the same way; the diagram below enables ELK for a single flowchart using a Mermaid frontmatter directive instead.

Per-diagram ELK

Use a YAML frontmatter block at the top of the diagram source to apply ELK to one diagram without changing global config:

---
config:
  layout: elk
---
flowchart LR
  A[Start] --> B{Decision}
  B -->|Yes| C[Process A]
  B -->|No| D[Process B]
  C --> E[Result 1]
  D --> E

Dagre (default) for comparison

The same diagram with the default dagre layout:

flowchart LR
  A[Start] --> B{Decision}
  B -->|Yes| C[Process A]
  B -->|No| D[Process B]
  C --> E[Result 1]
  D --> E

Learn more about Mermaid layouts.