Mermaid User Journey Diagrams

User journey diagrams map the user's experience through a process or system. Perfect for UX design, customer experience mapping, and process optimization.

Use Case

Use user journey diagrams when you need to:

• Map user experiences
• Design UX flows
• Document customer journeys
• Identify pain points
• Optimize user flows

Code

 1```mermaid
 2journey
 3    title User Journey
 4    section Sign Up
 5      Visit Site: 5: User
 6      Create Account: 4: User
 7    section Onboarding
 8      Complete Profile: 3: User
 9      First Action: 5: User
10```

Result:

Explanation

• journey - Start user journey diagram
• title - Journey title
• section - Major phase of journey
• Task: Score: Actor - Task format
• Score: 1-5 (satisfaction/importance)

Examples

Example 1: E-Commerce Purchase

 1```mermaid
 2journey
 3    title Shopping Experience
 4    section Discovery
 5      Browse Products: 5: Customer
 6      Search Items: 4: Customer
 7      View Details: 5: Customer
 8    section Purchase
 9      Add to Cart: 4: Customer
10      Checkout: 3: Customer
11      Payment: 2: Customer
12    section Delivery
13      Receive Order: 5: Customer
14      Unbox Product: 5: Customer
15```

Result:

Example 2: Application Onboarding

 1```mermaid
 2journey
 3    title App Onboarding
 4    section Sign Up
 5      Download App: 5: User
 6      Create Account: 4: User
 7      Verify Email: 3: User
 8    section Setup
 9      Complete Profile: 4: User
10      Set Preferences: 3: User
11      Tutorial: 5: User
12    section First Use
13      First Feature: 5: User
14      Explore: 4: User
15      Get Help: 3: User
16```

Result:

Notes

• Score range: 1-5 (typically satisfaction or importance)
• Actor identifies who performs the task
• Sections group related tasks
• Use descriptive task names

Gotchas/Warnings

• ⚠️ Format: Must use Task: Score: Actor format
• ⚠️ Score: Must be 1-5 (integer)
• ⚠️ Sections: Group related tasks logically
• ⚠️ Actor: Keep actor names consistent

Related Snippets

• Architecture Diagrams (C4 Model)
  Create system architecture diagrams using C4 model with Mermaid
• Chart.js Bar Chart
  Create bar charts for data visualization
• Graphviz DOT Diagrams
  Create complex graph layouts with Graphviz DOT language
• KaTeX Math Examples and Tips
  Comprehensive guide to KaTeX math notation with examples and tips
• Mermaid Arbitrary Graphs
  Create arbitrary graphs and networks with Mermaid
• Mermaid Block Diagrams
  Create block diagrams for system architecture with Mermaid
• Mermaid Charts (Pie, Bar, Line)
  Create pie charts, bar charts, and line charts with Mermaid
• Mermaid Class Diagrams (UML)
  Create UML class diagrams with Mermaid
• Mermaid Entity Relationship Diagrams
  Create Entity Relationship Diagrams (ERD) with Mermaid
• Mermaid Flowchart
  Create flowcharts and decision trees with Mermaid
• Mermaid Gantt Chart
  Create Gantt charts for project timelines and scheduling
• Mermaid Git Diagrams
  Create Git branch and commit diagrams with Mermaid
• Mermaid Kanban Boards
  Create Kanban boards for project management with Mermaid
• Mermaid Mindmaps
  Create mindmaps for brainstorming and organizing ideas with Mermaid
• Mermaid Packet Diagrams
  Create packet diagrams for network protocols with Mermaid
• Mermaid Quadrant Charts
  Create quadrant charts for prioritization with Mermaid
• Mermaid Radar Charts
  Create radar charts for multi-dimensional comparisons with Mermaid
• Mermaid Requirement Diagrams
  Create requirement diagrams for system requirements with Mermaid
• Mermaid Sankey Diagrams
  Create Sankey diagrams for flow visualization with Mermaid
• Mermaid Sequence Diagram
  Create sequence diagrams for interactions and API flows
• Mermaid State Diagrams
  Create state diagrams and state machines with Mermaid
• Mermaid Timeline Diagrams
  Create timeline diagrams for chronological events with Mermaid
• Mermaid Treemap Diagrams
  Create treemap diagrams for hierarchical data visualization with Mermaid
• Mermaid ZenUML Diagrams
  Create ZenUML sequence diagrams with Mermaid
• P5.js Interactive Visualizations
  Create interactive visualizations and animations with P5.js