Our great sponsors
-
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.
-
mxgraph-road-to-DefinitelyTyped
Discontinued Community effort followup to provide mxgraph TypeScript type definitions / typings via DefinitelyTyped
-
grafana-flowcharting
Flowcharting, plugin for Grafana to create complexe visio's draws style like technical architectures, floorplan, diagrams, hierarchical schema based on draw.io
-
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.
This article is the first one of a series about mxGraph, the Javascript diagramming library.
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.
Example: https://github.com/diegogusava/angular-mxgraph/tree/fc284593b09c4db8c355d663d1189ecdb369b26c/src/mxtypes
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.
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.
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.
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.
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.
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.