Syntax Highlighting

Mermaid Studio applies color-coding to your diagram code, making it easier to read and write.

How It Works

Different parts of your diagram appear in distinct colors:

• Keywords like flowchart, sequenceDiagram, and pie stand out immediately
• Node IDs are highlighted so you can spot them quickly
• Edge definitions (-->, -.->, ==>) have their own color
• Text labels in brackets or quotes are visually distinct
• Style properties and directives are colored differently

Example

In a flowchart, you might see:

flowchart TD
    Start[Begin Process] --> Check{Valid?}
    Check -->|Yes| Success[Complete]
    Check -->|No| Error[Retry]

Each element, from the flowchart keyword to the node shapes and edge labels, gets its own color treatment.

Theme Support

Syntax colors automatically adapt to your IDE theme:

• Light themes: Colors are chosen for readability on light backgrounds
• Dark themes: Colors adjust for comfortable viewing on dark backgrounds

When you switch themes, your diagram highlighting updates automatically.

Supported Diagram Types

All diagram types get full syntax highlighting:

• Flowcharts and graphs
• Sequence diagrams
• Pie charts
• Mindmaps
• Timeline diagrams
• Kanban boards
• And all other Mermaid diagram types

Works Everywhere

Syntax highlighting works in:

• Standalone .mmd and .mermaid files
• Mermaid code blocks inside Markdown files
• The preview editor

You get the same consistent highlighting across all contexts.