Workflow - Thao tác nối dây dữ liệu ghi chú và vẽ tay Canvas

Hướng dẫn kéo nối cổng dữ liệu, định tuyến đường dây, tạo thẻ ghi chú dán và vẽ phác thảo tay.

## Mở không gian Khung vẽ Canvas và chuẩn bị công cụ

Không gian Khung vẽ Canvas trên nền tảng RedAI là nơi người dùng trực tiếp kiến tạo sơ đồ tự động hóa thông qua việc kết nối các dòng chảy dữ liệu giữa các bước, đồng thời bố trí các thẻ ghi chú nghiệp vụ và nét vẽ phác thảo giúp sơ đồ luôn trực quan, sáng rõ và dễ hiểu đối với toàn bộ thành viên trong nhóm.

Bước Cách thực hiện
1 Truy cập kịch bản: Mở trình duyệt web và điều hướng tới kịch bản cần thiết lập theo địa chỉ https://app.redai.vn/workflows/:id.
2 Xác nhận trạng thái sẵn sàng: Khung vẽ Canvas dạng lưới phẳng mở ra với các khối bước xử lý đã được đặt sẵn trên mặt phẳng. Thanh công cụ nổi xếp dọc bên mép phải màn hình sẵn sàng cung cấp các chức năng kết nối, tạo thẻ ghi chú và chế độ vẽ tay.

📸 [Vị trí chèn ảnh chụp màn hình: Toàn cảnh Khung vẽ Canvas với các nút quy trình đã được đặt trên mặt phẳng lưới chấm, thanh công cụ nổi mép phải sẵn sàng với các nút Thêm nút, Ghi chú và Bút vẽ tay]

Các bước thực hiện

Chọn phương án thao tác

Tùy theo mục tiêu truyền tải thông điệp và tổ chức sơ đồ quy trình, người dùng có thể lựa chọn linh hoạt giữa 3 phương thức trực quan hóa sau:

Phương án Tình huống sử dụng Phạm vi và Hiệu lực trên quy trình
1. Kéo nối dây dữ liệu đa cổng Thiết lập thứ tự thực hiện tuần tự và điều hướng luồng dữ liệu rẽ nhánh logic giữa các bước xử lý. Bắt buộc đối với tiến trình chạy; dây nối trực tiếp truyền tải kết quả từ bước trước sang bước kế tiếp.
2. Tạo thẻ ghi chú dán Ghi lại mô tả nghiệp vụ, lưu ý vận hành, giải thích cấu hình phức tạp hoặc phân công nhiệm vụ cho nhân sự. Thuần túy là tài liệu trực quan; không can thiệp hay làm gián đoạn luồng dữ liệu thực thi của kịch bản.
3. Vẽ tay phác thảo tự do Khoanh vùng các phân khu chức năng, vẽ mũi tên định hướng tổng thể hoặc ghi chú nhanh các ý tưởng phác thảo. Lớp phủ hình học trực quan; tự động neo theo tọa độ và co giãn đồng bộ với tỷ lệ thu phóng của Khung vẽ Canvas.

Giai đoạn 1 — Kéo nối dây dữ liệu đa cổng và điều chỉnh đường nối

Dây nối luồng dữ liệu là xương sống kết nối toàn bộ hoạt động của kịch bản trên nền tảng RedAI.

