Workflow - Khung vẽ Canvas và thanh điều hướng trực quan

Làm chủ không gian Khung vẽ Canvas trung tâm, điều hướng thu phóng, lưới tọa độ và thanh điều khiển.

## Mở khu vực Khung vẽ Canvas và nhận diện bố cục trung tâm

Khung vẽ Canvas là không gian làm việc trực quan trung tâm trên nền tảng RedAI, nơi trực tiếp thiết kế, kết nối các bước công việc tự động hóa, theo dõi tiến trình chạy thời gian thực và điều khiển vận hành toàn bộ quy trình.

1. Phương thức truy cập màn hình

Bước Cách thực hiện
1 Mở từ danh sách kịch bản: Tại màn hình quản lý https://app.redai.vn/workflows, nhấp trực tiếp vào Thẻ kịch bản cần chỉnh sửa để mở không gian Canvas.
2 Truy cập qua URL trực tiếp: Nhập địa chỉ liên kết chuẩn https://app.redai.vn/workflows/:id trên thanh trình duyệt (trong đó :id là mã định danh kịch bản).

Cảnh báo thiết bị hiển thị: Khung vẽ Canvas yêu cầu độ phân giải chiều rộng màn hình tối thiểu từ 768px trở lên (máy tính để bàn hoặc laptop). Trên màn hình nhỏ hơn 768px, hệ thống sẽ đề nghị chuyển sang máy tính để đảm bảo khả năng thao tác.

2. Tương tác trên mặt phẳng Khung vẽ vô cực và bản đồ thu nhỏ

Thao tác / Thành phần Cách thức tương tác & Chức năng
Di chuyển mặt phẳng (Pan) Nhấp giữ chuột trái vào bất kỳ khoảng trống nào trên mặt phẳng và kéo rê theo hướng mong muốn.
Phóng to / Thu nhỏ (Zoom) Lăn con lăn chuột hoặc vuốt 2 ngón tay trên bàn di cảm ứng; tỷ lệ thu phóng từ 10% đến 400% (mặc định 80%).
Mở nhanh Thư viện chọn nút Nhấp chuột phải vào vị trí trống bất kỳ trên Canvas để mở ngay ngăn kéo Thư viện nút quy trình mà không cần rê chuột sang mép phải.
Quét chọn một vùng nhiều nút Giữ phím Shift, đồng thời nhấp giữ chuột trái và kéo tạo khung chữ nhật bao phủ các nút cần chọn.
Bản đồ thu nhỏ (Minimap) Tự động hiển thị ở góc dưới bên phải khi di chuyển mặt phẳng; nhấp trực tiếp vào vùng bất kỳ trên bản đồ để đưa khung nhìn đến cụm nút tương ứng.
Thêm nút đầu tiên Khi kịch bản chưa có nút nào, nhấp nút nổi bật Thêm node đầu tiên ở giữa màn hình để bắt đầu tạo luồng.

3. Sử dụng Thanh công cụ nổi 8 nút chức năng mép phải màn hình

Nút chức năng Ý nghĩa & Thao tác kích hoạt
Thêm nút quy trình Mở ngăn kéo Thư viện nút từ mép phải để tìm kiếm và kéo thả bước xử lý vào mặt phẳng (tự động khóa khi Canvas đang chạy).
Tạo thẻ ghi chú Tạo ngay thẻ ghi chú dán lên vị trí trung tâm Canvas để chú thích nghiệp vụ (khóa khi kịch bản đang chạy).
Bật/Tắt chế độ vẽ tay Chuyển sang chế độ vẽ phác thảo tự do bằng chuột (nút đổi sang màu đỏ); nhấp lại lần nữa để tắt.
/ Khởi chạy / Tạm dừng Nhấp để bắt đầu chạy toàn bộ kịch bản từ bước đầu đến cuối (màu xanh); khi đang chạy nút chuyển sang màu vàng nhấp nháy, nhấp vào để tạm dừng khẩn cấp.
Lưu vị trí các nút Lưu lại toàn bộ tọa độ sắp xếp của các nút trên mặt phẳng lên hệ thống máy chủ.
Thu trọn khung nhìn Tự động căn chỉnh và thu phóng tỷ lệ hiển thị sao cho toàn bộ các nút nằm trọn vẹn, cân đối giữa màn hình.
Lịch sử phiên chạy Mở ngăn trượt bên phải hiển thị danh sách nhật ký các lần chạy trước, thời gian thực thi và trạng thái thành công/thất bại.
Quản lý phiên bản runtime Mở khay quản lý các bản chụp phiên bản đã xuất bản cố định và cài đặt lịch chạy ngầm định kỳ.

