在本文中，我們將為你介紹可以用來構(gòu)建自己的圖表制作工具以及向軟件中增添一些圖形建模功能的 10+ 款 JavaScript 庫。

用于圖表制作的 10+ 款 JavaScript 庫(2019 版)

如今在瀏覽器中，你可以使用 JavaScript 渲染任何東西。在先前一篇文章中，我們介紹了一些在線建模工具來直接在瀏覽器上創(chuàng)建 UML(或 ER、BPMN…)圖表。大部分這些工具使用 JavaScript 來渲染圖形并與之交互。在本文中，我們將為你介紹可以用來構(gòu)建自己的圖表制作工具以及向軟件中增添一些圖形建模功能的 10+ 款 JavaScript 庫。

 

 

我們將這些 JavaScript 圖表庫分為兩類：支持軟件建模的庫(例如，預(yù)定義流程圖或 UML 圖的 JavaScript 庫)和支持核心畫圖功能的庫(這些后續(xù)可以根據(jù)圖形建模語言進行調(diào)整)�？傊�，如果你正在尋找一款差不多立即可用的 JavaScript 建模庫并將之集成到你的工具中，你可以從第一組的 JavaScript 庫中選擇一款。如果你正在尋找一款更加靈活的方案，并有時間和能力來做一些編程，可以考慮從第二組的 JavaScript 中選擇一款，并根據(jù)自己的需要進行個性化訂制。

##用于制作 UML(或 BPMN、ERD 等)圖表的 JavaScript 庫

###JointJS

JointJS 可以用來創(chuàng)建靜態(tài)圖表或者交互式圖表制作工具和應(yīng)用程序。它還有一個商業(yè)版本(Rappid，見下文)

其中一些功能如下：

基本的圖表元素(矩形、圓形、省略號、文本、圖片、線條)。
立即可用的知名圖表元素(ERD、Org chart、FSA、UML、PN、DEVS 等)。
基于 SVG 或者編程渲染的自定義圖形。
可交互元素和鏈接。
用鏈接連接圖表元素。
自定義鏈接、箭頭和標注。
可以任意擺放的磁力圖點。
層次圖。
JSON 格式的序列化和反序列化。
大小縮放。
觸摸支持。

 

 

 

Rappid

Rappid 是 JointJS 的商業(yè)擴展。它是 JointJS 的一組插件和其它商用組件集合，為創(chuàng)建制圖工具提供了更多可能性和立即可用的功能。

其中一些功能如下：
實時協(xié)作
通過 HTML 5 的 local storage 支持復(fù)制、剪切和粘貼
一次操作多個元素
校驗文檔
本地存儲
取消、恢復(fù)
模態(tài)對話框和非模態(tài)對話框
支持 SVG 文本的內(nèi)聯(lián)文本編輯器
定向圖的自動布局
SVG 導(dǎo)出

MxGraph

MxGraph 是一款可交互的 JavaScript HTML 5 圖表制作庫。 MxGraph 是一個客戶端庫，使用 SVG 和 HTML 來渲染你的模型。這個庫用于 Draw.io 。該庫從 2005 年開始開發(fā)。mxGraph 沒有使用第三方軟件，因此它不需要插件，可以被集成到任何框架。

mxGraph 包含了一款 JavaScript 寫的客戶端軟件，以及針對各種語言的一系列后端軟件。該客戶端軟件是一款圖表組件和一款可選的被集成到已有 Web 接口的應(yīng)用程序包裝器�？蛻舳诵枰� Web 服務(wù)器來傳送客戶端請求的文件，或者從本地文件系統(tǒng)運行而不需要 Web 服務(wù)器。后端可以按原樣使用，或者以支持的其中一種語言嵌入到已有的服務(wù)器應(yīng)用程序。

 

 

GoJS

GoJS 是一款實現(xiàn)跨現(xiàn)代瀏覽器和跨平臺的交互式圖表的功能豐富的 JavaScript 庫。GoJS 通過自定義模板和布局使得創(chuàng)建包含節(jié)點、連線、分組的復(fù)雜圖表變得簡單。

GoJS 提供了針對用戶交互的許多高級功能，例如拖拽、復(fù)制粘貼、事務(wù)狀態(tài)、取消操作管理、調(diào)色板、概覽、模型數(shù)據(jù)綁定、時間處理器以及一個用于自定義操作的可擴展工具系統(tǒng)。他們提供了超過 150 個交互樣本來幫你上手 BPMN、流程圖、狀態(tài)圖、樹狀圖、桑基圖(Sankey)和數(shù)據(jù)流圖。API 文檔健全，確保你可以立即使用。我們在一篇文章中廣泛地介紹了 GoJS 。

 

 

