Change the direction
- Input
- flowchart LR
- Expected output
- fluxo da esquerda para a direita
Swapping TD for LR redraws the same flow horizontally, useful for wide, short diagrams.
Carregando ferramenta… / Loading tool…
flowchart online tutorial
A Mermaid flowchart starts with the flowchart keyword followed by a direction (TD for top-down, LR for left-to-right). This preset already loads a ready approval flowchart, edit the code and watch the result change instantly.
Swapping TD for LR redraws the same flow horizontally, useful for wide, short diagrams.
A new line with the same source node (B) adds another decision branch without touching the rest of the diagram.
The subgraph keyword draws a visual box around the listed nodes up to the matching end, useful for separating stages of a larger process without creating a new diagram.
Mermaid is an open-source JavaScript library that turns plain text, written in its own Markdown-like syntax, into diagrams rendered as SVG. Instead of manually drawing boxes and arrows in a graphics tool, you describe the diagram's structure in a few lines of text and the library computes the layout and draws the result.
No. The syntax runs entirely in the browser, through the mermaid.js library loaded by this page. The same code also works with no install in Mermaid code blocks on GitHub, GitLab and Notion.
Yes. Just add another node with braces {text} and new arrows leaving it; Mermaid recalculates the layout automatically to fit however many nodes and decisions are needed.
The editor shows the original mermaid.js error message below the code, usually pointing at the problem line, and keeps the last valid flowchart visible until you fix the text.
Loading the rendering engine...
Your Mermaid code and the rendered diagram stay in your browser, processed by the mermaid.js library. Nothing is sent to any server.