Skip to content
English
All tools

Categories

Developer ToolsEncoding & DecodingJSON & DataHash & ChecksumText ToolsDate & TimeNetwork ToolsFile ToolsMarkdown & Diagrams

Flowchart Generator

Describe a process one step chain per line and get a flowchart plus the Mermaid code behind it.

Processed locally in your browser

Options
One chain per line with "->". Label an arrow with "-text->". Or paste Mermaid code starting with "flowchart".0 chars · 0 lines
The result will appear here.

What is Flowchart Generator?

A flowchart shows the steps of a process and the decisions that branch it. This tool offers two ways to make one: write a plain outline with arrows ("Start -> Check input -> Valid? -yes-> Save"), or paste full Mermaid flowchart code for total control.

In outline mode every line is a chain of steps. Identical labels reuse the same node, a label ending with "?" becomes a diamond decision, Start and End become rounded terminals, and "-yes->" puts a label on the arrow. The generated Mermaid code is shown next to the diagram so you can copy and refine it.

How does it work?

  1. Write one chain per line, joining steps with "->" and labelling an arrow with "-text->".
  2. Pick the direction (top-down, left-right, bottom-up, right-left) and a theme.
  3. Check the diagram and the "Mermaid code" panel; paste your own Mermaid flowchart code any time.
  4. Export the flowchart as SVG or PNG, or copy the Mermaid code.

Common use cases

  • Documenting a sign-up, approval or support escalation process.
  • Explaining an algorithm or business rule with decision branches.
  • Turning meeting notes about a workflow into a shareable picture.
  • Getting a first Mermaid draft quickly, then refining it in the editor.

Examples

Try this input in the tool above:

Start -> Check input -> Valid? -yes-> Save record -> Send confirmation -> End
Valid? -no-> Show error message -> Check input

Privacy

Flowchart Generator runs entirely in your browser. The text or files you provide are processed on your device and are not uploaded, logged or stored on our servers.

Limitations

Outline mode covers nodes, decisions and labelled arrows only. Subgraphs, custom styling and other advanced features need Mermaid code. Separate decision branches by repeating the decision label on another line.

Frequently asked questions

How do I draw a decision with yes and no branches?

End the label with a question mark, then write one line per branch: "Valid? -yes-> Save" and "Valid? -no-> Show error". Both lines share the same diamond node.

What does the direction option do to my code?

It rewrites only the first line ("flowchart TD" becomes "flowchart LR", for example). Choose "Keep the code’s own" to respect a direction you typed.

Can I paste Mermaid code instead of an outline?

Yes. If the text starts with a Mermaid keyword such as flowchart or graph, it is rendered as-is, with only the optional direction and theme applied.

Related tools

More tools in Markdown & Diagrams →