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: about 2 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 5 years ago)
• Default Branch: master
• Last Pushed: 2024-05-21T05:53:50.000Z (4 months ago)
• Last Synced: 2024-05-21T17:10:07.104Z (4 months 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.11 GB
• Stars: 5,422
• Watchers: 60
• Forks: 1,634
• Open Issues: 337
• 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-x6 - X6
• awesome-web - x6

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).