Agentflow Diagram
Last updated:
Mermaid Studio recognizes and renders agentflow diagrams inside IntelliJ IDEA and other JetBrains IDEs.
An agentflow diagram maps an AI agent workflow: each agent is a flow container of tasks, tool calls, and decisions, joined by sequence, reference, and failure edges.
Live Preview
Section titled “Live Preview”Mermaid Studio opens an agentflow diagram in a split editor with the highlighted source on the left and the rendered workflow on the right. The example below drafts release notes with one agent and checks them with a second, looping back when a claim doesn’t hold, with classes highlighting the agents’ tasks, rendered under three IDE themes:
IDE Support
Section titled “IDE Support”Agentflow diagrams are a basic syntax highlighting type with a few editing aids on top.
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.
Pressing
Live templates expand a short abbreviation into a larger snippet, with tab stops for the parts you fill in.
Type the abbreviation, press
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.
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.js 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.
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 (
Bundled and user-authored color themes with light and dark variants that apply to this diagram type from the Appearance menu or the Switch Diagram Theme action. Applying a theme writes the resolved theme variables into the diagram’s frontmatter, so the file renders the same outside the IDE.
At the start of a line, completion offers the statement keywords such as flow, global, and connector, plus each direction value.
Press flow or global header and the editor inserts the closing end, and every container folds like any other block.
When the diagram shows in a preview, Mermaid.js parser errors are marked in the editor on the token they point to, so a mistake in the body shows up where you typed it (see Diagram Validation).
Frontmatter completion covers the config.agentflow block, and the sample picker includes basic and styled agentflow samples to start from.
Styling with classes
Section titled “Styling with classes”Style nodes and containers with classDef, class, and style statements, attach a class inline with the ::: suffix, and restyle edges with linkStyle.
The editor completes CSS properties and values inside these statements, completes class names wherever a class is referenced, and shows a color swatch in the gutter next to each color.
Renaming a classDef updates every use of that class, and an inspection flags a class that is defined but never used or used but never defined.
In the styled sample below, the gutter shows the colors of the classDef and style lines, and the preview shows the restyled nodes and failure edge:
Live templates
Section titled “Live templates”Mermaid Studio bundles live templates for the building blocks of an agentflow diagram, so you can scaffold an agent container or a connector without recalling the metadata keys. Type the abbreviation, accept it from the completion popup, and tab through the variables. See Live Templates for the cross-cutting mechanics (triggering, contextual visibility, configuration).
| Abbreviation | Expansion |
|---|---|
flow | Flow container block (flow id["Label"] … end) |
global | Global block for shared nodes (global … end) |
connector | Connector with protocol and endpoint (connector id["Label"] plus its @{ protocol, endpoint } block) |
node | Node with a shape (id["Label"]@{ shape: … }) |
edge | Labeled sequence edge (source -- label --> target) |
meta | Metadata block on an element (id@{ key: "value" }) |
Quick Syntax Reference
Section titled “Quick Syntax Reference”Nodes and shapes
Section titled “Nodes and shapes”A node is an identifier, an optional label in brackets, and an optional @{ shape: … } block; a node without a shape is drawn as a task.
Agentflow defines six shapes:
| Shape | Use it for |
|---|---|
task | A unit of work an agent performs |
tool | A callable capability such as a function or an API |
input | Data entering the workflow |
decision | A branch point |
refdoc | Reference material an agent consults |
action | A side-effecting step such as sending or publishing |
Each of the three edge operators has its own meaning: --> passes control or data, -.- marks a reference that an agent consults, and --x is a failure path.
Sequence and failure edges take a label in the middle:
agentflow-beta TB check["Tests pass?"]@{ shape: decision } ship["Ship it"]@{ shape: action } fix["Fix the build"]@{ shape: task } logs["Build logs"]@{ shape: refdoc } check -- yes --> ship check -- no --> fix fix --x check fix -.- logsFlows and global nodes
Section titled “Flows and global nodes”A flow block groups nodes into a container, usually one agent, and closes with end.
Flows nest, and a flow is itself an edge endpoint.
Declare a node that several flows share inside global … end:
agentflow-beta TB global guide["Style guide"]@{ shape: refdoc } end flow writer["Writer"] draft["Draft copy"]@{ shape: task } draft -.- guide end flow reviewer["Reviewer"] check["Check claims"]@{ shape: task } end writer --> reviewerFor complete syntax details, see the Mermaid.js agentflow documentation.