Introduce

X6 is an HTML and SVG-Based graph editing engine that provides low-cost customization capabilities and out-of-the-box built-in extensions that allow us to quickly build applications such as DAG、ER、FlowChart、BPMN and so on.

Features

Node and edge are easy to customize

X6 supports using SVG and HTML to render node content. On this basis, we can also use React and Vue components to render nodes, which will be very convenient in the development. For example, we have a new requirement: add a right-click menu to the node. It would be more complicated to implement using SVG, We can easily implement it with react node. We can use the React render package @antv/x6-react-shape that comes with X6.

We can use the router to define the edge shape. For example, the metro router can make the edge look like the subway track diagram.

Rich interaction

The x6 has built-in connect interaction, embed interaction, highlight interaction and even tool interaction, For example, I can highlight the port during the connection or move the tool to adjust the edge.

Plugins out of the box

The x6 has built-in plugins for commonly used graph editing applications, such as transform, snapline, clipboard, keyboard, history, selection etc. For example, we can use the dnd plugin to drag and drop components from the flowchart component library to the graph.

Matching ui components

Building a complex graph editing application also needs to use UI components such as Menubar, Toolbar, Dropdown, ContextMenu, Splitbox, etc. We provide some of these React components in @antv/x6-react-components.

Excellent performance

X6 has a lot of performance improvements, such as asynchronous rendering, in-view rendering, both first screen and interactive, and the new rendering engine is more than 5 times faster than the general purpose SVG rendering engine. You can experience the rendering performance here.

Powerful layout

X6 fully reuses the layout capability of G6, and makes the adaptation of data format, so it is also very convenient to use the layout function in X6.

Conclusion

Thank you for reading, and thank you to all the developers who have used X6 and even contributed to the community. X6 is still exploring the graphical editing direction, and it is you who have made the further development of X6 possible. We will invest in the future development with greater enthusiasm. Finally, hope you can add stars to our github.