Free JavaScript Library to Generate & Eidt Popular Diagrams

Free JavaScript Library to Create & Edit different kinds of diagrams. It allows rapid construction of DAG diagrams, ER diagrams, flowcharts & more.

X6 is a very useful JavaScript diagramming library that enables software developers to work with different types of diagrams using JavaScript commands. The library provides very easy to use functions for components and node customization. The library is based on MVC architecture and mainly focuses on data logic as well as business logic. This library and documentation are open source and are freely available under the MIT license.

The library is very flexible and allows users to extend graphs, nodes, edges, and tools with ease. The library is fully event-driven and gives developers the ability to react to any event that happens inside the graph. It supports the rapid construction of DAG diagrams, ER diagrams, flowcharts, and other applications. The X6 library is very stable and based on well-known SVG/HTML/CSS or React/Vue to custom nodes and edges.

The library has included support for several important features, such as adding new nodes, customizing existing nodes, switch interacting, limiting connected edges, adding and wrapping text, adding or removing ports dynamically, connecting to a port, labeling a port, embedding nodes, embed node by drag and drop, use markers, custom markers with path and much more. The library natively supports different kinds of shapes such as rectangles, circles, ellipses, paths, polygons, cylinders and more.

At A Glance

An overview of X6 features.

Features Overview

Generate diagram
Create charts
Managing diagram
SVG for rendering
HTML for rendering
Sequence diagrams
ER diagram
UML Class diagram
Statechart diagrams
Custom Element

X6 supports popular compression file formats listed below.

Reader

Writer

TXT, SVG

Platform Independence

X6only requires Java run-time.

JavaScript

Getting Started with X6

The suggested way to install X6 stable release is using NPM. Please use the following command for a smooth installation

Install X6 via NPM

 $ npm install @antv/x6 –save

You can download the compiled shared library from github repository.

Create and Manage Diagram via JavaScript API

The open source X6 library allows software developers to create multiple types of diagrams with ease inside their own JavaScript apps. The library has included support for built-in shapes which can be used to draw custom diagrams with ease. You can draw sequence diagrams, ER diagrams, UML Class diagrams, and UML statechart diagrams. You can also easily design logic circuits, organizational charts, Finite state machines, puzzles, chess, and much more.

Custom Element Support

The open source X6 library has included built-in elements that can be used to create diagrams inside JavaScript apps. There are several default shapes available such as rectangles, text, circles, ellipses, images, paths, etc. These can be used to draw a drawing. You can also create new elements from the scratch.

Create and Manage Charts via JavaScript

The X6 library has provided complete support for generating as well as managing charts using JavaScript code. The library has included support for several types of charts such as Line, Bar, Area, Combo charts, Pie & Donut charts, and Knobs. The library also provides several functions related to chart manipulation such as resizing, rotating, connecting to other elements, and so on.