Sơ đồ BPMN
Cách vẽ, dàn trang tự động và ý nghĩa màu sắc.
Sơ đồ BPMN là góc nhìn “đúng ký pháp”, dùng để trình bày với người khác — ai quen BPMN đều đọc được ngay mà không cần giải thích.
Ký pháp
| Hình | Nghĩa | Màu |
|---|---|---|
| Hình tròn viền mảnh | Sự kiện bắt đầu | Xanh lá |
| Hình tròn viền đôi | Sự kiện kết thúc | Đỏ |
| Chữ nhật bo góc | Công việc, kèm thời gian và chi phí | Xanh dương |
| Hình thoi ✕ | Cổng loại trừ | Cam |
| Hình thoi + | Cổng song song | Vàng |
| Viền hồng | Nằm trên đường găng | Hồng |
| Nét đứt cam | Luồng quay lui (rework) | Cam |
Toạ độ: giữ bản vẽ gốc hay tự dàn trang
Nếu file tải lên có đủ toạ độ cho mọi bước, công cụ vẽ lại đúng bố cục bạn đã vẽ. Thêm bước mới (chưa có toạ độ) thì nó tự chuyển sang dàn trang tự động cho toàn sơ đồ. Công tắc Toạ độ gốc cho phép chủ động chọn.
Thuật toán dàn trang
Khi tự dàn trang, công cụ dùng phương pháp Sugiyama bốn bước:
- Phá vòng — DFS đánh dấu cạnh ngược để đồ thị tạm thành không chu trình.
- Gán lớp — theo đường dài nhất; cạnh nhảy nhiều lớp được chèn node ảo.
- Giảm giao cắt — barycenter nhiều lượt, rồi hoán vị hai node kề nhau chừng nào còn bớt được giao cắt.
- Nắn thẳng — kéo mỗi node về gần trung bình vị trí láng giềng, node ảo được nắn thẳng hoàn toàn để cạnh dài không gấp khúc.
for sweep in range(8):
downward = sweep % 2 == 0
neighbours = prev_of if downward else next_of
for level in levels:
keys.sort(key=barycenter) # sắp theo trọng tâm láng giềng
for level in range(max_layer): # hoán vị kề nếu bớt được giao cắt
while improved:
for index in range(len(lower) - 1):
current = crossings(upper, lower)
lower[index], lower[index + 1] = lower[index + 1], lower[index]
if crossings(upper, lower) >= current:
lower[index], lower[index + 1] = lower[index + 1], lower[index]
Điều khiển hiển thị
- Ngang / Dọc — hướng dòng chảy.
- Vừa khung — thu nhỏ cho vừa màn hình; tắt đi để xem đúng cỡ và cuộn.
- Hiện Id — in mã bước lên trên hình, tiện khi đối chiếu với bảng.
Sơ đồ được vẽ ở máy chủ dưới dạng SVG thuần. Mọi chữ do người dùng nhập
đều được escape trước khi ghép vào SVG, nên không có đường nào để chèn mã độc qua tên bước.
Chỗ nào khó hiểu hoặc còn thiếu?