Feature Glossary
Last updated:
This page is the glossary backing the Feature Support Matrix. Each entry describes one IDE capability that may or may not be implemented for a given diagram type. The matrix tells you which diagrams have a feature; this page tells you what the feature is and why it matters. Many features have a dedicated deep-dive page linked beneath the description.
Editing
Section titled “Editing”Day-to-day text-editing affordances inside the diagram source.
Folding
Section titled “Folding”Folding lets you collapse and expand structural blocks of the diagram source (subgraphs, frontmatter, multi-line strings) directly in the editor gutter. It keeps long diagrams navigable without forcing you to scroll past detail you don’t need right now.
Use the gutter triangles, Code → Folding, or the standard JetBrains shortcuts (
Brace Matching
Section titled “Brace Matching”When the cursor sits next to a bracket, brace, or paren, Mermaid Studio highlights its matching pair across the whole diagram and lets you jump between them. This is especially valuable in nested syntax (subgraph blocks, JSON-style style strings, multi-shape labels) where it’s easy to lose track of which closer goes with which opener.
Commenter
Section titled “Commenter”The line-comment action (
Quote Handler
Section titled “Quote Handler”When you type a quote character to start a string, Mermaid Studio inserts the matching closing quote and places the cursor between them. Backspacing through an empty pair removes both characters at once. This keeps quoted labels balanced and reduces fiddly cursor work.
Formatter
Section titled “Formatter”The formatter rewrites your diagram source to a canonical layout (consistent indentation, alignment of multi-line links, normalized whitespace around operators) without changing semantics.
It also clears up the whitespace mistakes that Mermaid’s parser is picky about, normalizing spacing between tokens so the parser accepts the diagram on the first read instead of throwing a confusing syntax error.
Run it with Code → Reformat Code (
Enter Handler
Section titled “Enter Handler”Pressing
Live Templates
Section titled “Live Templates”Live templates expand a short abbreviation into a larger snippet, with tab stops for the parts you fill in.
Type the abbreviation, press
Code Intelligence
Section titled “Code Intelligence”Highlighting, completions, and inline cues that surface meaning while you type.
Syntax Highlighting
Section titled “Syntax Highlighting”The editor colors the diagram source with a lexer that understands the diagram type: keywords, identifiers, strings, numbers, comments, and operators each get their own color scheme attributes. Colors integrate with the IDE’s color scheme, so themes apply automatically.
Diagram types with a dedicated grammar go further; see Semantic Highlighting.
Semantic Highlighting
Section titled “Semantic Highlighting”A dedicated Grammar-Kit parser backs the highlighting, so tokens are colored by what they mean in the diagram (a type reference versus a label versus a style), not just what they look like. The same parser validates the syntax as you type, flagging malformed statements in place instead of letting one mistake cascade through the file.
This is the foundation richer features build on; the same grammar drives completions, refactoring, and inspections.
Annotators
Section titled “Annotators”Per-diagram annotators apply rule-based highlighting above the lexer and parser, running on every keystroke and painting their results directly in the editor. Mermaid Studio uses them across the full range the platform supports: highlighting that token types alone cannot decide (coloring a reference by what it resolves to), semantic errors and warnings (an edge pointing at an undefined node, an invalid direction value), and inline cues such as marking duplicate labels. Unlike inspections (configurable checks listed in Settings), annotators are always on, whether a rule ends in a color or a warning.
Completions
Section titled “Completions”As you type, Mermaid Studio offers context-aware suggestions filtered to what’s valid at the cursor: node shapes, arrow types, keywords, icon names, identifiers, frontmatter keys, theme variables, and more. Completions cut down on typos and make the diagram syntax self-documenting.
Frontmatter Completions
Section titled “Frontmatter Completions”Completion and validation for the YAML frontmatter block above the diagram body, driven by the diagram type’s slice of the Mermaid config schema. Config keys, enum values, and color properties complete as you type, and unknown or mistyped keys are flagged in place.
Color Provider
Section titled “Color Provider”Hex, named, and rgb()/hsl() colors in style declarations get a small color swatch rendered in the gutter.
Click the swatch to open the IntelliJ color picker and pick a new value, and the source updates in place.
Color Settings
Section titled “Color Settings”A dedicated page under Settings → Editor → Color Scheme for the diagram type, listing every highlighting attribute its parser produces with a live preview. This is what makes the difference between “the theme colors it somehow” and “you decide exactly how keywords, identifiers, labels, and styles render”.
Inlay Hints
Section titled “Inlay Hints”Inlay hints are small inline annotations rendered between tokens, such as parameter names on call sites or counts on summary nodes. They’re configurable per language under Settings → Editor → Inlay Hints.
Validation
Section titled “Validation”Static checks that flag problems in your diagram source.
Inspections
Section titled “Inspections”Inspections are static analyzers that run continuously and surface problems as you edit: duplicate IDs, undefined references, malformed syntax, deprecated patterns, missing required fields. Each inspection has a configurable severity (error, warning, info), can be suppressed inline, and most ship with a quick fix that resolves the issue with one keystroke.
This is where most of the editorial intelligence lives: a diagram type with rich inspections is much harder to break in subtle ways.
Spellcheck
Section titled “Spellcheck”The IDE’s spellchecker runs inside labels, strings, and comments, with the diagram grammar telling it which tokens are prose and which are identifiers. Typos get the familiar squiggle and Alt+Enter correction, and identifiers stay out of the dictionary’s way.
Refactoring
Section titled “Refactoring”Safe rename, find-usages, and other identifier-aware transformations.
Rename and Refactor
Section titled “Rename and Refactor”Rename refactoring (
Find Usages
Section titled “Find Usages”Find Usages (
Navigation and Docs
Section titled “Navigation and Docs”Code Vision, breadcrumbs, structure view, and inline documentation.
Code Vision
Section titled “Code Vision”Code Vision renders small inline indicators above declarations, typically reference counts (“5 references”, “3 inbound edges”), so you can see at a glance how connected an element is without running Find Usages. Click an indicator to jump to the references list.
Navbar
Section titled “Navbar”The navigation bar at the top of the editor shows a breadcrumb path describing where the cursor is in the diagram’s structure (file → diagram type → subgraph → node, for example). It updates as you move and lets you jump up the hierarchy with one click.
Documentation
Section titled “Documentation”Hovering an element with
Structure View
Section titled “Structure View”The Structure tool window (
Preview
Section titled “Preview”Editor features that connect the diagram source to the rendered preview.
Preview Navigation
Section titled “Preview Navigation”Click an element in the rendered preview to jump to its declaration in the source (hold
Inline Live Edit
Section titled “Inline Live Edit”Double-click an element in the preview to edit its label in place. An editable overlay appears over the element, and committing the change writes it back to the source. Which elements are editable varies by diagram type.
Style Pane
Section titled “Style Pane”A property inspector docked next to the preview that restyles the selected element (colors, presets, and diagram-type-specific controls) and writes the result back as Mermaid styling syntax.
Visual editing actions
Section titled “Visual editing actions”Beyond the editor features above, the plugin tracks which edit-mode actions each diagram type supports in the preview. The per-type support table lives on the visual editing page.
Click Navigation
Section titled “Click Navigation”Click an element in the preview to jump to its source declaration. Navigable elements highlight when you hover over them.
Inline Edit
Section titled “Inline Edit”Double-click an element to edit its label in place. The change is written back to the source when you commit it.
Node Move
Section titled “Node Move”Drag an element to a new position, rewriting the source order or layout hints to match.
Add Element
Section titled “Add Element”Insert new nodes or containers from the toolbar, or drag a connection handle to empty canvas to create a connected element.
Edge Retarget
Section titled “Edge Retarget”Drag an edge endpoint onto a different element to rewire the connection in the source.
Wrap a selection in a new container with
Delete
Section titled “Delete”Remove the selected elements and their source, including batch deletion of a multi-selection.