1. Products
  2.   Diagram
  3.   JavaScript
  4.   mxGraph 

mxGraph 

 
 

Create & Merge Two Graphs via Open Source JavaScript Library

Open Source Free JavaScript Diagramming Library enables Developers to Generate Interactive Graph and Charting Applications, Create New or Merge Two Graphs and Render SVG & HTML Diagram via JS API.

What is mxGraph Library?

mxGraph is an open source JavaScript diagramming library that provides functionality for rendering SVG and HTML diagrams. No third-party software is required to use mxGraph library. The other good thing is that it requires no plugins and can be integrated into virtually any framework. mxGraph provides features intended to display interactive diagrams and graphs. The API provides all the commonly required functionality to draw, interact with and associate a context with a diagram.

The API uses a very common architecture, it requires a web server having the ability to handle HTML pages and a web browser that supports JavaScript. It primarily uses one JavaScript file that contains all library functionality. That file is loaded into an HTML web page in a JavaScript section and executes in an HTML container in the browser

Previous Next

Getting Started with mxGraph

The recommended way to install mxGraph is via npm, it is available via the npm package manager. To use mxGraph as a dependency, use npm install.

Install mxGraph via npm

npm install mxgraph --save

Generate Graphs via JavaScript API

The open source mxGraph library provides functionality for creating a diagram or graphs using JavaScript. It also supports modifying complex graphs by creating new graph editors or customizing them. First, you need to create a graph inside the given container and then you can easily add cells to the model to build the graph. You can easily add diagram titles and place notes over multiple participants. The library also provides additional features like visual effects, user-interface control, and more.

How to Create a Graph via JavaScript Library?

// Initialize the mxGraph library
mxBasePath = 'https://cdn.jsdelivr.net/npm/mxgraph/javascript/src';
mxLoadResources = false;

// Create the graph container
const container = document.getElementById('graph-container');
const graph = new mxGraph(container);

// Enable panning and zooming
graph.setPanning(true);
new mxRubberband(graph);

// Get the default parent for inserting new cells
const parent = graph.getDefaultParent();

// Start a transaction to group changes
graph.getModel().beginUpdate();
try {
    // Add vertices (nodes) to the graph
    const vertex1 = graph.insertVertex(parent, null, 'Node 1', 20, 20, 80, 30);
    const vertex2 = graph.insertVertex(parent, null, 'Node 2', 200, 20, 80, 30);
    const vertex3 = graph.insertVertex(parent, null, 'Node 3', 20, 150, 80, 30);

    // Add edges (connections) between vertices
    graph.insertEdge(parent, null, 'Edge 1', vertex1, vertex2);
    graph.insertEdge(parent, null, 'Edge 2', vertex1, vertex3);
} finally {
    // End the transaction
    graph.getModel().endUpdate();
}

Merging Two Graphs via JavaScript

mxGraph enables computer programmers to merge two graphs inside their own JavaScript applications. First of all, you need to create a sample graph inside the given container. Please makes all cells round with a white, bold label. Now please create the second graph model without a container. Add cells to the target model in a single step using custom ids for the vertices. Now you can merge the model from the second graph into the model of the first graph. Here is a simple example that shows how to merge two graphs, you can copy cells from one graph and paste them into another.

How to Merge Two Graphs via JavaScript Library?

// Create a second graph
const graph2 = new mxGraph(container);
const parent2 = graph2.getDefaultParent();

graph2.getModel().beginUpdate();
try {
    const vertex4 = graph2.insertVertex(parent2, null, 'Node 4', 400, 20, 80, 30);
    const vertex5 = graph2.insertVertex(parent2, null, 'Node 5', 400, 150, 80, 30);
    graph2.insertEdge(parent2, null, 'Edge 3', vertex4, vertex5);
} finally {
    graph2.getModel().endUpdate();
}

// Merge the second graph into the first graph
graph.getModel().beginUpdate();
try {
    const cells = graph2.getChildCells(parent2);
    graph.addCells(cells, parent);
} finally {
    graph.getModel().endUpdate();
}

Drawing Grid using JavaScript

The mxGraph library enables software developers to draw a grid dynamically inside their own JavaScript applications. You can easily draw a grid dynamically using HTML 5 canvas. First please creates the graph inside the given container and Create a grid dynamically that requires a canvas. You need to modify event filtering to accept canvas as a container. Now clears the background if required and sets the distance of the grid lines in pixels. Now draws the actual grid.

 English