Semantic Syntax Highlighting

Mermaid Studio provides accurate syntax highlighting for all supported diagram types, powered by dedicated Grammar-Kit based parsers that understand the structure and semantics of each diagram.

Semantic Syntax Highlighting

Most syntax highlighters use regular expressions to identify tokens based on patterns. This works well for many languages, but Mermaid presents a unique challenge: 20+ diagram types, each with its own syntax, where the same text can have entirely different meanings depending on context.

Mermaid Studio uses dedicated parsers that understand each diagram type’s grammar. This enables semantic highlighting: coloring tokens based on what they mean, not just what they look like. You can see at a glance whether something is a node ID, a label, a type reference, or a keyword.

For example, every type identifier in a class-diagram member position is resolved against the file: declared classes, generic parameters from the owning class, primitives like int, built-ins like String and Optional, and collection types like List and Map each route to their own color-scheme attribute. A class List { } declaration in your file makes every List reference highlight as a declared class instead of a built-in collection.

This parser foundation also powers Mermaid Studio’s code completion, error detection, and refactoring capabilities.

A few diagram types run on a generic token-level tier while their dedicated grammars are on the roadmap; see Basic Syntax Highlighting for what that tier covers.

Customizing Colors

Syntax highlighting colors adapt to your current IDE color scheme. You can also customize individual element colors.

1. Open Settings ( Command + Comma Command, Control + Alt + S CtrlAltS ).

2. Navigate to Editor > Color Scheme > Mermaid Studio.

   

3. Expand a group and select the element you want to customize.

4. Adjust the foreground color, background color, or font style.

5. Click Apply to see your changes.

Common holds the attributes shared across diagram types, and the other groups cover the types that expose additional elements of their own: Flowchart, Class Diagram, State Diagram, Ishikawa, and Railroad. Diagram types without a group of their own draw their colors from Common, so changing an attribute there applies everywhere it isn’t overridden.

Depth-Based Highlighting

Ishikawa (fishbone) diagrams use indentation-based depth highlighting, where causes at different nesting levels are colored distinctly. This makes it easy to see the hierarchy of causes at a glance without counting indentation levels.

Theme Compatibility

Mermaid Studio’s syntax highlighting is deeply integrated into IDE’s editor color scheme system, ensuring that default colors match your preferred theme without requiring additional configuration.