How to Draw User Journey Diagrams in Mermaid

2026-03-05 · MermZen Tutorial

User journey diagrams visualize the process of users interacting with products or services, showing user behaviors, emotions, and pain points. They are ideal for user experience design, product optimization, and service design. Mermaid uses journey keyword for user journey diagrams.

Declaring a Chart

Use journey keyword:

journey
    title User Journey Diagram Title

Basic Journey Definition

Create simple user journey:

journey
    title Basic User Journey
    section Discovery
      Search Engine : 5: User
      Social Media Recommendation : 3: User
    section Visit
      Homepage Browsing : 4: User
      Product List Page : 5: User
    section Purchase
      Product Detail Page : 4: User
      Add to Cart : 5: User
      Checkout : 4: User
    section Completion
      Order Confirmation : 5: User
      Payment Success : 5: User

Emotional Curves

Add user emotion ratings:

journey
    title Emotional Curve Journey
    section Discovery Phase
      Search Engine Search : 5: User
      Ad Click : 3: User
      Product Comparison : 4: User
    section Consideration Phase
      Product Detail Reading : 5: User
      User Review Viewing : 4: User
      Price Comparison : 3: User
    section Purchase Phase
      Add to Cart : 5: User
      Fill Address : 3: User
      Payment : 4: User
    section Post-Purchase Phase
      Order Confirmation : 5: User
      Receipt : 4: User
      Evaluation : 3: User

Full Example: E-Commerce Shopping Flow

journey
    title E-Commerce User Shopping Journey
    section Need Recognition
      Recognize Need : 4: User
      Define Requirements : 5: User
      Product Research : 4: User
    section Information Gathering
      Search Engine Search : 5: User
      Browse E-Commerce Platform : 4: User
      View Product Reviews : 5: User
      Price Comparison : 3: User
    section Purchase Decision
      Product Detail Page : 4: User
      User Review Analysis : 5: User
      Customer Service Consultation : 3: User
    section Purchase Process
      Add to Cart : 5: User
      Cart Checkout : 4: User
      Fill Address : 3: User
      Payment : 5: User
    section Delivery Experience
      Order Confirmation : 5: User
      Shipment Notification : 4: User
      Logistics Tracking : 5: User
      Receipt : 5: User
    section Post-Purchase Experience
      Product Usage : 4: User
      Problem Feedback : 3: User
      Review Sharing : 4: User
      Repurchase : 5: User

Quick Reference

Next Step

After mastering user journey diagrams, you can continue learning other Mermaid diagram types or check our Mermaid Cheat Sheet for complete syntax reference.

To try the above code in MermZen, click Open Editor and paste the code there.