Lưu ý: Thanh công cụ nổi tự động tạm ẩn khi bạn mở các bảng cấu hình hoặc ngăn kéo tính năng lớn để tránh che khuất tầm nhìn, và tự động xuất hiện lại ngay sau khi đóng.

4. Nhận diện Thẻ Nút quy trình và Dây nối luồng dữ liệu trên mặt phẳng

Thành phần Đặc điểm nhận diện & Thao tác
Thẻ Nút quy trình • Biểu tượng & Tiêu đề: Nhận diện dịch vụ/tác vụ; nhấp đúp để chỉnh sửa tên bước.
• Chấm trạng thái: Màu sắc báo kết quả chạy gần nhất: Xanh lá (Thành công), Đỏ (Lỗi), Xanh lam (Đang xử lý), Xám (Chưa chạy).
• Nút chạy thử (): Rê chuột vào góc trên bên phải để kiểm thử độc lập bước này.
• Nút xóa nút (): Nhấp để xóa nút khỏi kịch bản.
Cổng kết nối đầu vào (Input) Chấm tròn ở mép bên trái thẻ nút để nhận dữ liệu từ các bước trước (nút sự kiện kích hoạt đầu tiên không có cổng này).
Cổng kết nối đầu ra (Output) Chấm tròn ở mép bên phải thẻ nút để xuất dữ liệu:
• Main: Cổng chính cho luồng đơn tuyến tuần tự.
• True / False: Cổng rẽ nhánh điều kiện logic.
• Loop / Done: Cổng xử lý lặp danh sách và cổng chuyển tiếp sau khi kết thúc vòng lặp.
• Success / Error: Phân tách nhánh khi bước chạy thành công hoặc khi gặp sự cố cần xử lý lỗi.
Dây nối luồng dữ liệu • Nối dây: Nhấp giữ cổng ra (bên phải) của nút trước, kéo đến cổng vào (bên trái) của nút sau và thả chuột.
• Ngắt kết nối: Nhấp chọn dây nối (chuyển màu đỏ) và nhấn phím Delete trên bàn phím.

5. Theo dõi Dải băng tiến trình thực thi thời gian thực và xử lý lỗi

Thành phần / Trạng thái Ý nghĩa & Thao tác điều khiển
Trạng thái thực thi Dải băng viên nhộng ở chính giữa đỉnh màn hình hiển thị 4 trạng thái vận hành:
• Đang xử lý (Xanh lam): Kịch bản đang tuần tự thực thi qua từng bước.
• Chờ sự kiện (Vàng hổ phách): Tạm chờ dữ liệu gửi về từ cổng kết nối hoặc webhook bên ngoài.
• Hoàn thành (Xanh lá): 100% các bước trong kịch bản đã thực thi thành công.
• Thất bại (Đỏ rực): Có ít nhất một bước gặp sự cố khiến quy trình phải dừng lại.
Chỉ số tiến độ Hiển thị thanh tỷ lệ phần trăm (%), bộ đếm số bước (ví dụ: 5/8 bước) và số bước lỗi. Nếu kịch bản yêu cầu tham số đầu vào, hệ thống sẽ mở bảng điền tham số trước khi kích hoạt.
Cụm nút điều khiển phiên chạy • Tạm dừng: Đóng băng tạm thời tiến trình để kiểm tra dữ liệu trung gian.
• Tiếp tục: Cho phép kịch bản tiếp tục chạy sau khi tạm dừng.
• Hủy khẩn cấp: Buộc dừng ngay lập tức toàn bộ phiên chạy khi phát hiện bất thường.
Xem & Sao chép mã lỗi Khi bước chạy thất bại, dải băng tự động hiển thị thẻ thông báo lỗi; nhấp Sao chép lỗi để lưu chi tiết lỗi vào bộ nhớ tạm gửi AI Agent phân tích, hoặc nhấp mũi tên để thu gọn.

6. Tăng tốc thiết kế với Hệ thống Phím tắt bàn phím và Cơ chế An toàn

