2.3 Practical Flowchart Example

  1. Create a login flow: User → Auth → Database → Response.

  2. Show the Mermaid code.

  3. Render and explain the output.

1. Create a Login Flow: User → Auth → Database → Response

Now that you understand nodes, arrows, branching, and styling, let’s put it all together with a real-life example: a simple login flow. Login flows are perfect for practice — they show how a user interacts with a system, how the system checks the data, and how the system responds.

✅ What We’ll Build

We’ll create a flowchart that shows:

  1. The User sends login information.

  2. The system’s Authentication Service (Auth) checks the credentials.

  3. If valid, Auth queries the Database for the user’s record.

  4. The system sends back a Response: success or failure.

This is a common pattern in any web or mobile app.

✅ How to Write It in Mermaid

Here’s how you can write this flow:

✅ How It Works

  • Nodes:

    • User is the person trying to log in.

    • Auth is the system that checks credentials.

    • DB is the database that stores user records.

    • Response is the final step — what the system tells the user.

  • Arrows:

    • The User sends credentials to Auth.

    • Auth checks the Database for valid records.

    • The Database sends data back to Auth (two-way arrow logic).

    • Auth then sends a final Response back to the User.

✅ Adding More Detail

You can expand this with decision nodes to show what happens if login fails:

What’s added here:

  • A decision node Check ({ } means it’s a diamond).

  • If credentials are valid, the user gets Login Success.

  • If not, they get Login Failed.

✅ How to Use This

This simple login flow example:

  • Shows how data moves in a typical system.

  • Combines basic nodes, arrows, and a decision point.

  • Can be expanded to include more details (like retry loops, security checks, or logging).

In short:

📌 This practical example ties together everything you’ve learned: Nodes, arrows, conditions, and a real-world use case — making it easy to see how Mermaid helps you document common workflows in clear, reusable diagrams.

2. Show the Mermaid Code

To really understand how this login flow works in Mermaid, let’s look at the full code example in one block. This shows a complete, simple login process, from the user’s action to the final response. You can copy, paste, and test this code in your favorite Markdown editor or the Mermaid Live Editor.

✅ Full Login Flow Example

✅ How to Read It

  • graph TD → The diagram flows Top-Down.

  • Nodes:

    • User → The person trying to log in.

    • Auth → The service that checks the username and password.

    • DB → The database that stores user data (drawn as a circle with parentheses ( )).

    • Check → A decision node { } asking if the credentials are valid.

    • Response → What happens if the login is successful.

    • Error → What happens if the login fails.

  • Arrows:

    • --> means “connect and point to the next step.”

    • --|Yes|--> and --|No|--> are labeled arrows showing the decision paths.

✅ Try It Yourself

Copy this entire code block:

  1. Open the Mermaid Live Editor.

  2. Paste the code on the left side.

  3. Watch the diagram render instantly on the right side.

  4. Try changing node labels, arrow directions, or add new nodes to see what happens!

In short:

📌 This full Mermaid code example shows how simple text can produce a clear, real-world login flowchart — all version-controlled and easy to update.

3. Render and Explain the Output

Once you’ve written your Mermaid code for the login flow, it’s time to see it in action. Rendering your diagram shows you exactly how your text instructions turn into a clear, visual flowchart.

✅ How to Render the Diagram

To render your diagram: 1️⃣ Copy the full Mermaid code block:

2️⃣ Paste it into a tool that supports Mermaid, like:

  • The Mermaid Live Editor

  • The Markdown preview in VS Code (with a Mermaid plugin)

  • Obsidian (which renders Mermaid blocks automatically)

  • GitBook (native Mermaid support)

3️⃣ The diagram will instantly appear next to your code.

  • If you change the text, the diagram updates live.

  • If something doesn’t render, check for missing backticks or syntax errors.

✅ Explaining the Output

When you render this login flow diagram, here’s what you’ll see:

Nodes and Flow:

  • User: The starting point — someone trying to log in.

  • Authentication Service: Checks the user’s credentials.

  • Database: Holds stored usernames, passwords, or user data.

  • Decision Node: A diamond labeled Credentials Valid? checks if the username and password match.

  • Response: If valid, the system sends a Login Success.

  • Error: If not valid, the system sends a Login Failed.

Arrows:

  • Solid arrows --> connect each step.

  • Labeled arrows --|Yes|--> and --|No|--> show clear branches from the decision node.

✅ What This Visual Tells You

This flowchart makes it easy to answer:

  • Where does the user request go? → To Auth.

  • How does the system validate? → Auth checks with the Database.

  • What happens next? → The result goes through a decision node.

  • What are the possible outcomes? → Login Success or Login Failed.

Even without reading any code or documentation, anyone looking at this diagram instantly understands the basic login logic.

✅ Tips for Using This Output

  • Show it in project docs so teammates understand how your login works.

  • Add more details later, like logging, error handling, or security checks.

  • Keep your code and diagram together — if your flow changes, updating the text keeps the diagram in sync.

In short:

📌 Rendering turns your plain text into a clear, clickable diagram. 📌 Explaining what each piece means helps you and your team understand, discuss, and improve your system.

Previous2.2 Common Flowchart ElementsNextCHAPTER 3

Last updated