mxGraph usage in TypeScript projects

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • mxGraph

  • This article is the first one of a series about mxGraph, the Javascript diagramming library.

  • bpmn-visualization-js

    A TypeScript library for visualizing process execution data on BPMN diagrams

  • You might also find it useful in vanilla TypeScript applications, or libraries like bpmn-visualization. When my team started our development, we wanted to build a TypeScript library that uses mxGraph for rendering.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • angular-mxgraph

  • Example: https://github.com/diegogusava/angular-mxgraph/tree/fc284593b09c4db8c355d663d1189ecdb369b26c/src/mxtypes

  • DefinitelyTyped

    The repository for high quality TypeScript type definitions.

  • Using types from DefinitelyTyped is very easy. Once you add the types package as a dependency of your project, TypeScript is automatically able to read the types without any extra configuration. Unfortunately, although there is a request for adding mxGraph types to DefinitelyTyped, we found that there was no one working on it in 2020.

  • mxgraph-road-to-DefinitelyTyped

    Discontinued Community effort followup to provide mxgraph TypeScript type definitions / typings via DefinitelyTyped

  • If you are interested in more information, you can check this non-exhaustive list (last updated in mid-2020) that presents various solutions with information about their activity status and implementation choices.

  • mxgraph-type-definitions

    Discontinued mxgraph type definitions

  • This first started as mxgraph-type-definitions. Most parts of mxGraph were covered progressively, and types became more accurate thanks to user feedback. Projects like grafana-flowcharting began using it.

  • grafana-flowcharting

    Flowcharting, plugin for Grafana to create complexe visio's draws style like technical architectures, floorplan, diagrams, hierarchical schema based on draw.io

  • This first started as mxgraph-type-definitions. Most parts of mxGraph were covered progressively, and types became more accurate thanks to user feedback. Projects like grafana-flowcharting began using it.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
  • typed-mxgraph

    mxGraph typescript declarations

  • The mxGraph TypeScript integration was difficult and painful in the past, but in 2021 we now have a solution with typed-mxgraph. There is no more need for hacky solutions. mxGraph can be integrated into TypeScript projects as with any JavaScript library without native TypeScript support, and it's possible to get code assistance and TypeScript compiler checks.

  • ts-mxgraph

    Discontinued A Tiny CommonJS Wrapper for mxGraph

  • We initially started with our own ts-mxgraph fork, and we were forced to manage the types by ourselves. We struggled with out-of-date types and had to manage updates for our sole usage.

  • And now, we have recently fully switched to typed-mxgraph using examples like the mxgraph TypeScript example bundled with webpack.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts