Sơ đồ hành trình khách hàng theo màu thương hiệu: nhờ AI vẽ, chạy thử và 2 lỗi tiếng Việt cần sửa

Khách nhắn hỏi giá rồi im lặng, đơn đã chốt mà khách vẫn huỷ: một sơ đồ hành trình khách hàng chỉ ra đúng bước nào khách bỏ đi. Bài này hướng dẫn cách nhờ AI vẽ sơ đồ đó theo đúng màu thương hiệu của shop, kèm kết quả mình chạy thử thật tối 8/10/2026.

Tóm tắt nhanh (thông tin ngày 8/10/2026)

• diagram-design là một bộ kỹ năng (skill) miễn phí, giấy phép MIT, giúp trợ lý AI như Claude Code vẽ hơn 40 kiểu sơ đồ thành file HTML mở bằng trình duyệt.
• Điểm đáng thử: AI đọc website của bạn, lấy màu và font, rồi mọi sơ đồ sau đều theo đúng bộ nhận diện đó.
• Mình chạy thử với website demanlab.ai: ra sơ đồ 5 bước cho một shop mỹ phẩm online, gặp 2 lỗi chữ tiếng Việt và đã sửa.
• Chưa rõ: thời gian "khoảng 60 giây" là con số của tác giả, mình chưa đo trên bản cài plugin chính thức.

Sơ đồ hành trình khách hàng là gì, vì sao shop nhỏ cũng cần

Sơ đồ hành trình khách hàng (tiếng Anh là customer journey map, còn gọi là bản đồ hành trình khách hàng) là một bức hình kể lại khách đi qua những giai đoạn nào, từ lúc thấy quảng cáo đến lúc mua lại. Mỗi giai đoạn ghi ba thứ: khách làm gì, khách gặp shop ở kênh nào (điểm chạm khách hàng, hay điểm tiếp xúc), và khách cảm thấy thế nào.

Hãy hình dung nó như điện tâm đồ của khách. Đường cảm xúc đi lên đi xuống qua từng bước, và chỗ tụt sâu là giai đoạn doanh nghiệp đang mất khách. Hệ quả thực tế trong quá trình mua hàng: thay vì đoán "chắc tại giá", bạn nhìn thấy khách lo lắng nhiều ở bước chờ giao hàng, nên việc cần sửa là nhắn mã vận đơn, không phải giảm giá.

Các bài hướng dẫn trên mạng hay giới thiệu nhiều mô hình như AIDA hay 5A. Với doanh nghiệp nhỏ, không cần học hết các mô hình đó. Chỉ cần xác định mục tiêu (ví dụ giảm số đơn bị huỷ), chọn một chân dung khách, rồi liệt kê 4-6 giai đoạn mua hàng thật của họ. Phần khó với nhiều người là khâu vẽ: mở PowerPoint kéo hộp, chọn màu, căn chữ, mất cả buổi mà nhìn vẫn không ra dáng thương hiệu. Đó là khâu AI làm thay được.

Vì sao đáng làm? Một bản đồ hành trình giúp doanh nghiệp xác định mục tiêu cải thiện rõ ràng thay vì sửa tràn lan. Khi sử dụng đúng, nó cho thấy khách tương tác với sản phẩm dịch vụ của bạn ở đâu, và điểm tiếp xúc nào đang kéo trải nghiệm khách hàng đi xuống. Một shop bán qua mạng xã hội thường có 5-7 điểm tiếp xúc: video, bài đăng, tin nhắn, cuộc gọi, tin nhắn xác nhận, shipper, tin nhắn chăm sóc sau bán.

diagram-design: AI vẽ sơ đồ theo màu thương hiệu

diagram-design là dự án của Cathryn Lavery, đăng trên GitHub cathrynlavery/diagram-design. Theo README, nó là bộ hướng dẫn và mẫu cho trợ lý AI chạy trong Claude Code, Codex, Factory Droid, Pi và các công cụ hỗ trợ Agent Skills. Bản mình tải về là 2.6.68, cập nhật ngày 8/10/2026. Trang GitHub ghi khoảng 45,6 nghìn sao lúc mình xem, con số này thay đổi theo ngày.

