百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程字典 > 正文

开源在线绘图工具,界面美观,功能丰富,总有一款适合你

toyiye 2024-05-09 18:41 57 浏览 0 评论

俗话说,一图胜千言,一张小小的图片可以替代大段的文字说明,更可以形象直观地描述业务流程、展示算法...,下面给大家带来几款我最近收藏的开源在线绘图工具。

Ant Design Pro

项目地址:https://github.com/ant-design/ant-design-pro

Ant Design Pro流程图编辑器

Ant Design Pro是蚂蚁开源的一款开箱即用的中台前端/设计解决方案。在其预览网站里图形编辑器下有流程图、脑图、拓扑编辑器,大厂出品,界面相当美观,功能实用但不够强大,可以选择集成到自己的项目中作为一个在线绘图工具。集成时,这个工具可扩展性很多:扩展画布左侧节点类型(节点为图片);扩展流程图保存,版本控制,版本比对;动态调整画布中节点大小等。

wookteam

项目地址:https://gitee.com/aipaw/wookteam

WorkTeam在线流程图

WookTeam在线思维导图

WookTeam在线任务甘特图

WookTeam是一款PHP语言编写的轻量级的全部开源的在线团队协作工具,提供在线思维导图、在线流程图、在线任务甘特图,此外还有各类文档工具、项目管理、任务分发,知识库管理等工具。前端框架采用的是Vue 2.0 + Iview UI。这款工具界面美观,功能丰富,唯一一点就是对PHPer友好,Java开发者集成转换时需要一定的工作量。

mxGraph

项目地址:https://segmentfault.com/a/1190000018510996

mxGraph包含一个用JavaScript编写的客户端软件,以及一系列用于各种语言的后端(可以是Java,PHP,.NET)。客户端软件是一个图形组件,带有一个可选的应用程序包装程序,该程序包装程序已集成到现有的Web界面中。客户端需要Web服务器将所需的文件传递到客户端,或者可以在没有Web服务器的情况下从本地文件系统运行。这个工具引入方便,界面功能强大,组件也相对丰富,和下面提到的JSPlumb各有千秋,可以导出为xml文件,也可以保存为图片。缺点是文档不够友好,没有中文文档,英文基础差的同学上手难度大,相对 jsPlumb 不能使用 css 自定义节点样式,完全通过 js 完成,比较麻烦。

Visor.js

项目地址:https://gitee.com/zhouyig/Visor.js

Visor.js示意图

Visor.js 是基于JQUERYY的,在Canvas上制作在线绘图应用的核心基础文件,它支持鼠标的拖拽移动、伸缩、旋转和各种事件。这个轮子,功能强大,控件丰富,可扩展性强,支持单独页面预览,开发文档充分,有一定的社区支持;缺点也是明显的,个人开发提交代码不持续,最近一次提交是两年前了,还有就是页面不够美观大气,没有与时俱进。还是不错的工具,熟悉JQUERYY的小伙伴可以快速上手,感兴趣的可以重写一下页面,使之更加美观,挑战也是不小:)。

VFD(VUE FLOW DESIGN)

项目地址:https://gitee.com/yjblogs/VFD

VFD基于Vue + Ant Design Vue + JSPlumb,作为一款流程设计器组件,可作为流程图、泳道图等绘图工具,面板组件布局合理,功能强大,操作方便快捷(可拖拽且快捷键丰富),保存后为一段json数据,便于保存及控制版本,也可保存为图片,安装使用方便,集成难度较小,有交流群。缺点是演示网站挂掉了,只可以通过图片一览真容。

easy-flow

项目地址:https://gitee.com/xiaoka2017/easy-flow

easy-flow示例图

easy-flow示例图

easy-flow是一款基于 VUE+ElementUI+JsPlumb 的流程设计器,通过 vuedraggable 插件来实现节点拖拽。支持拖拽编辑,连线自定义,加载给定数据,支持力导图...与上面介绍的VFD近乎同样的技术栈,页面样式更加美观,同时,集成难度较小,虽然功能较少,但可扩展性性强,持续更新也是一大亮点,有交流群,社区也较活跃。

Le5le-topology

项目地址:https://www.oschina.net/p/topology?hmsr=aladdin1e1

Le5le-topology 是一个开源易扩展方便集成的可视化在线绘图工具,使用 Canvas + Typescript实现。采用引擎 + 图形库中间件的思路能够方便、快速地扩展、集成到前端项目。可用于微服务架构图、流程图/活动图/时序图/类图、拓扑图、思维导图/脑图、动画、音频/视频等。分层架构设计,插件轻量,且具有较好的性能,方便导入导出,可以保存为图片或是SVG文件,支持在线制作云存储多端分享。最厉害的是有一定的动画特效,更加便于展示业务流程及数据走向。社区强大,帮助文档及教程特多,交流群丰富,对未来有明确的规划。不仅仅是一个绘图工具,更是一个强大的丰富的图库平台。

总结:以上几款在线绘图工具,各有特点,有界面美观的,有大厂出品的,有功能极其丰富的,有扩展性极强的,但大部分都集成容易方便上手,感兴趣的同学可以根据自己的需要进行集成。

欢迎关注王小乐[来看我]

相关推荐

为何越来越多的编程语言使用JSON(为什么编程)

JSON是JavascriptObjectNotation的缩写,意思是Javascript对象表示法,是一种易于人类阅读和对编程友好的文本数据传递方法,是JavaScript语言规范定义的一个子...

何时在数据库中使用 JSON(数据库用json格式存储)

在本文中,您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?,Devops,敏捷?,测试?以及?项目?管理?最新?,最热门?的?文章?,每天?花?...

MySQL 从零开始:05 数据类型(mysql数据类型有哪些,并举例)

前面的讲解中已经接触到了表的创建,表的创建是对字段的声明,比如:上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...

JSON对象花样进阶(json格式对象)

一、引言在现代Web开发中,JSON(JavaScriptObjectNotation)已经成为数据交换的标准格式。无论是从前端向后端发送数据,还是从后端接收数据,JSON都是不可或缺的一部分。...

深入理解 JSON 和 Form-data(json和formdata提交区别)

在讨论现代网络开发与API设计的语境下,理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里,特别值得关注的是两种主流数据格式:...

JSON 语法(json 语法 priority)

JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...

JSON语法详解(json的语法规则)

JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意:json的key是字符串,且必须是双引号,不能是单引号...

MySQL JSON数据类型操作(mysql的json)

概述mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库,在处理json这种非结构化的数据...

JSON的数据模式(json数据格式示例)

像XML模式一样,JSON数据格式也有Schema,这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...

前端学习——JSON格式详解(后端json格式)

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...

什么是 JSON:详解 JSON 及其优势(什么叫json)

现在程序员还有谁不知道JSON吗?无论对于前端还是后端,JSON都是一种常见的数据格式。那么JSON到底是什么呢?JSON的定义...

PostgreSQL JSON 类型:处理结构化数据

PostgreSQL提供JSON类型,以存储结构化数据。JSON是一种开放的数据格式,可用于存储各种类型的值。什么是JSON类型?JSON类型表示JSON(JavaScriptO...

JavaScript:JSON、三种包装类(javascript 包)

JOSN:我们希望可以将一个对象在不同的语言中进行传递,以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式JSON(JavaScriptObjectNotation)-JS的对象表示法...

Python数据分析 只要1分钟 教你玩转JSON 全程干货

Json简介:Json,全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...

比较一下JSON与XML两种数据格式?(json和xml哪个好)

JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...

取消回复欢迎 发表评论:

请填写验证码