jsUML2 library

這是一款用于制作 UML2 圖表的 HTML5/javascript 庫。它的主要目標是為 Web 開發(fā)者提供一種簡單的方法來在他們自己的網(wǎng)站可視化和編輯 UML 模型，無需其它外部依賴，通過瀏覽器完全在客戶端運行，而不像這組中的其它工具。該 jsUMML2 庫提供了一個 API，允許 Web 開發(fā)者利用最新 Web 瀏覽器和當(dāng)前移動設(shè)備支持的 HTML5 技術(shù)，在他們自己的網(wǎng)站嵌入可編輯的圖表。

它針對 UML 特定模型提供了一種廣泛的有趣功能。特別的是，它支持所有主要類型的 UML 圖表：

用例圖
類圖
組件圖
次序圖
活動圖
狀態(tài)圖

支持圖表元素的樣式編輯(尺寸、位置、顏色等)、模式定義、UML 圖表的 XML 導(dǎo)入導(dǎo)出和圖片生成。

這個工具從 2017 年終止更新，但如果你尋找一款 UML JavaScript 庫的話，它仍是一個比較好的選擇。

 

 

Mindfusion 圖表庫

這個工具是 100% 用 JavaScript 寫的，使用 HTML5 Canvas 元素繪制。組件可以使用 jQuery 或者 Microsoft Ajax®庫來實現(xiàn)瀏覽器獨立層和類型系統(tǒng)實現(xiàn)。

它提出了一組豐富的預(yù)定義的圖形(工作流圖、過程圖、類圖、樹等，可以查看它們的樣本集)，并提供了可能來自定義圖形和自定義選項(例如箭頭形狀)。為了 API 使用便利，他們建立了豐富的文檔，同時你還可以使用自動布局算法。

Nomnoml

Nomnoml 是一款知名的文本化建模工具，能夠根據(jù)文本描述渲染UML 圖表，但是它還提供了一個獨立的JavaScript 庫，你可以使用這個庫在自己的網(wǎng)頁上渲染圖表。這個庫的依賴僅僅是 lodash 和 dagre 。

 

 

Mermaid.js

和 nomnoml 類似，Mermmaid 主要聚焦于根據(jù)文本文件生成圖表，通過一種簡單的類似 markdown 的腳本語言。它依賴 d3 和 dagre-d3 來提供圖形布局和繪制庫。它提供了一個在線編輯器，但你也可以直接復(fù)用打包的 Mermaid API 來將 Mermaid 集成到自己的開發(fā)中。

它主要涉及次序圖和流程圖。

Diagram.js

Diagram.js 是創(chuàng)建并展示圖表的核心庫。它被 BPMN.io (庫的作者)用作該公司的許多其它庫的構(gòu)建塊來定義業(yè)務(wù)模型、決策模型和案例模型。

例如， bpmn-js 是 diagram.js 的擴展，用來渲染 bpmn 2.0 圖表。除了使用它來構(gòu)建一個工作流建模編輯器(他們已經(jīng)提供)，bpmn-js 的設(shè)計考慮了可擴展性，因此你可以“輕易”在其基礎(chǔ)上構(gòu)建一些執(zhí)行引擎或模擬引擎。

 

 

State.js

顧名思義，state.js 聚焦于分層狀態(tài)機建模。state.js API 提供：

1. 代表狀態(tài)機模型的類(State、PseudoState、Transition 等)。

2. 活動狀態(tài)配置(當(dāng)前狀態(tài))的接口和實現(xiàn);這允許一個狀態(tài)機模型的多個并發(fā)實例。

3. 一組提供狀態(tài)機運行時的函數(shù)。

它是由 TypeScript 開發(fā)的，編譯為 JavaScript;你可以使用其中任何一種語言。

用于繪圖的 JavaScript 庫

提供面向圖表的建模原型的底層庫。事實上，其中一些被用來構(gòu)建上面所述的 JavaScript 建模庫。

D3

D3.js 是一款用來基于數(shù)據(jù)操作文檔的 JavaScript 庫。現(xiàn)在，我要說的就是這種最流行的庫。

