用于图表制作的 10+ 款 JavaScript 库(2019 版)
如今在浏览器中，你可以利用 JavaScript 渲染任何东西。在先前一篇文章中，我们先容了一些在线建模工具来直接在浏览器上创建 UML(或 ER、BPMN…)图表。大部分这些工具利用 JavaScript 来渲染图形并与之交互。在本文中，我们将为你先容可以用来构建自己的图表制作工具以及向软件中增长一些图形建模功能的 10+ 款 JavaScript 库。
我们将这些 JavaScript 图表库分为两类：支持软件建模的库(例如，预定义流程图或 UML 图的 JavaScript 库)和支持核心画图功能的库(这些后续可以根据图形建模措辞进行调度)。总之，如果你正在探求一款差不多立即可用的 JavaScript 建模库并将之集成到你的工具中，你可以从第一组的 JavaScript 库中选择一款。如果你正在探求一款更加灵巧的方案，并有韶光和能力来做一些编程，可以考虑从第二组的 JavaScript 中选择一款，并根据自己的须要进行个性化订制。
##用于制作 UML(或 BPMN、ERD 等)图表的 JavaScript 库
###JointJS
JointJS 可以用来创建静态图表或者交互式图表制作工具和运用程序。它还有一个商业版本(Rappid，见下文)
个中一些功能如下：
基本的图表元素(矩形、圆形、省略号、文本、图片、线条)。
立即可用的有名图表元素(ERD、Org chart、FSA、UML、PN、DEVS 等)。
基于 SVG 或者编程渲染的自定义图形。
可交互元素和链接。
用链接连接图表元素。
自定义链接、箭头和标注。
可以任意摆放的磁力争点。
层次图。
JSON 格式的序列化和反序列化。
大小缩放。
触摸支持。
Rappid
Rappid 是 JointJS 的商业扩展。它是 JointJS 的一组插件和其它商用组件凑集，为创建制图工具供应了更多可能性和立即可用的功能。
个中一些功能如下：
实时协作
通过 HTML 5 的 local storage 支持复制、剪切和粘贴
一次操作多个元素
校验文档
本地存储
取消、规复
模态对话框和非模态对话框
支持 SVG 文本的内联文本编辑器
定向图的自动布局
SVG 导出
MxGraph
MxGraph 是一款可交互的 JavaScript HTML 5 图表制作库。 MxGraph 是一个客户端库，利用 SVG 和 HTML 来渲染你的模型。这个库用于 Draw.io 。该库从 2005 年开始开拓。mxGraph 没有利用第三方软件，因此它不须要插件，可以被集成到任何框架。
mxGraph 包含了一款 JavaScript 写的客户端软件，以及针对各种措辞的一系列后端软件。该客户端软件是一款图表组件和一款可选的被集成到已有 Web 接口的运用程序包装器。客户端须要 Web 做事器来传送客户端要求的文件，或者从本地文件系统运行而不须要 Web 做事器。后端可以按原样利用，或者以支持的个中一种措辞嵌入到已有的做事器运用程序。
GoJS
GoJS 是一款实现跨当代浏览器和跨平台的交互式图表的功能丰富的 JavaScript 库。GoJS 通过自定义模板和布局使得创建包含节点、连线、分组的繁芜图表变得大略。
GoJS 供应了针对用户交互的许多高等功能，例如拖拽、复制粘贴、事务状态、取消操作管理、调色板、概览、模型数据绑定、韶光处理器以及一个用于自定义操作的可扩展工具系统。他们供应了超过 150 个交互样本来帮你上手 BPMN、流程图、状态图、树状图、桑基图(Sankey)和数据流图。API 文档健全，确保你可以立即利用。我们在一篇文章中广泛地先容了 GoJS 。
jsUML2 library
这是一款用于制作 UML2 图表的 HTML5/javascript 库。它的紧张目标是为 Web 开拓者供应一种大略的方法来在他们自己的网站可视化和编辑 UML 模型，无需其它外部依赖，通过浏览器完备在客户端运行，而不像这组中的其它工具。该 jsUMML2 库供应了一个 API，许可 Web 开拓者利用最新 Web 浏览器和当前移动设备支持的 HTML5 技能，在他们自己的网站嵌入可编辑的图表。
它针对 UML 特定模型供应了一种广泛的有趣功能。特殊的是，它支持所有紧张类型的 UML 图表：
用例图
类图
组件图
次序图
活动图
状态图
支持图表元素的样式编辑(尺寸、位置、颜色等)、模式定义、UML 图表的 XML 导入导出和图片天生。
这个工具从 2017 年终止更新，但如果你探求一款 UML JavaScript 库的话，它仍是一个比较好的选择。
Mindfusion 图表库
这个工具是 100% 用 JavaScript 写的，利用 HTML5 Canvas 元素绘制。组件可以利用 jQuery 或者 Microsoft Ajax®库来实现浏览器独立层和类型系统实现。
它提出了一组丰富的预定义的图形(事情流图、过程图、类图、树等，可以查看它们的样本集)，并供应了可能来自定义图形和自定义选项(例如箭头形状)。为了 API 利用便利，他们建立了丰富的文档，同时你还可以利用自动布局算法。
Nomnoml
Nomnoml 是一款有名的文本化建模工具，能够根据文本描述渲染UML 图表，但是它还供应了一个独立的JavaScript 库，你可以利用这个库在自己的网页上渲染图表。这个库的依赖仅仅是 lodash 和 dagre 。
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 的设计考虑了可扩展性，因此你可以“轻易”在其根本上构建一些实行引擎或仿照引擎。
State.js
顾名思义，state.js 聚焦于分层状态机建模。state.js API 供应：
1. 代表状态机模型的类(State、PseudoState、Transition 等)。
2. 活动状态配置(当前状态)的接口和实现;这许可一个状态机模型的多个并发实例。
3. 一组供应状态机运行时的函数。
它是由 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 的目标是供应一个适配器，使得绘制矢量图可以跨浏览器兼容且易用。
Draw2D
利用 Draw2D JavaScript 库，创建类似 Visio 的绘图、图表或者事情流编辑器。其用户接口许可利用你的标准浏览器来交互式绘图。它声称比 Raphaël 更简洁。无论如何，Raphaël 已经停滞更新一段韶光了(网站显示从 2016 年底之后就没有任何显著变革了)。
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 是一个动态的基于浏览器的可视化库。这个库被设计成易于利用，能够处理大量动态数据，并且能够操纵这些数据。
作者：Hamza Ed-douibi
英文原文： https://modeling-languages.com/javascript-drawing-libraries-diagrams
