https://github.com/antvis/X6
🚀 JavaScript diagramming library that uses SVG and HTML for rendering.
https://github.com/antvis/X6
antv dag diagram diagramming erd erdiagram flowchart graph graph-editor javascript javascript-diagramming-library svg typescript uml-diagram
Last synced: 7 months ago
JSON representation
🚀 JavaScript diagramming library that uses SVG and HTML for rendering.
- Host: GitHub
- URL: https://github.com/antvis/X6
- Owner: antvis
- License: mit
- Created: 2019-11-14T05:56:07.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-19T02:12:10.000Z (about 1 year ago)
- Last Synced: 2024-10-29T17:43:21.592Z (about 1 year ago)
- Topics: antv, dag, diagram, diagramming, erd, erdiagram, flowchart, graph, graph-editor, javascript, javascript-diagramming-library, svg, typescript, uml-diagram
- Language: TypeScript
- Homepage: https://x6.antv.antgroup.com
- Size: 2.14 GB
- Stars: 5,715
- Watchers: 60
- Forks: 1,698
- Open Issues: 424
-
Metadata Files:
- Readme: README.en-us.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-node-based-uis - X6 - Diagramming library that uses SVG and HTML (Javascript Libraries / Renderers)
- awesome-list - X6
- awesome - Antvis X6
- awesome-web-cn - X6 - 一个使用 SVG 或者 Html 进行渲染的图标库，支持 Vue 、React 、原生 JavaScript ,支持构建流程图，UML 类图， DAG 图等多种图表 (Uncategorized / Uncategorized)
README
[简体中文](/README.md) | English
Graph Editing Engine Of AntV
JavaScript diagramming library that uses SVG and HTML for rendering
## Features
- 🌱 Easy-to-customize: based on well known SVG/HTML/CSS or React/Vue/Angular to custom nodes and edges
- 🚀 Out-of-the-box: built-in 10+ plugins, such as selection, dnd, redo/undo, snapline, minimap, etc.
- 🧲 Data-driven: base on MVC architecture, you can focus on data logic and business logic
- 💯 Highly-event-driven: you can react on any event that happens inside the graph
## Environment Support
- Modern browsers and Internet Explorer 11 (with polyfills)
- Server-side Rendering
| [
](http://godban.github.io/browsers-support-badges/)
IE / Edge | [
](http://godban.github.io/browsers-support-badges/)
Firefox | [
](http://godban.github.io/browsers-support-badges/)
Chrome | [
](http://godban.github.io/browsers-support-badges/)
Safari |
| --- | --- | --- | --- |
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions |
## Installation
```shell
# npm
$ npm install @antv/x6 --save
# yarn
$ yarn add @antv/x6
```
## Usage
```html
```
```ts
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,
})
```
## Links
- [Documents](https://x6.antv.antgroup.com/tutorial/about)
- [Samples](https://x6.antv.antgroup.com/examples)
- [Blog](https://www.yuque.com/antv/x6/gcinvi)
- [Versioning Release Note](https://www.yuque.com/antv/x6/bbfu6r)
- [FAQ](https://www.yuque.com/antv/x6/be9pfx)
- [Template](https://codesandbox.io/s/qosj0?file=/src/app.tsx)
- [awesome-x6](https://github.com/lloydzhou/awesome-x6)
## Development
```shell
# install deps and build
$ pnpm install
# enter the specified project development and debugging
cd packages/x6
pnpm run build:watch
# start example to see the effect
cd examples/x6-example-features
pnpm run start
```
## Contributing
To become a contributor, please follow our [contributing guide](/CONTRIBUTING.md). If you are an active contributor, you can apply to be a outside collaborator.
## License
The scripts and documentation in this project are released under the [MIT License](/LICENSE).