Phím tắt / Cơ chế an toàn Tổ hợp phím (Win / Mac) Mô tả chức năng & Tác dụng an toàn
Xóa đối tượng Delete / Delete Xóa nhanh các nút hoặc dây nối đang chọn (hệ thống luôn bật hộp thoại xác nhận tên/loại nút trước khi xóa).
Sao chép nút Ctrl + C / Command + C Sao chép toàn bộ cấu hình thuộc tính của các nút đang chọn vào bộ nhớ tạm.
Cắt nút Ctrl + X / Command + X Cắt các nút đang chọn khỏi vị trí hiện tại.
Dán nút Ctrl + V / Command + V Dán các nút vừa sao chép/cắt vào ngay tại vị trí con trỏ chuột trên mặt phẳng.
Hoàn tác & Làm lại Ctrl + Z / Ctrl + Y (hoặc Cmd + Shift + Z) Khôi phục hoặc tái thực hiện thao tác thiết kế vừa thực hiện trước đó.
Khởi chạy kịch bản Ctrl + Enter / Command + Enter Bắt đầu chạy toàn bộ quy trình ngay từ bàn phím mà không cần nhấp chuột.
Thu trọn khung nhìn Ctrl + F / Command + F Tự động căn chỉnh và thu phóng toàn bộ sơ đồ vừa vặn, cân đối trong màn hình.
Khóa cứng Canvas khi chạy (Tự động kích hoạt) Khi kịch bản đang chạy, toàn bộ tính năng thêm, xóa, kéo nút và ngắt dây tự động bị khóa cứng để tránh làm sai lệch dữ liệu.
Cảnh báo khi rời trang (Tự động kích hoạt) Khi điều hướng rời khỏi Canvas trong lúc kịch bản đang chạy, hộp thoại cảnh báo hiển thị 3 lựa chọn: Hủy & rời đi, Chạy nền & rời đi, hoặc Ở lại.

Lưu ý: Nếu kịch bản không cấu hình nút sự kiện kích hoạt chuyên biệt (như Webhook hay Lịch định kỳ), nút đầu tiên sẽ tự động đóng vai trò là Sự kiện kích hoạt ảo (bằng nhấp chuột).

Hướng dẫn điều khiển và theo dõi Khung vẽ qua Trợ lý ảo AI Agent

Mọi thao tác quản lý kịch bản, khởi chạy quy trình, tạm dừng hoặc hủy bỏ phiên chạy trên Khung vẽ Canvas đều có thể được ủy quyền thực hiện tự động và nhanh chóng thông qua Trợ lý ảo AI Agent của nền tảng RedAI.

1. Thông tin kết nối Kỹ năng chuyên môn của Trợ lý ảo AI Agent

Thông số cấu hình Giá trị thiết lập trên nền tảng RedAI
Tên Kỹ năng chuyên môn RedAI - Module - AI Workflow
Mã định danh Kỹ năng f25229db-9fad-4567-a65e-88af1e31f6a7
Tên Bộ công cụ RedAI - Module - AI Workflow
Mã định danh Bộ công cụ 7c6818a0-dd73-4503-99c9-0e0d83fc9b73
Quy mô công cụ sẵn sàng 71 công cụ nghiệp vụ chính thức sẵn sàng trên hệ thống máy chủ

2. Bảng đối chiếu hai chiều giữa Thao tác Canvas và Công cụ của AI Agent

Thao tác trên Giao diện Khung vẽ Canvas Công cụ Trợ lý ảo AI Agent sử dụng Nhiệm vụ nghiệp vụ của công cụ
Cập nhật tên và mô tả kịch bản workflow_update Thay đổi tên gọi hiển thị và mô tả tóm tắt mục tiêu công việc của kịch bản tự động hóa trên hệ thống máy chủ.
Khởi chạy toàn thể quy trình workflow_execution_run Bắt đầu chạy kịch bản từ nút sự kiện kích hoạt đầu tiên, tạo phiên chạy mới và truyền dữ liệu qua các bước.
Kích hoạt qua sự kiện nhấp chuột ảo workflow_trigger_click Phát lệnh kích hoạt tức thì một kịch bản sử dụng cơ chế sự kiện kích hoạt bằng nhấp chuột ảo.
Tra cứu trạng thái phiên chạy trực tiếp workflow_execution_get_status Lấy dữ liệu trạng thái tiến trình thực thi thời gian thực của phiên chạy (tương ứng với dải băng đỉnh màn hình).
Tạm dừng phiên chạy kịch bản workflow_execution_pause Đóng băng tạm thời phiên chạy đang thực thi để chờ kiểm tra hoặc xử lý dữ liệu thủ công.
Tiếp tục thực thi phiên chạy workflow_execution_resume Khôi phục tiến trình chạy tiếp tục các bước dang dở của một phiên chạy đang bị tạm dừng.
Hủy bỏ phiên chạy khẩn cấp workflow_execution_cancel Buộc dừng ngay lập tức phiên chạy đang thực hiện khi phát hiện lỗi dữ liệu bất thường.

