您可以使用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扩展。