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

mxGraph 

 
 

Open Source JavaScript Diagramming Library

Generate Interactive Graph and Charting Applications via Open Source Free JavaScript Diagramming 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.

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.

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