Code Completion

Mermaid Studio suggests completions as you type, helping you write diagrams faster and with fewer errors.

Triggering Completion

To see suggestions:

• Windows/Linux: Press Ctrl+Space
• macOS: Press Cmd+Space

You can also just start typing and suggestions will appear automatically.

What Gets Suggested

Diagram Type Keywords

When starting a new diagram, completion suggests all available diagram types:

• flowchart
• sequenceDiagram
• pie
• mindmap
• timeline
• And more

Direction Keywords

For diagrams that support direction, get suggestions like:

• TD (top-down)
• LR (left-right)
• TB, BT, RL

Node References

When creating edges, type a node ID and get suggestions for existing nodes in your diagram:

flowchart TD
    Start --> Process
    Process --> |type here for suggestions|

After typing -->, start typing a node name and you’ll see matching nodes from your diagram.

Keywords and Syntax

Within each diagram type, completion suggests relevant keywords:

• In sequence diagrams: participant, activate, loop, alt
• In flowcharts: subgraph, style, class
• In pie charts: title, showData

Tips for Better Completion

• Type a few characters to filter the suggestion list
• Use Tab or Enter to accept a suggestion
• Press Escape to dismiss suggestions
• Keep typing if you don’t want any suggestions

Supported Diagram Types

Code completion works in most diagram types, with the most comprehensive support in:

• Flowcharts
• Sequence diagrams
• Pie charts
• Mindmaps
• Timeline diagrams

Support for additional diagram types continues to improve.