Code Folding

Large diagrams can be difficult to navigate. Code folding lets you collapse sections of your diagram to focus on what matters.

How to Fold Code

Look for the ⌄ icon in the editor gutter. Click it to collapse that section.

To expand a collapsed section, click the ⌃ icon that appears in its place.

Keyboard Shortcuts

• Collapse current section: Ctrl+NumPad- (Windows/Linux) or Cmd+NumPad- (macOS)
• Expand current section: Ctrl+NumPad+ (Windows/Linux) or Cmd+NumPad+ (macOS)
• Collapse all: Ctrl+Shift+NumPad- (Windows/Linux) or Cmd+Shift+NumPad- (macOS)
• Expand all: Ctrl+Shift+NumPad+ (Windows/Linux) or Cmd+Shift+NumPad+ (macOS)

What Can Be Folded

YAML frontmatter folds in every diagram type. A configuration block you’ve finished tuning collapses to a single line, keeping the diagram itself at the top of the editor.

Beyond that, the diagram types below fold their own structural blocks, whatever nests in that grammar: subgraphs in a flowchart, entity blocks in an ER diagram, loop and alt blocks in a sequence diagram.

The following diagram type support folding:

• Block
• C4
• Class
• Cynefin
• Entity Relationship
• Event Modeling
• Flowchart
• Gantt
• Git Graph
• Ishikawa
• Journey
• Kanban
• Mindmap
• Radar
• Railroad
• Railroad (ABNF)
• Railroad (EBNF)
• Railroad (PEG)
• Requirement
• Sequence
• State
• Swimlane
• Timeline
• Treemap
• TreeView
• Venn
• Wardley Map

27 of 33 diagram types · reflects plugin 2026.3.6

Collapsing Frontmatter by Default

If you rarely revisit a diagram’s configuration once it’s set, you can have frontmatter render as collapsed by default.

Go to Settings > Editor > General > Code Folding and enable Frontmatter under the Mermaid Studio group.