Awesome

awesome-x6

Awesome list of @antv/x6

Note

带有「🇨🇳」的项目为中文资源，或包含中文文档。

Items with “🇨🇳” are either in Chinese, or contain Chinese documentation.

• About
• Learn
  • Official docs
• Frameworks
  • React Component
  • Vue Component
  • Angular Component
  • Svelte Component
  • HTML shape
  • Devtool

About

X6 JavaScript Diagramming Library X6 is AntV's diagram editing engine, which provides a series of easy-to-use interactive components and node customization capabilities to facilitate the rapid construction of DAG diagrams, ER diagrams, flowcharts and other applications

X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。

Learn

Official docs

• 🇨🇳 教程
• 🇨🇳 API
• 示例
• 博客
• 更新日志
• 常见问题
• CodeSanbox 模板
• 1.x
• 🇨🇳 1.x

Screencasts / Videos

• ANTV X6 JavaScript Diagramming Library: Lets build a workflow editor (Drag and Drop Nodes)

Frameworks

React Component

• 🇨🇳 xflow - Professional graph editing application-level solution
• 🇨🇳 @ant-design/flowchart - Flowchart solutions, based on XFlow.
• 🇨🇳 imove - iMove 是一个逻辑可复用的，面向函数的，流程可视化的 JavaScript 工具库
• 🇨🇳 react-x6 - Using custom react-reconciler to render x6 object in react.
• 🇨🇳 x6-graph/react - using context to wrap x6 graph as react component.
• 🇨🇳 x6-hooks/react - provide react hook useGraphState to manager state for @antv/x6
• 🇨🇳 antv-x6-react - the react toolkit for graph analysis based on x6

Vue Component

• 🇨🇳 zsflow-editor - vue3+AntV X6 2.0版本 完成的流程设计器。内控业务属性的系统流程审批使用.
• 🇨🇳 vue-x6 @lloydzhou - Using custom-renderer to render x6 object in vue.
• 🇨🇳 x6-graph/vue - using provide/inject api to wrap x6 graph as vue component.
• 🇨🇳 x6-hooks/vue - provide vue hook useGraphState to manager state for @antv/x6
• 🇨🇳 antv-x6-vue - the vue toolkit for graph analysis based on x6
• 🇨🇳 antv-x6-vue2 @g0ngjie - @antv/x6 基于 vue2 + composition-api 的图形化编辑器
• 🇨🇳 vue-x6-flow @MyButifullyLife - vue版流程图简易编辑器、简单易上手
• 🇨🇳 vue-x6-flow @xw-an - 基于vue2.x+antdesign+antv x6实现的流程图编辑器
• 🇨🇳 vue-x6-flow @lxl19920401 - 基于vue2.x+antdesign+antv x6实现的流程图编辑器
• 🇨🇳 vue-x6-editor - 基于@antv/x6以及plain-ui-composition封装的Vue3.0可视化流程编辑组件
• 🇨🇳 x6-flow - flowchart base on X6 and Vue
• 🇨🇳 vue-x6 @AK081KA - x6的vue实践

Angular Component

• 🇨🇳 ngx-x6-demo @Eve-Sama - Demos of antv-x6 in angular

Svelte Component

• 🇨🇳 antv-x6-svelte - antv x6 svelte as web component
• 🇨🇳 x6-svelte-shape - antv x6 svelte shape

HTML shape

• 🇨🇳 x6-html-shape - 非官方版自定义组件：可选择不依赖foreignObject挂载自定义组件，支持react18/react17/react-portal/vue2/vue3/vue-teleport/svelte等7种方式自定义节点

Devtool

• 🇨🇳 x6-devtool - A devtool for @antv/x6 in chrome