在本文中，我們将為你介紹可以用來建構自己的圖表制作工具以及向軟體中增添一些圖形模組化功能的 10+ 款 JavaScript 庫。
用于圖表制作的 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 是一個動态的基于浏覽器的可視化庫。這個庫被設計成易于使用，能夠處理大量動态資料，并且能夠操縱這些資料。