整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
可以使用JavaScript在瀏覽器中渲染任何您想要的內容。這個很好的示例是這個在線建模工具列表，它可以幫助您直接在瀏覽器中輕松創建UML（或ER，BPMN等）圖。這些工具中的大多數都使用 JavaScript 來渲染圖形形狀并與之交互。但是，如果您想創建自己的圖表或構建自己的編輯器怎么辦？別擔心，我們為您提供保障。在這篇文章中，我們提供了一個 10+ JavaScript 繪圖庫的列表，用于編寫您自己的可視化工具和/或為您的軟件添加一些圖形建模功能。
我們將 JavaScript 繪圖庫集分為兩個主要類別：
簡而言之，如果您正在尋找一種幾乎現成的方法來將 JavaScript 建模庫集成到您的工具中，請選擇第一組中的庫。如果您正在尋找一個更可調的解決方案，并且有時間和技能進行一些編程，請考慮從第二組中獲取一個庫并根據需要對其進行個性化設置。請注意，我們專注于繪制圖表的庫，如果您只想渲染只讀圖表，您可能需要查看此文本建模工具列表。
用于繪制UML（或BPMN或ERD）圖的JavaScript庫
JointJS可用于創建靜態圖或完全交互式的圖工具和應用程序構建器。它還有一個商業版本（Rappid，見下文）
以下是它的一些功能：
Rappid是JointJS的商業擴展。它是一組 JointJS 插件和其他組件，在創建圖表工具時提供了更多可能性和即用型功能。以下是它的一些功能：
MxGraph 是一個交互式 JavaScript HTML 5 圖表庫。mxGraph 是一個完全客戶端的庫，它使用 SVG 和 HTML 來渲染模型。例如，該庫用于 Draw.io。開發始于 2005 年，雖然原始項目已存檔，但這個分支仍在繼續工作。
mxGraph 不使用第三方軟件，它不需要插件，幾乎可以集成到任何框架中。mxGraph 包包含一個用 JavaScript 編寫的客戶端軟件，以及一系列用于各種語言的后端。客戶端軟件是一個圖形組件，帶有集成到現有 Web 界面中的可選應用程序包裝器。客戶端需要 Web 服務器將所需的文件傳送到客戶端，或者可以在沒有 Web 服務器的情況下從本地文件系統運行。后端可以按原樣使用，也可以以受支持的語言之一嵌入到現有服務器應用程序中。
GoJS是一個功能豐富的JavaScript / Typescript庫，用于跨現代瀏覽器和平臺實現交互式圖表。GoJS 通過可自定義的模板和布局可以輕松構建復雜節點、鏈接和組的圖表。
GoJS 為用戶交互提供了許多高級功能，例如拖放、復制和粘貼、事務狀態和撤消管理、調色板、概述、數據綁定模型、事件處理程序以及用于自定義操作的可擴展工具系統。它們提供了 150 多個交互式示例，可幫助您開始使用 BPMN、流程圖、狀態圖、可視化樹、Sankey 和數據流等圖表。該 API 有很好的文檔記錄，以確保您可以立即開始使用。我們在這篇文章中廣泛介紹了GoJS。
用于 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 是一個較有名的文本建模工具，能夠從文本描述中渲染 UML 圖，但它也提供了一個獨立的 JavaScript 庫，可用于在自己的網頁上呈現圖。唯一的依賴關系是 lodash 和 dagre。
與nomnoml類似，Mermaid的主要重點是從文本文件生成圖表，在這種情況下，通過簡單的類似markdown的腳本語言。它依賴于 d3 和 dagre-d3 來提供圖形布局和繪圖庫。它提供了一個在線編輯器，但您也可以直接重用打包的美人魚 API 將美人魚集成到您自己的開發中。它主要涵蓋序列圖和流程圖。
用于創建和顯示圖表的核心庫。它被 BPMN.io（此庫的創建者）用作同一公司許多其他庫的構建塊，用于指定業務流程模型、決策模型和案例計劃模型。
例如，bpmn-js 是渲染 BPMN 2.0 圖的.js擴展。除了使用它來構建工作流建模編輯器（正如他們已經提供的那樣）之外，bpmn-js 在設計時還考慮了可擴展性，因此您可以“輕松”構建某種執行/模擬引擎，例如，在其上構建某種執行/模擬引擎。
顧名思義，state.js 專注于對分層狀態機進行建模。狀態.js API 提供：
它是用TypeScript開發的，并轉譯為JavaScript;您可以使用任何一種語言。 : .
Eclipse Sprotty 和 Eclipse GLSP 工具可幫助您為自己的語言創建建模環境。因此，它們不限于UML，ER或其他特定的圖表類型。相反，這些工具提供了一個后端基礎結構（基于語言服務器協議的圖形化），以創建您自己的語言，并提供一個基于 JS 的前端來為其構建可視化編輯器。
提供面向圖形的建模基元的低級庫（因此，我們在這里不列出只專注于繪制數據可視化圖表的庫）。事實上，其中一些已被用于構建上面列出的JavaScript建模庫。
D3.js 是一個 JavaScript 庫，用于基于數據操作文檔。現在，我會說是同類庫中最受歡迎的圖書館。
D3 可幫助您使用 HTML、SVG 和 CSS 使數據栩栩如生。D3 對 Web 標準的強調為您提供了現代瀏覽器的全部功能，而無需將自己綁定到專有框架，將強大的可視化組件和數據驅動的 DOM 操作方法相結合。D3 速度極快，支持大型數據集以及交互和動畫的動態行為。D3 的函數式風格允許通過各種官方和社區開發的模塊重用代碼。
Rapha?l 是一個小型的 JavaScript 庫，它應該可以簡化您在 Web 上使用矢量圖形的工作。例如，如果您想創建自己的特定圖表或圖像裁剪和旋轉小部件，則可以使用此庫簡單輕松地實現它。Rapha?l 使用 SVG W3C 推薦和 VML 作為創建圖形的基礎。這意味著您創建的每個圖形對象也是一個 DOM 對象，因此您可以附加 JavaScript 事件處理程序或稍后修改它們。Rapha?l的目標是提供一個適配器，使繪制矢量藝術兼容跨瀏覽器且容易。它最近沒有更新。
使用 Draw2D Javascript 庫創建類似 Visio 的繪圖、圖表或工作流編輯器。用戶界面允許使用標準瀏覽器進行交互式繪圖。它聲稱比拉斐爾簡潔得多。即使開發停滯不前，甚至還有一個演示頁面。
Fabric 是一個 JavaScript HTML 畫布庫，在 canvas 元素之上提供了一個交互式對象模型。您可以在畫布上創建和填充對象;對象，如簡單的幾何形狀或由多個路徑組成的復雜形狀。Fabric 還具有 SVG 到畫布（和畫布到 SVG）解析器。
Paper.js 是一個運行在 HTML5 Canvas 之上的開源矢量圖形腳本框架。它提供了一個干凈的場景圖/文檔對象模型和許多強大的功能來創建和處理矢量圖形和貝塞爾曲線，所有這些都整齊地包裝在一個精心設計、一致和干凈的編程界面中。它基于（并且在很大程度上兼容）Scriptographer，Scriptographer是Adobe Illustrator的腳本環境。
jsPlumb 提供了一種以可視化連接為核心構建應用程序的快速方法。s.它使用 SVG 并在 IE9 及更高版本的所有瀏覽器上運行。JsPlumbToolkit是其商業擴展。此商業版本包裝了社區版，重點關注基礎數據模型，以及幾個有用的 UI 功能，例如布局和提供平移/縮放功能的小部件。
一個 JS 客戶端庫，用于創建圖形和交互式體驗，基于處理的核心原則，使藝術家、設計師和教育工作者可以訪問編碼。除了繪圖之外，該項目還提供網絡音頻功能，碰撞檢測，甚至從p5.js草圖生成圖形用戶界面。
高度優化的開源圖論網絡庫，可用于圖分析和可視化。與所有現代瀏覽器兼容，并且可通過 JSON 完全（反）序列化。它還包括自動布局，集合論和圖論的算法，從BFS到PageRank。
一個JavaScript庫，充當dagre（在客戶端布置有向圖的javascript庫）的前端，使用D3提供實際的呈現。該項目現已放棄。
Vis.js 是一個基于瀏覽器的動態可視化庫。該庫設計為易于使用，可處理大量動態數據，并可對數據進行操作。這個項目也被放棄了。
React Diagrams 是一個“一個超級簡單、嚴肅的圖表庫，用 react 編寫，只是工作”。它是一個專注于可視化流程和面向流程的圖表的庫。靈感來自Blender、Labview和虛幻引擎。
它完全用 Typescript 和 React 編寫。它是完全可擴展的，整個庫（包括其核心）可以擴展，重新布線并重新組裝成根本不同的軟件，以滿足您自己的軟件需求。它還旨在提供良好的用戶體驗，但確保設計人員可以盡快編輯圖表。
Tldraw是此列表中的最新條目之一。Tldraw是一個“微小的繪圖應用程序”，提供了許多形狀來繪制簡單，但清晰和優雅的圖表，具有手繪風格和方便的功能，如智能箭頭，捕捉和便箋。甚至還有一個VSCode擴展。
anvas技術的誕生可謂是讓繪圖技術如虎添翼，本文將推薦一系列Canvas圖形繪制、流程圖、組織圖、甘特圖、全景圖、3D庫、VR/AR、圖像編輯等方面的庫，希望助你在Canvas繪圖時尋得一把趁手的利器。
同時，愣錘將Canvas的相關資源進行的收錄整理分類，更多的資源請關注Github項目地址awesome-canvas。目前該庫持續維護中，已收錄大約200+的Canvas庫，以及資源網址、插件、書籍、博客等資源。
圖形處理庫
圖形繪制是Canvas中最基本的內容，但是Canvas本身提供的api比較基礎，開發起來低效。而且也缺少完整的事件系統、區域監測、緩存等等。下面讓我們來看幾款高效的圖形處理庫吧。
簡介：Konva是一個 HTML5 Canvas JavaScript 框架, 通過擴展 Canvas 的 2D Context 讓桌面端和移動端Canvas支持交互性，使其支持高性能動畫、過渡、節點嵌套、分層、過濾、緩存、事件處理等等。Konva官方地址（https://konvajs.org/docs/sandbox/index.html）
除上述之外，文檔相對友好，但也僅僅是相對于同類庫的文檔友好那么一滴滴，社區有維護一個中文文檔。
簡介： Fabric.js是一個可以輕松處理 HTML5 Canvas元素的框架，使得Canvas元素支持交互式對象模型，同時也是一個SVG-to-Canvas和Canvas-to-SVG的解析器， fabric.js官方地址（http://fabricjs.com/demos/）
fabricjs是和konva同類型但是比konva更老牌的一個的Canvas庫，目前github上Star數2萬+
更多示例如下圖所示：
圖像編輯
市面上圖像編輯的軟件有很多，像大家所熟知的PS、sketch、axure、激萌、剪映等等。那么如果我們想開發類似的軟件，有沒有可以使用的庫或者參考的開源軟件呢？
簡介：miniPaint [官方網站在線演示]（https://viliusle.github.io/miniPaint/） - 在線版的PS。PS這款軟件大家都不陌生，web版本的如何呢？請看下圖：
簡介：DarkroomJS [官方網站在線演示]（https://pqina.nl/pintura/?affiliate_id=854594675） - 基于Fabricjs的瀏覽器端可擴展的圖像編輯工具
簡介：fabric-brush [官方網站在線演示] （https://tennisonchan.github.io/fabric-brush/）- 基于Fabric.js的Canvas筆刷工具
簡介：fabricjs-image-editor-origin [官方網站在線演示] （https://fabricjs-image-editor-f62330.netlify.app/）- Fabricjs圖像編輯器
簡介：react-sketch [官方網站在線演示] （http://tbolis.github.io/showcase/react-sketch/）- 基于React、Fabricjs的素描應用
簡介：glitch-canvas [官方網站在線演示]（https://snorpey.github.io/jpg-glitch/） - 給畫布元素添加故障效果
簡介：animockup [官方網站在線演示] （https://animockup.com/）- 在瀏覽器中創建動畫模型，并導出為視頻或動畫GIF
物理引擎
物理引擎使用質量、速度、摩擦力和空氣阻力等變量，模擬了一個近似真實的物理系統，為剛性物體賦予真實的物理效果，比如重力、旋轉和碰撞等效果，讓物體的行為表現的更加趨向真實。例如，守望先鋒的英雄在跳起時，系統所設置的重力參數就決定了他能跳多高，下落時的速度有多快，子彈的飛行軌跡等等。
簡介： matter.js是一個用于 Web 的 JavaScript 2D 物理引擎庫 matter.js官方地址（https://brm.io/matter-js/demo/#wreckingBall）
matter.js相較于老牌的 Box2D 引擎庫更為輕量級（壓縮版僅有 87 KB），并且在性能和功能方面也不遜色。
流程圖/組織圖/圖編輯等
工業軟件開發，一直是軟件領域復雜而又重要的一環。其對技術人的要求要是更高的，下面看看有哪些可以輔助我們快速開發的庫或者參考的場景吧。
簡介： gojs是一款可以非常方便的開發交互式流程圖、組織結構圖、設計工具、規劃工具、可視化語言的JavaScript圖表庫。 gojs.js官方地址（https://gojs.net/latest/）
文檔中提供了大量的demo可供參考，基本對于常見的圖編輯程序做到了全覆蓋。
簡介：butterfly [官方網站在線演示] （https://butterfly-dag.gitee.io/butterfly-dag/demo/analysis）一個基于JS的數據驅動的節點式編排組件庫，同時適用于React/Vue2組件。
簡介：wireflow [官方在線演示]（https://app.wireflow.co/） 用戶流程圖實時協作工具。
簡介：Flowy [官方在線演示]（https://alyssax.com/x/flowy） - 用于創建流程圖的最小javascript庫。使創建具有流程圖功能的 WebApp 成為一項非常簡單的任務。通可以在幾分鐘內構建自動化軟件、思維導圖工具或簡單的編程平臺。
簡介：Workflow Designer [官方在線示例] （https://guozhaolong.github.io/wfd/）- 基于G6和React的可視化流程編輯器。
簡介：web-pdm [在線示例]（https://erd.zyking.xyz/demo） - 用G6做的ER圖工具，最終目標是想做成在線版的powerdesigner.
簡介：X-Flowchart-Vue [官方在線演示] （http://oxoyo.co/X-Flowchart-Vue/）- 基于G6和Vue的可視化圖形編輯器。
簡介：OrgChart [官方在線演示] （https://dabeng.github.io/OrgChart/）- 簡單直接的組織圖插件
簡介：welabx-g6 [官方在線示例] （https://claudewowo.github.io/welabx-g6/dist/?_blank）- 基于G6和Vue的流程圖編輯器。
全景圖/AR/VR
5g的普及、虛擬現實/增強現實落地、元宇宙的火熱......似乎讓Canvas再度推上了技術的頂峰。下面讓我來看看開發這些場景常見的Canvas庫吧。
簡介：Pannellum [官方在線演示] （https://pannellum.org/）- 輕量、免費、開源的web全景查看器。
簡介：Panolens.js [官方在線演示] （https://pchen66.github.io/Panolens/）- Panolens.js基于Three.JS，主要研究領域是全景、虛擬現實和潛在的增強現實。
簡介：JS-Cloudimage-360-View [官方在線演示] （https://scaleflex.github.io/js-cloudimage-360-view/）一個簡單的、交互式的資源，可以用來提供您的產品的虛擬游覽。
簡介：A-Frame [官方在線演示]（https://aframe.io/） A-Frame 除了幫助您構建 360 度媒體播放器外，它還提供了許多附加功能。其他功能可幫助您增強網站的虛擬現實體驗。
3D庫
簡介：three.js [官方在線演示]（https://threejs.org/examples/） - 創建易于使用、輕量級、跨瀏覽器的通用3d js庫。three.js就不多介紹了，大家想必都很熟悉。
簡介：zdog [官方在線演示]（https://zzz.dog/） - 基于canvas和SVG設計師友好的偽3D引擎
簡介：seen [官方在線演示] （http://seenjs.io/）- 使用SVG或Canvas渲染3D場景。
簡介：Oimo.js [官方在線演示]（http://lo-th.github.io/Oimo.js/index.html#basic） - 輕量級的JS 3D物理引擎。
簡介：phoria.js [官方在線演示]（http://www.kevs3d.co.uk/dev/phoria/index.html） - 用于在 HTML5 畫布 2D 渲染器上進行簡單 3D 圖形和可視化的 JavaScript 庫。它不使用 WebGL。適用于所有 HTML5 瀏覽器，包括桌面、iOS 和 Android。
原文來自：https://juejin.cn/post/7038267477121302542
Rough.js 是一個輕量級的（大約 8k），基于 Canvas 的可以繪制出粗略的手繪風格的圖形庫。該庫提供繪制線條、曲線、弧線、多邊形、圓形和橢圓的基礎能力，同時支持繪制 SVG 路徑。除此之外，Rough.js 還提供了大量的可自定義選項，可以調整線寬、線條顏色、填充顏色、字體樣式、背景顏色等，以使圖形更加個性化。
Github：https://github.com/rough-stuff/rough
npm install --save roughjs*請認真填寫需求信息，我們會在24小時內與您取得聯系。
