jointjs vs mxgraph
Diagramming Libraries Comparison
3 Years
jointjsmxgraph
What's Diagramming Libraries?

Diagramming libraries are essential tools for creating and manipulating diagrams, flowcharts, and graphs in web applications. They provide developers with the ability to visually represent complex data structures, workflows, and relationships, enhancing user understanding and interaction. Both JointJS and mxGraph offer unique features and capabilities, catering to different needs in diagramming and visualization tasks. Choosing the right library depends on specific project requirements, such as ease of use, extensibility, and performance.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
jointjs19,931
5,0478.26 MB452 years agoMPL-2.0
mxgraph19,757
6,888-05 years agoApache-2.0
Feature Comparison: jointjs vs mxgraph

Ease of Use

  • jointjs:

    JointJS is designed with a user-friendly API, making it accessible for developers of all skill levels. Its intuitive interface allows for quick implementation of diagrams, with built-in shapes and connectors that simplify the creation process.

  • mxgraph:

    mxGraph has a steeper learning curve due to its extensive feature set and flexibility. While it offers powerful capabilities for creating complex diagrams, developers may need to invest more time to understand its API and configuration options.

Customization

  • jointjs:

    JointJS excels in customization, allowing developers to create unique shapes and styles easily. It supports custom rendering and provides a variety of built-in shapes, making it suitable for tailored diagramming solutions.

  • mxgraph:

    mxGraph offers extensive customization options, enabling developers to define their own shapes, styles, and behaviors. Its flexibility allows for the creation of highly specialized diagrams, but this can also lead to increased complexity in implementation.

Performance

  • jointjs:

    JointJS is optimized for performance in handling interactive diagrams, making it suitable for applications where user interaction is frequent. However, performance may vary with very large datasets or complex diagrams.

  • mxgraph:

    mxGraph is known for its high performance, especially when dealing with large graphs and complex diagrams. It efficiently manages rendering and updates, making it a solid choice for applications that require handling substantial amounts of data.

Integration

  • jointjs:

    JointJS integrates seamlessly with modern web frameworks like React and Angular, providing a straightforward way to incorporate diagramming capabilities into applications. Its modular design allows for easy integration with other libraries.

  • mxgraph:

    mxGraph can also be integrated into various web frameworks, but it may require more effort to set up due to its extensive configuration options. It is highly adaptable, making it suitable for diverse environments.

Documentation and Community Support

  • jointjs:

    JointJS has comprehensive documentation and a supportive community, making it easier for developers to find resources and examples. This can significantly reduce development time and enhance learning.

  • mxgraph:

    mxGraph has thorough documentation, but its community is smaller compared to JointJS. While it provides ample resources, developers may find fewer examples and community-driven support.

How to Choose: jointjs vs mxgraph
  • jointjs:

    Choose JointJS if you need a library that is easy to use and integrates well with modern web frameworks. It is particularly suitable for applications requiring interactive diagrams and custom shapes, as it offers a rich API for creating and manipulating elements.

  • mxgraph:

    Choose mxGraph if you require a powerful and feature-rich library that supports complex diagramming needs, such as large-scale graphs and extensive customization options. It is ideal for applications that demand high performance and flexibility in rendering large datasets.

README for jointjs

JointJS - JavaScript diagramming library powering exceptional UIs

Build Status Total Discussion NPM Version NPM License

JointJS is a tested and proven JavaScript/Typescript diagramming library that helps developers and companies of any size build visual and No-Code/Low-Code applications faster and with confidence. It’s a flexible tool from which a wide range of UIs can be created (interactive diagramming applications, drawing tools, data visualizations, UIs for monitoring systems, and many more). It can become the foundational layer of your next application and help you bring your idea to market in days, not months or years.

Use Cases

Further information, examples and documentation can be found at jointjs.com.

:1234: Get started with tutorials.

:bulb: To ask a question, share feedback, or engage in a discussion with other community members, visit our GitHub discussions.

:pen: More examples are available on CodePen.

:book: Check out our mind-map documentation.

Features

  • essential diagram elements (rect, circle, ellipse, text, image, path)
  • ready-to-use diagram elements of well-known diagrams (ERD, Org chart, FSA, UML, PN, DEVS, ...)
  • custom diagram elements based on SVG or programmatically rendered
  • connecting diagram elements with links or links with links
  • customizable links, their arrowheads and labels
  • configurable link shapes (anchors, connection points, vertices, routers, connectors)
  • custom element properties and data
  • import/export from/to JSON format
  • customizable element ports (look and position, distributed around shapes or manually positioned)
  • rich graph API (traversal, dfs, bfs, find neighbors, predecessors, elements at point, ...)
  • granular interactivity
  • hierarchical diagrams (containers, embedded elements, child-parent relationships)
  • element & link tools (buttons, status icons, tools to change the shape of links, ...)
  • highlighters (provide visual emphasis to your elements)
  • automatic layouts (arrange the elements and links automatically)
  • highly event driven (react on any event that happens inside the diagram)
  • zoom in/out
  • touch support
  • MVC architecture
  • SVG based
  • ... a lot more

Supported browsers

  • Latest Google Chrome (including mobile)
  • Latest Firefox
  • Latest Safari (including mobile)
  • Latest Microsoft's Edge
  • Latest Opera

Development Environment

If you want to work on JointJS locally, use the following guidelines to get started.

Dependencies

Make sure you have the following dependencies installed on your system:

Setup

Clone this git repository:

git clone https://github.com/clientIO/joint.git

Change into the joint directory:

cd joint

Install all NPM dependencies:

npm install

Generate build files from the source code:

grunt install

You are ready now to browse our demos:

cd demo

Tests

To run all tests:

grunt test

To run only the server-side tests:

grunt test:server

To run only the client-side tests:

grunt test:client

Lint

To check for linting errors in src and types directories:

npm run lint

To auto fix errors, run eslint for src and types directories:

npm run lint:fix

Code Coverage Reports

To output a code coverage report in HTML:

grunt test:coverage

To output a code coverage report in lcov format:

grunt test:coverage --reporter="lcov"

The output for all unit tests will be saved in the coverage directory.

Building Distribution Files

The dist directory contains pre-built distribution files. To re-build them, run the following:

grunt dist

Documentation

The source for the JointJS documentation (plus Geometry and Vectorizer libraries) are included in this repository; see the docs directory. The documentation can be built into stand-alone HTML documents like this:

grunt build:docs

The output of the above command can be found at build/docs.

Contributors

License

The JointJS library is licensed under the Mozilla Public License 2.0.

Copyright © 2013-2023 client IO