如何用 HTML5 + Javascript 做类似 Visio 的图表？

Question

我正在寻找使用 HTML 和 Javascript 绘制类似 Visio 图表的选项。

我正在尝试完成的一些示例：

• https://live.yworks.com/demos/view/vsdxexport/（computer-network 示例）
• This Lucidchart example

到目前为止，我认为可以探索的选项是：

• 使用 SVG 拖放 API
• d3.js
• HTML5 Canvas

还有其他我应该注意的技术或 NPM 软件包吗？它不是自由形式的 Visio 克隆，有​​一组固定的图标，我需要能够 "snap" 连同线条。直线可以是直线，也可以像这里一样弯曲 90 度：

并且可以在 canvas

中拖动图标

Answer 1

您可以使用 Apache 2.0 许可的 mxGraph 库。

分发为 npm package, on his source code you can find a fantastic example of an editor build upon it that you can also try online。