mxgraphng

Purpose

mxgraphis an open-source client-side JavaScript library that is used to display interactive diagrams and graphs. The purpose of mxgraphng is to facilitate the process of importing mxgraph into an Angular project.

Installation

These installation instructions are for Linux operating systems.

Install node

To install the nodejs library, run the following in the command prompt:

sudo apt install nodejs

Install npm

To install the node package manager (npm), run the following in the command prompt:

sudo apt install npm

Install angular

Use npm to install the angular Command Line Interface (CLI):

npm install -g @angular/cli

Create an angular project

Use the angular CLI to create a new angular project:

ng new my-mxgraphng-app

Add mxgraphng to the angular project

Navigate to the root directory of your Angular project and install it with Angular's ng add command. This will run the Angular add Schematic that is shipped with this library.

cd my-mxgraphng-app
ng add mxgraphng

The add Schematic makes the following changes to the project:

• Install the mxgraph package in the current project.
• Create mxgraph.conf.js file in project root directory.
• Update the project's angular.json file to include the main mxgraph JavaScript file.

Example usage

mxgraphng contains a set of generate Schematics that create example interactive diagram components for your Angular project. The components generated by these schematics are meant to serve as an example of how to build your own custom diagram tools using mxgraph.

basiceditor

The basiceditor generate Schematic takes 3 optional arguments:

• projectName

  • Description: The name of the project to create the component in.
  • Default value: Default project

• path

  • Description: Path relative to the project root to create the component in.
  • Default value: Root path of the selected project

• name

  • Description: The name of the component that will be created.
  • Default value: basic-editor

ng generate mxgraphng:basiceditor

The result will be a folder with the name you chose for the component, located in the main project folder (unless you chose another location via the schematic's arguments).

Development

Version prerequisites

• node version 14.4.0
• npm version 6.14.5
• Angular version 9.1.6.

Clone the source code from GitHub

git clone https://github.com/Ex-Mente/mxgraphng

This will download the Angular workspace that contains the mxgraphng library. You can add an application to this workspace directly to create and test a diagram component with mxgraphng.