Bước Cách thực hiện
1 Nhận diện hệ thống cổng kết nối trên các nút quy trình:
• Cổng đầu vào bên trái: Chấm tròn nhỏ nằm ở mép trái của nút, có dấu cộng nhỏ màu xám bên trong. Cổng này tự động ẩn ở các nút Sự kiện kích hoạt vì đây là bước khởi nguồn.
• Cổng đầu ra bên phải: Các chấm tròn nhỏ nằm ở mép phải của nút, có dấu cộng nhỏ bên trong.
• 7 Cổng định danh chuyên biệt: Đối với các nút có nhiều cổng ra, hệ thống tự động gắn nhãn chữ rõ ràng ngay bên cạnh cổng: Main (luồng chính), True (điều kiện đúng), False (điều kiện sai), Loop (chu kỳ lặp dữ liệu), Done (kết thúc vòng lặp), Success (xử lý thành công), Error (bắt lỗi sự cố).
2 Kéo nối dây giữa hai bước xử lý:
• Rê chuột vào cổng đầu ra bên phải của bước gửi dữ liệu (chấm tròn sẽ phát sáng đổi màu khi con trỏ chuột chạm vào).
• Nhấp và giữ chuột trái, sau đó kéo một đường dây nối sang cổng đầu vào bên trái của bước nhận dữ liệu kế tiếp.
• Thả chuột ngay tại cổng đầu vào. Một đường dây nối liền mạch sẽ ngay lập tức được xác lập kèm đầu mũi tên chỉ hướng dòng chảy dữ liệu.
3 Tùy biến kiểu dáng dây nối bằng phím bấm thông minh:
• Dây cong mượt mà (Thao tác thông thường): Thả chuột tự nhiên khi kéo dây. Dây nối sẽ tự động uốn lượn hình sóng mềm mại, tránh cắt ngang thân các nút quy trình lân cận.
• Dây thẳng tắp (Giữ phím Shift): Nhấn và giữ phím Shift trên bàn phím máy tính trong suốt quá trình kéo dây và thả chuột. Dây nối sẽ chuyển thành một đường thẳng tắp gãy gọn, dứt khoát.
4 Tương tác và điều chỉnh trên đường dây nối:
• Rê chuột vào thân dây nối: Đường dây sẽ chuyển từ màu xám sang màu cam hoàng hôn rực rỡ, đồng thời xuất hiện một chấm tròn phát sáng chuyển động nhịp nhàng theo chiều mũi tên.
• Chèn bước xử lý vào giữa dây nối: Nhấp vào nút biểu tượng dấu cộng xuất hiện ở chính giữa dây nối để mở ngăn kéo thư viện và chọn nút mới.
• Xóa dây nối: Nhấp vào nút biểu tượng thùng rác trên thanh nổi giữa dây, hoặc nhấp chuột chọn dây nối rồi nhấn phím Delete trên bàn phím.

4 Quy tắc an toàn bắt buộc khi kết nối dây dữ liệu:

  1. Chống nối ngược vào bước khởi nguồn: Tuyệt đối không thể kéo dây nối vào cổng của nút Sự kiện kích hoạt nhằm bảo đảm kịch bản luôn có điểm khởi đầu xác định.
  2. Chống tự nối vào chính mình: Hệ thống tự động từ chối thao tác kéo dây từ cổng ra của một nút quay trở lại cổng vào của chính nút đó để ngăn ngừa vòng lặp vô tận gây tê liệt bộ nhớ.
  3. Chống nối trùng lặp: Giữa cùng một cặp cổng kết nối xác định, hệ thống chỉ cho phép duy nhất một đường dây nối tồn tại.
  4. Bảo vệ đường dây vòng lặp ngược: Dây nối lặp ngược từ bước cuối của chu kỳ lặp quay về đầu vòng lặp sẽ tự động được điều hướng chạy vòng xuống đáy của sơ đồ để không đè lên các bước xử lý bên trong.

📸 [Vị trí chèn ảnh chụp màn hình: Thao tác kéo dây nối giữa hai nút quy trình trên Khung vẽ Canvas, làm nổi bật nhãn cổng True/False và thanh công cụ nổi giữa dây nối với nút dấu cộng và thùng rác]

Giai đoạn 2 — Tạo thẻ ghi chú dán và tùy biến kích thước, màu sắc

Thẻ ghi chú dán là công cụ đắc lực giúp người dùng ghi chú ngữ cảnh kinh doanh, hướng dẫn vận hành hoặc lưu ý bảo mật ngay bên cạnh các bước xử lý liên quan.

