Edit flowchart

Edit a directed flowchart with labeled nodes and decision paths.

freeworks offlinenothing uploaded
ToolFlowchart Editor
Input
Output
—

How it works

Node declarations and edge operators are parsed into a directed graph with labels, subgraphs, and shape metadata; a layout engine positions nodes and routes connectors. The direction declaration controls the primary flow orientation.

  • Graph declarations stay separate from left-to-right or top-down layout direction.

Worked example

Login Flow
Generate a login process flowchart
Input
											Direction: TD
Nodes: [{"id":"A","label":"Login Page","shape":"rectangle"},{"id":"B","label":"Valid?","shape":"diamond"},{"id":"C","label":"Dashboard","shape":"rounded"},{"id":"D","label":"Error","shape":"stadium"}]
Edges: [{"from":"A","to":"B","label":"Submit","style":"solid"},{"from":"B","to":"C","label":"Yes","style":"solid"},{"from":"B","to":"D","label":"No","style":"dotted"}]
Output
												flowchart TD
    A["Login Page"]
    B{"Valid?"}
    C("Dashboard")
    D(["Error"])
    A -- "Submit" --> B
    B -- "Yes" --> C
    B -. "No" .-> D

When to use this

Decision processes, onboarding workflows, and CI dependencies edit flowcharts.

Edge cases

  • An edge to an undeclared node may create an implicit node.
  • Special characters in labels can be interpreted as syntax.
  • Cycles are valid graphs but may read poorly in a process flow.

References