emergent-arc 是一个用于绘制流程图和状态图的前端类库，支持多种自定义配置和样式。在本文中，我们将详细介绍 emergent-arc 的使用方法，包括安装、导入、配置和绘制流程图和状态图。
安装和导入
使用 emergent-arc 需要先安装它，你可以在命令行中使用 npm 进行安装：
npm install emergent-arc
安装之后，在你的项目代码中导入 emergent-arc：
import EmergentArc from 'emergent-arc';
如果你使用的是旧版本的浏览器或不支持 ES6 的环境，可以使用 CommonJS 的方式导入：
var EmergentArc = require('emergent-arc');配置
在使用 emergent-arc 之前，需要对其进行一些配置，包括容器 element、节点 node 和连线 edge 的配置。
容器配置
容器是用于包含整个流程图或状态图的 DOM 元素，可以通过以下代码进行配置：
const container = document.getElementById('container');
const emergentArc = new EmergentArc({
container: container,
width: 800,
height: 600,
});其中，container 为上面提到的 DOM 元素，width 和 height 分别为容器的宽度和高度，可以根据实际情况进行配置。
节点配置
节点是流程图和状态图中的基本单元，通常包含一个文本和一个图标。可以通过以下代码进行配置：
-- -------------------- ---- -------
----- ----- - -
-
--- --------
----- --------
----- -----
-- ----
-- ----
--
-
--- ------
----- ------
----- -----
-- ----
-- ----
--
-
--- -----------
----- ----------
----- ------
-- ----
-- ----
--
-
--- -----------
----- ----------
----- ------
-- ----
-- ----
--
--其中，id 为节点的唯一标识符，type 为节点的类型（包括开端节点、结束节点和处理节点），text 为节点上显示的文本内容，x 和 y 分别为节点在容器中的横坐标和纵坐标。
连线配置
连线是节点之间的连接线，可以根据需要使用不同的样式和箭头。可以通过以下代码进行配置：
-- -------------------- ---- -------
----- ----- - -
-
------- --------
------- -----------
----- ----------
----- ------
--
-
------- -----------
------- -----------
----- ----------
----- ------
--
-
------- -----------
------- ------
----- --------
----- ------
--
--其中，source 和 target 分别为连线的起点和终点的节点 ID，type 为连线的类型（包括默认线和箭头线），text 为连线上显示的文本内容。
初始化
完成以上的配置之后，可以通过以下代码进行初始化：
emergentArc.init(nodes, edges);
绘制流程图和状态图
emergent-arc 提供了多种方法用于绘制流程图和状态图，包括绘制整个图和只绘制某些节点或连线。
绘制整个图
绘制整个图可以直接调用 draw() 方法：
emergentArc.draw();
绘制节点或连线
绘制特定的节点或连线可以使用它们的 ID 或索引，例如：
emergentArc.drawNodes(['start', 'end']); emergentArc.drawEdges([1, 2]);
以上代码会分别只绘制 ID 为 'start' 和 'end' 的节点以及索引为 1 和 2 的连线。
改变节点或连线的样式
emergent-arc 还支持通过配置改变节点或连线的样式，例如：
emergentArc.setNodeStyle('start', {
fill: '#f00',
});
emergentArc.setEdgeStyle(0, {
stroke: '#00f',
});以上代码会分别将 ID 为 'start' 的节点的填充色改为红色，将索引为 0 的连线的边框颜色改为蓝色。
示例代码
以下是一个完整的 emergent-arc 示例代码，可以通过它在浏览器中绘制一个简单的流程图：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------- ----------
-------
---------- -
------- --- ----- -----
------ ------
------- ------
-
--------
-------
------
---- ---------------------
------- --------------
------ ----------- ---- ---------------
----- --------- - -------------------------------------
----- ----------- - --- -------------
---------- ----------
------ ----
------- ----
---
----- ----- - -
-
--- --------
----- --------
----- -----
-- ----
-- ----
--
-
--- ------
----- ------
----- -----
-- ----
-- ----
--
-
--- -----------
----- ----------
----- ------
-- ----
-- ----
--
-
--- -----------
----- ----------
----- ------
-- ----
-- ----
--
--
----- ----- - -
-
------- --------
------- -----------
----- ----------
----- ------
--
-
------- -----------
------- -----------
----- ----------
----- ------
--
-
------- -----------
------- ------
----- --------
----- ------
--
--
----------------------- -------
-------------------
---------
-------
-------通过上述代码，你可以在浏览器中绘制一个包含 4 个节点和 3 条连线的流程图。你可以根据自己的需要进行调整和改进，使用 emergent-arc 绘制出更多样化的流程图和状态图。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057adc81e8991b448eb650