マーメイド#17 ユーザージャーニーマップ

ひとりマーメイド17日目
ユーザージャーニーマップ

概要

マーメイドエンジニアのひろきです。こんにちは。
最近流行り（流行らせたい）のマーメイドについて理解を深めていこうと思います。

この記事ではユーザージャーニーマップの記述について紹介します！

↓↓前回の記事はこちら

マーメイドで記述するジャーニーマップ

前回の記事ではgitグラフの記法について紹介しました。

今日はジャーニーマップを見ていきます！ジャーニーマップはユーザーの行動やフローを可視化するダイアグラムです。横軸が時間、縦軸が感情を表します。

mermaid

journey
    title Flow

    section Plane
        Phase a: 4: user1
        Phase b: 1: user1, user2
        Phase c: 2: user3
    section Do
        Phase d: 3: user1
        Phase e: 5: user1, user2, user3

宣言とタイトル

ジャーニーマップはjourneyで宣言されます。

titleでダイアグラムにタイトルをつけることができます。こちらは省略可能です。

mermaid

journey
    title Develop

    Phase a: 4
    Phase b: 1
    Phase c: 2

フェーズと感情

フロー中のフェーズと感情の指標を記述します。感情は数字で表され、大きい方がポジティブになります。

PHASE: NUMBER

mermaid

journey
    Phase a: 1
    Phase b: 2
    Phase c: 3
    Phase d: 4
    Phase e: 5

小数も使用可能です。

mermaid

journey
    Phase a: 1
    Phase b: 1.5
    Phase c: 2
    Phase d: 3.141592
    Phase e: 5.0

数字の範囲

マーメイドで記述するジャーニーマップでは感情を数字で表します。原則数字の範囲は1~5です。

ただし範囲を超えてもレンダリング上問題はないので、軸を突き抜けて表示されます。この場合上限・下限はありません。負の値もとることができます。

mermaid

journey
    Phase a: -10
    Phase b: 3
    Phase c: 9
    Phase d: 20

Qiita上でレンダリングすると描画領域が限られているため、見切れてしまいます。

セクション

フローを複数のセクションに区切ることができます。
section SECTION_NAME

mermaid

journey
    section Plane
      Phase a: 1
      Phase b: 2
      Phase c: 3
    section Do
      Phase d: 4
      Phase e: 5

ユーザーの追加

ユーザーを追加してフェーズにアイコンを付与することができます。同一フェーズに複数人のユーザーがいる場合はコンマで区切って並べます。
PHASE_NAME: NUMBER: USER_NAME

mermaid

journey
    Phase a: 1: user1
    Phase b: 2: user1, user2
    Phase c: 3: user3
    Phase d: 4: user1
    Phase e: 5: user1, user2, user3

まとめ

ユーザージャーニーマップの記法を紹介しました！

↓↓次回の記事はこちら！！

参考