整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
可以使用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小时内与您取得联系。
