SVG实现的流程图绘制

boyanx2个月前技术教程13

一、项目简介

使用SVG技术实现的流程图绘制

二、实现功能

  • 流程图块生成、连线、拖拽

  • 产生相应的xml和xpdl

  • 导入导出json数据

  • 放大缩小功能

  • 保存

  • 操作(选择、自动插入、开始结束、普通活动、子活动、块活动、路径活动、转移、自转移、循环、复制、粘贴、剪切、删除、新建、返回、前进、放大、缩小、归位、导出json、导入json)

  • 支持图标视图、xpdl视图、xml视图

  • 支持过程节点查看

三、技术选型

  • vue

  • svg

  • d3.js

  • jquery.js

  • semantic.css

四、界面展示

五、源码地址

回复:svg绘图


标签: svg 生成

相关文章

DeepSeek怎么生成流程图?用这2个绘图软件一键绘制!

DeepSeek从小范围内流行到爆火出圈,用了不到半个月时间,其热度从目前公开的数据可见一斑,一个月内迅速斩获1.25亿用户,日活也随之突破3000万,超越此前表现亮眼的AI工具豆包。DeepSeek...

3秒SVG变3D!Vecto3D:免费在线神器,设计师/小白都能用

Vecto3D 是一款免费开源工具,可将简单 SVG(如 Logo)快速转换为可定制 3D 模型,支持调整几何、材质及场景参数,并导出为 GLB、STL 等格式,适用于设计、游戏开发和 3D 打印。...

svg格式怎么转化为jpg?三种简单转换小妙招,值得学习!

SVG是一种2d图像或者图形文件类型,适用于查看和打印。高保真度复杂矢量文档已是并将继续是 SVG 优点。SVG在本质上是XML的代码,主要是用于解释应该显示的形状以及关于形状等集来生成图形。SVG格...

AI转矢量|10秒将图片转换成可编辑的svg文件

灵力AI简直就是AI届对神器,可以轻松将AI绘画生成对图片转换矢量文件。也可以上传图片进行矢量转换,以后用素材太方便了...

轻松玩转自定义头像 – 用Multiface打造你的专属形象

从社交媒体平台到专业网络,用户对展示自己个性的方式有着更高的需求。为了满足这种需求,我们开发了一个简单但功能强大的工具——Multiface,它能够为每个用户提供独一无二的自动生成头像。Multifa...

Deepseek生成图片的几个方法,示例模板附上

针对DeepSeek生成图片场景设计的原创提示语模板及示例,结合了多步引导、参数化要求和第三方工具协同策略,可适配不同设计需求:一、SVG代码生成法(适用技术型用户)提示语结构:请将下方文本内容转化为...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。