MxGraph
MxGraph 是一款可交互的 JavaScript HTML 5 图表制作库。 MxGraph 是一个客户端库,使用 SVG 和 HTML 来渲染你的模型。这个库用于 Draw.io 。该库从 2005 年开始开发。mxGraph 没有使用第三方软件,因此它不需要插件,可以被集成到任何框架。
mxGraph 包含了一款 JavaScript 写的客户端软件,以及针对各种语言的一系列后端软件。该客户端软件是一款图表组件和一款可选的被集成到已有 Web 接口的应用程序包装器。客户端需要 Web 服务器来传送客户端请求的文件,或者从本地文件系统运行而不需要 Web 服务器。后端可以按原样使用,或者以支持的其中一种语言嵌入到已有的服务器应用程序。
GoJS
https://gojs.net/latest/index.html
GoJS 是一款实现跨现代浏览器和跨平台的交互式图表的功能丰富的 JavaScript 库。GoJS 通过自定义模板和布局使得创建包含节点、连线、分组的复杂图表变得简单。
GoJS 提供了针对用户交互的许多高级功能,例如拖拽、复制粘贴、事务状态、取消操作管理、调色板、概览、模型数据绑定、时间处理器以及一个用于自定义操作的可扩展工具系统。他们提供了超过 150 个交互样本来帮你上手 BPMN、流程图、状态图、树状图、桑基图(Sankey)和数据流图。API 文档健全,确保你可以立即使用。我们在一篇文章中广泛地介绍了 GoJS 。
Mindfusion 图表库
这个工具是 100% 用 JavaScript 写的,使用 HTML5 Canvas 元素绘制。组件可以使用 jQuery 或者 Microsoft Ajax®库来实现浏览器独立层和类型系统实现。
它提出了一组丰富的预定义的图形(工作流图、过程图、类图、树等,可以查看它们的样本集),并提供了可能来自定义图形和自定义选项(例如箭头形状)。为了 API 使用便利,他们建立了丰富的文档,同时你还可以使用自动布局算法。
Mermaid.js
和 nomnoml 类似,Mermmaid 主要聚焦于根据文本文件生成图表,通过一种简单的类似 markdown 的脚本语言。它依赖 d3 和 dagre-d3 来提供图形布局和绘制库。它提供了一个在线编辑器,但你也可以直接复用打包的 Mermaid API 来将 Mermaid 集成到自己的开发中。
它主要涉及次序图和流程图。
Diagram.js
Diagram.js 是创建并展示图表的核心库。它被 BPMN.io (库的作者)用作该公司的许多其它库的构建块来定义业务模型、决策模型和案例模型。
例如, bpmn-js 是 diagram.js 的扩展,用来渲染 bpmn 2.0 图表。除了使用它来构建一个工作流建模编辑器(他们已经提供),bpmn-js 的设计考虑了可扩展性,因此你可以“轻易”在其基础上构建一些执行引擎或模拟引擎。
https://bpmn.io/toolkit/bpmn-js/examples/
State.js
顾名思义,state.js 聚焦于分层状态机建模。state.js API 提供:
代表状态机模型的类(State、PseudoState、Transition 等)。
活动状态配置(当前状态)的接口和实现;这允许一个状态机模型的多个并发实例。
一组提供状态机运行时的函数。
它是由 TypeScript 开发的,编译为 JavaScript;你可以使用其中任何一种语言。
用于绘图的 JavaScript 库
提供面向图表的建模原型的底层库。事实上,其中一些被用来构建上面所述的 JavaScript 建模库。
D3
D3.js 是一款用来基于数据操作文档的 JavaScript 库。现在,我要说的就是这种最流行的库。
D3 帮助你使用 HTML、SVG 和 CSS 使数据栩栩如生。D3 对于 Web 标准的重视,使得你可以使用现代浏览器的全部能力,而不用尝试自己建立专用框架,将强大的可视化组件和数据驱动方案与 DOM 操作结合。D3 非常快,支持大型数据集和交互与动画的动态行为。D3 的函数化样式允许通过多个官方和 [社区开发模块的代码复用。
Raphaël
Raphaël 是一款小型 JavaScript 库,可以简化关于 Web 上矢量图的工作。如果你想创建你自己的特定图表或者图像裁剪和旋转组件,例如,你可以使用这个库简便地实现它。Raphaël 使用 SVG W3C Recommendation 和 VML 作为创建图形的基础。这意味着,你创建的每个图形对象也是一个 DOM 对象,因此你可以绑定 JavaScript 事件处理器或者稍后修改它们。Raphaël 的目标是提供一个适配器,使得绘制矢量图可以跨浏览器兼容且易用。
Fabric.js
Fabric 是一款 javascript HTML canvas 库,在 canvas 元素之上提供一种交互式对象模型。你可以在 canvas 上创建和填充对象;像简单的几何形状或者包含多条线条的复杂形状。Fabric 也提供 SVG-to-canvas(和 canvas-to-SVG)解析器。
Paper.js
Paper.js 是一款运行在 HTML5 Canvas 上的开源矢量图脚本框架。它提供了一个干净的场景图 / 文档对象模型以及许多有用的功能来创建和使用矢量图和贝塞尔曲线,都整齐包装在一个设计良好的一致的干净的编程接口。它基于(并很大程度上兼容) Scriptographer ,一个面向 Adobe Illustrator 的脚本环境。
JsPlumb
jsPlumb 通过 core.js 中的可视化连接,提供了一种构建应用程序的快速方法。它使用 SVG,运行在 IE9 及其之后的所有浏览器上。 JSPlumbToolkit 是它的商业扩展。这个商业版本在社区版本的基础上,聚焦于底层数据模型,以及一些有用的 UI 功能,例如布局,和提供平移 / 缩放功能的组件。
p5.js
一款用来创建图形和交互体验的 JS 客户端库,基于 Processing 的核心原则来使得艺术家、设计师和教育者能够参与编码。除了绘图,这个项目还提供了 Web 语音功能、冲突检测以及从 p5.js 草图生成图形化用户界面。
Cytoscape.js
一款高度优化的开源图形原理 / 网络库,可以用作图片分析和可视化。它兼容所有现代浏览器和 JSON 序列化与反序列化。它还包含了自动布局算法、集合理论和图理论,从 BFS 到 PageRank。
dagre-d3
一款作为 dagre 前端的 JavaScript 库(在客户端布局有向图的 JavaScript 库),使用 D3 提供实际的渲染功能。
vis.js
Vis.js 是一个动态的基于浏览器的可视化库。这个库被设计成易于使用,能够处理大量动态数据,并且能够操纵这些数据。