Kanban Board
Last updated:
Mermaid Studio provides language support for Kanban board diagrams inside IntelliJ IDEA and other JetBrains IDEs. Kanban diagrams visualize task boards with columns representing workflow stages and cards representing individual tasks.
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 kanban boards, 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.
Pressing
Live templates expand a short abbreviation into a larger snippet, with tab stops for the parts you fill in.
Type the abbreviation, press
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.
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.
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.
Completion
Section titled “Completion”Inside a card’s @{ ... } block, completion offers the assigned, ticket, and priority keys the card does not have yet.
After a key it offers the values that fit: the priority levels, the assignees already on the board so each name has one spelling, and the next ticket number in the format the board already uses.
Inside a card’s description, type @ at the start of a word to pick an assignee or another card’s ticket number; the chosen value replaces the @ as plain text.
Quick Syntax Reference
Section titled “Quick Syntax Reference”A board is a list of columns, each holding cards, and a card can have metadata in an @{ ... } block:
kanban todo[To Do] t1[Write the release notes]@{ assigned: 'Dana', ticket: 'DOC-12', priority: 'High' } done[Done] t2[Draft the plan]Live templates
Section titled “Live templates”Mermaid Studio bundles a live template for the typed-metadata syntax that Kanban cards use, so you can attach an assignee, ticket, and priority without recalling the @{ ... } field names.
Type the abbreviation, accept it from the completion popup, and tab through the variables; the priority field offers a dropdown of Very High, High, Medium, Low, and Very Low when you reach it.
The template can be toggled under Settings > Tools > Mermaid Studio > Live Templates in the Kanban group. See Live Templates for the cross-cutting mechanics (triggering, contextual visibility, configuration).
| Abbreviation | Expansion |
|---|---|
task | Task with metadata (id[Description]@{ assigned: ..., ticket: ..., priority: ... }) |
Learn More
Section titled “Learn More”For complete syntax documentation including task metadata and styling, see the Mermaid.js Kanban documentation.