Skip to content

lzygit18/X-Flowchart-Vue

 
 

Repository files navigation

X-Flowchart-Vue

A visual graph editor based on G6 and Vue.

Version

XFC
v3.0.0
v2.0.0
v1.0.0

Preview

online

Example

# git clone https://github.com/OXOYO/X-Flowchart-Vue.git

# install dependencies
yarn install

### Compiles and hot-reloads for development
yarn run serve

Features

功能 状态 快捷键 工具栏 右键菜单 备注
logo Logo
undo ctrl + z 撤销
clearLog ctrl + shift + l 清空操作日志
redo ctrl + shift + z 重做
copy ctrl + c 复制
paste ctrl + v 粘贴
delete Delete 删除
clear ctrl + shift + e 清空画布
zoom 缩放
zoomIn ctrl + + 放大
zoomOut ctrl + - 缩小
fit ctrl + 0 适应屏幕
actualSize ctrl + 1 实际大小
fill 填充颜色
lineColor 线条颜色
lineWidth 线条宽度
lineStyle 线条样式
lineType 线条类型
startArrow 起点
endArrow 终点
toFront 置于顶层
toBack 置于底层
selectAll ctrl + a 全选
marquee 框选
edit 编辑
preview 预览
upload 上传
download 下载
language 语言
github Github
feedback 反馈

Reference

@antvis/g6

@alibaba/GGEditor

grapheditor

Thank

特别感谢@guozhaolong大佬的开源项目@guozhaolong/wfd

本项目参考、引用了@guozhaolong/wfd项目的部分实现,在此特别说明,以示感谢!

TODO

v3.0.0

  • *** 重构:基于 @antv/g6 v3.x 重构。
  • 工具栏:撤销
  • 工具栏:重做
  • 工具栏:复制
  • 工具栏:粘贴
  • 工具栏:清除
  • 工具栏:缩放
  • 工具栏:放大
  • 工具栏:缩小
  • 工具栏:适应全屏
  • 工具栏:实际大小
  • 工具栏:填充颜色
  • 工具栏:线条颜色
  • 工具栏:线条宽度
  • 工具栏:线条样式
  • 工具栏:线条类型
  • 工具栏:起点
  • 工具栏:终点
  • 工具栏:置于顶层
  • 工具栏:置于底层
  • 工具栏:框选
  • 工具栏:添加组
  • 工具栏:解除组
  • 工具栏:上传
  • 工具栏:下载
  • 工具栏:预览
  • 工具栏:全屏
  • 工具栏:语言
  • 热键
  • 右键菜单
  • 基础图形:Rectangle
  • 基础图形:Rounded Rectangle
  • 基础图形:Text
  • 基础图形:Textbox
  • 基础图形:Ellipse
  • 基础图形:Square
  • 基础图形:Circle
  • 基础图形:Process
  • 基础图形:Diamond
  • 基础图形:Parallelogram
  • 基础图形:Hexagon
  • 基础图形:Triangle
  • 基础图形:Cylinder
  • 基础图形:Cloud
  • 基础图形:Document
  • 基础图形:Internal Sotrage
  • 基础图形:Cube
  • 基础图形:Step
  • 基础图形:Trapezoid
  • 基础图形:Tape
  • 基础图形:Note
  • 基础图形:Card
  • 基础图形:Callout
  • 基础图形:Actor
  • 基础图形:Or
  • 基础图形:And
  • 基础图形:Data Storage
  • 高级图形

Contribution

我们目前接受 GitHub Pull Request ,并且所有开发提交的合并均通过 Pull Request 进行,故你可以直接点击该项目的 Fork 按钮得到你自己的 Fork ,在其上进行提交,并在修改完毕后直接通过 GitHub 网页发起 Pull Request 即可。对于 Pull Request 的介绍和使用方式,可以参阅 GitHub 帮助文档中的 “关于 Pull Request” 部分

感谢所有为此项目做出贡献的人们!

curiosity-hyf

License

MIT

Copyright (c) 2019-present, OXOYO

Contact

点击链接加入群【Web全栈QQ群】:https://jq.qq.com/?_wv=1027&k=53iWbrr

About

基于G6和Vue的可视化图形编辑器。A visual graph editor based on G6 and Vue.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 68.1%
  • Vue 27.0%
  • CSS 4.7%
  • HTML 0.2%