您可以使用JavaScript在瀏覽器中渲染任何您想要的內容。這個很好的示例是這個線上建模工具列表，它可以幫助您直接在瀏覽器中輕鬆建立UML（或ER，BPMN等）圖。這些工具中的大多數都使用 JavaScript 來渲染圖形形狀並與之互動。但是，如果您想建立自己的圖表或構建自己的編輯器怎麼辦？別擔心，我們為您提供保障。在這篇文章中，我們提供了一個 10+ JavaScript 繪相簿的列表，用於編寫您自己的視覺化工具和/或為您的軟體新增一些圖形建模功能。
我們將 JavaScript 繪相簿集分為兩個主要類別：
明確支援軟體模型的庫（例如，具有預定義流程圖或UML形狀的JavaScript庫）
具有繪製圖形的核心支援的庫（然後可以對其進行調整以涵蓋圖形建模語言）。
簡而言之，如果您正在尋找一種幾乎現成的方法來將 JavaScript 建模庫整合到您的工具中，請選擇第一組中的庫。如果您正在尋找一個更可調的解決方案，並且有時間和技能進行一些程式設計，請考慮從第二組中獲取一個庫並根據需要對其進行個性化設定。請注意，我們專注於繪製圖表的庫，如果您只想渲染只讀圖表，您可能需要檢視此文字建模工具列表。
用於繪製UML（或BPMN或ERD）圖的JavaScript庫
JointJS
Rappid
MxGraph
GoJS
JsUML2 library
Mindfusion Diagram Library
Nomnoml
Mermaid。js
Diagram。js
State。js
用於繪製圖形的 JavaScript 庫
D3Raphaël
Draw2D
Fabric。js
Paper。js
JsPlumb
p5。js
Cytoscape。js
dagre-d3
vis。js
React Diagrams
Tldraw
JointJS
JointJS可用於建立靜態圖或完全互動式的圖工具和應用程式構建器。它還有一個商業版本（Rappid，見下文）
以下是它的一些功能：
基本圖表元素（矩形、圓形、橢圓形、文字、影象、路徑）
已知圖表的即用型圖表元素（ERD，組織結構圖，FSA，UML，PN，DEVS，。。。）
基於 SVG 或以程式設計方式呈現的自定義形狀
互動式元素和連結
使用連結連線圖元素
可自定義的連結、箭頭和標籤
磁鐵（連結連線點）基本上可以放置在任何地方
分層圖
序列化/反序列化為 JSON 格式/從 JSON 格式反序列化
放大/縮小
觸控支援
Rappid
Rappid是JointJS的商業擴充套件。它是一組 JointJS 外掛和其他元件，在建立圖表工具時提供了更多可能性和即用型功能。以下是它的一些功能：
實時協作
透過 HTML 5 本地儲存支援進行復制、剪下和貼上
一次性操作更多元素。
驗證您的文件
本地儲存
撤消和重做
模式和非模式對話方塊
適用於任何 SVG 文字的內聯文字編輯器
有向圖的自動佈局
SVG 匯出
一組用於 BPMN 的現成形狀
MxGraph
MxGraph 是一個互動式 JavaScript HTML 5 圖表庫。mxGraph 是一個完全客戶端的庫，它使用 SVG 和 HTML 來渲染模型。例如，該庫用於 Draw。io。開發始於 2005 年，雖然原始專案已存檔，但這個分支仍在繼續工作。
mxGraph 不使用第三方軟體，它不需要外掛，幾乎可以整合到任何框架中。mxGraph 包包含一個用 JavaScript 編寫的客戶端軟體，以及一系列用於各種語言的後端。客戶端軟體是一個圖形元件，帶有整合到現有 Web 介面中的可選應用程式包裝器。客戶端需要 Web 伺服器將所需的檔案傳送到客戶端，或者可以在沒有 Web 伺服器的情況下從本地檔案系統執行。後端可以按原樣使用，也可以以受支援的語言之一嵌入到現有伺服器應用程式中。
GoJS
GoJS是一個功能豐富的JavaScript / Typescript庫，用於跨現代瀏覽器和平臺實現互動式圖表。GoJS 透過可自定義的模板和佈局可以輕鬆構建複雜節點、連結和組的圖表。
GoJS 為使用者互動提供了許多高階功能，例如拖放、複製和貼上、事務狀態和撤消管理、調色盤、概述、資料繫結模型、事件處理程式以及用於自定義操作的可擴充套件工具系統。它們提供了 150 多個互動式示例，可幫助您開始使用 BPMN、流程圖、狀態圖、視覺化樹、Sankey 和資料流等圖表。該 API 有很好的文件記錄，以確保您可以立即開始使用。我們在這篇文章中廣泛介紹了GoJS。
JsUML2 library
用於 UML2 圖表的 HTML5/javascript 庫。它的主要目標是為Web開發人員提供一種簡單的方法來視覺化和編輯UML模型，在我們自己的網站中，沒有其他外部依賴項，並且透過瀏覽器在客戶端完全可執行，與此列表中的其他工具不同。jsUML2 庫提供了一個 API，允許 Web 開發人員使用最新的 Web 瀏覽器以及當前移動裝置支援的 HTML5 技術在自己的網站中包含可編輯的圖表。
它為特定於 UML 的模型提供了廣泛的有趣功能。特別是，它支援所有主要的UML型別的圖：
用例圖。
類圖。
元件圖。
序列圖。
活動圖。
狀態圖。
支援圖表元素（大小，位置，顏色等）的樣式版本，構造型定義，將UML圖表匯入/匯出到XML和影象生成。
該工具已於 2017 年停產，但對於所有尋找 UML JavaScript 庫的人來說，它仍然是一個強大的選擇。
融合型相簿
圖表工具是100%用JavaScript編寫的，並使用HTML5 Canvas元素進行繪製。該元件可以使用jQuery或Microsoft Ajax®庫進行瀏覽器獨立層和型別系統實現。
它帶有一組豐富的預定義形狀（用於工作流圖、流程架構、類圖、樹，。。。檢查他們的樣本集合）以及定義自己的形狀和自定義選項（例如箭頭形狀）的可能性。為了方便 API 的使用，他們對其進行了大量記錄。您還可以使用自動圖形佈局演算法。
Nomnoml
Nomnoml 是一個較有名的文字建模工具，能夠從文字描述中渲染 UML 圖，但它也提供了一個獨立的 JavaScript 庫，可用於在自己的網頁上呈現圖。唯一的依賴關係是 lodash 和 dagre。
Mermaid。js
與nomnoml類似，Mermaid的主要重點是從文字檔案生成圖表，在這種情況下，透過簡單的類似markdown的指令碼語言。它依賴於 d3 和 dagre-d3 來提供圖形佈局和繪相簿。它提供了一個線上編輯器，但您也可以直接重用打包的美人魚 API 將美人魚整合到您自己的開發中。它主要涵蓋序列圖和流程圖。
Diagram。js
用於建立和顯示圖表的核心庫。它被 BPMN。io（此庫的建立者）用作同一公司許多其他庫的構建塊，用於指定業務流程模型、決策模型和案例計劃模型。
例如，bpmn-js 是渲染 BPMN 2。0 圖的。js擴充套件。除了使用它來構建工作流建模編輯器（正如他們已經提供的那樣）之外，bpmn-js 在設計時還考慮了可擴充套件性，因此您可以“輕鬆”構建某種執行/模擬引擎，例如，在其上構建某種執行/模擬引擎。
State。js
顧名思義，state。js 專注於對分層狀態機進行建模。狀態。js API 提供：
表示狀態機模型（狀態、偽狀態、轉換等）的類
活動狀態配置（當前狀態）的介面和實現；這允許單個狀態機模型的多個併發例項
一組提供狀態機執行時的函式
它是用TypeScript開發的，並轉譯為JavaScript；您可以使用任何一種語言。 ：
。
Eclipse Sprotty and Eclipse Graphical Language Server Platform （GLSP）
Eclipse Sprotty 和 Eclipse GLSP 工具可幫助您為自己的語言建立建模環境。因此，它們不限於UML，ER或其他特定的圖表型別。相反，這些工具提供了一個後端基礎結構（基於語言伺服器協議的圖形化），以建立您自己的語言，並提供一個基於 JS 的前端來為其構建視覺化編輯器。
用於繪製圖形的 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 推薦和 VML 作為建立圖形的基礎。這意味著您建立的每個圖形物件也是一個 DOM 物件，因此您可以附加 JavaScript 事件處理程式或稍後修改它們。Raphaël的目標是提供一個介面卡，使繪製向量藝術相容跨瀏覽器且容易。它最近沒有更新。
Draw2D
使用 Draw2D Javascript 庫建立類似 Visio 的繪圖、圖表或工作流編輯器。使用者介面允許使用標準瀏覽器進行互動式繪圖。它聲稱比拉斐爾簡潔得多。即使開發停滯不前，甚至還有一個演示頁面。
Fabric。js
Fabric 是一個 JavaScript HTML 畫布庫，在 canvas 元素之上提供了一個互動式物件模型。您可以在畫布上建立和填充物件；物件，如簡單的幾何形狀或由多個路徑組成的複雜形狀。Fabric 還具有 SVG 到畫布（和畫布到 SVG）解析器。
Paper。js
Paper。js 是一個執行在 HTML5 Canvas 之上的開源向量圖形指令碼框架。它提供了一個乾淨的場景圖/文件物件模型和許多強大的功能來建立和處理向量圖形和貝塞爾曲線，所有這些都整齊地包裝在一個精心設計、一致和乾淨的程式設計介面中。它基於（並且在很大程度上相容）Scriptographer，Scriptographer是Adobe Illustrator的指令碼環境。
JsPlumb
jsPlumb 提供了一種以視覺化連線為核心構建應用程式的快速方法。s。它使用 SVG 並在 IE9 及更高版本的所有瀏覽器上執行。JsPlumbToolkit是其商業擴充套件。此商業版本包裝了社群版，重點關注基礎資料模型，以及幾個有用的 UI 功能，例如佈局和提供平移/縮放功能的小部件。
p5。js
一個 JS 客戶端庫，用於建立圖形和互動式體驗，基於處理的核心原則，使藝術家、設計師和教育工作者可以訪問編碼。除了繪圖之外，該專案還提供網路音訊功能，碰撞檢測，甚至從p5。js草圖生成圖形使用者介面。
Cytoscape。js
高度最佳化的開源圖論網路庫，可用於圖分析和視覺化。與所有現代瀏覽器相容，並且可透過 JSON 完全（反）序列化。它還包括自動佈局，集合論和圖論的演算法，從BFS到PageRank。
dagre-d3
一個JavaScript庫，充當dagre（在客戶端佈置有向圖的javascript庫）的前端，使用D3提供實際的呈現。該專案現已放棄。
vis。js
Vis。js 是一個基於瀏覽器的動態視覺化庫。該庫設計為易於使用，可處理大量動態資料，並可對資料進行操作。這個專案也被放棄了。
React Diagrams
React Diagrams 是一個“一個超級簡單、嚴肅的圖表庫，用 react 編寫，只是工作”。它是一個專注於視覺化流程和麵向流程的圖表的庫。靈感來自Blender、Labview和虛幻引擎。
它完全用 Typescript 和 React 編寫。它是完全可擴充套件的，整個庫（包括其核心）可以擴充套件，重新佈線並重新組裝成根本不同的軟體，以滿足您自己的軟體需求。它還旨在提供良好的使用者體驗，但確保設計人員可以儘快編輯圖表。
Tldraw
Tldraw是此列表中的最新條目之一。Tldraw是一個“微小的繪圖應用程式”，提供了許多形狀來繪製簡單，但清晰和優雅的圖表，具有手繪風格和方便的功能，如智慧箭頭，捕捉和便箋。甚至還有一個VSCode擴充套件。
