awesome-repositories.com
Blog
MCP
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectMCP serverAboutHow we rankPress
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
antvis avatar

antvis/X6

0
View on GitHub↗
6,598 stars·1,884 forks·TypeScript·MIT·39 viewsx6.antv.antgroup.com↗

X6

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.

Features

  • Interactive Diagramming Engines - Provides a comprehensive engine for the manual creation and interactive editing of flowcharts, mind maps, and organizational charts.
  • Interactive Diagramming Libraries - Serves as a comprehensive library for building interactive, browser-rendered diagrams like flowcharts and mind maps.
  • Visual Diagram Editors - Provides a full toolkit for creating visual diagram editors with built-in alignment guides, minimaps, and selection tools.
  • Custom Diagram Editor Development - Provides a toolkit for building custom visual editors for flowcharts and mind maps using SVG and HTML rendering.
  • Hybrid SVG-HTML Rendering Engines - Implements a rendering engine that manages nodes and edges through a programmable canvas using both SVG and HTML.
  • Node and Edge Customizations - Offers a framework for defining the appearance and behavior of nodes and edges using CSS and frontend frameworks.
  • Graph State Synchronization - An architectural pattern that keeps the visual representation in sync with the underlying business logic and data.
  • Logic-Rendering Decouplers - Decouples the visual graph representation from the underlying business logic and data models.
  • Canvas Pan and Zoom Controls - Implements interactive viewport manipulation for panning and zooming across the workflow canvas.
  • Connectivity Graph State Managers - Provides a state management system that decouples the visual graph representation from the underlying business logic.
  • Spatial Graph Models - Maintains a mathematical representation of positions and sizes to calculate element placement and collision.
  • Event-Driven Interaction Handlers - Translates raw mouse and keyboard input events into application-specific state changes via a centralized event bus.
  • Hybrid Native-HTML UI Rendering - Renders visual elements using a hybrid approach, combining SVG for connections and HTML for complex node content.
  • Relationship Edge Styling - Implements visual customization for connections, including labels, custom markers, and rounded corners.
  • Edge Path Calculations - Computes geometric paths between node handles for curved and orthogonal edge rendering.
  • Custom Element Registrations - Provides a registration mechanism for defining custom node and edge types within the diagramming framework.
  • Interactive Canvas Initialization - Provides a process for creating an interactive drawing area with configurable dimensions, zoom limits, and automatic resizing.
  • Edge Routing Algorithms - Implements orthogonal and curved edge routing algorithms to manage visual flow and avoid element overlaps.
  • Graph Layout Algorithms - Provides automatic graph layout capabilities using elliptical, concentric circle, and tree patterns.
  • Graph Node Visualizations - Renders complex data structures using specialized node styles, edge routing, and automated layout algorithms.
  • Large Scale Graph Rendering - Optimizing the display of massive datasets using virtual scrolling and asynchronous drawing to maintain browser performance.
  • Registry-Based Extensibility - Uses a central registration system to define custom node and edge behaviors and visual templates.
  • Virtualized Rendering - Optimizes the display of large diagrams by rendering only the elements currently visible within the viewport.
  • Container Nesting - Supports nesting nodes within parent containers to manage movement restrictions and automatic resizing.
  • Custom Node Geometries - Provides capabilities to define custom node shapes and appearance using SVG, HTML, and CSS.
  • Visual Workflow Builders - Provides a graphical interface for constructing logic and data flow sequences via a drag-and-drop canvas.
  • Editor Extensibility Frameworks - Allows developers to register custom nodes, edges, and canvas tools to extend the editor's core functionality.
  • Interaction Controls - Defines high-level editor interaction logic, including node snapping, nesting, and overlap offsets during movement.
  • Graph-State UI Components - Develops specialized frontend components that synchronize a visual diagram state with underlying application data.
  • Node Grouping and Nesting - Manages structural hierarchies where child nodes inherit movement and constraints from a container node.
  • Programmatic Element Editing - Includes a suite of tools for modifying visual elements, including lasso selection, alignment guides, and minimaps.
  • User Interaction Patterns - Implements common diagramming interaction patterns such as box-selection for bulk dragging and context-aware menus.
  • Rendering Optimizations - Optimizes the rendering of large datasets through virtual scrolling and asynchronous drawing to maintain performance.
  • Diagramming And UI Libraries - SVG and HTML-based diagramming and graph library.

