如何在 HTML 页面中绘制序列图 [关闭]答案

【问题标题】：How to draw a sequence diagram in a HTML page [closed]如何在 HTML 页面中绘制序列图 [关闭]
【发布时间】：2012-03-11 13:57:31
【问题描述】：

我们开发了一个web应用，需要画一个类似sequence uml diagram的图表。是否有用于此目的的图表工具（任何 gwt、jsf、html、javascript、java 等解决方案）？

注意：图形不能是图像，因为我们需要选择项目并对点击事件执行一些操作

【问题讨论】：

您可以使用 SVG。欲了解更多信息，请参阅：stackoverflow.com/questions/5620780/…

标签： java javascript html jsf gwt

【解决方案1】：

你可以试试js-sequence-diagrams
它将如下文本转换为 UML 序列图

<div class="editor">Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!
</div>

您还可以检查它如何在 jsFiddle 中运行可点击和填充颜色 https://jsfiddle.net/chetabahana/f7ejxhnk/35/

单击一个框会将其颜色变为黄色
点击箭头将打开 Google 网站

【讨论】：

【解决方案2】：

你可以试试draw.io。它是基于 JavaScript 的免费在线图表工具，使用 SVG 绘制形状。

【讨论】：

【解决方案3】：

看看jsUML2，它可能就是你要找的东西。

【讨论】：

【解决方案4】：

使用图像并创建image map with GIMP。完全支持点击事件。

【讨论】：

【解决方案5】：

我认识一位基于 GWT 的 UML 建模器。您可以查看gwtuml 作为一种可能的选择。这是demo

【讨论】：

【解决方案6】：

为什么不试试html5的canvas？？

这些家伙有一个图书馆 http://www.rgraph.net/

我在这里又找到了一个图书馆 http://www.liquidx.net/canvasgraphjs/

这是一个很好的教程 http://dev.opera.com/articles/view/html5-canvas-painting/

【讨论】：