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.
What is X6 Library?
X6 is an excellent tool for JavaScript developers. It helps you create various diagrams with JavaScript commands. This library offers simple functions to customize components and nodes. It follows the MVC architecture, emphasizing data and business logic. X6 is open source, provided under the MIT license. It gives you the flexibility to expand graphs, nodes, edges, and tools to suit your needs. 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.
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 –saveYou 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. Here is a simple example that shows how to generate a diagram using X6 inside JavaScript applications.
How to Create a Diagram inside JavaScript Apps?
// Initialize the X6 graph
const { Graph } = X6;
const graph = new Graph({
container: document.getElementById('diagram-container'),
width: 800,
height: 600,
grid: true,
});
// Define a custom node shape
Graph.registerNode('custom-node', {
inherit: 'rect',
width: 80,
height: 40,
attrs: {
body: {
fill: '#4CAF50',
stroke: '#2E7D32',
strokeWidth: 2,
rx: 5, // Rounded corners
ry: 5,
},
label: {
text: 'Node',
fill: '#ffffff',
fontSize: 14,
refX: 0.5, // Center the text horizontally
refY: 0.5, // Center the text vertically
textAnchor: 'middle',
yAlignment: 'middle',
},
},
});
// Add nodes to the graph
const node1 = graph.addNode({
shape: 'custom-node',
x: 100,
y: 100,
label: 'Start',
});
const node2 = graph.addNode({
shape: 'custom-node',
x: 300,
y: 100,
label: 'Process',
});
const node3 = graph.addNode({
shape: 'custom-node',
x: 100,
y: 200,
label: 'End',
});
// Add edges (connections) between nodes
graph.addEdge({
source: node1,
target: node2,
attrs: {
line: {
stroke: '#333333',
strokeWidth: 2,
targetMarker: {
name: 'classic',
size: 8,
},
},
},
});
graph.addEdge({
source: node2,
target: node3,
attrs: {
line: {
stroke: '#333333',
strokeWidth: 2,
targetMarker: {
name: 'classic',
size: 8,
},
},
},
});
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. The following example demonstrates how software developers can create a chart using X6 inside JavaScript applications.
How to Create a Chart via JavaScript Library?
// Define the text for the sequence diagram
// Initialize the X6 graph
const { Graph } = X6;
const graph = new Graph({
container: document.getElementById('chart-container'),
width: 800,
height: 600,
grid: true,
});
// Define custom shapes for chart elements
Graph.registerNode('bar', {
inherit: 'rect',
width: 40,
height: 200,
attrs: {
body: {
fill: '#2196F3',
stroke: '#1565C0',
strokeWidth: 2,
},
label: {
text: 'Bar',
fill: '#333333',
fontSize: 12,
refX: 0.5,
refY: -10,
textAnchor: 'middle',
},
},
});
Graph.registerNode('axis', {
inherit: 'path',
width: 10,
height: 10,
attrs: {
path: {
stroke: '#333333',
strokeWidth: 2,
},
},
});
// Add axis lines to the chart
const xAxis = graph.addNode({
shape: 'axis',
x: 50,
y: 400,
attrs: {
path: {
d: 'M 0 0 L 600 0', // Horizontal line for X-axis
},
},
});
const yAxis = graph.addNode({
shape: 'axis',
x: 50,
y: 100,
attrs: {
path: {
d: 'M 0 0 L 0 300', // Vertical line for Y-axis
},
},
});
// Add bars to the chart
const bar1 = graph.addNode({
shape: 'bar',
x: 100,
y: 300,
height: 100,
attrs: {
label: {
text: '100',
},
},
});
const bar2 = graph.addNode({
shape: 'bar',
x: 200,
y: 250,
height: 150,
attrs: {
label: {
text: '150',
},
},
});
const bar3 = graph.addNode({
shape: 'bar',
x: 300,
y: 200,
height: 200,
attrs: {
label: {
text: '200',
},
},
});
