28 Star 220 Fork 54

antv / X6

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 4.44 KB
一键复制 编辑 原始数据 按行查看 历史
newbyvector 提交于 2023-06-17 22:43 . chore: prettierrc all files (#3688)

简体中文 | English

flow

X6 是 AntV 旗下的图编辑引擎

提供简单易用的节点定制能力和开箱即用的交互组件,方便我们快速搭建流程图、DAG 图、ER 图等图应用

build NPM Package NPM Downloads

MIT License Language PRs Welcome website

特性

  • 🌱  极易定制:支持使用 SVG/HTML/React/Vue/Angular 定制节点样式和交互
  • 🚀  开箱即用:内置 10+ 图编辑配套扩展,如框选、对齐线、小地图等
  • 🧲  数据驱动:基于 MVC 架构,用户更加专注于数据逻辑和业务逻辑
  • 💯  事件驱动:完备的事件系统,可以监听图表内发生的任何事件

兼容环境

  • 现代浏览器
  • 支持服务端渲染。
Firefox
Firefox
Chrome
Chrome
Safari
Safari
last 2 versions last 2 versions last 2 versions

安装

# npm
$ npm install @antv/x6 --save

# yarn
$ yarn add @antv/x6

示例

<div id="container" style="width: 600px; height: 400px"></div>
import { Graph } from '@antv/x6'

const graph = new Graph({
  container: document.getElementById('container'),
  grid: true,
})

const source = graph.addNode({
  x: 300,
  y: 40,
  width: 80,
  height: 40,
  label: 'Hello',
})

const target = graph.addNode({
  x: 420,
  y: 180,
  width: 80,
  height: 40,
  label: 'World',
})

graph.addEdge({
  source,
  target,
})

链接

本地开发

# 安装项目依赖和初始化构建
$ pnpm install

# 进入到指定项目开发和调试
cd packages/x6
pnpm run build:watch

# 启动 example 查看效果
cd examples/x6-example-features
pnpm run start

参与共建

如果希望参与到 X6 的开发中,请遵从我们的贡献指南。如果你贡献度足够活跃,你可以申请成为社区协作者。

Contributors

开源协议

该项目的代码和文档基于 MIT License 开源协议。

TypeScript
1
https://gitee.com/antv/X6.git
git@gitee.com:antv/X6.git
antv
X6
X6
master

搜索帮助

53164aa7 5694891 3bd8fe86 5694891