Mermaid Runtime

Mermaid Studio lets you customize how diagrams are rendered through runtime configuration overrides. You can set global defaults or configure different settings for preview, markdown, and export contexts.

Configuration Contexts

Mermaid Studio supports four configuration contexts:

Context	Description
Base	Common configuration applied to all contexts
Preview	Configuration for standalone .mmd file preview
Markdown	Configuration for Mermaid diagrams in Markdown preview
Export	Configuration for SVG/PNG export and printing

Configuration Merge Order

When rendering a diagram, configuration is shallow-merged in the following order:

Each layer overrides values from the previous layer. For example, if Base sets theme: dark and the Preview context sets theme: forest, previews will use the forest theme while other contexts use dark.

Editing Configuration

1. Open Settings ( Command + Comma Command, Control + Alt + S CtrlAltS ) and navigate to Tools > Mermaid Studio > Mermaid Runtime.

   

2. Click Edit… next to the context you want to configure.

3. Edit the YAML configuration in the editor that opens.

   

   The editor provides JSON schema-based validation and code completion for all available Mermaid configuration options. See the Mermaid configuration docs for the complete list of options.

4. Save or close the file to apply changes.

To reset a context to defaults, click Reset next to that context.

Common Configuration Options

Theme

Set the diagram theme:

theme: dark

Available themes: default, dark, forest, neutral, base

Look

Choose between classic and hand-drawn styles:

look: handDrawn

Available looks: classic, handDrawn

Layout

Specify the layout algorithm:

layout: elk

Available layouts depend on enabled layout plugins. See Layout Plugins below.

Font Family

Customize the font used in diagrams:

fontFamily: "Fira Code, monospace"

Diagram-Specific Configuration

You can configure options for specific diagram types using nested keys:

flowchart:
  curve: basis
  padding: 20

sequence:
  mirrorActors: false
  messageAlign: center

Each diagram type has its own set of configurable options. The editor provides code completion for all available options.

Layout Plugins

Mermaid Studio includes optional layout plugins that provide advanced layout algorithms.

ELK Layout Engine

ELK (Eclipse Layout Kernel) provides advanced layout algorithms for flowcharts, including layered, force-directed, and tree layouts.

To enable:

1. Check ELK layout engine in the Mermaid Runtime settings
2. Use layout: elk in your diagram’s frontmatter

---
config:
  layout: elk
---
flowchart TD
    A --> B --> C

Tidy-Tree Layout

Tidy-tree provides optimized tree layout algorithms for hierarchical diagrams. Currently supported only in mindmap diagrams.

To enable:

1. Check Tidy-tree layout engine in the Mermaid Runtime settings
2. Use layout: tidy-tree in your diagram’s frontmatter

Layout plugins may increase preview loading time and memory usage.

Per-Diagram Configuration

You can also configure individual diagrams using YAML frontmatter:

---
config:
  theme: forest
  flowchart:
    curve: cardinal
---
flowchart LR
    A --> B --> C

Per-diagram configuration takes precedence over runtime configuration overrides.

Example Configurations

Dark Theme for Export

Configure the Export context to always use dark theme:

theme: dark

Hand-Drawn Style for Preview

Configure the Preview context for a sketch-like appearance:

look: handDrawn
handDrawnSeed: 42

Setting handDrawnSeed ensures consistent rendering across previews.

Custom Flowchart Defaults

Configure Base context with custom flowchart settings:

flowchart:
  curve: basis
  nodeSpacing: 50
  rankSpacing: 75