3. Các câu lệnh mẫu giao tiếp với Trợ lý ảo AI Agent

Dưới đây là 5 câu lệnh mẫu chuẩn hóa theo cấu trúc 4 phần giúp bạn dễ dàng ra lệnh cho Trợ lý ảo AI Agent điều khiển không gian làm việc Khung vẽ Canvas:

Câu lệnh 1: Cập nhật thông tin nhận diện kịch bản

“Tôi đang làm việc với kịch bản có tên là [Kịch bản Chăm sóc Khách hàng Mới].
Hãy cập nhật lại tên kịch bản thành [Quy trình Tiếp nhận và Phân loại Khách hàng Tự động], đồng thời bổ sung phần mô tả kịch bản là: [Tự động thu thập biểu mẫu từ trang chủ, chuẩn hóa số điện thoại và chuyển thông tin cho chuyên viên tư vấn].
Hãy gọi công cụ workflow_update để lưu thay đổi này lên hệ thống và thông báo lại cho tôi sau khi hoàn thành.”

Câu lệnh 2: Khởi chạy toàn thể quy trình trên Khung vẽ Canvas

“Tôi vừa hoàn tất việc kết nối các bước trong kịch bản [Quy trình Tiếp nhận và Phân loại Khách hàng Tự động].
Hãy giúp tôi khởi chạy toàn bộ quy trình này ngay bây giờ bằng công cụ workflow_execution_run.
Sau khi khởi chạy, hãy phản hồi lại cho tôi mã phiên chạy vừa tạo và thông báo tiến độ các bước đang được thực hiện.”

Câu lệnh 3: Kiểm tra trạng thái thực thi thời gian thực của phiên chạy

“Phiên chạy của kịch bản [Quy trình Tiếp nhận và Phân loại Khách hàng Tự động] đang xử lý trên Khung vẽ Canvas.
Hãy kiểm tra trạng thái vận hành hiện tại bằng công cụ workflow_execution_get_status cho mã phiên chạy [EXEC-2026-001].
Hãy báo cáo cho tôi biết phiên chạy đang ở trạng thái nào, đã hoàn thành bao nhiêu bước và có bước nào gặp sự cố không.”

Câu lệnh 4: Tạm dừng hoặc Tiếp tục phiên chạy kịch bản

“Phiên chạy của kịch bản [Quy trình Tiếp nhận và Phân loại Khách hàng Tự động] đang xử lý bước xuất báo cáo.
Hãy giúp tôi tạm dừng phiên chạy này bằng công cụ workflow_execution_pause để tôi đối soát thông tin.
Khi tôi xác nhận thông tin đã khớp, hãy sử dụng công cụ workflow_execution_resume để cho quy trình tiếp tục chạy đến bước cuối cùng.”

Câu lệnh 5: Hủy bỏ phiên chạy khi phát hiện lỗi dữ liệu

“Phiên chạy kịch bản [Quy trình Tiếp nhận và Phân loại Khách hàng Tự động] đang gửi nhầm tệp dữ liệu thử nghiệm.
Hãy hủy bỏ khẩn cấp phiên chạy này ngay lập tức bằng công cụ workflow_execution_cancel.
Hãy xác nhận rõ trạng thái phiên chạy đã dừng lại và kiểm tra xem có bước nào bị lỗi cần khắc phục không.”

4. Bảng kiểm tra xác nhận kết quả hai chiều

Sau khi giao tiếp với Trợ lý ảo AI Agent, người dùng có thể dễ dàng kiểm chứng kết quả thực hiện đồng bộ giữa giao diện màn hình và lời thoại phản hồi:

