Flowchart
Last updated:
Mermaid Studio provides the most comprehensive flowchart support of any IntelliJ plugin, turning your IDE into a first-class editor for process flows, decision trees, and system workflows. Flowcharts are the most versatile diagram type in Mermaid.js, and every piece of IDE intelligence in Mermaid Studio — completions, refactoring, inspections, Code Vision, and the Style Pane — is tuned for them.
Syntax Highlighting
Section titled “Syntax Highlighting”Syntax highlighting integrates directly with IntelliJ’s color scheme system, so diagram colors always match your editor theme.
IDE Support
Section titled “IDE Support”The summary below shows the IDE support Mermaid Studio ships for flowcharts, grouped by capability.
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 (
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.
The line-comment action (
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.
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 (
Pressing
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.
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.
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.
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.
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.
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”.
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.
Rename refactoring (
Find Usages (
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.
Hovering an element with
The Structure tool window (
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.
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.
Double-click an element to edit its label in place. The change is written back to the source when you commit it.
Inline-editable here: edgeLabel, nodeLabel, subgraphTitle.
Drag an element to a new position, rewriting the source order or layout hints to match.
Insert new nodes or containers from the toolbar, or drag a connection handle to empty canvas to create a connected element.
Drag an edge endpoint onto a different element to rewire the connection in the source.
Wrap a selection in a new container with
Remove the selected elements and their source, including batch deletion of a multi-selection.
Rename refactoring and find usages cover node IDs, subgraph IDs, CSS class names, and edge IDs across the whole diagram.
Go to Related jumps between a link and its linkStyle declaration in either direction.
Visual editing
Section titled “Visual editing”Flowcharts support the full visual editing surface. The toolbar’s Edit Mode toggle (pencil icon) flips the preview between preview mode and visual editing; the sections below cover the flowchart-specific actions available once it’s on.
Style pane
Section titled “Style pane”The Style Pane covers flowcharts as a first-class diagram type.
Styleable elements include individual nodes, subgraph containers, links (edges, with linkStyle support), and classDef definitions.
Preset gallery
Section titled “Preset gallery”The preset gallery lets you apply reusable styles to the selected element. Select a node or edge, then pick a preset from the gallery to apply its styles. Built-in presets cover common styling patterns; you can also save your own.
Node shape editing
Section titled “Node shape editing”When a flowchart node is selected, the Style Pane shows a shape editor with:
- Shape selector — choose from available node shapes with SVG icons showing each shape visually.
- Arrow controls — configure the direction of connections into and out of the node.
Shape changes are written back to the diagram source as the appropriate Mermaid syntax.
Link styling
Section titled “Link styling”When a link (edge) is selected, the Style Pane shows link-specific styling controls.
Changes are written as linkStyle declarations in the diagram source.
If a linkStyle declaration already exists for the selected link, the Style Pane updates it in place; otherwise a new declaration is added.
You can navigate between links and their linkStyle declarations using Go to Related (
Click-handler properties
Section titled “Click-handler properties”When a node is selected, the Style Pane shows a Link tab for editing click-handler properties. This tab is only visible for nodes.
| Property | Description |
|---|---|
URL | The destination URL for the click handler |
Tooltip | Hover text shown over the node |
Target | Link target (_self, _blank, _parent, or _top) |
The Tooltip and Target fields are disabled until a URL is set.
Setting a URL creates a click statement in the diagram source (for example, click A href "https://example.com" "My tooltip" _blank).
If the node already has a click handler (including a JavaScript callback), it is replaced.
Clearing the URL removes the click statement entirely.
Adding nodes
Section titled “Adding nodes”Click Add Node in the toolbar to open the shape picker. The picker is organized into tabs (Basic, Process, Technical) showing the available node shapes with visual previews.
Select a shape to insert a new node into the diagram source. The editor caret moves to the new node so you can immediately type its label.
Adding subgraphs
Section titled “Adding subgraphs”Click Add Subgraph in the toolbar to insert a new subgraph container into the diagram source.
Drag to add with shape
Section titled “Drag to add with shape”Drag the connection handle on a node to an empty area of the canvas. A shape picker appears at the drop location, lets you choose the shape, then inserts the new node connected to the source node by a new edge.
Connecting elements
Section titled “Connecting elements”Hover over a node in edit mode to reveal a connection handle. Drag from the handle to a target node to create a new edge between them. The corresponding edge syntax is added to the diagram source automatically.
Edge retargeting
Section titled “Edge retargeting”Drag an existing edge’s endpoint to a different node to change where the connection points. The source code is updated to reflect the new target.
Moving elements
Section titled “Moving elements”Click and drag a selected node to reposition it. The source code is updated to reflect the new position.
- Moving nodes between subgraphs — drag a node into or out of a subgraph to change its scope. When a node crosses a subgraph boundary, the source code structure is updated accordingly.
- Moving subgraphs — click a subgraph to select it first, then drag. You can drag a subgraph into another subgraph to nest it.
With multiple elements selected, dragging moves all selected elements together as a batch.
Grouping into a subgraph
Section titled “Grouping into a subgraph”Select one or more nodes and press
Subgraph selection shortcuts
Section titled “Subgraph selection shortcuts”Alt + Shift + P AltShiftP Alt + Shift + P AltShiftP selects the parent subgraph of the current selection.Alt + Shift + C AltShiftC Alt + Shift + C AltShiftC selects all children of the currently selected subgraph.Alt + Shift + S AltShiftS Alt + Shift + S AltShiftS selects all siblings at the same nesting level as the current selection.
Inline label editing
Section titled “Inline label editing”In flowcharts, inline label editing applies to node labels, subgraph titles, and edge labels.
Double-click one, type the new text, and commit with
Quick Syntax Reference
Section titled “Quick Syntax Reference”Directions:
TDorTB- Top to bottomLR- Left to rightRL- Right to leftBT- Bottom to top
Node shapes:
[Text]- Rectangle([Text])- Stadium/pill{Text}- Diamond (decision)[/Text/]- Parallelogram (input/output)((Text))- Circle
Generalized shape syntax (A@{ shape: datastore }) covers the upstream catalog, including the new datastore shape (Mermaid 11.15.0+, with data-store as an alias).
The plugin classifies it under the Technical category in shape completion and flags it on pre-11.15.0 runtimes with a version annotation.
Edges:
-->- Arrow---- Line-.->- Dotted arrow==>- Thick arrow-->|Label|- Arrow with textanimate A --> B- Animated edge
Subgraphs:
flowchart LR subgraph Backend API --> DB end subgraph Frontend UI --> API endFor the complete syntax reference, see the Mermaid.js Flowchart documentation.