mxGraph is a fully client side JavaScript diagramming library

Overview

NOTE 09.11.2020 : Development on mxGraph has now stopped, this repo is effectively end of life.

Known forks:

https://github.com/jsGraph/mxgraph

https://github.com/process-analytics/mxgraph

mxGraph

mxGraph is a fully client side JavaScript diagramming library that uses SVG and HTML for rendering.

The PHP model was deprecated after release 4.0.3 and the archive can be found here.

The unmaintained npm build is here

We don't support Typescript, but there is a project to implement this, with this repo currently used as the lead repo.

The mxGraph library uses no third-party software, it requires no plugins and can be integrated in virtually any framework (it's vanilla JS).

Getting Started

In the root folder there is an index.html file that contains links to all resources. You can view the documentation online on the Github pages branch. The key resources are the JavaScript user manual, the JavaScript examples and the JavaScript API specificiation.

Support

There is a mxgraph tag on Stack Overflow. Please ensure your questions adhere to the SO guidelines, otherwise it is likely to be closed.

If you are looking for active support, your better route is one of the commercial diagramming tools, like yFiles or GoJS.

History

We created mxGraph in 2005 as a commercial project and it ran through to 2016 that way. Our USP was the support for non-SVG browsers, when that advantage expired we moved onto commercial activity around draw.io. mxGraph is pretty much feature complete, production tested in many large enterprises and stable for many years.

Over time you can expect this codebase will break features against new browser releases, it's not advised to start new projects against this codebase for that reason.

Comments
  • Documentation

    Documentation

    Some things that either seemed unclear in documentation:

    lastTouchY is called lastTouchX

    /**
     * Variable: lastTouchX
     *
     * Holds the y-coordinate of the last touch event for double tap detection.
     */
    mxGraph.prototype.lastTouchY = 0;
    

    "mxSelectionModel" should be "mxGraphSelectionModel"?

    /**
     * Function: setSelectionModel
     * 
     * Sets the <mxSelectionModel> that contains the selection.
     */
    mxGraph.prototype.setSelectionModel = function(selectionModel)
    {
    	this.selectionModel = selectionModel;
    };
    

    mxGraph.prototype.isConnectable takes argument

    /**
     * Function: isConnectable
     * 
     * Returns true if the <connectionHandler> is enabled.
     */
    mxGraph.prototype.isConnectable = function(connectable)
    {
    	return this.connectionHandler.isEnabled();
    };
    

    Does mxGraph.prototype.isExtendParentsOnAdd take an argument?

    /**
     * Function: isExtendParentsOnAdd
     * 
     * Returns <extendParentsOnAdd>.
     */
    mxGraph.prototype.isExtendParentsOnAdd = function(cell)
    {
    	return this.extendParentsOnAdd;
    };
    

    source, target and directed missing descriptions

    /**
     * Function: getEdgesBetween
     * 
     * Returns the edges between the given source and target. This takes into
     * account collapsed and invisible cells and returns the connected edges
     * as displayed on the screen.
     * 
     * Parameters:
     * 
     * source -
     * target -
     * directed -
     */
    mxGraph.prototype.getEdgesBetween = function(source, target, directed)
    {
    	directed = (directed != null) ? directed : false;
    	var edges = this.getEdges(source);
    	var result = [];
    
    
    wontfix 
    opened by frenebo 81
  • NPM publishing

    NPM publishing

    The current package published to NPM is seriously broken.

    Based on your publishing script, what you are publishing to NPM here is the full mxgraph distribution. That is all source code, all build files, all resources in all languages. Additionally the package.json incorrectly contains webpack, grunt etc. as dependencies instead of devDependencies. Thus installing just the mxgraph package as a dependency in a newly created empty folder results in a total of 92 MB of files.

    The package.json further defines "main": "./javascript/dist/build.js" to be the entry point of the package. The dist folder is however excluded through the .gitignore file. Thus the mxgraph library actually cannot be included from npm in its current form - the package is broken. The github repository recently received a .npmignore file (https://github.com/jgraph/mxgraph/commit/78a73184b0fd0fcb138bc8ba425d47047282faa6) which mitigates this issue, this is however not in the bitbucket repository yet (although referenced in the deploy script).

    Your build script actually also pushes the js code to a separate mxgraph-js repository. This looks a bit more like what an npm package should contain but is also incompatible with npm usage. In order to be compatible with your documentation, the main file should include the UMD loader code you add during the grunt build process. Nevertheless it is of course a cleaner solution to directly publish to npm from the original code.

    In order to fix these issues I created a fork with a single additional commit on bitbucket: https://bitbucket.org/lgleim/mxgraph2

    Unfortunately I cannot create pull requests there and the github repo has a somewhat different structure.

    Since I am not familiar with all the other requirements to be fulfilled in order to execute the build.sh script, I was not able to test the code with your build script. The build does complete successfully with the following steps:

    git clone [email protected]:lgleim/mxgraph2.git
    cd mxgraph2
    sed "s/@VERSION@/3.9.2/" etc/build/mxgraph-package.json > package.json
    npm install
    # npm publish
    

    So I kindly ask you to review and manually merge my patch and (hopefully) to subsequently publish a working version of mxgraph to the npm registry.

    opened by lgleim 34
  • mxgraph 3.7.3 fails to install using npm

    mxgraph 3.7.3 fails to install using npm

    npm install of mxgraph 3.7.3 fails during 'grunt build' in the postinstall. The error output is shown below.

    The problem is that in the 3.7.3 release the javascript shipped under javascript/src/js is one big mxClient.js file instead of the individual files used in previous releases. The postinstall script runs grunt build which loads Gruntfile.js and tries to merge all of the javascript files into one file (dist/build.js) with a factory function to load it and export it . Line 14 of Gruntfile.js looks for the mxClient.include pattern in javascript/src/js/mxClient.js but doesn't find any and then tries to call map on undefined because the regular expression does not match anything.

    My workaround for now is to stick with version 3.7.2-2 as my code relies on the factory that the grunt build wraps around the mxgraph javscript.

    > [email protected] postinstall c:\dev\mx\mxweb\node_modules\mxgraph
    > grunt build
    
    Loading "Gruntfile.js" tasks...ERROR
    >> TypeError: Cannot read property 'map' of null
    Warning: Task "build" not found. Use --force to continue.
    
    Aborted due to warnings.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\
    fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":
    "darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    npm ERR! code ELIFECYCLE
    npm ERR! errno 3
    npm ERR! [email protected] postinstall: `grunt build`
    npm ERR! Exit status 3
    npm ERR!
    npm ERR! Failed at the [email protected] postinstall script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    npm ERR! A complete log of this run can be found in:
    
    opened by daddyman 34
  • Performance on loading \ inserting \ zooming in mxgraph

    Performance on loading \ inserting \ zooming in mxgraph

    Currently I try to work with pretty big amount of objects in mxgraph, like rendering 10000 shapes at once. In that case there lots of problems with rendering cells. Each cell updated in a sequence, which leads to hanging browser. It would be great to use something like Cork / Uncork in nodejs. I will call something like mxgraph.stopUpdate(), add lots of elements, loadXML etc. and mxgraph.resumeUpdate() after finishing massive changes. Unfortunately I can't find methods to control update behavior in mxgraph in documentation.

    enhancement 
    opened by Blucbo 29
  • npm install

    npm install

    Don't know why but when I do npm install mxgraph I'm unable to import "mxgraph"

    import {
        mxClient,
        mxGraph,
        mxRubberband,
        mxUtils,
        mxEvent
    } from "mxgraph";
    

    But the npm install mxgraph-js everything works fine (aside from the fact that this one is an outdated fork)

    Is anybody having issues with the npm install ? I'm currently trying to use it in a react project.

    opened by TheBrunoLopes 26
  • Offset in mouse selections when page is scrolled down

    Offset in mouse selections when page is scrolled down

    Apparently, any scroll in a page causes an offset for mouse events in the graph, making nearly impossible to use (in particular, creating new connections) when scrolled down the page. I was able to reproduce this behaviour in the example Helloport when making the browser window small enough to allow scrolling:

    image Offset in mouse events problem when page is scrolled

    image Working correctly when scroll is at the top of the page

    I found this problem in Google Chrome and Firefox.

    Moving and resizing components seems to be working fine.

    opened by angrykoala 22
  • npm build issues.

    npm build issues.

    Fixes #83 and #102 provided individual source files javascript/src/js are present instead of a single minified mxClient.js file when publishing to npm, also allows an npm install directly from the source.

    opened by NicCOConnor 19
  • mxgraph 3.7.5 js not installing via npm

    mxgraph 3.7.5 js not installing via npm

    I am using macOS Sierra 10.12.6, with node 8.4.0 and npm 5.3.0, when installing mxgraph using:

    $npm -S install mxgraph

    I get the following error:

    npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
    npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
    
    > [email protected] install /Users/Nigel/git/mxtest/public/js/node_modules/fsevents
    > node install
    
    [fsevents] Success: "/Users/Nigel/git/mxtest/public/js/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
    Pass --update-binary to reinstall or --build-from-source to recompile
    
    > [email protected] postinstall /Users/Nigel/git/mxtest/public/js/node_modules/mxgraph
    > grunt build
    
    Loading "Gruntfile.js" tasks...ERROR
    >> TypeError: Cannot read property 'map' of null
    Warning: Task "build" not found. Use --force to continue.
    
    Aborted due to warnings.
    npm ERR! code ELIFECYCLE
    npm ERR! errno 3
    npm ERR! [email protected] postinstall: `grunt build`
    npm ERR! Exit status 3
    npm ERR! 
    npm ERR! Failed at the [email protected] postinstall script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /Users/Nigel/.npm/_logs/2017-09-07T00_20_45_100Z-debug.log
    

    I have attached the associated log file too. Nb: I changed the .log to .txt to enable the upload.

    2017-09-07T00_20_45_100Z-debug.txt

    opened by nigel-daniels 12
  • npm package (latest version 4.2.0) factory method mxBasePath param not working

    npm package (latest version 4.2.0) factory method mxBasePath param not working

    the follow code to load mxgraph, but mxBasePath not working:

    import factory from 'mxgraph';
    const mx = factory({
          mxBasePath: 'assets',
    });
    

    image

    if set window.mxBasePath = 'assets' is working well.

    this demo can reappear the issues: https://stackblitz.com/edit/js-yjyqmw


    version: 4.2.0

    opened by hungtcs 11
  • Current npm package published is not working

    Current npm package published is not working

    For now, you can use this package: https://www.npmjs.com/package/@epicfaace/mxgraph

    But I'd like mxgraph to publish their latest version on the official npm repository.

    opened by epicfaace 11
  • npm install still not possible

    npm install still not possible

    In mxGraph 3.9.8 it is still not possible to install it via npm install.

    The file "main": "./javascript/dist/build.js", described in package.json doesn't exist in the uploaded npm package.

    WIth that issue an import is impossible within the browser

    import {
      mxGraph,
      mxUtils,
      mxStencilRegistry,
      mxConstants,
      mxStencil,
      mxGraphModel,
    } from 'mxgraph';
    

    throws an error that mxgraph is undefined

    opened by tobiastimm 11
Owner
JGraph
JGraph specialises in browser-based diagramming components and applications.
JGraph
a super simple, no-nonsense diagramming library written in react that just works

Introduction DEMO: http://projectstorm.cloud/react-diagrams DOCS (wip) https://projectstorm.gitbook.io/react-diagrams Docs are currently being worked

Storm 7.4k Jan 4, 2023
Processing Foundation 18.6k Jan 1, 2023
A server-side-rendered charting library for Fresh

fresh_charts A server side rendered charting library for Fresh based on Chart.js. Usage There are two main ways to render a chart. There is the JSX/TS

Deno 57 Jan 2, 2023
Java library for use with Chart.js javascript library

Chart.java Chart.java enables integration with the excellent Chart.js library from within a Java application. Usage example In Java: BarDataset datase

Marceau Dewilde 102 Dec 16, 2022
JavaScript 3D library.

three.js JavaScript 3D library The aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library. The current

Mr.doob 87.9k Jan 2, 2023
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Fabric.js 23.6k Jan 3, 2023
The JavaScript library for modern SVG graphics.

Snap.svg · A JavaScript SVG library for the modern web. Learn more at snapsvg.io. Follow us on Twitter. Install Bower - bower install snap.svg npm - n

Adobe Web Platform 13.6k Dec 30, 2022
JavaScript Vector Library

Raphaël: Cross-browser vector graphics the easy way Visit the library website for more information: http://raphaeljs.com https://dmitrybaranovskiy.git

Dmitry Baranovskiy 11.2k Jan 3, 2023
A JavaScript library dedicated to graph drawing

sigma.js - v1.2.1 Sigma is a JavaScript library dedicated to graph drawing, mainly developed by @jacomyal and @Yomguithereal. Resources The website pr

Alexis Jacomy 10.3k Jan 3, 2023
🔥 JavaScript Library for HTML5 canvas based heatmaps

heatmap.js Dynamic Heatmaps for the Web. How to get started The fastest way to get started is to install heatmap.js with bower. Just run the following

Patrick Wied 5.9k Jan 2, 2023
Cubism.js: A JavaScript library for time series visualization.

Cubism.js Cubism.js is a D3 plugin for visualizing time series. Use Cubism to construct better realtime dashboards, pulling data from Graphite, Cube a

Square 4.9k Jan 3, 2023
A javascript library that extends D3.js to enable fast and beautiful visualizations.

d3plus D3plus is a JavaScript re-usable chart library that extends the popular D3.js to enable the easy creation of beautiful visualizations. Installi

D3plus 1.6k Dec 2, 2022
A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser

jQuery Sparklines This jQuery plugin makes it easy to generate a number of different types of sparklines directly in the browser, using online a line

Gareth Watts 1.2k Jan 4, 2023
Ember Charts 3.5 2.3 L2 JavaScript A powerful and easy to use charting library for Ember.js

Ember Charts A charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to

Addepar 793 Dec 7, 2022
A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.

GraphicsJS GraphicsJS is a lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology. Overview Quick Start Articles

AnyChart 973 Jan 3, 2023
Simple yet powerful JavaScript Charting library built using d3.js

uvCharts Simple, robust, extensible JavaScript charting library built using d3 designed to help developers embed, build charts in less than couple of

Imaginea 267 May 20, 2021
Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.

roughViz.js is a reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser, based on D3v5, roughjs, and handy. Why? Use

Jared Wilber 6.4k Jan 4, 2023
:bar_chart: Re-usable, easy interface JavaScript chart library based on D3.js

billboard.js is a re-usable, easy interface JavaScript chart library, based on D3 v4+. The name "billboard" comes from the famous billboard chart whic

NAVER 5.4k Jan 1, 2023
danfo.js is an open source, JavaScript library providing high performance, intuitive, and easy to use data structures for manipulating and processing structured data.

Danfojs: powerful javascript data analysis toolkit What is it? Danfo.js is a javascript package that provides fast, flexible, and expressive data stru

JSdata 4k Dec 29, 2022