What's new in Mermaid Studio 2026.4.7?

Mermaid Studio 2026.4.7 brings visual editing to sequence diagrams. You can now build and rearrange a sequence diagram directly in the preview, with every change written back to your source.

This release also bundles Mermaid.js 12.1.0 and 12.2.0, and reworks the preview’s toolbars so you can place them in any corner or along any edge.

Highlights

Visual editing for sequence diagrams

Turn on Edit Mode in a sequence diagram and the preview becomes a canvas for the whole diagram. Drag from a lifeline to add a message, double-click any label to retype it, and drag participants, messages, and notes to rearrange them. The clip below edits a message in place, then wraps two messages in a loop with Command + G CommandG Control + G CtrlG :

You can also move or reverse a message’s ends, wrap participants in a box, and color a rect or box from swatches that follow the diagram’s theme. Most actions have a keyboard shortcut, so you can step a message or participant into place without leaving the keyboard.

See visual editing on the sequence diagram page for the full action reference.

Sequence diagram parsing

As part of this release’s focus on sequence diagrams, the sequence parser now follows Mermaid.js more closely, so diagrams that render no longer show false syntax errors. See the changelog for the full list of fixes.

Mermaid.js 12.1.0 and 12.2.0

Mermaid.js 12.2.0 is now the default runtime, and 12.1.0 is bundled alongside it. The 11.14.0 and 11.15.0 bundles are removed; if your version setting named either one, it switches to 11.17.2 and a notification tells you so. See the bundled versions for the full list.

Frontmatter completion offers the keys these versions add, such as elk.orientFeedbackEdges and packet bitOrder on 12.1 and mindmap colorBy on 12.2. Inspections follow 12.1’s rules too: an Event Modeling frame ID used twice is now reported, since 12.1 refuses to render it.

Preview toolbars

In edit mode, the preview now shows a diagram actions toolbar with the actions that add to a diagram as a whole, next to the diagram they change. Add Node, Add Subgraph, and Add Swimlane moved there from the editor toolbar. Pan Mode moved into the restyled zoom controls.

You can place the diagram actions toolbar and the zoom controls in any corner or at the middle of any edge in Preview settings.

Changelog

Added

• Sequence: visual editing in the preview: add, move, resize, and delete elements, boxes included
• Sequence: wrap messages in a fragment or participants in a box from the preview
• Sequence: keyboard shortcuts move elements and a message’s ends in the preview
• Sequence: double-click an element’s label in the preview to edit it in place
• Sequence: rect and box colors can be picked from swatches that follow the diagram’s theme
• Agentflow: linkStyle statements get highlighting of edge indexes, interpolate curves, property names, colors, and values, CSS property and value completion, and color gutter icons
• Mermaid.js 12.1.0 and 12.2.0 bundled, with 12.2.0 as the default runtime version
• Event Modeling: an inspection reports a frame ID used twice, which Mermaid.js 12.1 and later refuses to render
• Frontmatter: completion offers elk.orientFeedbackEdges and packet bitOrder on Mermaid.js 12.1 and later, and mindmap colorBy on 12.2 and later
• Flowchart: a repeated subgraph is a weak warning on Mermaid.js versions before 12.1, which draw each declaration separately

Changed

• Preview: restyled zoom controls, and Settings > Tools > Mermaid Studio > Preview places the zoom and diagram actions toolbars in a corner or at the middle of an edge
• Preview: Add Node, Add Subgraph, and Add Swimlane moved from the editor toolbar into a new diagram actions toolbar in the preview, and Pan Mode moved into the zoom controls
• Sequence: # starts a comment unless it forms an entity such as #35; or #quot;, as in Mermaid.js, and the invalid escape warnings are gone
• Flowchart: on Mermaid.js 12.1 and later, a subgraph declared directly inside itself, or a node named after its subgraph, is a weak warning instead of an error

Fixed

• Markdown: Mermaid fences in IDE version 2026.3 keep their highlighting, completion, inspections, and formatting
• Markdown: changing the Mermaid.js runtime or toggling the Markdown extension in IDE version 2026.3 no longer closes an open Markdown file with an error
• Agentflow, use case, and railroad (ABNF) diagrams: an apostrophe, such as in don't, no longer starts a string that runs past the end of its line
• Sequence: no more syntax errors on ; between statements, title: text, numeric participant names such as 1->>2, or @ inside a link URL
• Sequence: participant types in single quotes, such as @{ type: 'database' }, are recognized
• Sequence: participant names with entities, such as Foo#35;Bar, no longer show syntax errors
• Sequence: completion offers as after a participant name on any line, not only the last one
• Sequence: create participant or create actor inside a box is reported as an error, as Mermaid.js rejects it
• Sequence: rect and box colors are read as Mermaid.js reads them: named and hsl() rect colors are no longer flagged, and a box’s first word is its color only when it is one
• Sequence: participants named link, links, properties, or details, as in A->>Link: hi, no longer show syntax errors on Mermaid.js 12.1.0 and later
• Sequence: on Mermaid.js 12.1.0 and later, a space before @{ and names such as my-svc@{…} are no longer reported as errors
• Sequence: arrow completion no longer appears after a note, link, links, properties, or details target, or after a message’s receiver
• Preview: closing a diagram editor, the export or print dialog, or the theme workbench right after opening it no longer leaves its browser running
• Markdown preview: on macOS with scroll bars shown only while scrolling, zooming a diagram until the page scrolls no longer shifts the diagrams and their zoom buttons sideways
• Event Modeling: a frame reference such as ->> 1 no longer links to frame 01, matching Mermaid.js
• Event Modeling: preview errors after a %% comment point at the right line
• Frontmatter: the Mermaid.js 11.17 ELK and XY chart legend keys are no longer offered when Mermaid.js 11.16 is selected

Removed

• Bundled Mermaid.js 11.14.0 and 11.15.0; a version setting that names either one switches to 11.17.2 and says so in a notification

← Previous: 2026.4.5