How to create a user-journey diagram with ComboStrap

About

The journey component is a diagram component that permits to create a user journey diagram.

Example

The markup

<journey>
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me
</journey>

The output:

journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 5: Me

Syntax

The syntax is based on the user journey mermaid definition

<journey>
   ... Mermaid User Journey Diagram definition ...
</journey>

Mermaid offers a live editor that you can use to validate and develop your diagrams.

This component is based on the mermaid component.