HN công bố: GUI để chỉnh sửa sơ đồ lớp Mermaid
(docs.mermaidchart.com)GUI để chỉnh sửa sơ đồ lớp Mermaid
- Ưu điểm của biểu đồ Mermaid: Biểu đồ Mermaid, vốn cho phép thể hiện nhanh các sơ đồ phức tạp, nay đã trở nên trực quan và dễ chỉnh sửa sơ đồ lớp hơn nhờ bản cập nhật gần đây. Tính năng mới mở rộng trình biên tập trực quan để hỗ trợ tương tác trực tiếp với sơ đồ lớp, đồng thời cung cấp nhiều công cụ giúp người dùng nâng cao trải nghiệm làm việc với sơ đồ.
Sơ đồ lớp là gì?
- Định nghĩa sơ đồ lớp: Đây là một dạng UML (Ngôn ngữ Mô hình hóa Hợp nhất), dùng để mô hình hóa cấu trúc của hệ thống bằng cách thể hiện các lớp, thuộc tính, phương thức và mối quan hệ giữa các đối tượng. Đây là công cụ thiết yếu trong thiết kế hướng đối tượng, giúp trực quan hóa cách các phần khác nhau của hệ thống tương tác với nhau.
- Các thành phần cơ bản:
- Lớp: Biểu thị đối tượng hoặc khái niệm.
- Thuộc tính: Đặc trưng hoặc thuộc tính của lớp.
- Phương thức: Công việc hoặc phép toán mà lớp có thể thực hiện.
- Quan hệ: Biểu thị kết nối hoặc tương tác giữa các lớp.
Công cụ trình biên tập trực quan mới
- Giới thiệu công cụ: Thanh công cụ của trình biên tập trực quan giới thiệu nhiều công cụ mới cho sơ đồ lớp.
- Thay đổi hướng dựng sơ đồ: Điều chỉnh bố cục của sơ đồ.
- Thêm lớp mới: Dễ dàng thêm lớp mới vào sơ đồ.
- Thêm tiêu đề và ghi chú: Thêm tiêu đề vào sơ đồ hoặc chèn ghi chú không gắn với lớp cụ thể nào.
- Thêm namespace trống: Xác định phần giữ chỗ cho các lớp thuộc một namespace cụ thể.
- Cập nhật cấu hình sơ đồ: Bật/tắt các tùy chọn như khả năng hiển thị của "hộp thành viên rỗng" để giữ giao diện gọn gàng.
- Thay đổi theme và bố cục: Chọn nhiều theme khác nhau và điều chỉnh diện mạo của sơ đồ.
Tạo lớp và quan hệ mới
- Cách tạo lớp và quan hệ:
- Tạo lớp mới từ quan hệ hiện có: Nhấp vào một lớp hiện có trong sơ đồ rồi kéo ra vùng trống để tạo lớp mới và thiết lập quan hệ trực tiếp với lớp ban đầu.
- Tạo quan hệ giữa các lớp hiện có: Kéo đường quan hệ từ một lớp sang lớp khác để nhanh chóng thiết lập quan hệ.
Chỉnh sửa chi tiết lớp
- Sửa thuộc tính của lớp: Trình biên tập trực quan cung cấp một giao diện tương tác mạnh mẽ cho phép sửa thuộc tính của lớp mà không cần viết mã. Có thể cấu hình chi tiết từng thuộc tính của lớp.
- Thuộc tính: Xác định bộ sửa đổi phạm vi hiển thị, đặt kiểu dữ liệu, chỉ định tên thuộc tính.
- Phương thức: Thiết lập phạm vi hiển thị của phương thức, xác định kiểu trả về, chỉ định tên phương thức và tham số.
Mẹo bổ sung để tối ưu hóa sơ đồ
- Thử nghiệm nhiều bố cục khác nhau: Tận dụng các tùy chọn bố cục và theme để tìm ra diện mạo tối ưu cho sơ đồ.
- Thêm ngữ cảnh bằng ghi chú: Dùng tính năng ghi chú để giải thích một số phần của sơ đồ và làm rõ các quan hệ phức tạp.
Bắt đầu
- Tận dụng công cụ trình biên tập trực quan của Mermaid: Khám phá các tính năng mới để làm cho việc tạo sơ đồ lớp hiệu quả và dễ tiếp cận hơn. Dù bạn tạo sơ đồ mới từ đầu hay cải thiện sơ đồ hiện có, các cập nhật này đều giúp tiết kiệm thời gian, công sức và cho phép tập trung hơn vào thiết kế cũng như cấu trúc của hệ thống.
1 bình luận
Ý kiến trên Hacker News
Tôi thường dùng Claude làm front-end cho Mermaid. Khi cần giải thích các ý tưởng phức tạp, những sơ đồ Claude tạo nhanh giúp việc giải thích dễ dàng hơn nhiều
Tôi cũng có tài khoản Mermaid trả phí, nhưng dù sao thì tôi vẫn dùng Claude nhiều nhất, nên Claude vẫn là điểm vào đầu tiên. Điều tôi mong đợi ở GUI là khả năng thêm style và màu sắc cho các sơ đồ nhanh như vậy, rồi dịch chuyển các hộp một chút để mũi tên trông ổn hơn so với bố cục tự động
Nhìn blog thì có vẻ tính năng thay đổi màu sắc và style của từng hộp riêng lẻ có thể sẽ bị thiếu, nhưng đây là phần tốn thời gian nhất khi xử lý thủ công bằng code, nên sẽ rất tốt nếu có bộ công cụ phong phú
Dù Claude có widget Mermaid riêng, tôi vẫn không thể khiến nó sửa lỗi trong code của chính nó
Tôi là Dominic từ đội ngũ sản phẩm Mermaid. Nếu hiện có vấn đề với sản phẩm, yêu cầu cải tiến, hoặc nội dung muốn trao đổi, hãy email cho tôi tại dominic@mermaidchart.com hoặc đặt lịch trên calendar: https://calendly.com/dominic-01w/mermaid-shapers-product-int...
Tôi đã làm một trình soạn thảo Markdown tên KeenWrite(https://keenwrite.com/), và cho phép nhúng sơ đồ bằng cú pháp ba dấu backtick. Nó parse tiền tố
diagram-để chuyển các từ nhưgraphvizsang Kroki(https://kroki.io/), rồi Kroki render nhiều loại sơ đồ ASCII, bao gồm MermaidTrong Markdown, các đoạn mã nguồn vốn được hiển thị bằng font monospace bằng cách thêm định danh ngôn ngữ sau ba dấu backtick, nên việc GitHub phá vỡ quy ước này khi tạo ra chuẩn de facto cho sơ đồ Mermaid là một quyết định đáng tiếc
Với một công cụ muốn được áp dụng rộng rãi, tôi cho rằng render không cần trình duyệt phải là ưu tiên hàng đầu như một tính năng cơ bản vượt khỏi mức PoC
Gần đây tôi đã dùng thử thứ này và lúc đầu khá thích. ChatGPT cũng tạo sơ đồ Mermaid khá tốt, nhưng tôi chưa thử tính năng AI tích hợp của nó
Tuy nhiên, sau khi tạo một sơ đồ có độ phức tạp trung bình rồi cố kéo thả thủ công trong tính năng Whiteboard để cải thiện layout, trải nghiệm khá chao đảo. Rất khó sắp xếp vào vị trí mong muốn hoặc kéo cho đúng, và cũng khó xử lý tình trạng chồng lấn. Một số loại sơ đồ không hỗ trợ Whiteboard cũng là điểm đáng tiếc
Sự khác biệt về tính năng giữa mermaidchart.com và mermaid.live cũng gây bối rối. Tôi không rõ chúng là sản phẩm cạnh tranh hay các biến thể của những ứng dụng tương tự, và các tên “Playground” và “Live Editor” cũng gây nhầm lẫn. Dù vậy, tôi vui vì nó tồn tại và hy vọng sẽ tiếp tục được cải thiện
mermaidchart.com và mermaid.live do cùng một đội ngũ vận hành. Mermaid.live là trình chỉnh sửa ban đầu của dự án mã nguồn mở 10 năm tuổi, đồng thời là trình chỉnh sửa hosted hoàn toàn mã nguồn mở
Người sáng lập Mermaid gần đây đã cùng venture studio của CEO GitLab tạo ra mermaidchart.com, và đang mở rộng để phục vụ nhiều người dùng hơn cùng các tính năng cấp doanh nghiệp. Công ty theo mô hình open core và đã nhận vốn đầu tư mạo hiểm, nhưng dự án Mermaid sẽ tiếp tục là mã nguồn mở và sẽ tiếp tục được đầu tư
Các công cụ vẽ sơ đồ có thuật toán tự động bố trí chủ yếu chỉ được dùng khi tạo hình trực quan để gỡ lỗi theo cách lập trình. Nếu nhằm mục đích tài liệu hóa, tôi thích vẽ thủ công bằng OmniGraffle hơn
Việc làm cho đồ thị trông đẹp bằng các công cụ như graphviz rất phức tạp, và cuối cùng bạn sẽ lạm dụng các tính năng theo cách lách luật để tạo ra hình dạng mong muốn
Tôi nghĩ thứ thực sự cần là một thuật toán bố trí đồ thị dựa trên học máy có thể cân nhắc cả tính dễ đọc lẫn thẩm mỹ. Những gì tôi tìm được đến nay đều nghiêng về hiển thị đồ thị lớn, gần với một lĩnh vực khác hơn
Nếu Mermaid đang thu thập mọi điểm chỉnh sửa phát sinh trong UI thì có vẻ đó sẽ là một tập dữ liệu khá tốt
Ví dụ lớn hơn ở đây: https://play.d2lang.com/?script=rJLfavMwDMXv_RR6gYbvo3ce7FWG...
Tôi không thích tự quảng bá trong bài viết về đối thủ, nhưng Mermaid không cạnh tranh với hướng tự xây engine bố trí riêng, nên tôi nghĩ điều này có liên quan trong bối cảnh này
Thử nghiệm của nhóm Kiel University, những người phát triển ELK: https://github.com/kieler/KLighD
Wiki dự án Kieler: https://rtsys.informatik.uni-kiel.de/confluence/display/KIEL...
Thư viện vẽ đồ thị dựa trên ràng buộc: https://www.adaptagrams.org/, bản triển khai JS: https://ialab.it.monash.edu/webcola/
Ngoài ra cũng đáng xem bài báo HOLA https://ialab.it.monash.edu/~dwyer/papers/hola2015.pdf, demo Confluent Graphs https://www.aviz.fr/~bbach/confluentgraphs/, bài báo về bố trí trực giao https://arxiv.org/pdf/1408.4626.pdf, và bài báo về nén power graph https://arxiv.org/pdf/1311.6996v1.pdf
Tôi hiểu rằng thuật toán tự động bố trí tạo ra tốc độ là một sức hút lớn của Mermaid, nhưng layout hiện tại đôi khi có thể trở nên khá rối rắm
Ý tưởng về mô hình học máy rất thú vị, và tôi tò mò các yêu cầu cơ bản của một sơ đồ dễ đọc, đẹp mắt là gì. Ví dụ có thể có các tiêu chí như cạnh nên vuông góc hay bo tròn. Nếu bạn có thể chia sẻ suy nghĩ, xin hãy gửi email tới dominic@mermaidchart.com
Tôi hy vọng nó có thể giúp việc kết xuất sơ đồ nhất quán và tinh chỉnh đến từng pixel cuối cùng trở nên dễ dàng hơn rất nhiều. Hiện đã có một phiên bản alpha rất sớm của renderer dùng Cassowary hoạt động được, và tôi đang làm một GUI tốt
Tôi mất hứng ngay ở bước “Create your account”. Giá mà trước khi tạo tài khoản có thể dùng thử trình chỉnh sửa và lưu vào bộ nhớ cục bộ của trình duyệt cho đến khi thấy ưng ý
Tôi thích việc Mermaid ngày càng tốt hơn. Với sequence diagram, tôi nghĩ https://sequencediagram.org/ là tốt nhất. Tôi không liên quan gì, chỉ là một người dùng hài lòng
Tôi hiểu là triết lý khác nhau, nhưng sẽ thật tốt nếu đến một ngày có thể dùng Mermaid bên trong LaTeX. Ít nhất nếu có một công cụ chuyển Mermaid sang TikZ một cách ổn định thì việc chuẩn bị slide có lẽ sẽ dễ hơn nhiều
Cũng có thể xuất ra PNG/JPG, nhưng thường mất rất nhiều khả năng tùy chỉnh, và gần như chỉ có thể phóng to hoặc thu nhỏ để vừa với trang
Hôm qua khi tìm hiểu chuyện này, tôi cũng thấy GUI mới được giới thiệu trong bài này, và cuối cùng đã phải vật lộn để xuất ra PNG rồi chỉnh cho khớp với bố cục trang Beamer
Draw.io có nhúng sơ đồ Mermaid, VSCode và nhiều plugin IDE cũng có, nên tôi tò mò không biết cái này đặc biệt ở điểm nào
Điểm khác biệt của Mermaid Chart là chỉnh sửa hai chiều. Bạn có thể sửa mã để thay đổi sơ đồ, và nếu trực tiếp thay đổi sơ đồ thì thay đổi đó sẽ tự động được phản ánh vào mã
Hiện tại, tính năng chỉnh sửa hai chiều này dùng được với sơ đồ lớp và lưu đồ, và dự kiến sẽ mở rộng sang các loại sơ đồ phổ biến khác trong tương lai
Hình ảnh “Theme Customization in Toolbar” không được render
Bản thân dự án thì hay, nhưng về mặt triết lý thì tôi thấy đáng nghi ngại
Mermaid muốn trở thành Markdown của sơ đồ, nên điều quan trọng nhất là có thể chỉnh sửa và sử dụng bằng văn bản thuần túy. Nếu phải dùng trình chỉnh sửa trực quan, tôi không hiểu tại sao không dùng một công cụ mạnh hơn và thoát khỏi định dạng hạn chế đó
Cái này giống các trình chỉnh sửa Markdown kiểu WYSIWYG. Tất nhiên chắc vẫn có thị trường ngách, nhưng nếu vậy thì dùng Google Docs hay MS Word chẳng phải được sao