Sơ đồ Hành trình Người dùng mô tả các bước mà người dùng thực hiện để đạt được một mục tiêu cụ thể trong ứng dụng của bạn. Khác với sơ đồ lưu đồ hoặc sơ đồ tuần tự tập trung vào hệ thống, hành trình người dùng tập trung vào các hành động của con người, các giai đoạn quy trình làm việc và việc theo dõi mức độ hài lòng của người dùng theo thời gian.
Cấu trúc cú pháp cơ bản
Mỗi hành trình người dùng bắt đầu bằng lệnh journey khai báo, tiếp theo là tiêu đề và các phần tuần tự phân tích trải nghiệm người dùng.
journey
title Hành trình Người dùng Mẫu
section Tên Giai đoạn
Tên Nhiệm vụ: Điểm: Người tham gia1, Người tham gia2
Tham chiếu cú pháp
Bảng dưới đây phân tích các thành phần chính được sử dụng để xây dựng bản đồ hành trình người dùng trong Mermaid.js.
| Thành phần | Mô tả | Ví dụ cú pháp |
|---|---|---|
| Khai báo | Khởi tạo trình vẽ sơ đồ hành trình người dùng. | journey |
| Tiêu đề | Xác định tiêu đề chính hoặc mục tiêu người dùng ở đầu bản đồ. | title Quy trình Đăng nhập |
| Phần | Đ代表 một giai đoạn hoặc bước cấp cao trong hành trình người dùng. | section Giai đoạn Khám phá |
| Nhiệm vụ | Một hành động cụ thể mà người dùng thực hiện trong một phần. | Duyệt tài liệu |
| Điểm hài lòng | Một số nguyên từ 1 đến 5 biểu thị mức độ hài lòng hoặc khó chịu của người dùng. | : 4 : (4 trên 5) |
| Người tham gia | Danh sách các vai trò tham gia hoàn thành nhiệm vụ, được phân cách bằng dấu phẩy. | Người dùng, Hệ thống |
Bản thiết kế thực tế: Trải nghiệm thanh toán thương mại điện tử
Bản thiết kế này trình bày toàn bộ hành trình người dùng theo dõi trải nghiệm mua hàng trực tuyến của khách hàng, ghi nhận các điểm đau cảm xúc (điểm số thấp) và những khoảnh khắc hài lòng (điểm số cao).
hành trình
title Hành trình Mua hàng Trực tuyến
section Phát hiện sản phẩm
Tìm kiếm sản phẩm: 4: Người dùng
So sánh giá cả: 3: Người dùng
Xem hình ảnh sản phẩm: 5: Người dùng
section Bẫy Thanh toán
Thêm sản phẩm vào giỏ hàng: 4: Người dùng
Tạo tài khoản: 2: Người dùng, Hệ thống
Nhập chi tiết giao hàng: 3: Người dùng
Xử lý thẻ tín dụng: 1: Người dùng, Cổng thanh toán
section Sau khi mua
Nhận xác nhận email: 5: Hệ thống
Theo dõi giao hàng gói hàng: 4: Người dùng, Logistics
Mẹo cú pháp:Các điểm số hài lòng được mã hóa màu tự động bởi trình hiển thị. Điểm số 1 hoặc 2 làm nổi bật sự cản trở vận hành (đỏ/nâu), điểm số 3 là trung tính (vàng), và các điểm số 4 hoặc 5 đại diện cho các tương tác trơn tru, thành công (xanh lá).
Khái niệm nâng cao: Hành trình nhiều người tham gia
Trong các quy trình phức tạp, nhiệm vụ hiếm khi được hoàn thành bởi một người. Mermaid cho phép bạn gán nhiều người tham gia vào một nhiệm vụ bằng cách tách tên họ bằng dấu phẩy. Điều này hữu ích để minh họa nơi tương tác của khách hàng yêu cầu hỗ trợ phía sau hoặc tự động hóa từ hệ thống.
hành trình
title Ví dụ Hỗ trợ Nhiều Người tham gia
section Vụ hỗ trợ khách hàng
Gửi vé sự cố: 3: Khách hàng
Gán vé cho đại diện: 4: Hệ thống, Quản trị viên Hỗ trợ
Khảo sát lỗi kỹ thuật: 2: Nhà phát triển, Kiểm thử QA
Giải quyết vấn đề và thông báo: 5: Quản trị viên Hỗ trợ
Những lỗi cú pháp phổ biến
Khi viết bản đồ hành trình người dùng, những lỗi định dạng nhỏ có thể khiến trình xử lý biểu đồ báo lỗi. Hãy ghi nhớ ba quy tắc định dạng này để đảm bảo sơ đồ của bạn được xây dựng chính xác:
- Quy tắc Dấu hai chấm:Mỗi dòng nhiệm vụ phải tuân theo cấu trúc chính xác là
Mô tả nhiệm vụ: Điểm số: Người tham gia. Việc quên dấu hai chấm thứ hai trước danh sách người tham gia là lý do phổ biến nhất khiến sơ đồ hành trình không thể tải được. - Hạn chế phạm vi điểm số:Các điểm số hài lòng phải là số nguyên nằm trong khoảng từ 1 đến 5. Truyền điểm số 0 hoặc số lớn hơn 5 sẽ làm hỏng tham số bố cục.
- Điều chỉnh thụt lề:Mặc dù Mermaid linh hoạt với khoảng trắng, nhưng việc giữ các nhiệm vụ được thụt lề dưới các phần tương ứng sẽ giúp các tệp văn bản thô của bạn dễ đọc và dễ bảo trì hơn khi tính năng sản phẩm phát triển.