Formatting

Mermaid Studio can automatically format your diagram code to improve readability and maintain consistent style.

Format Your Code

To format the current file:

• Windows/Linux: Press Ctrl+Alt+L
• macOS: Press Cmd+Option+L

You can also access formatting through:

• Code menu -> Reformat Code
• Right-click in the editor -> Reformat Code

What Formatting Does

The formatter cleans up your diagram code by:

• Fixing indentation levels
• Normalizing spacing around arrows and operators
• Aligning related elements
• Removing excessive blank lines

Format on Save

To automatically format diagrams when you save:

1. Open Settings -> Tools -> Actions on Save
2. Enable Reformat code
3. Mermaid files will be formatted each time you save

Supported Diagram Types

Formatting support varies by diagram type:

• Flowcharts - Full support
• ER Diagrams - Full support
• Class Diagrams - Full support
• Gantt Charts - Full support
• Sequence Diagrams - Partial support
• State Diagrams - Full support

Diagram types without dedicated formatting still benefit from basic indentation cleanup.

Format Selection Only

To format just part of your diagram:

1. Select the lines you want to format
2. Press Ctrl+Alt+L (Windows/Linux) or Cmd+Option+L (macOS)

Only the selected code will be reformatted.