Star history

Star history chart for antvis/x6Star history chart for antvis/x6

How this analysis was created: This summary and feature list are AI-generated from collected project material and can contain mistakes. Stars, license and language are imported from GitHub. Inclusion does not mean that we have tested or audited this project. Check the source documentation for any feature you depend on. Learn more on our About page.

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI

Projects sharing features with X6

These projects share indexed features with X6. Shared tags can include platform or build tooling; verify the primary use case before treating a result as a replacement.
  • didi/logicflowdidi avatar

    didi/LogicFlow

    11,441View on GitHub↗

    LogicFlow is an SVG-based flowchart editing framework and visual graph editor used for building customizable business process diagrams. It serves as a customizable diagramming engine for rendering business process models, entity relationship diagrams, and unified modeling language charts. The system is characterized by a plugin-based architecture that allows developers to define specialized graphical elements and register pluggable modules. A distinctive feature is its overlay system, which positions standard HTML components on top of the SVG canvas to create interactive menus and control pan

    TypeScriptbpmndiagramdiagramming
    View on GitHub↗11,441
  • bcakmakoglu/vue-flowbcakmakoglu avatar

    bcakmakoglu/vue-flow

    6,338View on GitHub↗

    Vue Flow is a TypeScript library for building interactive node-based editors and flowcharts. It provides the core infrastructure for creating diagrams where users can drag, select, and connect nodes with edges, supporting pan and zoom navigation of the canvas. The library offers extensive control over graph behavior and appearance, including the ability to customize connection lines, define custom edge types, and configure zoom constraints and viewport defaults. It includes built-in components like a minimap for navigation, zoom controls, and a fit-view button, along with features for node re

    TypeScriptdiagramsflowflowchart
    View on GitHub↗6,338
  • alibaba/butterflyalibaba avatar

    alibaba/butterfly

    4,649View on GitHub↗

    Butterfly is an interactive graph visualization library and SVG-based diagramming engine used to build node-based workflow designers and visual flow editors. It provides a framework for rendering interconnected nodes, edges, and groups to model technical architectures, business processes, and data-driven workflows. The project is distinguished by its ability to integrate custom UI components as graph nodes and its specialized support for data lineage visualization. It enables the mapping of relationships between data fields, tables, and business entities to track provenance and monitor workfl

    JavaScript
    View on GitHub↗4,649
  • northwoodssoftware/gojsNorthwoodsSoftware avatar

    NorthwoodsSoftware/GoJS

    8,447View on GitHub↗

    GoJS is a JavaScript diagramming library and canvas-based visualization engine used to build interactive flowcharts, organizational charts, and network diagrams. It functions as a data-driven framework that binds JavaScript data models to visual elements, enabling bidirectional synchronization between the underlying data and the graphical representation. The library features a comprehensive graph layout engine capable of automatically arranging nodes into trees, grids, circles, or force-directed layouts. It distinguishes itself through a template-based system for generating visual parts and a

    HTMLcanvaschartcharts
    View on GitHub↗8,447
Compare all 30 related projects→

Frequently asked questions

What does antvis/x6 do?

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.

What are the main features of antvis/x6?

The main features of antvis/x6 are: Interactive Diagramming Engines, Interactive Diagramming Libraries, Visual Diagram Editors, Custom Diagram Editor Development, Hybrid SVG-HTML Rendering Engines, Node and Edge Customizations, Graph State Synchronization, Logic-Rendering Decouplers.

Which projects share features with antvis/x6?

Projects with overlapping indexed features include: didi/logicflow — LogicFlow is an SVG-based flowchart editing framework and visual graph editor used for building customizable business… bcakmakoglu/vue-flow — Vue Flow is a TypeScript library for building interactive node-based editors and flowcharts. It provides the core… alibaba/butterfly — Butterfly is an interactive graph visualization library and SVG-based diagramming engine used to build node-based… northwoodssoftware/gojs — GoJS is a JavaScript diagramming library and canvas-based visualization engine used to build interactive flowcharts,… jsplumb/jsplumb — jsplumb is a JavaScript diagramming library and visual connectivity engine used to draw draggable connections between… jgraph/mxgraph — mxgraph is a client-side graph visualization tool and JavaScript diagramming library. It functions as an SVG-based…