Nocturnal Programmer's Machine

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

    1.34.0 • Public • Published

    简体中文 | English

    X6 是 AntV 旗下的图编辑引擎

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

    教程示例API

    build coverage Language grade: JavaScript NPM Package NPM Downloads

    MIT License Language PRs Welcome website

    特性

    • 🌱 极易定制:支持使用 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'
    // 从 CDN 引入时,我们暴露了 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

    使用文档

    应用案例

    Flow Dag MindMap BPMN Class ORG ER SwimLane Tree ELK

    如何交流

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

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

    X6 图可视化交流群1 X6 图可视化交流群2 X6 图可视化交流群3

    如何开发

    我们使用了 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 @digiforce-cloud/x6

    DownloadsWeekly Downloads

    2

    Version

    1.34.0

    License

    MIT

    Unpacked Size

    15.9 MB

    Total Files

    2704

    Last publish

    Collaborators

    • locngo-innoria
    • thodinh.sg