Mỗi sơ đồ là một file HTML có hình vẽ SVG bên trong, mở thẳng bằng trình duyệt, không cần cài thêm gì. Mỗi kiểu có ba biến thể: nền sáng tối giản, nền tối, và bản đầy đủ kiểu tạp chí. Danh sách kiểu khá rộng: lưu đồ, sơ đồ tổ chức, dòng thời gian, phễu, swimlane (sơ đồ nhiều làn cho nhiều bộ phận), và kiểu User journey dùng cho bài này.

Điểm khiến mình chọn công cụ này cho doanh nghiệp là bước lấy bộ nhận diện. Bạn đưa link website, AI đọc trang, lấy màu nền, màu chữ, màu nhấn, font tiêu đề, rồi ghi vào một tệp quy chuẩn. Ví von cho dễ hiểu: giống đưa thợ may cái áo cũ để lấy số đo. Từ đó, sơ đồ nào AI vẽ cũng mặc đúng "số đo" thương hiệu, bạn không phải chỉnh màu từng cái.

Theo tài liệu PRIVACY.md của dự án, skill không có máy chủ riêng và không thu dữ liệu; nội dung bạn gửi chỉ đi qua công cụ AI bạn đang dùng, còn font chữ được tải từ Google Fonts khi mở file.

Chạy thử thực tế: vẽ hành trình mua mỹ phẩm online

Mình làm thử trong môi trường tự động của Deman AI Lab, theo đúng các bước trong tài liệu onboarding.md của skill. Mục tiêu của bản thử: xác định điểm tiếp xúc nào làm khách lo lắng trong quá trình mua hàng, và xem AI vẽ ra sơ đồ hành trình khách hàng tiếng Việt có dùng được ngay không. Cách làm như sau.

1. Tải mã nguồn về bằng lệnh git clone, mất vài giây.
2. Lấy màu từ website demanlab.ai: tải trang chủ và hai file CSS, lọc các biến màu. Kết quả: màu nhấn xanh #0077b6, chữ chính #141019, chữ phụ #52525b, nền trắng, font tiêu đề Be Vietnam Pro, font chữ nhỏ JetBrains Mono. Cả hai font đều có trên Google Fonts và hiển thị được dấu tiếng Việt.
3. Dựa trên mẫu User journey có sẵn, mình thay nội dung bằng hành trình của một khách mua mỹ phẩm online qua 5 giai đoạn: thấy quảng cáo, nhắn tin hỏi giá, chốt đơn, chờ giao hàng, nhận hàng và mua lại.
4. Xuất hai bản (màu mặc định và màu Deman), mở bằng Chrome và chụp màn hình.

$ git clone --depth 1 https://github.com/cathrynlavery/diagram-design$ curl -sL https://www.demanlab.ai/ -o home.html

Lưu ý: dữ liệu cảm xúc trong sơ đồ là ví dụ để minh hoạ cách làm, không phải khảo sát khách thật. Từ lúc tải mã nguồn đến lúc có ảnh chụp mất khoảng 2 phút máy chạy. Mình chưa cài plugin qua chợ plugin (lệnh /plugin install), nên chưa đo được con số 60 giây tác giả nêu.

Ảnh trên là bản màu mặc định: nền xám nhạt, điểm nhấn màu cam, tiêu đề dùng font có chân. Đường cảm xúc tụt ở bước 4 "Chờ giao hàng", kèm hai nhãn chỗ cần sửa: không có mã vận đơn, nhắn hỏi mãi không ai đáp.

Hai lỗi chữ tiếng Việt và cách sửa

Nhìn kỹ bản đầu tiên, mình thấy hai lỗi mà ai làm sơ đồ tiếng Việt cũng dễ gặp.

