Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lloydzhou/awesome-x6
Awesome list of antv x6
https://github.com/lloydzhou/awesome-x6
List: awesome-x6
antv dag diagram flowchart graph graph-editor javascript svg x6
Last synced: about 1 month ago
JSON representation
Awesome list of antv x6
- Host: GitHub
- URL: https://github.com/lloydzhou/awesome-x6
- Owner: lloydzhou
- Created: 2023-02-28T02:35:00.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-08-22T02:26:43.000Z (about 1 year ago)
- Last Synced: 2024-04-16T15:08:03.480Z (5 months ago)
- Topics: antv, dag, diagram, flowchart, graph, graph-editor, javascript, svg, x6
- Homepage: https://x6.antv.antgroup.com/
- Size: 47.9 KB
- Stars: 25
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- ultimate-awesome - awesome-x6 - Awesome list of antv x6. (Other Lists / PowerShell Lists)
README
# awesome-x6 [](https://github.com/sindresorhus/awesome)
Awesome list of [@antv/x6](https://github.com/antvis/x6/)
> **Note**
>
> 带有「🇨🇳」的项目为中文资源，或包含中文文档。
>
> Items with “🇨🇳” are either in Chinese, or contain Chinese documentation.
- [About](#about)
- [Learn](#learn)
- [Official docs](#official-docs)
- [Frameworks](#frameworks)
- [React Component](#react-component)
- [Vue Component](#vue-component)
- [Angular Component](#angular-component)
- [Svelte Component](#svelte-component)
- [HTML shape](#html-shape)
- [Devtool](#devtool)
## About
[X6 JavaScript Diagramming Library](https://github.com/antvis/x6/)
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](https://github.com/antvis/x6/) 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。
## Learn
### Official docs
- 🇨🇳 [教程](https://x6.antv.antgroup.com/tutorial/about)
- 🇨🇳 [API](https://x6.antv.antgroup.com/api/graph/graph)
- [示例](http://x6.antv.antgroup.com/examples)
- [博客](https://www.yuque.com/antv/x6/huhla47wqalq5n7r)
- [更新日志](https://www.yuque.com/antv/x6/bbfu6r)
- [常见问题](https://www.yuque.com/antv/x6/tox1ukbz5cw57qfy)
- [CodeSanbox 模板](https://codesandbox.io/s/mo-ban-wchooy?file=/src/App.tsx)
- [1.x](https://x6.antv.vision/en)
- 🇨🇳 [1.x](https://antv-x6.gitee.io/zh/)
### Screencasts / Videos
- [ANTV X6 JavaScript Diagramming Library: Lets build a workflow editor (Drag and Drop Nodes)](https://www.youtube.com/watch?v=EMtcA5z1fAg)
## Frameworks
### React Component
- 🇨🇳 [xflow](https://github.com/antvis/xflow) - Professional graph editing application-level solution
- 🇨🇳 [@ant-design/flowchart](https://github.com/ant-design/ant-design-charts/blob/master/packages/flowchart/README.md) - Flowchart solutions, based on XFlow.
- 🇨🇳 [imove](https://github.com/i5ting/imove) - iMove 是一个逻辑可复用的，面向函数的，流程可视化的 JavaScript 工具库
- 🇨🇳 [react-x6](https://github.com/lloydzhou/react-x6) - Using custom [react-reconciler](https://github.com/facebook/react/tree/main/packages/react-reconciler) to render x6 object in react.
- 🇨🇳 [x6-graph/react](https://github.com/lloydzhou/x6-graph) - using context to wrap x6 graph as react component.
- 🇨🇳 [x6-hooks/react](https://github.com/lloydzhou/x6-hooks) - provide react hook `useGraphState` to manager state for @antv/x6
- 🇨🇳 [antv-x6-react](https://github.com/lloydzhou/antv-x6-react) - the react toolkit for graph analysis based on x6
### Vue Component
- 🇨🇳 [zsflow-editor](https://gitee.com/gfqy/zsflow-editor) - vue3+AntV X6 2.0版本 完成的流程设计器。内控业务属性的系统流程审批使用.
- 🇨🇳 [vue-x6](https://github.com/lloydzhou/vue-x6) @lloydzhou - Using [custom-renderer](https://vuejs.org/api/custom-renderer.html) to render x6 object in vue.
- 🇨🇳 [x6-graph/vue](https://github.com/lloydzhou/x6-graph) - using `provide`/`inject` api to wrap x6 graph as vue component.
- 🇨🇳 [x6-hooks/vue](https://github.com/lloydzhou/x6-hooks) - provide vue hook `useGraphState` to manager state for @antv/x6
- 🇨🇳 [antv-x6-vue](https://github.com/lloydzhou/antv-x6-vue) - the vue toolkit for graph analysis based on x6
- 🇨🇳 [antv-x6-vue2](https://github.com/g0ngjie/antv-x6-vue2) @g0ngjie - @antv/x6 基于 vue2 + composition-api 的图形化编辑器
- 🇨🇳 [vue-x6-flow](https://github.com/MyButifullyLife/vue-x6-flow) @MyButifullyLife - vue版流程图简易编辑器、简单易上手
- 🇨🇳 [vue-x6-flow](https://github.com/xw-an/vue-x6-flow) @xw-an - 基于vue2.x+antdesign+antv x6实现的流程图编辑器
- 🇨🇳 [vue-x6-flow](https://github.com/lxl19920401/vue-x6-flow) @lxl19920401 - 基于vue2.x+antdesign+antv x6实现的流程图编辑器
- 🇨🇳 [vue-x6-editor](https://gitee.com/martsforever-pot/vue-x6-editor) - 基于@antv/x6以及plain-ui-composition封装的Vue3.0可视化流程编辑组件
- 🇨🇳 [x6-flow](https://github.com/lourain/x6-flow) - flowchart base on X6 and Vue
- 🇨🇳 [vue-x6](https://github.com/AK081KA/vue-x6) @AK081KA - x6的vue实践
### Angular Component
- 🇨🇳 [ngx-x6-demo](https://github.com/Eve-Sama/ngx-x6-demo) @Eve-Sama - Demos of antv-x6 in angular
### Svelte Component
- 🇨🇳 [antv-x6-svelte](https://github.com/lloydzhou/antv-x6-svelte) - antv x6 svelte as web component
- 🇨🇳 [x6-svelte-shape](https://github.com/smallshen/x6-svelte-shape) - antv x6 svelte shape
### HTML shape
- 🇨🇳 [x6-html-shape](https://github.com/lloydzhou/x6-html-shape) - 非官方版自定义组件：可选择不依赖foreignObject挂载自定义组件，支持react18/react17/react-portal/vue2/vue3/vue-teleport/svelte等7种方式自定义节点
### Devtool
- 🇨🇳 [x6-devtool](https://github.com/antvis/X6/tree/master/packages/x6-devtool) - A devtool for @antv/x6 in chrome