Visual Mermaid editing with source traceability

A Mermaid editor that understands what you click.

Write Mermaid code, edit diagrams visually, ask AI for scoped changes, and export clean SVG or PNG assets.

Start editingBrowse templates

Mermaid source

Flowchart

Live code

Interactive preview

Collect input

Rendering Mermaid

Features

Edit the diagram as a living object, not a static SVG.

Click-to-edit diagrams

Select flowchart and sequence elements from the SVG and sync the exact source lines.

Scoped AI changes

Ask for whole-diagram improvements or selected-node edits with a safe apply/discard review step.

Template registry

Start from typed templates today and add new chart families through the same registry later.

Traceability-ready

The product architecture leaves room for PRD evidence mapping without forcing it into v1.

Templates

Beautiful starting points for real work.

Browse all templates

Basic Process Flow

A simple start-to-finish process flow for mapping linear work.

View template

Decision Tree Flow

A branching flowchart for comparing decisions and outcomes.

View template

Customer Support Flow

A support request workflow from intake through escalation and resolution.

View template

E-commerce Order Process

An e-commerce checkout flow from registration through payment, shipping, and confirmation.

View template

Product Onboarding Flow

A user onboarding flow with setup, activation, and follow-up steps.

View template

System Architecture Flow

A high-level request flow across frontend, API, services, and storage.

View template

Source trace

Ready for document-backed diagrams.

v1 focuses on the Mermaid editor. The architecture keeps diagram elements, source lines, and AI context structured so PRD evidence mapping can be added cleanly later.

Users upload a product requirement, the system proposes a flow, and each generated node can point back to supporting text.
Node N003linked
Mermaid line 4linked
Evidence paragraph 2linked

Workflow

From rough text to editable Mermaid in four moves.

1

Choose a Mermaid type or workflow template.

2

Edit source while the preview renders automatically.

3

Click the diagram to inspect or adjust elements.

4

Ask AI for changes, then export SVG or PNG.

FAQ

Questions users will ask before trying it.

Does it replace Mermaid syntax?

No. Mermaid source remains the source of truth, so diagrams stay portable.

Which diagrams are visually editable?

Flowchart and sequence diagrams in v1. Other types render and export from code.

Can AI change only selected nodes?

Yes. Selected diagram elements are sent as scoped context to the AI route.

Can templates expand later?

Yes. Templates live in a typed registry that can grow by diagram family.

Build diagrams your team can edit, verify, and trust.

Open the editor, pick a template, and start shaping Mermaid visually.

Launch editor