Hành động yêu cầu Dấu hiệu nhận biết trên Giao diện Canvas Dấu hiệu nhận biết trong câu trả lời của AI Agent
Đổi tên kịch bản Nhãn tên kịch bản ở góc trên bên trái màn hình lập tức hiển thị tên mới in đậm nổi bật; khi mở ngăn trượt thông tin thấy phần mô tả đã được cập nhật chuẩn xác. Trợ lý ảo AI Agent xác nhận đã cập nhật thành công tên kịch bản kèm mã số định danh và trích dẫn tóm tắt phần mô tả mới.
Khởi chạy kịch bản Nút Khởi chạy trên thanh công cụ nổi chuyển sang màu vàng hổ phách; dải băng tiến trình xuất hiện ở đỉnh màn hình với trạng thái Đang xử lý; các nút quy trình trên Khung vẽ sáng đèn theo thứ tự. Trợ lý ảo AI Agent cung cấp mã phiên chạy, thời gian bắt đầu khởi động và báo cáo danh sách các bước đang thực hiện.
Kiểm tra trạng thái phiên chạy Dải băng tiến trình ở đỉnh màn hình hiển thị tỷ lệ phần trăm và số lượng bước hoàn thành tương ứng. Trợ lý ảo AI Agent trả về dữ liệu trạng thái chuẩn xác (Đang xử lý, Hoàn thành, hoặc Báo lỗi) kèm tỷ lệ hoàn thành đồng bộ với dải băng đỉnh màn hình.
Tạm dừng phiên chạy Dải băng tiến trình hiển thị biểu tượng tạm dừng; thanh tiến độ ngừng tăng; nút Tạm dừng trên dải băng chuyển thành nút Tiếp tục. Trợ lý ảo AI Agent thông báo phiên chạy đã được tạm dừng thành công và hiển thị bước xử lý đang dừng lại.
Hủy bỏ phiên chạy Dải băng tiến trình chuyển sang trạng thái Thất bại hoặc Dừng; các nút quy trình dừng thực hiện; dải băng hiển thị thông báo phiên chạy đã bị hủy. Trợ lý ảo AI Agent xác nhận phiên chạy đã bị hủy bỏ khẩn cấp hoàn tất, bảo đảm an toàn dữ liệu và không phát sinh thêm tác vụ ngầm.

📸 [Vị trí chèn ảnh chụp màn hình: Khung trò chuyện với Trợ lý ảo AI Agent hiển thị câu lệnh yêu cầu khởi chạy kịch bản tự động hóa và câu trả lời phản hồi mã phiên chạy thành công kèm trạng thái tiến trình đồng bộ với màn hình Canvas]

Các bước tiếp theo và Chuyên đề liên quan

Để tiếp tục hoàn thiện kỹ năng làm chủ không gian Khung vẽ Canvas, người dùng có thể lựa chọn khám phá các chuyên đề chuyên sâu kế tiếp trong hành trình thiết kế quy trình tự động hóa trên nền tảng RedAI:

Chuyên đề tiếp theo Mục tiêu làm chủ kỹ năng Đường dẫn tài liệu
04. Ngăn kéo Thư viện Nút và Tìm kiếm Nguồn cấp Tìm kiếm, khám phá danh mục hàng trăm nút quy trình tích hợp sẵn và thao tác kéo thả nút vào mặt phẳng Khung vẽ Canvas. [Xem tài liệu 04](04. Ngăn kéo thư viện nút quy trình.md)
05. Thao tác Nối dây Dữ liệu Đa cổng, Ghi chú và Vẽ tay Hướng dẫn chuyên sâu kỹ thuật nối dây đa cổng (main, true/false, loop, error), tạo thẻ chú thích và phác thảo sơ đồ. [Xem tài liệu 05](05. Thao tác nối dây dữ liệu ghi chú và vẽ tay.md)
06. Cửa sổ trượt Cấu hình Thuộc tính Nút và Biểu thức Động Nắm vững cách thiết lập tham số đầu vào, nạp dữ liệu động từ các bước trước và sử dụng biểu thức tự động hóa thông minh. [Xem tài liệu 06](06. Cửa sổ trượt cấu hình thuộc tính nút.md)
07. Chạy Thử nghiệm Từng nút và Lớp phủ Tiến trình Chạy Kỹ thuật kiểm thử đơn lẻ từng nút nghiệp vụ, xem trước kết quả đầu ra và phân tích lớp phủ hiệu ứng sáng đèn trên Canvas. [Xem tài liệu 07](07. Chạy thử nghiệm nút và lớp phủ tiến trình chạy.md)
08. Ngăn trượt Lịch sử Phiên chạy và Đo lường Hiệu năng Tra cứu nhật ký dữ liệu chi tiết vào/ra của từng bước trong quá khứ, lọc lỗi vận hành và phân tích thời gian xử lý của quy trình. [Xem tài liệu 08](08. Ngăn trượt lịch sử phiên chạy và đo lường hiệu năng.md)
09. Ngăn Quản lý Phiên bản và Cài đặt Lịch chạy Nền Quy trình lưu trữ các bản chụp phiên bản cố định, kích hoạt phiên bản hoạt động chính thức và cài đặt lịch chạy tự động định kỳ. [Xem tài liệu 09](09. Ngăn quản lý phiên bản và cài đặt lịch chạy nền.md)