Formatting

This feature requires a paid license. With a Core license, available for Flowchart, Sequence, Class, State, ER, and Block diagrams. With a Studio license, available for all diagram types. Compare editions →

Mermaid Studio can automatically format your diagram code to improve readability and apply a consistent indentation and spacing style. Reformatting will also fix many minor syntax issues caused by missing or misplaced whitespace.

Reformatting a diagram

Press Option + Command + L OptionCmdL Control + Alt + L CtrlAltL in the editor to reformat the entire file, or select a range first to reformat just that range. Reformat is also available under Code > Reformat Code and from the editor context menu.

Reformat inside Markdown fences

Reformatting a Markdown host file also reformats every Mermaid diagram embedded in a ```mermaid (or ```mmd) code fence in that file, including fences nested under list items and fences whose body starts with a YAML frontmatter block. Place the caret inside a single fence and reformat to narrow the scope to just that fence; reformat the whole file to format every fence at once.

Indent-aware line comments

Comment with Line Comment ( Command + Slash Cmd/ Control + Slash Ctrl/ ) inserts %% at each line’s existing indent rather than at column 0, so comment markers line up with the surrounding code.

Code Style settings

Each supported diagram type has its own page under Settings > Editor > Code Style > Mermaid. The pages share the same general controls (indent size, tab vs. space, base indent below the diagram-type keyword) and add per-language options where they’re useful (e.g. flowchart’s multiline-string alignment, mindmap’s ::icon / :::class line splitting).

Default base indent

As of 2026.2.4, the default base indent is 1 level below the diagram-type keyword across the major formatters. Content sits one indent level inside the diagram body, matching the canonical layout used in upstream Mermaid documentation:

flowchart LR
    A --> B
    B --> C

If you prefer the previous flush-left layout, set the Base indent to 0 for the language under Code Style > Mermaid > (language). The setting is per-language, so you can keep flowcharts indented and class diagrams flush-left if you like.

After upgrading from 2026.2.3 or earlier, running Reformat Code on existing diagrams will indent their content by one level. Adjust the per-language base indent before reformatting if you want to preserve the existing layout.

Supported diagram types

The following diagram types have a dedicated formatter:

• Architecture
• Block
• C4
• Class Diagram
• ER Diagram
• Event Modeling
• Flowchart
• Gantt
• GitGraph
• Ishikawa
• Mindmap
• Requirement
• Sequence
• State Diagram
• Timeline
• Treemap
• XY Chart

Other diagram types fall back to a no-op formatter that preserves the existing layout.