If you're new to Mermaid, flowcharts are the best place to start.
A flowchart is a simple way to show how a process works from one step to the next. Instead of describing a workflow with long paragraphs, you can present it visually so readers understand it at a glance.
Flowcharts are commonly used for:
- Website navigation
- User login processes
- Order processing
- API workflows
- Business processes
- Decision making
- Software documentation
Because they're so flexible, flowcharts are the most widely used Mermaid diagram type.
Creating Your First Flowchart
Every Mermaid flowchart begins with the flowchart keyword, followed by the direction of the diagram.
Example:
```mermaid
flowchart TD
Start --> Login
Login --> Dashboard
```
This creates a simple workflow:
Start
│
▼
Login
│
▼
Dashboard
Although the syntax is simple, it can represent almost any process.
Choosing the Diagram Direction
Mermaid lets you control the direction of your flowchart.
This helps you create diagrams that fit your content and screen layout.
| Direction |
Meaning |
TD |
Top to Bottom |
BT |
Bottom to Top |
LR |
Left to Right |
RL |
Right to Left |
Top to Bottom
This is the default layout and is commonly used for tutorials and documentation.
```mermaid
flowchart TD
Start --> Step 1
Step 1 --> Step 2
Step 2 --> Finish
```
Best for:
- Tutorials
- Instructions
- Step-by-step guides
Left to Right
If your workflow is wider than it is tall, a left-to-right layout is often easier to read.
```mermaid
flowchart LR
Home --> Products
Products --> Checkout
Checkout --> Success
```
Best for:
- Website navigation
- Shopping journeys
- User flows
Right to Left
This layout is less common but can be useful in certain workflows.
```mermaid
flowchart RL
Finish --> Review
Review --> Start
```
Bottom to Top
You can also build diagrams that flow upward.
```mermaid
flowchart BT
Finish --> Step 2
Step 2 --> Start
```
Although it's rarely used, Mermaid supports it when needed.
Connecting Nodes
Nodes are connected using arrows.
The simplest arrow is:
A --> B
This means the flow moves from A to B.
You can create longer workflows by connecting additional nodes.
```mermaid
flowchart TD
Start --> Login
Login --> Dashboard
Dashboard --> Profile
Profile --> Logout
```
This creates a complete user journey through an application.
Giving Nodes Better Names
Instead of short labels like:
A --> B
use meaningful names.
Example:
```mermaid
flowchart TD
Visitor --> Login
Login --> Dashboard
Dashboard --> Reports
```
Clear labels make your diagrams easier to understand, especially in larger projects.
Adding Text to Arrows
Sometimes you want to explain what happens between two steps.
You can place a label on the connecting arrow.
Example:
```mermaid
flowchart TD
User -->|Signs In| Dashboard
```
This makes the workflow easier to follow because the relationship between the two steps is clearly described.
Arrow labels are useful for:
- API requests
- User actions
- Approval workflows
- Business processes
Using Different Node Shapes
Not every step in a process should look the same.
Mermaid supports different node shapes to represent different types of actions.
Rectangle
The standard rectangle is the most commonly used shape.
```mermaid
flowchart TD
Login[Login Page]
```
Use rectangles for general steps in a workflow.
Rounded Rectangle
Rounded corners often represent the beginning or end of a process.
```mermaid
flowchart TD
Start(Start)
```
These are commonly used for start and finish points.
Circle
A circle can highlight a specific event or state.
```mermaid
flowchart TD
A((Success))
```
Diamond
Diamonds represent decisions.
```mermaid
flowchart TD
Decision{Password Correct?}
```
Decision nodes are ideal when a process can follow more than one path.
Building a Login Flow
Let's combine what you've learned into a practical example.
```mermaid
flowchart TD
Start --> Login
Login --> Check{Valid Credentials?}
Check -->|Yes| Dashboard
Check -->|No| Error
Error --> Login
```
This diagram represents a common authentication process.
Workflow:
Start
│
▼
Login
│
▼
Valid Credentials?
├── Yes → Dashboard
└── No → Error → Login
This type of flowchart is frequently used in application documentation and software design.
Building an Online Shopping Flow
Flowcharts are also useful for documenting business processes.
Example:
```mermaid
flowchart LR
Browse --> Cart
Cart --> Checkout
Checkout --> Payment
Payment --> Confirmation
```
This simple diagram explains the complete customer journey from browsing products to completing a purchase.
Pro Tip
Keep your flowcharts focused on a single process.
Instead of creating one large diagram with dozens of steps, split complex workflows into multiple smaller diagrams.
Smaller flowcharts are easier to read, easier to update, and much more helpful for your readers.
