The Mermaid workspace opens and creates .mmd and .mermaid files. The diagram’s text is the document; the displayed image is calculated from it and is never written back into the file.
Visual and Source
The selector switches between rendering and literal syntax.
The same engine renders Mermaid blocks in Markdown with the same configuration. Rendering itself makes no network requests.
Edit in the rendering
You can manipulate the drawing directly.
A click selects an element. Dragging its body attempts a move meaningful in the diagram’s grammar; when no faithful equivalent exists, the element returns to Mermaid’s calculated position.
The gesture swaps the visual order of two Flowchart nodes, reorders Timeline entries, moves a Quadrant point or a card between Kanban columns, and updates Wardley card coordinates. Repositioning is animated, and the source immediately reflects the resulting edit.
A separate handle creates relationships so a move is never confused with a connection.
In a flowchart, double-clicking a node or arrow selects its label on the canvas. For an arrow without text, the input appears at the midpoint of its path. Add, or double-clicking the background, shows a provisional node with “Node” selected: type its name, then confirm with Return. Escape abandons the input; for a new node, it cancels the addition entirely. Creation and its first label form one undoable action.
Clicking elsewhere confirms the text and continues the chosen action. Saving, switching to Source and closing also confirm input. The field preserves selection, accented characters, copy/paste and text undo/redo. The diagram recalculates after confirmation while keeping zoom and framing. Delete removes the selection when no label is being edited.
Deleting an element is immediate, without confirmation. ⌘Z restores the element and connections removed with it; ⇧⌘Z repeats deletion.
Arrows have an invisible clickable margin: select near the stroke even if it is thin or dotted. The margin stays comfortable when zooming.
Mermaid remains responsible for layout. Balise does not remember arbitrary positions the format cannot express.
Edit through structure
In Visual mode, navigation exposes the diagram’s structure.
Select an element to change its fields, use Add for a declaration matching the current family, Connect when the grammar has explicit references, and Move up or Move down to reorder.
Structural selection opens the properties inspector even if hidden. Edit properties there and choose Apply, or press Return in a text field. For flowchart shapes and arrow types, clicking a thumbnail applies it immediately; ⌘Z returns to the previous choice. Several properties apply together and undo in one step. Constrained values, such as requirement risk or journey scores, provide a choice list.
Fields depend on the diagram: Mindmap topic and Kanban card labels, Sequence participants and messages, Gantt dates and durations, XY values, Radar axes and curves, requirement properties, or Quadrant and Wardley coordinates. A class can receive a label without renaming its referenced identifier.
Structural navigation exposes the same actions to the keyboard and VoiceOver.
Create with a preview
For other families, Add opens a form suited to the element type. Choose its parent or section, fill its properties and check the proposed drawing. Addition is available when the draft preview is valid. Cancel preserves the document. Double-clicking a structured element, or Edit with preview in the inspector, opens the same form for editing.
Flowchart shapes and arrows have named thumbnails. Entity relationships offer illustrated cardinalities. For Gantt, choose a date or preceding task, a duration with units and task states. Move to… offers accepted destinations.
Edit chart data
Chart data opens a table for families using values or series. Cell changes apply together. For an XY chart, category count adjusts all series; added values start at zero, and reducing the count removes the last values. This operation can be undone.
Class-member forms separate visibility, name, parameters and type. Git operations offer existing branches; renaming a branch updates its references. The preview checks the proposed operation’s validity. Unrecognized advanced constructions retain access to their definition.
Templates
The creation center offers the engine’s 28 recognized families with a minimal starting point for each and 16 recommended templates.
The gallery offers search by purpose and type, a preview, three customization fields and Favorites, Recent and Personal views.
Choose a local .mmd or .mermaid folder as your personal library. Personal templates remain ordinary files.
Forgetting the folder removes only Balise’s access. No files are deleted.
In an open diagram, Save copy as template… adds the current diagram to the library.
Inside a Markdown document
Insert opens the same gallery and places the chosen source inside a fence calculated to avoid content conflicts, as one undoable change.
Edit on an existing block opens the same Visual and Source surface in a resizable window.
The work stays isolated: Cancel leaves Markdown untouched and Apply replaces only the block’s interior. A line that would close the block prematurely is refused so the surrounding document is never truncated.
To generate a diagram from text with OpenAI, start in the Markdown space. You can then insert the result into Markdown or open a separate Mermaid draft, depending on whether text is selected. Generation requires an explicit request to OpenAI; diagram rendering stays local.
Copy and export
Copy the source, copy the image or export SVG and PNG.
The exported image is sanitized for display and contains no scripts or active links.
What this surface does not do
- Balise does not remember a position you give an element if Mermaid cannot represent it.
- The
infodiagram has no structural navigation. - An oversized diagram remains readable in Source without rendering.
For rendering problems, see When a diagram does not appear.
Follow this walkthrough from start to finish: Maintain a diagram alongside your code.