Vue3使用AntV | X6绘制流程图:开箱即用

x6官方地址X6·图编辑引擎 | AntV

官方文档仔细地介绍了很多丰富的功能,这里的demo可以满足基本的使用,具体拓展还需要仔细看文档内容

先上效果图

1、安装

通过 npm 或 yarn 命令安装 X6。

# npm
npm install @antv/x6 --save# yarn
yarn add @antv/x6

初始化画布

<div id="container"></div>
import { Graph } from '@antv/x6'const graph = new Graph({container: document.getElementById('container'),width: 800,height: 600,background: {color: '#F2F7FA',},
})

使用插件

import { Snapline } from '@antv/x6-plugin-snapline'graph.use(new Snapline({enabled: true,}),
)

数据导出

graph.toJSON()

具体依赖package.json

{"@antv/x6": "^2.0.0","@antv/x6-plugin-clipboard": "^2.0.0", // 如果使用剪切板功能,需要安装此包"@antv/x6-plugin-history": "^2.0.0", // 如果使用撤销重做功能,需要安装此包"@antv/x6-plugin-keyboard": "^2.0.0", // 如果使用快捷键功能,需要安装此包"@antv/x6-plugin-minimap": "^2.0.0", // 如果使用小地图功能,需要安装此包"@antv/x6-plugin-scroller": "^2.0.0", // 如果使用滚动画布功能,需要安装此包"@antv/x6-plugin-selection": "^2.0.0", // 如果使用框选功能,需要安装此包"@antv/x6-plugin-snapline": "^2.0.0", // 如果使用对齐线功能,需要安装此包"@antv/x6-plugin-dnd": "^2.0.0", // 如果使用 dnd 功能,需要安装此包"@antv/x6-plugin-stencil": "^2.0.0", // 如果使用 stencil 功能,需要安装此包"@antv/x6-plugin-transform": "^2.0.0", // 如果使用图形变换功能,需要安装此包"@antv/x6-plugin-export": "^2.0.0", // 如果使用图片导出功能,需要安装此包"@antv/x6-react-components": "^2.0.0", // 如果使用配套 UI 组件,需要安装此包"@antv/x6-react-shape": "^2.0.0", // 如果使用 react 渲染功能,需要安装此包"@antv/x6-vue-shape": "^2.0.0" // 如果使用 vue 渲染功能,需要安装此包
}

本文依赖

"dependencies": {"@element-plus/icons-vue": "^2.3.1","element-plus": "^2.7.6","pinia": "^2.1.7","vue": "^3.4.29","vue-router": "^4.3.3","@antv/x6": "latest","@antv/x6-plugin-clipboard": "latest","@antv/x6-plugin-history": "latest","@antv/x6-plugin-keyboard": "latest","@antv/x6-plugin-selection": "latest","@antv/x6-plugin-snapline": "latest","@antv/x6-plugin-stencil": "latest","@antv/x6-plugin-transform": "latest","@antv/x6-plugin-node-editor": "latest","insert-css": "latest"},

完整代码,开箱即用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/58559.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MCU内存结构解析:FLASH、ROM与RAM的功能与区别

目录 MCU内存概览 1. FLASH存储器 FLASH的特点与应用 2. ROM存储器 ROM的特点与应用 3. RAM存储器 RAM的特点与应用 MCU中FLASH、ROM与RAM的典型配置方式 总结 在嵌入式开发中&#xff0c;MCU&#xff08;微控制器&#xff09;是实现控制和数据处理的核心。MCU内部的存储结构对…

安装使用docker harbor并推送镜像到仓库

1.概要 通过上一章节的讲解&#xff0c;我们基本了解了docker的操作命令&#xff0c;在文章的最后我们成功的推送一个镜像到DockerHub的镜像仓库。从流程上说&#xff0c;操作过程可以说很完美&#xff0c;但是整个推送过程消耗的时间太长&#xff0c;我们消耗了大量时间在访问…

HTML练习题:彼岸的花(web)

展示效果: 代码: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>彼岸の花</title><style…

thinkphp和vue基于Workerman搭建Websocket服务实现用户实时聊天,完整前后端源码demo及数据表sql

最近接了一个陪玩小程序&#xff0c;其中有一个实时聊天的项目&#xff0c;需要搭建Websocke服务&#xff0c;通过多方考虑选择了通过GatewayWorker框架&#xff08;基于Workerman&#xff09;,将代码提取了出来&#xff0c;用到的框架封装到了vendor目录下&#xff0c;完整前后…

被上传文件于后端的命名策略

上一篇博客我们了解了前端上传的文件资源应该存放在后端项目中的什么位置&#xff0c;那么随之而来的另一个问题——我们应该如何为上传的文件命名呢&#xff1f;往往直接采用原文件名并不稳妥&#xff0c;会导致命名冲突、文件冲突、数据库管理冲突等多种问题&#xff0c;下面…

【计算机网络 - 基础问题】每日 3 题(五十八)

✍个人博客&#xff1a;https://blog.csdn.net/Newin2020?typeblog &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/fYaBd &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 C 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞…

C++ 二叉树进阶:相关习题解析

目录 1. 二叉树创建字符串。 2. 二叉树的分层遍历1 3. 二叉树的分层遍历2 4. 二叉树的最近公共祖先 5. 将二叉搜索树转换为排序的双向链表 6. 从前序与中序遍历序列构造二叉树 7. 从中序与后序遍历序列构造二叉树 8. 二叉树的前序遍历&#xff0c;非递归迭代实现 9.…

