Diagram Bake-off - review tổng hợp
6 tech x 2 mode (A = LLM-pure / B = skill-assisted) vẽ CÙNG 1 concept NEXA SDLC 22-node. Render thật + codex judge pixel-review độc lập. Mở từng cặp ảnh A|B để so trực tiếp. Mục tiêu: chọn giải pháp diagram tốt nhất cho LLM.
Khuyến nghị cuối (codex judge)
- Format LLM author + eval + SoT = Mermaid .mmd (text, diff, round-trip tốt nhất)
- Render polished sơ đồ phức tạp = D2 (container + auto-layout, visual #1)
- Export tùy chọn = draw.io XML khi human cần sửa tiếp trong diagrams.net
- KHÔNG default: Excalidraw / raw HTML-SVG / PlantUML-activity cho lớp 22-node feedback-loop
★ Golden swimlane canvas
RENDER MỚI - golden style Hand-built HTML/SVG theo style golden workflow-canvas-quan-ly-san-xuat (paper/ink/rust, lane theo actor, chip STD/EXT/CUS, gate diamond, feedback dashed). Cùng 22-node NEXA. Đây là HTML/SVG LÀM ĐÚNG TEMPLATE - đẹp hơn hẳn html-svg worker tự bịa layout.golden-canvas · LLM + golden templatestyle ref
file: golden-canvas/index.html (data-driven SVG, sửa mảng N/E là đổi sơ đồ)
Vì sao quan trọng: chứng minh raw HTML/SVG KHÔNG xấu cố hữu - vấn đề là LLM tự bịa toạ độ. Cho LLM 1 template golden + layout-engine (lane×col → x,y) thì HTML/SVG ra chất lượng presentation. Đây là hướng cho nexa-design --explain: data (node/edge) + golden renderer, không bắt LLM đặt pixel.
Scorecard (Fid · Vis · Auth · RoundTrip → Avg)
| # | Tech / mode | Fid | Vis | Auth | RT | Avg | Pixel note |
|---|---|---|---|---|---|---|---|
| 1 | D2 (skill) | 9 | 9 | 8 | 9 | 8.75 | spine sạch, group BA+validator, JP rõ, feedback arc rõ |
| 2 | draw.io (LLM-pure XML) | 9 | 9 | 7 | 7 | 8.00 | routing waypoint tốt nhất, không overlap |
| 3 | PlantUML (component) | 8 | 5 | 9 | 9 | 7.75 | source tốt, render crossing + clip dark section |
| 4 | Mermaid (skill HTML) | 9 | 7 | 7 | 7 | 7.50 | đủ content + legend, vài label truncate |
| 5 | Mermaid (LLM-pure .mmd) | 7 | 5 | 8 | 9 | 7.25 | source chuẩn, visual hẹp/nhỏ |
| 6 | HTML/SVG (skill) | 7 | 8 | 5 | 9 | 7.25 | đẹp nhưng geometry thủ công, thiếu edge (23/26) |
| 7 | Graphviz DOT (LLM-pure) | 8 | 4 | 8 | 9 | 7.25 | strip siêu rộng, label nhỏ - layout trap |
| 8 | draw.io (skill CLI) | 7 | 5 | 8 | 6 | 6.50 | routing đỏ đè spine, label mơ hồ |
| 9 | HTML/SVG (LLM-pure) | 7 | 6 | 5 | 9 | 6.75 | bezier thủ công, label nhỏ, thiếu edge |
| 10 | Excalidraw (skill) | 8 | 6 | 6 | 7 | 6.75 | readable nhưng group-label clip, loop-label đè |
| 11 | PlantUML (LLM-pure activity) | 6 | 7 | 5 | 8 | 6.50 | activity đổi semantic, back-edge thành note |
| 12 | Excalidraw (LLM-pure) | 8 | 5 | 6 | 7 | 6.50 | label trái clip + đè, margin chật |
10 thư viện tham khảo thêm (research GitHub, sao thật)
Ngoài 8 giải pháp đã test ở trên, đây là 10 library/tool khác đáng tham khảo cho nhu cầu "LLM vẽ + người sửa + save-as + round-trip eval". Sao GitHub kiểm chứng từ repo (06/2026). Xếp hạng theo độ hợp.
| # | Tên | Repo | Sao | Loại | LLM author | Sửa + save | Round-trip | License | Verdict |
|---|---|---|---|---|---|---|---|---|---|
| 1 | tldraw | tldraw/tldraw | 47.9k | canvas-lib | JSON shape + API sanitize + llms.txt | Yes · .tldr JSON | Cao | MIT | Hợp nhất overall: AI API riêng + canvas sửa + JSON persist |
| 2 | xyflow / React Flow | xyflow/xyflow | 37.1k | canvas-lib | {nodes,edges} JSON | Yes · toObject() JSON | Cao | MIT | Tốt nhất cho workflow UI code-owned, JSON tối giản |
| 3 | bpmn-js | bpmn-io/bpmn-js | 9.6k | canvas-lib | BPMN XML / JSON moddle | Yes · .bpmn XML | TB | bpmn.io | Chuẩn ngành cho process/swimlane; modeler chín |
| 4 | GoJS | NorthwoodsSoftware/GoJS | 8.4k | canvas-lib | JSON model binding | Yes · JSON+SVG | Cao | ⚠ Proprietary | Mạnh nhưng license thương mại = blocker |
| 5 | JointJS | clientIO/joint | 5.3k | canvas-lib | JSON {cells} | Yes · JSON+SVG | Cao | MPL-2.0 | Canvas OSS chắc, ít LLM-native hơn tldraw |
| 6 | Kroki | yuzutech/kroki | 4.2k | render-service | Chọn DSL bất kỳ (D2/...) → 1 API | Source DSL là artifact | Cao | MIT | Gateway render 30+ loại; sửa = sửa text DSL, không canvas |
| 7 | flowchart-fun | tone-row/flowchart-fun | 3.4k | text-DSL | DSL indent siêu gọn (A goes to: B) | Yes · webapp, export SVG | Rất cao | MIT | LLM→flowchart dễ nhất, gần-zero lỗi cú pháp |
| 8 | Cytoscape.js | cytoscape/cytoscape.js | 11.1k | canvas-lib | {elements} JSON | Một phần (cần plugin sửa) | Cao | MIT | Tốt cho graph/network; flowchart được, swimlane không sẵn |
| 9 | mingrammer/diagrams | mingrammer/diagrams | 42.4k | text-DSL (Python) | Code Python with Diagram() | Không sửa in-browser, PNG tĩnh | Cao (source) | MIT | Hợp generate-rồi-render; thiên infra arch, không swimlane |
| 10 | Pintora | hikerpig/pintora | 1.3k | text-DSL | DSL kiểu Mermaid/PlantUML | Yes · live editor, SVG | Cao | MIT | Mermaid-alt có Activity diagram; community nhỏ = risk |
Top pick trong 10 lib này
tldraw hợp nhất: lib duy nhất có AI authoring API chính thức (typed action + sanitize layer + llms.txt) + canvas người sửa + save .tldr JSON + maintain tích cực. Cho process/swimlane chuẩn ngành thì bpmn-js. Cho đường LLM→flowchart nhẹ nhất, gần-zero lỗi cú pháp thì flowchart-fun. Kroki đáng dùng làm render-gateway 1-API cho mọi DSL.
Render thật của từng lib (cùng concept NEXA - để check tận mắt)
7/10 lib render được headless + nomnoml (bonus). 3 lib (tldraw / React Flow / flowchart-fun) cần build/webapp - link live demo để tự thử.