Bước Cách thực hiện
1 Khởi tạo thẻ ghi chú: Nhấp chuột vào nút biểu tượng tệp văn bản Ghi chú trên thanh công cụ nổi mép phải màn hình. Một thẻ ghi chú hình chữ nhật thanh lịch sẽ ngay lập tức xuất hiện tại vị trí tâm của màn hình hiển thị.
2 Nhập nội dung chú thích: Con trỏ soạn thảo sẽ tự động nhấp nháy bên trong khung văn bản của thẻ ghi chú. Bạn chỉ cần gõ trực tiếp nội dung mô tả nghiệp vụ (ví dụ: “Khối này thực hiện phân loại thư từ khách hàng VIP trước khi chuyển tiếp sang nhóm tư vấn”). Văn bản tự động xuống dòng mượt mà khi chạm mép thẻ.
3 Chọn màu sắc nhận diện phù hợp: Nhấp vào nút tròn màu sắc ở góc thẻ ghi chú để lựa chọn 1 trong 5 bộ màu nền tinh tế, tự động tương thích hoàn hảo với cả chế độ giao diện sáng và tối:
• Cam hoàng hôn (Sunset): Bộ màu mặc định, ấm áp và bắt mắt, phù hợp cho các ghi chú chào mừng hoặc giải thích tổng quan.
• Xanh lá rêu (Moss): Gam màu xanh thiên nhiên dịu mắt, thích hợp cho các ghi chú về trạng thái dữ liệu an toàn hoặc bước xử lý thành công.
• Xanh đầm phá (Lagoon): Gam màu xanh dương công nghệ, lý tưởng cho các ghi chú về cấu trúc kỹ thuật và kết nối dịch vụ.
• Hồng cánh hoa (Blossom): Gam màu nổi bật, phù hợp cho các cảnh báo quan trọng, lưu ý dữ liệu nhạy cảm hoặc quy tắc bắt buộc.
• Xám than chì (Graphite): Gam màu trung tính, thích hợp cho các ghi chú nội bộ bổ trợ hoặc nhật ký lịch sử thay đổi.
4 Tùy chỉnh kích thước và vị trí:
• Co giãn kích thước: Rê chuột vào góc dưới bên phải của thẻ ghi chú; con trỏ chuột chuyển thành hình mũi tên chéo hai chiều. Nhấp giữ và kéo rê để mở rộng hoặc thu nhỏ thẻ ghi chú trong phạm vi từ tối thiểu 240 × 150 điểm ảnh đến tối đa 560 × 420 điểm ảnh.
• Di chuyển tự do: Nhấp giữ chuột vào phần đầu của thẻ ghi chú và kéo rê đến đặt cạnh các bước quy trình tương ứng trên sơ đồ.

📸 [Vị trí chèn ảnh chụp màn hình: Cận cảnh thẻ ghi chú dán trên Canvas hiển thị nội dung văn bản tiếng Việt rõ ràng, thanh chọn 5 chấm màu sắc và thao tác rê chuột kéo co giãn kích thước ở góc dưới phải]

Giai đoạn 3 — Bật chế độ vẽ tay phác thảo và chỉnh sửa nét vẽ tự do

Tính năng vẽ tay tự do cho phép người dùng dùng chuột phác họa trực tiếp lên Khung vẽ Canvas để khoanh vùng các cụm xử lý hoặc vẽ các mũi tên chỉ dẫn theo phong cách thảo luận bảng vẽ trực quan.