云舟观测:基于eBPF监控主机的TCP网络连接

1 背景 机器网络监控信息在日常问题排查中扮演着至关重要的角色&#xff0c;是不可或缺的工具。通过对网络流量的深入分析&#xff0c;我们不仅能有效评估网络性能&#xff0c;还能迅速识别异常行为&#xff0c;例如流量突然激增、未知的数据传输等&#xff0c;这些对于保障网络…

【IC每日一题】

IC每日一题 1&#xff1a;锁存器(latch)、触发器(flip-flop)、寄存器的概念及区别1.1 概念1.2 锁存器的危害1.3 如何避免产生锁存器 2 手撕题&#xff1a;边沿检测2.1 边沿检测(上升沿、下降沿、双边沿)2.1.1 波形图2.1.2 算法步骤2.1.3 代码 2.2 序列模三检测器2.2.1 描述2.2.…

使用 Docker Compose 将数据版 LobeChat 服务端部署

LobeChat 是一个基于 TypeScript 的开源聊天机器人项目&#xff0c;支持本地部署和接入多个大语言模型。本文介绍如何使用 Docker Compose 将 LobeChat 服务端及其数据库部署到生产环境&#xff0c;让您拥有一个私有化的、可定制的 AI 聊天助手。 一、部署前准备 服务器&…

驱动和芯片设计哪个难

驱动和芯片设计哪个难 芯片设计和驱动开发 芯片设计和驱动开发 都是具有挑战性的工作&#xff0c;它们各自有不同的难点和要求。 对于芯片设计&#xff0c;它是一个集高精尖于一体的复杂系统工程&#xff0c;涉及到从需求分析、前端设计、后端设计到流片的全过程。 芯片设计的…

DICOM标准:DICOM服务类详解,了解存储服务类、查询/检索服务类(Q/R Service Class)和工作流管理服务类等原理

目录 一、概述 二、存储服务类&#xff08;Storage Service Class&#xff09; 存储操作&#xff08;C-STORE&#xff09; 确认操作&#xff08;C-STORE-RSP&#xff09; 三、查询/检索服务类&#xff08;Query/Retrieve Service Class&#xff09; 查询操作&#xff08;C…

八,Linux基础环境搭建(CentOS7)- 安装Mysql和Hive

Linux基础环境搭建&#xff08;CentOS7&#xff09;- 安装Mysql和Hive 大家注意以下的环境搭建版本号&#xff0c;如果版本不匹配有可能出现问题&#xff01; 一、Mysql下载及安装 MySQL是一个关系型数据库管理系统&#xff0c;由瑞典MySQL AB 公司开发&#xff0c;属于 Orac…

【数据结构 | PTA】懂蛇语

懂蛇语 在《一年一度喜剧大赛》第二季中有一部作品叫《警察和我之蛇我其谁》&#xff0c;其中“毒蛇帮”内部用了一种加密语言&#xff0c;称为“蛇语”。蛇语的规则是&#xff0c;在说一句话 A 时&#xff0c;首先提取 A 的每个字的首字母&#xff0c;然后把整句话替换为另一…

Virtuoso使用layout绘制版图、使用Calibre验证DRC和LVS

1 绘制版图 1.1 进入Layout XL 绘制好Schmatic后&#xff0c;在原理图界面点击Launch&#xff0c;点击Layout XL进入版图绘制界面。 1.2 导入元件 1、在Layout XL界面左下角找到Generate All from Source。 2、在Generate Layout界面&#xff0c;选中“Instance”&#…

Spring事务的实现方式

前言 Spring的spring-tx模块提供了对事务管理支持&#xff0c;使用Spring事务可以让我们从复杂的事务处理中得到解脱&#xff0c;无需去处理获得连接、关闭连接、事务提交和回滚等这些操作。Spring事务管理是Spring框架提供的一个核心功能&#xff0c;它允许开发者以声明式或编…

线性代数(1)——线性方程组的几何意义

线性代数的基本问题是求解个未知数的个线性方程&#xff1b; 例如&#xff1a;&#xff08;方程1&#xff09;。 在线性代数的第一讲中&#xff0c;我们从Row Picture、Column Picture、Matrix Picture三个角度来看这个问题。 上面的系统是二维的。通过添加第三个变量&#…

openMV固件库编译环境搭建Linux

1、换源及安装必要软件 sudo gedit /etc/apt/sources.list ubuntu | 镜像站使用帮助 | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 选择你的ubuntu版本: 18.04 LTS # 默认注释了源码镜像以提高 apt update 速度,如有需要可自行取消注释 deb https://mirrors…

没有对象来和我手撕红黑树吧

1. 红黑树的介绍 红黑树也是一种自平衡的二叉搜索树&#xff0c;在每一个节点增加了一个存储位来表示节点的颜色&#xff0c;可以是红色也可以是黑色&#xff0c;通过约束颜色来维持树的平衡&#xff0c;具有以下的性质&#xff1a; 每个节点不是红色就是黑色根节点为黑色如果…

Android中SurfaceView与GLSurfaceView 的关系

SurfaceView 与 GLSurfaceView 的关系 在 Android 开发中&#xff0c;SurfaceView 和 GLSurfaceView 是实现自定义渲染效果的关键组件。它们提供了不同的渲染方式&#xff0c;适用于不同的应用场景。我们将通过以下几个方面详细说明 SurfaceView 和 GLSurfaceView 的特点及实现…