Flowchart Editor

A visual flowchart editor for OutSystems developers. Map out complex flows for Client Actions, Server Actions, Service Actions, or Data Actions in VS Code before building them in Service Studio.

Features bidirectional Mermaid sync — meaning your logic is stored in human-readable Markdown that you own and can edit anywhere.

Part of the Flowmo Extension Pack — a vibe coding environment for OutSystems developers.

Privacy

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

Sustainability & Open Formats

While this VS Code extension is currently distributed as a closed-source visual wrapper, your data is 100% open and portable.

Flowmo uses standard Markdown and Mermaid.js syntax. If you ever decide to stop using this extension, your .flowchart.md files remain accessible, editable in any text editor, and render-ready in any Mermaid-compliant tool. We believe in providing a premium visual experience without locking you into proprietary file formats.

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.