Mermaid.js ユーザージャーニー構文ガイド

ユーザージャーニーダイアグラムは、アプリケーション内で特定の目標を達成するためにユーザーが取るステップを説明します。システム中心のフローチャートやシーケンス図とは異なり、ユーザージャーニーは人間の行動、ワークフローの段階、時間の経過に伴うユーザー満足度の追跡に注目します。

基本構文構造

すべてのユーザージャーニーは、journey宣言から始まり、タイトルとユーザー体験を分解する順序付きセクションが続きます。

journey
title サンプルユーザージャーニー
section ステージ名
  タスク名: スコア: アクター1, アクター2

構文リファレンス

以下の表は、Mermaid.jsでユーザージャーニーマップを構築するために使用される主な要素を説明しています。

実世界のブループリント：ECチェックアウト体験

このブループリントは、オンラインで商品を購入する際の顧客体験を追跡する完全なユーザー旅程を示しており、感情的な苦痛ポイント（低スコア）と喜びの瞬間（高スコア）を追跡しています。

journey
title オンライン購入旅程
section 商品発見
  商品を検索: 4: ユーザー
  価格を比較: 3: ユーザー
  商品画像を表示: 5: ユーザー
section クレジットカード決済フネル
  カートに商品を追加: 4: ユーザー
  アカウントを作成: 2: ユーザー、システム
  配送情報を入力: 3: ユーザー
  クレジットカード処理: 1: ユーザー、決済ゲートウェイ
section 購入後
  メール確認を受け取る: 5: システム
  配送状況を追跡: 4: ユーザー、物流

構文のヒント：満足度スコアはレンダラーによって自動的に色分けされます。1または2のスコアは運用上の摩擦（赤/オレンジ）を示し、3は中立（黄色）を、4または5はスムーズで成功したインタラクション（緑）を表します。

高度な概念：複数登場人物の旅程

複雑なワークフローでは、タスクが単一の人物によって完了されるのは稀です。Mermaidでは、名前をカンマで区切ることで、1つのタスクに複数の登場人物を割り当てることができます。これにより、顧客とのやり取りがバックエンドのサポートやシステムによる自動化を必要とする場所を明確に示すことができます。

journey
title 複数登場人物によるサポート例
section 顧客サポートケース
  問題チケットを提出: 3: 顧客
  エージェントにチケットを割り当てる: 4: システム、サポート管理者
  技術的なバグを調査: 2: 開発者、QAテスター
  問題を解決して通知: 5: サポート管理者

一般的な構文の落とし穴

ユーザー旅程図を書く際、小さなフォーマットのミスがレンダラーにエラーを引き起こすことがあります。図を正しく構築できるように、以下の3つのフォーマットルールを覚えておいてください：

• ダブルコロンルール：すべてのタスク行は、次の正確な構造に従わなければなりません：タスクの説明: スコア: 登場人物登場人物リストの前に2番目のコロンを忘れることが、旅程図がロードされない最も一般的な原因です。
• スコア範囲の制限：満足度スコアは1から5の整数でなければなりません。0または5より大きい数値を渡すと、レイアウトパラメータが破綻します。
• インデント：Mermaidはスペースの扱いに柔軟ですが、タスクをそれぞれのセクションの下でインデントすることで、製品機能が拡大するにつれて、テキストファイルの読みやすさと保守性が大幅に向上します。