Nomnoml: Sơ đồ UML được vẽ bằng cú pháp văn bản
(nomnoml.com)- Công cụ viết sơ đồ UML như viết mã; khi chỉnh sửa cú pháp văn bản ở bên trái, sơ đồ được render cũng sẽ thay đổi theo
- Hỗ trợ nhiều thành phần sơ đồ và ký hiệu đường quan hệ như lớp, component, flowchart, use case, database·table, v.v.
- Nội dung chỉnh sửa được lưu vào localStorage của trình duyệt nên có thể còn lại ở lần truy cập sau, nhưng không được đảm bảo sẽ luôn được lưu
- Có thể di chuyển·phóng to/thu nhỏ canvas bằng kéo thả và cuộn trong vùng 1/3 bên phải, và trình soạn thảo hỗ trợ một phần key mapping của Sublime Text
- Có thể điều chỉnh phông chữ, hướng, khoảng cách, màu sắc, kiểu đường, và kiểu classifier do người dùng định nghĩa bằng chỉ thị
#và chỉ thị kiểu.
Sơ đồ được cấu thành bằng cú pháp văn bản
- Nomnoml là công cụ viết và render sơ đồ bằng cú pháp dựa trên văn bản
-
Ký hiệu đường quan hệ
- Có thể sử dụng association, dependency, generalization, implementation, composition, aggregation, ball and socket, note, hidden, v.v.
- Ví dụ:
[Car]->[Engine] - Ví dụ:
[Car] +-> 0..* [RustPatch] - Ví dụ:
[Car]o->[Manufacturer] - Ví dụ:
[Car]<:-[Pickup]
-
Các classifier được hỗ trợ
- Trong sơ đồ lớp, ngoài lớp cơ bản còn hỗ trợ
abstract,instance,reference,package,frame - Trong sơ đồ component có thể dùng ký hiệu
socket,lollipop - Các thành phần flowchart gồm
start,end,state,choice,sync,input,sender,receiver,transceiver - Sơ đồ use case hỗ trợ
actor,usecase - Các thành phần khác có thể dùng
note,label,hidden,database,pipe,table- Ví dụ về bảng có dạng
[<table>Fruits| Apples | 17 || Oranges | 4711]
- Ví dụ về bảng có dạng
- Trong sơ đồ lớp, ngoài lớp cơ bản còn hỗ trợ
Chỉnh sửa, chỉ thị và kiểu dáng
//ở đầu dòng được xử lý là chú thích//ở giữa dòng như[not //commented]không phải là chú thích
- Khi dùng thuộc tính
id, có thể biến hai node có cùng tên hiển thị thành hai node khác nhau- Ví dụ:
[<actor id=a>User],[<actor id=b>User],[a] -- [b]
- Ví dụ:
-
Điều chỉnh bố cục và render bằng chỉ thị
##import: filename#direction: down | right#edges: hard | rounded#background: transparent#font,#fontSize,#spacing,#padding,#stroke,#fill,#zoom#ranker: network-simplex | tight-tree | longest-path
-
Định nghĩa kiểu classifier bằng chỉ thị
.- Ví dụ:
#.box: fill=#8f8 dashed - Ví dụ:
#.blob: visual=ellipse title=bold - Có thể dùng các cặp key/value như
fill,stroke,align,direction,visual - Có thể chỉ định kiểu chữ cho tiêu đề và phần thân như
title=left,italic,bold,body=center,italic,bold - Ví dụ sử dụng gồm thay đổi phông chữ, bố cục dày hơn, tạo bảng, kiểu tùy chỉnh, và tách nhiều tệp
- Việc tách nhiều tệp dùng dạng
#import: blobby_styles - Các thay đổi trong màn hình chỉnh sửa được lưu vào localStorage của trình duyệt, và canvas có thể di chuyển·phóng to/thu nhỏ bằng kéo thả và cuộn trong vùng 1/3 bên phải
- Trình soạn thảo hỗ trợ một phần key mapping của Sublime Text, và Nomnoml được lưu trữ trên GitHub
- Ví dụ:
1 bình luận
Ý kiến trên Hacker News
Liên kết GitHub: https://github.com/skanaar/nomnoml
Ban đầu khá rối, đến khi tìm thấy nút about thì mới hiểu
Có lẽ mình đã sống may mắn vì không nhận ra UML ngay từ cái nhìn đầu tiên. Lúc đầu tưởng nó đang giải thích kiểu cú pháp giả giọng hải tặc nào đó
Mình thấy cách này tốt hơn nhiều, vì nó thừa nhận rằng thỉnh thoảng chẳng ai chịu học thuộc 10 loại mũi tên chỉ để đọc một sơ đồ UML: https://buck2.build/docs/concepts/concept_map/
Nhưng khá nhiều công cụ dùng chữ “UML” cũng vậy, và thực tế nhiều khi ta cần thứ gì đó kém chính xác và ít dài dòng hơn UML trên lý thuyết
Trước đây có một trang mã nguồn mở so sánh các công cụ chuyển “văn bản thành sơ đồ”: https://text-to-diagram.com/
nomnoml không có trong danh sách
[1]: https://d2lang.com/
Mình thích Nomnoml. Gần đây đang dùng nó trong một dự án quản lý tri thức cá nhân (PKM) chạy trên trình duyệt để trực quan hóa cấu trúc tag phân cấp
Layout thường khá gọn gàng. Ví dụ: https://imgbox.com/9A1mDyNv
Phần mobile có vẻ cần chỉnh lại. Mở trên điện thoại thì sơ đồ được vẽ đè lên editor, khiến không dùng được editor
Thư viện JavaScript bên dưới có thể render trực tiếp ra HTML canvas hoặc SVG trong chương trình Node.js, và nếu muốn cũng có thể chạy từ dòng lệnh
Trước đây mình đã làm vài công cụ bằng nomnoml, trong đó có cả đồ thị luồng điều khiển và đồ thị phụ thuộc của mã assembly GPU
Mình rất thích nó, nhưng hơi tiếc là không có cách nào ổn định để ép một số phần tử cụ thể được đặt gần nhau. Với các sơ đồ rất lớn, đôi khi nó đưa ra lựa chọn không tốt và trở nên lộn xộn
Dù tài liệu chưa hoàn chỉnh, code khá dễ sửa, nên mình đã hack được tooltip khi rê chuột lên và cho phép bấm vào một hộp cụ thể để liên kết sang sơ đồ khác. Thật biết ơn vì một công cụ tốt như vậy là mã nguồn mở
Để có layout đẹp thì phụ thuộc quá nhiều vào thứ tự định nghĩa. Với sơ đồ lớn, người dùng có thể khó xử lý, nhưng với sơ đồ nhỏ thì có vẻ ổn
Ví dụ, nếu viết cùng ví dụ hải tặc theo thứ tự khác, nó vẫn hợp lệ nhưng cho ra layout xấu
Mình từng dùng vài sản phẩm sơ đồ dựa trên code vì mơ về một thế giới nơi tài liệu kỹ thuật, bao gồm cả sơ đồ, trở thành một phần của source code dự án; nhưng rất khó có được layout chấp nhận được, đặc biệt cho phát hành bên ngoài, và cả dùng nội bộ cũng vậy
Sự bực bội đó thường dẫn đến hai kết quả tệ: sơ đồ trở nên không đọc nổi, hoặc không được bảo trì
Thành thật mà nói, ý tưởng review tài liệu như code khi check-in cũng gần như một huyền thoại. Diff của loại tài liệu này rất khó hiểu, và nếu không render để xem kết quả thì gần như không thể kiểm tra một cách có ý nghĩa liệu tài liệu có đúng hay không
Đây là kiểu vấn đề mình thật sự mong được giải quyết tốt, và có thể một ngày nào đó sẽ trở thành vấn đề đã được giải quyết
So sánh bảng Pirate gốc với bảng Pirate trong bình luận cha thì trên dưới bị đảo ngược. Ngay cả khi định nghĩa beard và parrot trước theo đúng thứ tự muốn hiển thị, kết quả vẫn bị đảo
Trông đẹp, và có vẻ tốt hơn nhiều so với sơ đồ lớp PlantUML
[0]: https://plantuml.com/class-diagram
Làm mình nhớ đến graphviz