# antvis/x6

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/antvis-x6).**

6,598 stars · 1,884 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/antvis/X6
- Homepage: https://x6.antv.antgroup.com
- awesome-repositories: https://awesome-repositories.com/repository/antvis-x6.md

## Topics

`antv` `dag` `diagram` `diagramming` `erd` `erdiagram` `flowchart` `graph` `graph-editor` `javascript` `javascript-diagramming-library` `svg` `typescript` `uml-diagram`

## Description

X6 is a JavaScript diagramming library and SVG graph rendering engine used to build interactive flowcharts, mind maps, and visual workflow editors. It provides a framework for defining customizable node and edge behaviors, utilizing a hybrid rendering approach that combines SVG and HTML.

The library decouples the visual graph representation from underlying business logic and data structures through a dedicated state management system. It allows for extensive extensibility via a registration mechanism for custom nodes, edges, and canvas tools.

The toolkit includes capabilities for automatic graph layouts, edge routing algorithms, and element animation. It supports large-scale graph rendering through virtual scrolling and asynchronous drawing, alongside editing tools such as lasso selection, alignment guides, and minimaps.

The framework supports server-side graph generation to improve initial page load times and browser compatibility.

## Tags

### Graphics & Multimedia

- [Interactive Diagramming Engines](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/interactive-diagramming-engines.md) — Provides a comprehensive engine for the manual creation and interactive editing of flowcharts, mind maps, and organizational charts. ([source](https://x6.antv.antgroup.com/))
- [Interactive Diagramming Libraries](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/visualization-frameworks/interactive-diagramming-libraries.md) — Serves as a comprehensive library for building interactive, browser-rendered diagrams like flowcharts and mind maps.
- [Custom Diagram Editor Development](https://awesome-repositories.com/f/graphics-multimedia/custom-diagram-editor-development.md) — Provides a toolkit for building custom visual editors for flowcharts and mind maps using SVG and HTML rendering.
- [Hybrid SVG-HTML Rendering Engines](https://awesome-repositories.com/f/graphics-multimedia/hybrid-svg-html-rendering-engines.md) — Implements a rendering engine that manages nodes and edges through a programmable canvas using both SVG and HTML.
- [Node and Edge Customizations](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/axis-appearance-configurations/node-appearance/node-and-edge-customizations.md) — Offers a framework for defining the appearance and behavior of nodes and edges using CSS and frontend frameworks.
- [Interactive Canvas Initialization](https://awesome-repositories.com/f/graphics-multimedia/canvas-rendering/canvas-dimensioning/interactive-canvas-initialization.md) — Provides a process for creating an interactive drawing area with configurable dimensions, zoom limits, and automatic resizing. ([source](https://x6.antv.antgroup.com/api/graph/graph))
- [Edge Routing Algorithms](https://awesome-repositories.com/f/graphics-multimedia/edge-routing-algorithms.md) — Implements orthogonal and curved edge routing algorithms to manage visual flow and avoid element overlaps. ([source](https://x6.antv.antgroup.com/examples))
- [Graph Layout Algorithms](https://awesome-repositories.com/f/graphics-multimedia/graph-layout-algorithms.md) — Provides automatic graph layout capabilities using elliptical, concentric circle, and tree patterns. ([source](https://x6.antv.antgroup.com/examples))
- [Graph Node Visualizations](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/custom-shape-rendering/graph-node-visualizations.md) — Renders complex data structures using specialized node styles, edge routing, and automated layout algorithms.
- [Large Scale Graph Rendering](https://awesome-repositories.com/f/graphics-multimedia/large-scale-graph-rendering.md) — Optimizing the display of massive datasets using virtual scrolling and asynchronous drawing to maintain browser performance.

### Development Tools & Productivity

- [Visual Diagram Editors](https://awesome-repositories.com/f/development-tools-productivity/diagramming-tools/visual-diagram-editors.md) — Provides a full toolkit for creating visual diagram editors with built-in alignment guides, minimaps, and selection tools.
- [Edge Path Calculations](https://awesome-repositories.com/f/development-tools-productivity/path-history-trackers/path-labeling/edge-path-calculations.md) — Computes geometric paths between node handles for curved and orthogonal edge rendering.

### Software Engineering & Architecture

- [Graph State Synchronization](https://awesome-repositories.com/f/software-engineering-architecture/graph-state-synchronization.md) — An architectural pattern that keeps the visual representation in sync with the underlying business logic and data. ([source](https://cdn.jsdelivr.net/gh/antvis/x6@master/README.md))
- [Logic-Rendering Decouplers](https://awesome-repositories.com/f/software-engineering-architecture/headless-logic-decoupling/logic-rendering-decouplers.md) — Decouples the visual graph representation from the underlying business logic and data models.
- [Registry-Based Extensibility](https://awesome-repositories.com/f/software-engineering-architecture/application-frameworks/application-framework-extensions/plugin-development-kits/source-customization/registry-based-extensibility.md) — Uses a central registration system to define custom node and edge behaviors and visual templates.
- [Virtualized Rendering](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/data-handling-throughput/large-dataset-optimizations/virtualized-rendering.md) — Optimizes the display of large diagrams by rendering only the elements currently visible within the viewport.
- [Container Nesting](https://awesome-repositories.com/f/software-engineering-architecture/workflow-nodes/hierarchical-nesting/container-nesting.md) — Supports nesting nodes within parent containers to manage movement restrictions and automatic resizing. ([source](https://x6.antv.antgroup.com/examples))

### User Interface & Experience

- [Canvas Pan and Zoom Controls](https://awesome-repositories.com/f/user-interface-experience/2d-panning-controllers/image-pan-and-zoom-controls/plot-pan-and-zoom-controls/canvas-pan-and-zoom-controls.md) — Implements interactive viewport manipulation for panning and zooming across the workflow canvas. ([source](https://x6.antv.antgroup.com/api/graph/graph))
- [Connectivity Graph State Managers](https://awesome-repositories.com/f/user-interface-experience/connectivity-graph-state-managers.md) — Provides a state management system that decouples the visual graph representation from the underlying business logic.
- [Spatial Graph Models](https://awesome-repositories.com/f/user-interface-experience/coordinate-based-positioning/spatial-graph-models.md) — Maintains a mathematical representation of positions and sizes to calculate element placement and collision.
- [Event-Driven Interaction Handlers](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/general-interaction-frameworks/interaction-models/event-driven-interaction-handlers.md) — Translates raw mouse and keyboard input events into application-specific state changes via a centralized event bus.
- [Hybrid Native-HTML UI Rendering](https://awesome-repositories.com/f/user-interface-experience/native-html-rendering-engines/hybrid-native-html-ui-rendering.md) — Renders visual elements using a hybrid approach, combining SVG for connections and HTML for complex node content.
- [Custom Node Geometries](https://awesome-repositories.com/f/user-interface-experience/custom-node-geometries.md) — Provides capabilities to define custom node shapes and appearance using SVG, HTML, and CSS. ([source](https://x6.antv.antgroup.com/en))
- [Visual Workflow Builders](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries/visual-workflow-builders.md) — Provides a graphical interface for constructing logic and data flow sequences via a drag-and-drop canvas.
- [Editor Extensibility Frameworks](https://awesome-repositories.com/f/user-interface-experience/editor-extensibility-frameworks.md) — Allows developers to register custom nodes, edges, and canvas tools to extend the editor's core functionality. ([source](https://x6.antv.antgroup.com/))
- [Interaction Controls](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/interaction-logic-hooks/interaction-controls/interaction-controls.md) — Defines high-level editor interaction logic, including node snapping, nesting, and overlap offsets during movement. ([source](https://x6.antv.antgroup.com/api/graph/graph))
- [Graph-State UI Components](https://awesome-repositories.com/f/user-interface-experience/node-based-ui-components/component-based-ui-integrations/graph-state-ui-components.md) — Develops specialized frontend components that synchronize a visual diagram state with underlying application data.
- [Node Grouping and Nesting](https://awesome-repositories.com/f/user-interface-experience/node-grouping-and-nesting.md) — Manages structural hierarchies where child nodes inherit movement and constraints from a container node.
- [Programmatic Element Editing](https://awesome-repositories.com/f/user-interface-experience/programmatic-element-editing.md) — Includes a suite of tools for modifying visual elements, including lasso selection, alignment guides, and minimaps. ([source](https://cdn.jsdelivr.net/gh/antvis/x6@master/README.md))
- [User Interaction Patterns](https://awesome-repositories.com/f/user-interface-experience/user-interaction-patterns.md) — Implements common diagramming interaction patterns such as box-selection for bulk dragging and context-aware menus. ([source](https://x6.antv.antgroup.com/examples))
- [Rendering Optimizations](https://awesome-repositories.com/f/user-interface-experience/virtual-rendering/rendering-optimizations.md) — Optimizes the rendering of large datasets through virtual scrolling and asynchronous drawing to maintain performance. ([source](https://x6.antv.antgroup.com/api/graph/graph))

### Data & Databases

- [Relationship Edge Styling](https://awesome-repositories.com/f/data-databases/connection-managers/redis/edge-connection-adapters/predefined-edge-types/relationship-edge-styling.md) — Implements visual customization for connections, including labels, custom markers, and rounded corners. ([source](https://x6.antv.antgroup.com/examples))

### Game Development

- [Custom Element Registrations](https://awesome-repositories.com/f/game-development/custom-component-type-registrations/custom-element-registrations.md) — Provides a registration mechanism for defining custom node and edge types within the diagramming framework. ([source](https://x6.antv.antgroup.com/en))