Tạo Sơ đồ Trạng thái Kéo/Thả

Question

Tôi muốn tạo sơ đồ trạng thái, ví dụ như được hiển thị trong hình bên dưới.

Tôi muốn làm cho người dùng này thân thiện. Nếu bất kỳ người dùng nào muốn sơ đồ như vậy thì anh ta chỉ có thể kéo/thả vòng tròn/mũi tên và kết nối chúng và đưa mô tả (1,2,3 ..... a, b, c ....) v.v. Nó phải là dựa trên web.

Tôi không chắc liệu có thư viện mã nguồn mở/miễn phí để thực hiện việc này hay không.

Cách tạo sơ đồ như vậy một cách tương tác?

Bất kỳ ý tưởng/đề xuất nào được hoan nghênh nhất.

Cảm ơn bạn.

Answer 1

Theo như tôi biết có thực sự là không có mã nguồn mở/miễn phí thư viện mà thực hiện điều này.

Một số công cụ trực tuyến tồn tại, nhưng chúng chủ yếu sử dụng chuyển đổi văn bản thành hình ảnh tương tự như những gì yUML và Websequencediagrams làm.

Bạn sẽ phải tự mình viết toàn bộ nội dung, mặc dù một số thứ như RaphealJS hoặc jQuery SVG có thể thực hiện một số việc nâng hạng nặng cho bạn liên quan đến việc hiển thị biểu đồ.

Bạn có thể muốn xem qua số Canviz và wwwsqldesigner để lấy cảm hứng.

Answer 2

Hãy xem web của tôi dựa trên State Machine Diagram Editor. Một phiên bản máy tính để bàn thuận tiện hơn cũng tồn tại.

Answer 3

Tôi đang tìm kiếm thứ gì đó dọc theo cùng một đường và tìm thấy: JointJS. Có vẻ như rất hứa hẹn cho các mục đích của bạn. Các ví dụ sẽ giúp bạn bắt đầu.

Answer 4

Finite State Machine Designer có thể được sử dụng để tạo biểu đồ giống như trong câu hỏi bằng cách nhấp/kéo/thả.

Nó cũng là open source, nếu bạn cần mở rộng.