Usage

UserJourney allows the creation of user journey diagrams.

A user journey is divided into sections. A section contains tasks that are carried out to complete the section. A task has one or more actors and a score between 1 and 5 inclusive that represents the “success” of the task.

Example

PHP

$alice = new Actor('Alice');
$bob = new Actor('Bob');
$charlie = new Actor('Charlie');
$dave = new Actor('Dave');

echo Mermaid::create(UserJourney::class)
    ->withTitle('User Journey')
    ->withSection(
        (new Section('Section 1'))
            ->withTask(
                (new Task('Task 1', 2))
                    ->withActor($alice)
                ,
                (new Task('Task 2', 3))
                    ->withActor($alice, $bob)
                ,
                (new Task('Task 3', 1))
                    ->withActor($bob)
            )
        ,
        (new Section('Section 2'))
            ->withTask(
                (new Task('Task 4', 4))
                    ->withActor($alice, $bob, $charlie)
                ,
                (new Task('Task 5', 1))
                    ->withActor($charlie)
            )
        ,
        (new Section('Section 3'))
            ->withTask(
                (new Task('Task 6', 3))
                    ->withActor($alice)
                ,
                (new Task('Task 7', 3))
                    ->withActor($dave)
            )
        ,
        (new Section('Section 4'))
            ->withTask(
                (new Task('Task 8', 4))
                    ->withActor($alice)
                ,
                (new Task('Task 9', 3))
                    ->withActor($alice, $bob)
                ,
                (new Task('Task 10', 1))
                    ->withActor($bob, $charlie, $dave)
            )
    )
    ->render()
;

Generated Mermaid

<pre class="mermaid">
journey
  title User Journey
  section Section 1
    Task 1:2:Alice
    Task 2:3:Alice,Bob
    Task 3:1:Bob
  section Section 2
    Task 4:4:Alice,Bob,Charlie
    Task 5:1:Charlie
  section Section 3
    Task 6:3:Alice
    Task 7:3:Dave
  section Section 4
    Task 8:4:Alice,Bob
    Task 9:3:Alice,Bob
    Task 10:1:Bob,Charlie,Dave
</pre>

Mermaid Diagram

        journey
  title User Journey
  section Section 1
    Task 1:2:Alice
    Task 2:3:Alice,Bob
    Task 3:1:Bob
  section Section 2
    Task 4:4:Alice,Bob,Charlie
    Task 5:1:Charlie
  section Section 3
    Task 6:3:Alice
    Task 7:3:Dave
  section Section 4
    Task 8:4:Alice,Bob
    Task 9:3:Alice,Bob
    Task 10:1:Bob,Charlie,Dave