个开源 JavaScript 14 流程图组件
流程,在人类社会运作中无处不在,咱们每天的下班的任务、银行的买卖、做菜的环节、穿衣服的环节,万事万物都有必定的运作流程,甚至人类的生老病死都是个流程。软件的口头环节更是个流程,只管在许多软件中存在依据规则的口头方法,也存在依据环境、数据等内部信息触发的事情,然而从软件全局来看,依然是遵照着必定的业务流程,这些规则或许触发器是全体流程中性能点。
在软件开发中流程化设计有许多运行场景,例如:低代码无代码开发、办公智能化义务编排、智能查看审批、流程化的AI Agent(相似Dify、Coze)等等。
一些比拟盛行的开源流程图组件,如:flowchart.js、xyflow、GoJS、Dgrm.net等,这些组件可以以可视化的形式将流程设计器集成到Web运行中,能够大大提高系统的可用性、易用性,并且愈加直观以及用户友好。
上方是介绍的几个基于web的开源流程设计组件,可依据需求选用适宜的组件集成到你的系统中。
1.flowchart.js
flowchart.js是可以在阅读器和终端中运转的流程图DSL和SVG渲染器。这个设计器的节点和衔接是分开定义的,这样节点可以重用,衔接可以极速更改。也可以在DSL中对节点和衔接样式启动更改。
2.jquery.flowchart.js
jquery.flowchart.js是一个开源的jQueryUI流程图插件。重要性能包含:
Flowy是一个可以使创立具有流程图性能的WebApps成为一项十分繁难的义务。经过在名目中成功该库,在几分钟内就可以构建智能化的思想导图工具或繁难的编程平台。
其重要特色包含:
Dgrm.net是一个纯JS的流程图编辑器。适用于台式机,手机友好板电脑。没有依赖性。
Drawflow是一个开源流程设计器,可用于轻松极速地创立数据流。
重要特色包含:
这是一个弱小的开源库,可以基于React或Svelte开发流程设计UI。这个库开箱即用并且有限定制。
这里有许多这个库开发的Demo:
GoJS是一个可用于创立许多不同类型的交互式图表,十分灵敏,支持数据可视化、绘图工具和图形编辑器等性能。支持的图形包含:流程图、组织结构图、业务流程BPMN、泳道、期间线、形态图、看板、网络、思想导图、sankey、家谱和基因图、鱼骨图、平面图、UML、决策树、PERT图表、甘特等数百个。GoJS包含许多内置的规划,包含:树规划、热力求、圆形和分层有向图规划,也支持自定义规划。
GoJS以Canvas元素呈如今HTML 上(导出为SVG或图像格局)或间接作为SVG DOM。GoJS可以在Web阅读器中运转,也可以在Node或Puppeteer中运转。GoJS图由模型支持,通常经过JSON格局的文本保留和加载。
在上方URL里可以看到GoJS 各种各样的Demo:
React Diagrams是一个用React写的十分精简的任务流图形库。
这是一个适用于React.js的收费开源的轻量级流程图设计器。
10.React Flow Chart
React Flow Chart是一个收费开源的、灵敏的、有形态的、申明式的React流程图库。
11.REAFLOW
REAFLOW是一个用于构建静态或交互式编辑器的模块化图表引擎。该库性能丰盛且模块化,准许显示具有齐全可定制性的复杂可视化。
12.React Flow Chart Editor
这个开源流程图编辑器支持窗口定位、缩放和任务区平移。繁难的组件插件架构,准许轻松定制。没有额外的包依赖。
13.React Flowchart Builder
这是一个收费的轻量级流程图组件。
其特色包含:
14.X-Flowchart-Vue
一个基于G6和Vue的可视化图形编辑器。