Lỗi thứ một: nhãn mức cảm xúc ở giữa ghi "BÌNH THƯỜNG" bị cắt mất chữ B, chỉ còn "ÌNH THƯỜNG". Lý do là mẫu gốc chừa lề trái 64 điểm ảnh, vừa đủ cho chữ tiếng Anh ngắn như NEUTRAL, còn chữ tiếng Việt dài hơn nên tràn ra ngoài khung.

Lỗi thứ hai: câu hành động "Hỏi giá, hỏi da dầu dùng được không" quá dài so với cột rộng 200 điểm ảnh, gần chạm sang cột bên cạnh. Ở màn hình nhỏ hoặc khi in, hai câu sẽ dính vào nhau.

Cách sửa rất đơn giản: đổi nhãn thành "ỔN" và rút câu thành "Hỏi giá, hỏi hợp da không". Bài học chung là khi nhờ AI vẽ sơ đồ bằng tiếng Việt, hãy dặn trước "nhãn tối đa 3 chữ, mỗi ô tối đa 6 chữ", rồi vẫn phải mở file ra soát bằng mắt. Dự án có sẵn các script kiểm tra hình học (ví dụ verify-geometry.py), nhưng trong lần chạy tự động này mình chưa chạy được chúng, nên chưa kiểm chứng script có bắt được lỗi chữ tràn hay không.

Cách vẽ sơ đồ hành trình khách hàng bằng AI trong 5 bước

Đây là quy trình bạn làm theo được, kể cả khi không rành kỹ thuật. Bạn cần một công cụ AI hỗ trợ skill, ví dụ Claude Code. Nếu mới làm quen, bài về skills cho Claude Code giải thích skill là gì và cài thế nào.

1. Cài skill theo README: trong Claude Code gõ /plugin marketplace add cathrynlavery/diagram-design rồi /plugin install diagram-design@diagram-design.
2. Lấy màu thương hiệu: nhắn cho AI "lấy màu và font từ website của tôi" kèm link. AI sẽ đề xuất bảng màu, bạn kiểm tra lại màu nhấn có đúng màu logo không rồi đồng ý.
3. Gom dữ liệu thật: lấy 20-30 tin nhắn khách gần đây, các đánh giá 1-3 sao, lý do huỷ đơn. Đây là thông tin để ghi cảm xúc ở từng giai đoạn, không để AI tự đoán. Doanh nghiệp bán nhiều sản phẩm thì làm riêng cho sản phẩm chủ lực trước.
4. Nhờ AI vẽ: mô tả chân dung khách, sản phẩm dịch vụ đang bán, 4-6 giai đoạn, kênh tương tác ở từng giai đoạn, và một bước bạn nghĩ khách khó chịu. Dặn thêm nhãn ngắn để chữ tiếng Việt không tràn.
5. Soát và dùng: mở file HTML, sửa chữ tràn, rồi chụp đưa vào slide đào tạo hoặc tài liệu nội bộ.

Khâu quan trọng là bước 3. Một bản đồ hành trình đẹp mà dựa trên cảm xúc bịa ra sẽ đưa doanh nghiệp đi sửa sai chỗ. AI chỉ vẽ hộ, còn hiểu rõ hành vi và nhu cầu của khách vẫn là việc của người bán hàng.

Ảnh trên là bản cuối với màu xanh của Deman: chữ tiêu đề Be Vietnam Pro hiển thị dấu tiếng Việt rõ, điểm đáy ở bước chờ giao hàng được tô màu nhấn, mọi thứ khác để màu xám để mắt người xem rơi đúng chỗ cần sửa.

Sơ đồ quy trình chốt đơn: dùng cùng một cách

Cùng bộ màu đã lấy, bạn vẽ tiếp sơ đồ quy trình chốt đơn cho đội bán hàng. Kiểu phù hợp là Process (quy trình nhiều người phối hợp) hoặc swimlane: mỗi làn là một bộ phận, ví dụ trực page, kho, giao hàng. Sơ đồ này giúp doanh nghiệp đào tạo nhanh: nhân viên mới nhìn một hình là biết khách nhắn tin thì ai trả lời, sau bao lâu chuyển cho kho, khi nào gửi mã vận đơn.

