Flowchart Editor

Visual flowchart editor with bidirectional Mermaid sync — edit text or drag-and-drop. Opens .flowchart.md files in a custom visual editor while keeping the underlying text in a controlled Mermaid-based format.

Links and Support

• Web version: flowmo.lol
• Issue tracker: GitHub Issues
• Support email: support@flowmo.lol
• Support model: best-effort, no response-time guarantee
• Optional support: buymeacoffee.com/izambasiron

Privacy

• No telemetry is intentionally added in this extension.
• Your flowchart files remain in your local VS Code workspace.

Source Availability

• This extension is distributed as closed-source software.
• The web version is available at flowmo.lol.

Features

• Create new flowcharts — Flowchart Editor: New Flowchart from the command palette
• Visual drag-and-drop editor — add, connect, and arrange flowchart nodes on a canvas
• Bidirectional sync — edits in the visual editor update the text file and vice versa
• .flowchart.md format — human-readable Mermaid-based format with position metadata
• Node types — Start, End, Process, and Decision nodes with validation rules
• Auto layout — apply automatic layout via command palette or Ctrl+Shift+L
• Undo/Redo — full undo/redo support for all visual operations
• Edge splitting — drop nodes onto edges to split them automatically

Getting Started

Try It Out

1. Open the command palette (Ctrl+Shift+P) and run Flowchart Editor: New Flowchart
2. Choose a location and filename for your .flowchart.md file
3. VS Code will open it in the visual flowchart editor
4. Drag nodes from the palette, connect them, or edit the text directly

File Format

The .flowchart.md format is a controlled Mermaid syntax with @{} metadata blocks:

graph TD
  Start@{label: "Start", shape: pill, x-posX: 400, x-posY: 80}
  Check@{label: "Check Input", shape: diamond, x-posX: 400, x-posY: 230}
  Process@{label: "Process Data", shape: rect, x-posX: 250, x-posY: 380}
  End@{label: "End", shape: pill, x-posX: 400, x-posY: 530}
  Start --> Check;
  Check -- True --> Process;
  Check -- False --> End;
  Process --> End;

License

Proprietary. See the LICENSE file included in this extension package.