ceasg — Visual Mermaid Editor
A VS Code extension for editing Mermaid diagrams visually. Click a CodeLens on any mermaid code block in Markdown, and the editor opens in a pane beside your text. Edit flowcharts with an intuitive drag-and-drop canvas, or preview other Mermaid diagram types with live rendering.
Features
- CodeLens integration — "Mermaid: Open Visual Editor" appears above every
mermaid block in Markdown.
- Dual-mode editing:
- Flowchart WYSIWYG — Drag nodes, connect edges, adjust shapes/colors, auto-layout, and set position all visually on the canvas.
- Live preview for other types — Sequence, state, class, and other diagram types render live as you edit the Mermaid source in the editor.
- Two-way sync:
- Edits in the visual editor write back to the Markdown file instantly.
- External changes (save in the Markdown editor) pull into the visual editor automatically.
- Layout persistence — Node positions are stored in hidden
%% mermaid-flow:pos %% comments and survive round-trips.
- Block identity — Flowchart nodes carry hidden
%% ceasg:{"id":...} %% markers to maintain identity across edits (compatible with the Obsidian mermaid-flow plugin).
Workflow
- Open a Markdown file with one or more
```mermaid code blocks.
- Click "Mermaid: Open Visual Editor" in the CodeLens above a block.
- The editor pane opens beside your Markdown.
- For flowchart blocks: drag to move, click to select, click endpoints to connect edges, right-click to delete, use the properties panel to change shape/color/label.
- For other diagram types: edit the text in the Markdown editor (left), see live preview updates in the editor pane (right).
- Save the Markdown file (
Ctrl+S / Cmd+S). External changes sync back into the visual editor automatically.
The extension preserves two lightweight comment formats for interoperability:
%% ceasg:{"id":"....."} %% — Marks a flowchart node with a stable identity. Safe to edit or remove (if removed, a new ID is assigned on next save).%% mermaid-flow:pos id=x,y id=x,y ... %% — Records node layout positions. Updated on every edit; safe to ignore or delete (layout resets to auto-layout on next save).
Both are cross-compatible with the Obsidian mermaid-flow plugin.
Known Limitations (v1)
- Flowchart WYSIWYG only — Other diagram types (sequence, state, class, etc.) render as live preview with a text editor; no visual editing UI.
- No PNG/SVG export — Use Mermaid's live editor or browser DevTools to screenshot/save.
- No AI assist — Fast-follow feature.
- No copy/paste — Select, duplicate, and other multi-select shortcuts deferred to v1.1.
- No subgraph creation UI — The model supports subgraphs; a create-subgraph action is planned.
- No theme/style presets dropdown — Inline color/style controls available in the properties panel.
Requirements
- VS Code 1.103.0 or later.
- A Markdown file with
```mermaid code blocks.
Acknowledgements
The flowchart engine — parsing, serialization, dagre layout, geometry, and shapes — is
ported from Mermaid Flow by
THANSHEER, an Obsidian plugin for visually editing Mermaid flowcharts. Those files live in
src/core/ and each carries an attribution header. The %% mermaid-flow:pos %% layout
convention is reused so diagrams stay cross-compatible with that plugin. Sincere thanks to
the Mermaid Flow project — ceasg would not exist without it.
Diagrams are rendered with Mermaid and laid out with
dagre.
License
Licensed under the GNU General Public License v3.0 or later — GPL-3.0-or-later.
Because ceasg's flowchart engine is derived from Mermaid Flow (which is GPL-3.0-or-later),
the whole extension — including its newly written code — is licensed under GPL-3.0-or-later.
See LICENSE and NOTICE.md for details.
