您可以使用JavaScript在瀏覽器中渲染任何您想要的內容。這個很好的示例是這個在線建模工具列表，它可以幫助您直接在瀏覽器中輕松創建UML（或ER，BPMN等）圖。這些工具中的大多數都使用 JavaScript 來渲染圖形形狀並與之交互。但是，如果您想創建自己的圖表或構建自己的編輯器怎麼辦？別擔心，我們為您提供保障。在這篇文章中，我們提供瞭一個 10+ JavaScript 繪圖庫的列表，用於編寫您自己的可視化工具和/或為您的軟件添加一些圖形建模功能。我們將 JavaScript 繪圖庫集分為兩個主要類別：明確支持軟件模型的庫（例如，具有預定義流程圖或UML形狀的JavaScript庫）具有繪制圖形的核心支持的庫（然後可以對其進行調整以涵蓋圖形建模語言）。簡而言之，如果您正在尋找一種幾乎現成的方法來將 JavaScript 建模庫集成到您的工具中，請選擇第一組中的庫。如果您正在尋找一個更可調的解決方案，並且有時間和技能進行一些編程，請考慮從第二組中獲取一個庫並根據需要對其進行個性化設置。請註意，我們專註於繪制圖表的庫，如果您隻想渲染隻讀圖表，您可能需要查看此文本建模工具列表。用於繪制UML（或BPMN或ERD）圖的JavaScript庫JointJSRappid MxGraphGoJSJsUML2 libraryMindfusion Diagram LibraryNomnomlMermaid.jsDiagram.js State.js用於繪制圖形的 JavaScript 庫D3RaphaëlDraw2DFabric.jsPaper.jsJsPlumbp5.jsCytoscape.jsdagre-d3vis.jsReact DiagramsTldrawJointJSJointJS可用於創建靜態圖或完全交互式的圖工具和應用程序構建器。它還有一個商業版本（Rappid，見下文）以下是它的一些功能：基本圖表元素（矩形、圓形、橢圓形、文本、圖像、路徑）已知圖表的即用型圖表元素（ERD，組織結構圖，FSA，UML，PN，DEVS，…）基於 SVG 或以編程方式呈現的自定義形狀交互式元素和鏈接使用鏈接連接圖元素可自定義的鏈接、箭頭和標簽磁鐵（鏈接連接點）基本上可以放置在任何地方分層圖序列化/反序列化為 JSON 格式/從 JSON 格式反序列化放大/縮小觸摸支持RappidRappid是JointJS的商業擴展。它是一組 JointJS 插件和其他組件，在創建圖表工具時提供瞭更多可能性和即用型功能。以下是它的一些功能：實時協作通過 HTML 5 本地存儲支持進行復制、剪切和粘貼一次性操作更多元素。驗證您的文檔本地存儲撤消和重做模式和非模式對話框適用於任何 SVG 文本的內聯文本編輯器有向圖的自動佈局SVG 導出一組用於 BPMN 的現成形狀MxGraphMxGraph 是一個交互式 JavaScript HTML 5 圖表庫。mxGraph 是一個完全客戶端的庫，它使用 SVG 和 HTML 來渲染模型。例如，該庫用於 Draw.io。開發始於 2005 年，雖然原始項目已存檔，但這個分支仍在繼續工作。mxGraph 不使用第三方軟件，它不需要插件，幾乎可以集成到任何框架中。mxGraph 包包含一個用 JavaScript 編寫的客戶端軟件，以及一系列用於各種語言的後端。客戶端軟件是一個圖形組件，帶有集成到現有 Web 界面中的可選應用程序包裝器。客戶端需要 Web 服務器將所需的文件傳送到客戶端，或者可以在沒有 Web 服務器的情況下從本地文件系統運行。後端可以按原樣使用，也可以以受支持的語言之一嵌入到現有服務器應用程序中。GoJSGoJS是一個功能豐富的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 的使用，他們對其進行瞭大量記錄。您還可以使用自動圖形佈局算法。NomnomlNomnoml 是一個較有名的文本建模工具，能夠從文本描述中渲染 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建模庫。D3D3.js 是一個 JavaScript 庫，用於基於數據操作文檔。現在，我會說是同類庫中最受歡迎的圖書館。D3 可幫助您使用 HTML、SVG 和 CSS 使數據栩栩如生。D3 對 Web 標準的強調為您提供瞭現代瀏覽器的全部功能，而無需將自己綁定到專有框架，將強大的可視化組件和數據驅動的 DOM 操作方法相結合。D3 速度極快，支持大型數據集以及交互和動畫的動態行為。D3 的函數式風格允許通過各種官方和社區開發的模塊重用代碼。RaphaëlRaphaël 是一個小型的 JavaScript 庫，它應該可以簡化您在 Web 上使用矢量圖形的工作。例如，如果您想創建自己的特定圖表或圖像裁剪和旋轉小部件，則可以使用此庫簡單輕松地實現它。Raphaël 使用 SVG W3C 推薦和 VML 作為創建圖形的基礎。這意味著您創建的每個圖形對象也是一個 DOM 對象，因此您可以附加 JavaScript 事件處理程序或稍後修改它們。Raphaël的目標是提供一個適配器，使繪制矢量藝術兼容跨瀏覽器且容易。它最近沒有更新。Draw2D使用 Draw2D Javascript 庫創建類似 Visio 的繪圖、圖表或工作流編輯器。用戶界面允許使用標準瀏覽器進行交互式繪圖。它聲稱比拉斐爾簡潔得多。即使開發停滯不前，甚至還有一個演示頁面。Fabric.jsFabric 是一個 JavaScript HTML 畫佈庫，在 canvas 元素之上提供瞭一個交互式對象模型。您可以在畫佈上創建和填充對象;對象，如簡單的幾何形狀或由多個路徑組成的復雜形狀。Fabric 還具有 SVG 到畫佈（和畫佈到 SVG）解析器。Paper.jsPaper.js 是一個運行在 HTML5 Canvas 之上的開源矢量圖形腳本框架。它提供瞭一個幹凈的場景圖/文檔對象模型和許多強大的功能來創建和處理矢量圖形和貝塞爾曲線，所有這些都整齊地包裝在一個精心設計、一致和幹凈的編程界面中。它基於（並且在很大程度上兼容）Scriptographer，Scriptographer是Adobe Illustrator的腳本環境。JsPlumbjsPlumb 提供瞭一種以可視化連接為核心構建應用程序的快速方法。s.它使用 SVG 並在 IE9 及更高版本的所有瀏覽器上運行。JsPlumbToolkit是其商業擴展。此商業版本包裝瞭社區版，重點關註基礎數據模型，以及幾個有用的 UI 功能，例如佈局和提供平移/縮放功能的小部件。p5.js一個 JS 客戶端庫，用於創建圖形和交互式體驗，基於處理的核心原則，使藝術傢、設計師和教育工作者可以訪問編碼。除瞭繪圖之外，該項目還提供網絡音頻功能，碰撞檢測，甚至從p5.js草圖生成圖形用戶界面。Cytoscape.js高度優化的開源圖論網絡庫，可用於圖分析和可視化。與所有現代瀏覽器兼容，並且可通過 JSON 完全（反）序列化。它還包括自動佈局，集合論和圖論的算法，從BFS到PageRank。dagre-d3一個JavaScript庫，充當dagre（在客戶端佈置有向圖的javascript庫）的前端，使用D3提供實際的呈現。該項目現已放棄。vis.jsVis.js 是一個基於瀏覽器的動態可視化庫。該庫設計為易於使用，可處理大量動態數據，並可對數據進行操作。這個項目也被放棄瞭。React DiagramsReact Diagrams 是一個“一個超級簡單、嚴肅的圖表庫，用 react 編寫，隻是工作”。它是一個專註於可視化流程和面向流程的圖表的庫。靈感來自Blender、Labview和虛幻引擎。它完全用 Typescript 和 React 編寫。它是完全可擴展的，整個庫（包括其核心）可以擴展，重新佈線並重新組裝成根本不同的軟件，以滿足您自己的軟件需求。它還旨在提供良好的用戶體驗，但確保設計人員可以盡快編輯圖表。TldrawTldraw是此列表中的最新條目之一。Tldraw是一個“微小的繪圖應用程序”，提供瞭許多形狀來繪制簡單，但清晰和優雅的圖表，具有手繪風格和方便的功能，如智能箭頭，捕捉和便箋。甚至還有一個VSCode擴展。
本文出自快速备案，转载时请注明出处及相应链接。