D3 幫助你使用 HTML、SVG 和 CSS 使數(shù)據(jù)栩栩如生。D3 對于 Web 標準的重視，使得你可以使用現(xiàn)代瀏覽器的全部能力，而不用嘗試自己建立專用框架，將強大的可視化組件和數(shù)據(jù)驅(qū)動方案與 DOM 操作結(jié)合。D3 非�？�，支持大型數(shù)據(jù)集和交互與動畫的動態(tài)行為。D3 的函數(shù)化樣式允許通過多個官方和 [社區(qū)開發(fā)模塊的代碼復(fù)用。

 

 

Raphaël

Raphaël 是一款小型 JavaScript 庫，可以簡化關(guān)于 Web 上矢量圖的工作。如果你想創(chuàng)建你自己的特定圖表或者圖像裁剪和旋轉(zhuǎn)組件，例如，你可以使用這個庫簡便地實現(xiàn)它。Raphaël 使用 SVG W3C Recommendation 和 VML 作為創(chuàng)建圖形的基礎(chǔ)。這意味著，你創(chuàng)建的每個圖形對象也是一個 DOM 對象，因此你可以綁定 JavaScript 事件處理器或者稍后修改它們。Raphaël 的目標是提供一個適配器，使得繪制矢量圖可以跨瀏覽器兼容且易用。

Draw2D

使用 Draw2D JavaScript 庫，創(chuàng)建類似 Visio 的繪圖、圖表或者工作流編輯器。其用戶接口允許使用你的標準瀏覽器來交互式繪圖。它聲稱比 Raphaël 更簡潔。無論如何，Raphaël 已經(jīng)停止更新一段時間了(網(wǎng)站顯示從 2016 年底之后就沒有任何顯著變化了)。

 

 

Fabric.js

Fabric 是一款 javascript HTML canvas 庫，在 canvas 元素之上提供一種交互式對象模型。你可以在 canvas 上創(chuàng)建和填充對象;像簡單的幾何形狀或者包含多條線條的復(fù)雜形狀。Fabric 也提供 SVG-to-canvas(和 canvas-to-SVG)解析器。

 

 

Paper.js

Paper.js 是一款運行在 HTML5 Canvas 上的開源矢量圖腳本框架。它提供了一個干凈的場景圖 / 文檔對象模型以及許多有用的功能來創(chuàng)建和使用矢量圖和貝塞爾曲線，都整齊包裝在一個設(shè)計良好的一致的干凈的編程接口。它基于(并很大程度上兼容) Scriptographer ，一個面向 Adobe Illustrator 的腳本環(huán)境。

 

 

JsPlumb

jsPlumb 通過 core.js 中的可視化連接，提供了一種構(gòu)建應(yīng)用程序的快速方法。它使用 SVG，運行在 IE9 及其之后的所有瀏覽器上。 JSPlumbToolkit 是它的商業(yè)擴展。這個商業(yè)版本在社區(qū)版本的基礎(chǔ)上，聚焦于底層數(shù)據(jù)模型，以及一些有用的 UI 功能，例如布局，和提供平移 / 縮放功能的組件。

 

 

p5.js

一款用來創(chuàng)建圖形和交互體驗的 JS 客戶端庫，基于 Processing 的核心原則來使得藝術(shù)家、設(shè)計師和教育者能夠參與編碼。除了繪圖，這個項目還提供了 Web 語音功能、沖突檢測以及從 p5.js 草圖生成圖形化用戶界面。

Cytoscape.js

一款高度優(yōu)化的開源圖形原理 / 網(wǎng)絡(luò)庫，可以用作圖片分析和可視化。它兼容所有現(xiàn)代瀏覽器和 JSON 序列化與反序列化。它還包含了自動布局算法、集合理論和圖理論，從 BFS 到 PageRank。

 

 

dagre-d3

一款作為 dagre 前端的 JavaScript 庫(在客戶端布局有向圖的 JavaScript 庫)，使用 D3 提供實際的渲染功能。

vis.js

Vis.js 是一個動態(tài)的基于瀏覽器的可視化庫。這個庫被設(shè)計成易于使用，能夠處理大量動態(tài)數(shù)據(jù)，并且能夠操縱這些數(shù)據(jù)。

作者：Hamza Ed-douibi

譯者：張健欣

英文原文： https://modeling-languages.com/javascript-drawing-libraries-diagrams

標簽： 數(shù)據(jù) 墑踴

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。