Wondering what’s next for npm?Check out our public roadmap! »

    @antv/x6
    TypeScript icon, indicating that this package has built-in type declarations

    1.18.5 • Public • Published

    X6 是 AntV 旗下的图编辑引擎

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

    MIT License Language PRs Welcome website build coverage Language grade: JavaScript

    NPM Package NPM Downloads NPM Dependencies Dependency Status devDependencies Status

    简体中文 | English

    特性

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

    安装

    使用 NPM/Yarn

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

    使用 CDN

    可以使用下面任意一个最新版本的 CDN 地址:

    <script src="https://unpkg.com/@antv/x6/dist/x6.js"></script>

    在生产环境中,建议使用指定版本号的链接,以避免版本更新带来的意外破坏:

    <script src="https://unpkg.com/@antv/x6@1.1.1/dist/x6.js"></script>

    快速使用

    Step 1: 指定渲染图的容器。

    <div id="container" style="width: 600px; height: 400px"></div>

    Step 2: 渲染节点和边。

    // 从 node_modules 引入
    import { Graph } from '@antv/x6'
    // 从 CND 引入时,我们暴露了 X6 这个全局变量
    // const { Graph } = X6
    
    // 创建 Graph 的实例
    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,
    })

    渲染结果如下。

    HelloWorld

    使用文档

    应用案例

    流程图

    流程图是常用用于表示业务流程。

    draw

    DAG 图

    DAG是有向无环图的缩写,它是一个有向,没有的图形。它最初是计算机领域中一种常见的数据结构。由于其独特的拓扑结构所带来的优良特性,常被用于处理动态规划、导航中寻找最短路径、数据压缩等算法。

    dag

    ERD 图

    实体关系图 (ERD) 显示了存储在数据库中的实体集之间的关系。实体集是类似实体的集合,这些实体可以定义其属性,通过定义实体、它们的属性并显示它们之间的关系。ER 图经常用来说明了数据库的逻辑结构。

    er

    如何交流

    如果你在使用的过程中碰到问题,可以先通过 issues 看看有没有类似的 bug 或者建议。欢迎提 issues 交流,也可以使用钉钉扫描下面二维码加入X6 交流群

    需要注意的是,提问题时请配上 CodeSandbox 的复现代码,方便快速定位和解决问题。

    X6 图可视化交流群

    如何开发

    我们使用了 lerna 来管理项目,目录结构如下:

    .
    ├── examples
    │   ├── x6-app-dag            # dag 图示例
    │   ├── x6-app-draw           # 流程图示例
    │   ├── x6-app-er             # ER 图示例
    │   └── x6-example-features   # 特性演示示例
    ├── packages
    │   ├── x6                    # X6
    │   ├── x6-react              # X6 的 React 封装(预留)
    │   ├── x6-react-components   # 配套 React 组件库
    │   ├── x6-react-shape        # 支持使用 React 渲染节点
    │   └── x6-vue-shape          # 支持使用 Vue 渲染节点
    └── sites
        ├── x6-sites              # 官网和文档
        ├── x6-sites-demos        # 文档中嵌入的 DEMO
        └── x6-sites-demos-helper # 构建文档 DEMO 的工具
    

    开始之前需要安装必要的全局依赖和初始化:

    # 全局安装 yarn 和 lerna 工具
    $ npm install yarn -g
    $ npm install lerna -g
    
    # 安装项目依赖和初始化构建
    $ yarn bootstrap

    然后可以进入到指定项目开发和调试。

    如本地启动 examples/x6-example-features 示例:

    cd examples/x6-example-features
    
    yarn start

    修复 X6 的 BUG 时可以开启 watch 模式,配合上面启动的本地 DEMO,实时查看修复效果:

    cd packages/x6
    
    // esm 模式,动态构建 es 产物
    yarn build:watch:esm
    
    // commonjs 模式,动态构建 lib 产物
    yarn build:watch:cjs

    如何贡献

    如果你在使用的过程中碰到问题,可以先通过 issues 看看有没有类似的 bug 或者建议。

    如需提交代码,请遵从我们的贡献指南。我们会收集贡献者的 Github 头像到下面贡献者清单中。

    Contributors

    开源协议

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

    Install

    npm i @antv/x6

    DownloadsWeekly Downloads

    1,770

    Version

    1.18.5

    License

    MIT

    Unpacked Size

    15.7 MB

    Total Files

    2695

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar