前端流程圖插件對比選型
當(dāng)前位置：點晴教程→知識管理交流
→『 技術(shù)文檔交流 』
 前言前端領(lǐng)域有多種流程庫可供選擇，包括但不限于vue-flow、butterfly、JointJS、AntV G6、jsPlumb和Flowchart.js。這些庫都提供了用于創(chuàng)建流程圖、圖形編輯和交互的功能。然而，它們在特性、易用性和生態(tài)系統(tǒng)方面存在一些差異。 流程圖插件匯總
流程圖插件分析vue-flow簡介
使用Vue Flow 是Vue下流程繪制庫。安裝： npm i --save @vue-flow/core 安裝核心組件 npm i --save @vue-flow/background 安裝背景組件 npm i --save @vue-flow/controls 安裝控件（放大，縮小等）組件 npm i --save @vue-flow/minimap 安裝縮略圖組件 引入組件： import { Panel, PanelPosition, VueFlow, isNode, useVueFlow } from '@vue-flow/core' import { Background } from '@vue-flow/background' import { Controls } from '@vue-flow/controls' import { MiniMap } from '@vue-flow/minimap' 引入樣式： @import '@vue-flow/core/dist/style.css'; @import '@vue-flow/core/dist/theme-default.css'; 優(yōu)缺點分析優(yōu)點：
缺點：
butterfly簡介Butterfly是由阿里云-數(shù)字產(chǎn)業(yè)產(chǎn)研部孵化出來的的圖編輯器引擎，具有使用自由、定制性高的優(yōu)勢，已支持上百張畫布。號稱 “杭州余杭區(qū)最自由的圖編輯器引擎”。 使用
npm install butterfly-dag --save
<script setup> import {TreeCanvas, Canvas} from 'butterfly-dag'; const root = document.getElementById('chart') const canvas = new Canvas({ root: root, disLinkable: true, // 可刪除連線 linkable: true, // 可連線 draggable: true, // 可拖動 zoomable: true, // 可放大 moveable: true, // 可平移 theme: { edge: { shapeType: "AdvancedBezier", arrow: true, arrowPosition: 0.5, //箭頭位置(0 ~ 1) arrowOffset: 0.0, //箭頭偏移 }, }, }); canvas.draw(mockData, () => { //mockData為從mock中獲取的數(shù)據(jù) canvas.setGridMode(true, { isAdsorb: false, // 是否自動吸附,默認(rèn)關(guān)閉 theme: { shapeType: "circle", // 展示的類型，支持line & circle gap: 20, // 網(wǎng)格間隙 background: "rgba(0, 0, 0, 0.65)", // 網(wǎng)格背景顏色 circleRadiu: 1.5, // 圓點半徑 circleColor: "rgba(255, 255, 255, 0.8)", // 圓點顏色 }, }); }); </script> <template> <div id="chart"></div> </template> 優(yōu)缺點分析優(yōu)點：
缺點：
JointJS簡介創(chuàng)建靜態(tài)圖表或完全交互式圖表工具，例如工作流編輯器、流程管理工具、IVR 系統(tǒng)、API 集成器、演示應(yīng)用程序等等。 屬于閉源收費項目，暫不考慮。 AntV G6簡介AntV 是螞蟻金服全新一代數(shù)據(jù)可視化解決方案，致力于提供一套簡單方便、專業(yè)可靠、無限可能的數(shù)據(jù)可視化最佳實踐。G6 是一個圖可視化引擎。它提供了圖的繪制、布局、分析、交互、動畫等圖可視化的基礎(chǔ)能力。G6可以實現(xiàn)很多d3才能實現(xiàn)的可視化圖表。 使用
npm install --save @antv/g6 //安裝
<template> /* 圖的畫布容器 */ <div id="mountNode"></div> </template> <script setup> import G6 from '@antv/g6'; // 定義數(shù)據(jù)源 const data = { // 點集 nodes: [ { id: 'node1', x: 100, y: 200, }, { id: 'node2', x: 300, y: 200, }, ], // 邊集 edges: [ // 表示一條從 node1 節(jié)點連接到 node2 節(jié)點的邊 { source: 'node1', target: 'node2', }, ], }; // 創(chuàng)建 G6 圖實例 const graph = new G6.Graph({ container: 'mountNode', // 指定圖畫布的容器 id // 畫布寬高 width: 800, height: 500, }); // 讀取數(shù)據(jù) graph.data(data); // 渲染圖 graph.render(); </script> 優(yōu)缺點分析優(yōu)點：
缺點：
jsPlumb簡介一個用于創(chuàng)建交互式、可拖拽的連接線和流程圖的 Javascript 庫。它在 Web 應(yīng)用開發(fā)中廣泛應(yīng)用于構(gòu)建流程圖編輯器、拓?fù)鋱D、組織結(jié)構(gòu)圖等可視化操作界面。 使用<template> <div ref="container"> <div ref="sourceElement">Source</div> <div ref="targetElement">Target</div> </div> </template> <script setup> import { ref, onMounted } from 'vue'; import { jsPlumb } from 'jsplumb'; const container = ref<HTMLElement | null>(null); const sourceElement = ref<HTMLElement | null>(null); const targetElement = ref<HTMLElement | null>(null); onMounted(() => { // 創(chuàng)建 jsPlumb 實例 const jsPlumbInstance = jsPlumb.getInstance(); // 初始化 jsPlumb 實例設(shè)置 if (container.value) { jsPlumbInstance.setContainer(container.value); } // 創(chuàng)建連接線 if (sourceElement.value && targetElement.value) { jsPlumbInstance.connect({ source: sourceElement.value, target: targetElement.value, }); } }); </script> 優(yōu)缺點分析優(yōu)點：
Flowchart.js簡介Flowchart.js 是一款開源的Javascript流程圖庫，可以使用最短的語法來實現(xiàn)在頁面上展示一個流程圖，目前大部分都是用在各大主流 markdown 編輯器中，如掘金、csdn、語雀等等。 使用flowchat start=>start: 開始 end=>end: 結(jié)束 input=>inputoutput: 我的輸入 output=>inputoutput: 我的輸出 operation=>operation: 我的操作 condition=>condition: 確認(rèn) start->input->operation->output->condition condition(yes)->end condition(no)->operation 優(yōu)缺點優(yōu)點：
缺點：
對比分析
該文章在 2023/8/26 8:57:15 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