Bước Cách thực hiện
1 Bật chế độ vẽ tay: Nhấp chuột vào nút biểu tượng cây bút chì Vẽ trên thanh công cụ nổi mép phải. Nút chuyển sang màu đỏ nổi bật và mặt phẳng Canvas sẽ kích hoạt lớp phủ bề mặt vẽ tay chuyên biệt.
2 Thao tác phác thảo trên mặt phẳng: Nhấp giữ chuột trái và di chuyển chuột tự do trên mặt phẳng để vẽ các đường nét phác thảo (vẽ vòng tròn khoanh vùng một nhóm nút, vẽ mũi tên chỉ dẫn hoặc gạch chân nhấn mạnh). Thả chuột khi hoàn thành một nét vẽ.
3 Tùy biến nét vẽ qua Thanh điều chỉnh nổi: Khi ở chế độ tương tác thông thường, nhấp chuột chọn vào bất kỳ nét vẽ nào đã tạo. Một thanh điều khiển nổi thanh lịch mang tên Chỉnh nét vẽ sẽ tự động xuất hiện ở góc dưới bên trái màn hình:
• Bảng 8 màu sắc sinh động: Nhấp chọn 1 trong 8 chấm tròn màu sắc: Đỏ rực (#ef4444), Cam hoàng hôn (#f97316), Vàng hổ phách (#eab308), Xanh lá cây (#22c55e), Xanh dương (#3b82f6), Tím đậm (#a855f7), Hồng tươi (#ec4899), hoặc Đen tối (#1f2937).
• 3 Kích cỡ độ dày nét vẽ: Nhấp chọn giữa 3 nút kích cỡ: Nhỏ (S — 2 điểm ảnh), Vừa (M — 5 điểm ảnh) hoặc Lớn (L — 10 điểm ảnh). Nét vẽ trên Canvas sẽ lập tức đổi độ dày tương ứng.
• Xóa nét vẽ: Nhấp vào nút biểu tượng thùng rác màu đỏ trên thanh điều chỉnh nổi để xóa bỏ nét vẽ đó.
4 Tắt chế độ vẽ tay: Nhấp lại một lần nữa vào nút cây bút chì trên thanh công cụ nổi để thoát chế độ vẽ và quay trở lại chế độ chọn, kéo rê và điều hướng kịch bản thông thường.

📸 [Vị trí chèn ảnh chụp màn hình: Khung vẽ Canvas với một cụm nút được khoanh tròn bằng nét vẽ tay màu xanh lá, kèm Thanh điều chỉnh nét vẽ nổi ở góc dưới trái hiển thị 8 chấm màu và 3 cỡ nét S/M/L]

Kiểm tra kết quả

Sau khi hoàn tất quá trình đấu nối dây luồng dữ liệu, tạo thẻ ghi chú và phác thảo hình vẽ, người dùng có thể dễ dàng kiểm chứng chất lượng sơ đồ thông qua các dấu hiệu trực quan sau:

  1. Kiểm tra dây nối luồng dữ liệu:
    • Mọi đường dây nối đều có điểm xuất phát từ cổng ra bên phải và đích đến là cổng vào bên trái, không có đường dây nào bị đứt gãy hoặc chỉ lơ lửng giữa không trung.
    • Khi kịch bản được kích hoạt chạy thực thi (hoặc chạy thử nghiệm từng nút), các đường dây nối đang vận chuyển dữ liệu sẽ phát sáng chuyển động nhịp nhàng từ nút trước sang nút sau.
  2. Kiểm tra thẻ ghi chú dán:
    • Nội dung văn bản hiển thị đầy đủ, không bị che khuất; màu sắc thẻ nổi bật và hài hòa trên nền lưới phẳng của Canvas.
  3. Kiểm tra nét vẽ tay phác thảo:
    • Các nét vẽ gắn chặt vào tọa độ mặt phẳng Canvas, tự động thu nhỏ hoặc phóng to chính xác khi người dùng cuộn con lăn chuột thay đổi tỷ lệ khung nhìn từ 10% đến 400%.

Hướng dẫn thao tác qua Trợ lý ảo AI Agent

Toàn bộ các thao tác nối dây luồng dữ liệu, thiết lập đường dẫn nghiệp vụ và tạo lập thẻ ghi chú trên Khung vẽ Canvas đều có thể được tự động hóa hoàn toàn thông qua giao tiếp tự nhiên với Trợ lý ảo AI Agent.

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 5 công cụ AI Agent chuyên sâu về Dây nối và Ghi chú

Thao tác trên Giao diện Canvas Công cụ Trợ lý ảo AI Agent sử dụng Nhiệm vụ nghiệp vụ của công cụ
Tạo dây nối giữa hai bước workflow_edge_create Tự động tạo dây nối dữ liệu từ cổng ra của nút nguồn sang cổng vào của nút đích với cổng kết nối chỉ định.
Gỡ bỏ dây nối dữ liệu workflow_edge_delete Xóa bỏ một đường dây kết nối giữa hai nút dựa trên mã số định danh kết nối.
Tạo thẻ ghi chú mới workflow_node_create Tạo một thẻ ghi chú dán mới lên Khung vẽ Canvas với nội dung văn bản và tọa độ xác định.
Cập nhật nội dung thẻ ghi chú workflow_node_update Cập nhật văn bản mô tả, đổi màu sắc thẻ hoặc điều chỉnh kích thước hiển thị của thẻ ghi chú.
Xóa thẻ ghi chú khỏi sơ đồ workflow_node_delete Gỡ bỏ vĩnh viễn một thẻ ghi chú hoặc một nét vẽ tay phác thảo khỏi kịch bản.

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 phối dây nối và ghi chú trên quy trình:

Câu lệnh 1: Kết nối dây luồng dữ liệu giữa hai bước tuần tự

“Tôi vừa đặt thêm một nút gửi email vào quy trình.
Hãy sử dụng công cụ workflow_edge_create để nối dây từ nút [Xác thực thông tin khách hàng] sang nút [Gửi thư xác nhận tự động].
Cổng nguồn sử dụng cổng [main] và cổng đích là cổng [main].”

Câu lệnh 2: Nối dây rẽ nhánh điều kiện đúng và sai

“Kịch bản của tôi có một bước kiểm tra điều kiện giá trị đơn hàng.
Hãy gọi công cụ workflow_edge_create để tạo hai nhánh kết nối: nhánh cổng [true] nối sang nút [Áp dụng mã giảm giá VIP], và nhánh cổng [false] nối sang nút [Áp dụng mã giảm giá chuẩn].
Sau khi tạo xong, hãy kiểm tra bảo đảm hai đường dây không bị chồng chéo.”

Câu lệnh 3: Gỡ bỏ đường dây nối cũ không còn sử dụng

“Tôi muốn thay đổi luồng xử lý của kịch bản chăm sóc khách hàng.
Hãy tìm và sử dụng công cụ workflow_edge_delete để xóa bỏ đường dây nối giữa nút [Tiếp nhận yêu cầu] và nút [Gửi tin nhắn Zalo].
Hãy xác nhận lại trạng thái các bước sau khi đã ngắt kết nối.”

Câu lệnh 4: Tạo thẻ ghi chú hướng dẫn vận hành cho nhóm

“Tôi cần giải thích luồng xử lý phức tạp này cho các bạn nhân sự vận hành.
Hãy gọi công cụ workflow_node_create để tạo một thẻ ghi chú dán mới đặt tại tọa độ [x: 100, y: 400].
Nội dung ghi chú là: [Lưu ý: Khối này chạy tự động vào 9 giờ sáng mỗi ngày, vui lòng không sửa đổi biến môi trường khi chưa thông báo quản trị viên], sử dụng màu sắc [blossom].”

Câu lệnh 5: Cập nhật nội dung thẻ ghi chú đã có

“Nội dung quy định vận hành của kịch bản vừa có sự thay đổi.
Hãy sử dụng công cụ workflow_node_update để cập nhật nội dung của thẻ ghi chú [Quy tắc xử lý đơn hàng].
Hãy cập nhật nội dung mới là: [Đã nâng cấp áp dụng bảng tính mới từ ngày 01 tháng 11] và đổi màu thẻ sang màu [moss].”

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

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
Nối dây dữ liệu Một đường dây nối mới xuất hiện trên Canvas nối liền hai cổng với đầu mũi tên chỉ hướng chính xác. Trợ lý ảo AI Agent xác nhận đã tạo liên kết thành công kèm mã số định danh kết nối và tên hai cổng đã nối.
Xóa dây kết nối Đường dây nối cũ biến mất khỏi mặt phẳng Canvas, các nút tách rời độc lập. Trợ lý ảo AI Agent thông báo đã gỡ bỏ kết nối thành công và xác nhận sơ đồ đã được cập nhật an toàn.
Tạo thẻ ghi chú Thẻ ghi chú màu sắc xuất hiện trên mặt phẳng Canvas hiển thị chuẩn xác đoạn văn bản đã yêu cầu. Trợ lý ảo AI Agent phản hồi mã định danh thẻ ghi chú vừa tạo cùng vị trí tọa độ đã đặt trên sơ đồ.

📸 [Vị trí chèn ảnh chụp màn hình: Khung trò chuyện với Trợ lý ảo AI Agent thể hiện câu lệnh yêu cầu kết nối dây luồng dữ liệu giữa hai bước và phản hồi xác nhận kèm sơ đồ Canvas đã cập nhật đường dây nối mới]

Bảng câu hỏi thường gặp khi nối dây, ghi chú và vẽ tay

Câu hỏi thường gặp Giải đáp hướng dẫn chi tiết
1. Tại sao tôi không thể kéo dây nối vào cổng của nút Sự kiện kích hoạt? Theo nguyên lý vận hành tự động hóa trên nền tảng RedAI, nút Sự kiện kích hoạt là bước khởi nguồn bắt đầu của toàn bộ tiến trình nên không thể nhận dữ liệu từ bước nào khác chuyển tới. Do đó, cổng đầu vào của nút này luôn được ẩn đi để ngăn ngừa lỗi cấu trúc luồng.
2. Làm thế nào để đổi dây nối từ đường cong uốn lượn sang đường thẳng tắp? Rất đơn giản, bạn chỉ cần nhấn và giữ phím Shift trên bàn phím máy tính trong khi dùng chuột kéo nối dây giữa hai cổng. Khi thả chuột, dây nối sẽ là đường thẳng tắp gãy gọn.
3. Các thẻ ghi chú và nét vẽ tay có làm chậm tiến trình chạy của kịch bản không? Hoàn toàn không. Thẻ ghi chú và nét vẽ tay là các lớp trực quan hóa giao diện thuần túy, hoàn toàn không tham gia vào quá trình tính toán hay truyền tải dữ liệu của máy chủ khi kịch bản chạy thực thi.
4. Có thể xóa đồng thời nhiều dây nối và thẻ ghi chú cùng lúc không? Có thể. Bạn chỉ cần nhấn giữ phím Shift và kéo chuột quét một vùng chọn bao quanh các dây nối hoặc thẻ ghi chú cần xóa, sau đó nhấn phím Delete trên bàn phím để xóa đồng loạt.

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

Sau khi đã hoàn thiện việc kết nối các bước xử lý và bố trí chú thích trực quan trên sơ đồ, người dùng có thể tiếp tục tiến hành cấu hình chi tiết thông số và kiểm thử kịch bản thông qua các tài liệu chuyên sâu tiếp theo 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
06. Cửa sổ trượt Cấu hình Thuộc tính Nút và Biểu thức Động Làm chủ khay cấu hình thông số của từng bước, thiết lập tham số đầu vào, liên kết dữ liệu động từ các bước trước và khai thác bộ tạo 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 Hướng dẫn kiểm thử độc lập từng bước xử lý để kiểm tra chất lượng dữ liệu đầu ra mà không cần chạy lại toàn bộ quy trình; giải mã các hiệu ứng sáng đèn báo trạng thái 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 của các lần chạy trước; phân tích tham số vào/ra của từng bước, xác định nguyên nhân khi có bước báo lỗi và đo lường thời gian thực thi của từng công đoạn. [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)