Lợi ích lớn là sự đồng bộ. Sơ đồ hành trình, sơ đồ quy trình, sơ đồ tổ chức đều cùng bộ màu, cùng font, nên tài liệu đào tạo nhìn chuyên nghiệp mà không cần thuê thiết kế. Khi quy trình đổi, bạn nhắn AI sửa một bước, các phần khác giữ nguyên.

Nếu shop của bạn đã dùng chatbot trả lời tin nhắn, sơ đồ chốt đơn cũng là căn cứ để viết kịch bản kiểm tra. Bài về kiểm thử chatbot chăm sóc khách hàng hướng dẫn cách đặt câu hỏi thử cho từng bước như vậy. Còn muốn biến số liệu bán hàng thành hình dễ hiểu hơn, có thể xem thêm bài biến dữ liệu khô khan thành trải nghiệm sống động.

Rủi ro và giới hạn cần biết

Mình nói thẳng bốn điểm trước khi bạn bỏ thời gian vào công cụ này.

• Chữ tiếng Việt dài dễ bị cắt hoặc chạm nhau, như hai lỗi ở trên. Cách xử lý: dặn nhãn ngắn ngay từ đầu và luôn soát bằng mắt trước khi gửi đi.
• Skill miễn phí, nhưng nó chạy bên trong một trợ lý AI, mà các trợ lý này thường cần gói trả phí. Hãy tính chi phí đó vào.
• AI không biết khách của bạn cảm thấy gì. Dữ liệu cảm xúc phải lấy từ tin nhắn, đánh giá, đơn huỷ thật; nếu không, sơ đồ chỉ là hình đẹp.
• Font được tải từ Google Fonts khi mở file, nên máy không có mạng sẽ hiện font thay thế. Muốn gửi cho đối tác, hãy chụp thành ảnh hoặc xuất PDF.

Ngoài ra, phần đếm số kiểu sơ đồ đang lệch: tệp SKILL.md ghi 44 kiểu, mục giới thiệu trên GitHub ghi 42. Mình chỉ ghi "hơn 40 kiểu" cho an toàn.

Ý nghĩa với người làm nội dung và bán hàng

Với chủ shop và đội marketing, giá trị của công cụ này không nằm ở hình đẹp mà ở chỗ bạn có thêm một cách nhìn quá trình mua hàng của khách. Mấy việc cụ thể làm được ngay:

• Vẽ bản đồ hành trình cho sản phẩm bán chạy, tìm giai đoạn cảm xúc tụt sâu rồi sửa đúng chỗ đó (thêm tin nhắn xác nhận, gửi mã vận đơn, trả lời nhanh hơn).
• Làm sơ đồ quy trình chốt đơn cho nhân viên mới, cùng bộ màu của shop, đưa thẳng vào slide đào tạo.
• Sử dụng sơ đồ trong bài đăng hoặc video giải thích dịch vụ, giúp khách hiểu quy trình làm việc với doanh nghiệp.
• Họp cải thiện trải nghiệm khách hàng mỗi tháng, xác định lại mục tiêu: cập nhật sơ đồ từ dữ liệu mới để xem điểm đáy đã dịch chuyển chưa.

Với doanh nghiệp bán sản phẩm dịch vụ qua mạng xã hội, sơ đồ hành trình khách hàng còn là tài liệu chung để bộ phận bán hàng, chăm sóc khách và giao hàng cùng sử dụng, giúp doanh nghiệp nói cùng một ngôn ngữ về trải nghiệm khách hàng.

Tóm lại cách làm: lấy màu thương hiệu một lần, gom dữ liệu thật của khách, để AI vẽ, rồi người soát chữ và quyết định sửa gì.

AI giúp bạn bỏ khâu ngồi kéo hộp chọn màu, còn đọc ra chỗ khách bỏ đi vẫn cần người hiểu khách. Doanh nghiệp của các bạn đang phải làm đi làm lại việc gì với khách? Kể ở phần bình luận, mình sẽ thử vẽ giúp một sơ đồ hành trình khách hàng cho đúng việc đó.