J’utilise depuis peu MaxGraph.js sous Next.js, pour créer des diagrammes techniques. MaxGraph.js est un Fork de la librairie MxGraph.js. Elle introduit des évolutions intéressantes.
Le développement de mxGraph à été stoppé le 09.11.2020.
J’ai utilisé la documentation, des exemples MxGraph.js pour comprendre la librairie, les fonctions et les objets.
Depuis peu, je suis en train de convertir des projets Draw2D , et mxGraph vers MaxGraph.
mxGraph 4.2.2
mxGraph is a JavaScript diagramming library that enables interactive graph and charting applications to be quickly created that run natively in any major browser that is supported by its vendor.
mxGraph est sous licence. Apache License 2.0.
La librairie à été crée en 2005.
La librairie a été utilisé pour créer Draw.IO . Une plateforme pour créer des diagrammes et des organigrammes
Le développement des sources mxGraph public à été stoppé le 09.11.2020.
mxGraph est une bibliothèque bien établie, mais son développement actif a été arrêté après son acquisition par JGraph Ltd. (créateurs de Diagrams.net).
( NOTE 09.11.2020 : Development on mxGraph has now stopped, this repo is effectively end of life.)
maxGraph V0.15.0
MaxGraph est un fork des sources MxGraph.
maxGraph est une bibliothèque TypeScript qui permet d’afficher et d’interagir avec des diagrammes vectoriels. À un niveau élevé, elle propose :
- Des nœuds, également appelés sommets, qui sont généralement représentés par des formes comme des rectangles.
- Des arêtes, qui peuvent être des lignes ou des flèches, reliant généralement un nœud à un autre.
Elle offre de nombreuses fonctionnalités de diagrammes que l’on pourrait attendre d’un logiciel de présentation comme Microsoft® PowerPoint™ ou LibreOffice® Impress, telles que la possibilité de redimensionner, déplacer ou faire pivoter des nœuds. Cependant, elle se concentre davantage sur les algorithmes de disposition automatique et les applications de la théorie des graphes. Elle est particulièrement adaptée aux logiciels nécessitant une personnalisation plus fine des fonctionnalités que les solutions prêtes à l’emploi.
La bibliothèque maxGraph n’utilise aucun logiciel tiers, ne nécessite aucun plugin et peut être intégrée à pratiquement n’importe quel framework (elle est en JavaScript natif).
maxGraph est le successeur de mxGraph, qui n’est plus maintenu. Initialement, elle propose les mêmes fonctionnalités que mxGraph, tout en ajoutant :
- Le support de TypeScript.
- Un package npm maintenu.
- Une version moderne, modulaire et tree-shakable de mxGraph, afin de réduire la taille totale du package.
Points clés :
- maxGraph est une bibliothèque TypeScript moderne et légère.
- Elle est conçue pour des applications nécessitant une personnalisation avancée et des algorithmes de graphes.
- Elle est compatible avec tous les frameworks grâce à son utilisation de JavaScript natif.
- Elle succède à mxGraph en apportant des améliorations comme le support de TypeScript et une architecture modulaire.
Voici un tableau de comparaison entre maxGraph et mxGraph .
Je vais comparer mxGraph (la bibliothèque originale) avec maxGraph.
| Critère | mxGraph | MaxGraph (hypothétique) |
|---|---|---|
| Origine | Bibliothèque JavaScript open source pour la création de diagrammes. | Évolution ou fork de mxGraph, ou une nouvelle bibliothèque inspirée par mxGraph. |
| Licence | Apache 2.0 (open source) | Dépend de l’évolution (peut être open source ou propriétaire). |
| Performance | Performances solides pour des graphes de taille moyenne. | Potentiellement optimisée pour des graphes plus grands ou des cas d’utilisation modernes. |
| Compatibilité | Compatible avec les anciens navigateurs et frameworks. | Peut cibler des navigateurs modernes et des frameworks récents (React, Vue, etc.). |
| API | API riche mais parfois complexe. | API potentiellement simplifiée ou modernisée. |
| Intégration | Intégration facile avec des frameworks comme Angular, React, etc. | Peut offrir une meilleure intégration avec des frameworks modernes. |
| Fonctionnalités | – Dessin de graphes – Export/import (XML, JSON) – Édition de graphes | Peut inclure des fonctionnalités supplémentaires comme le rendu WebGL ou des outils avancés. |
| Communauté | Communauté active mais mxGraph n’est plus maintenu activement. | Si MaxGraph est une évolution, la communauté pourrait être plus active et moderne. |
| Documentation | Documentation complète mais parfois difficile à naviguer. | Documentation potentiellement améliorée et mieux organisée. |
| Cas d’utilisation | Utilisé dans des applications comme Draw.io (maintenant Diagrams.net). | Peut cibler des cas d’utilisation plus modernes ou spécifiques. |
| Évolutivité | Adapté pour des graphes de taille moyenne. | Peut être optimisé pour des graphes très grands ou des applications complexes. |
Les évolutions d’un point de vue technique
J’ai vu des évolutions sur le nommage des composants, dans les fonctions.
Tableau 1 : Évolutions des noms de composants
| Composant mxGraph | Évolution possible (MaxGraph) | Description du changement |
|---|---|---|
mxGraph | MaxGraph ou Graph | Simplification du nom de la classe principale. |
mxCell | Cell ou Node | Terme plus générique pour représenter un nœud ou une cellule dans le graphe. |
mxEdge | Edge ou Connection | Simplification du nom pour représenter une arête ou une connexion. |
mxGeometry | Geometry ou ShapeGeometry | Nom plus court et plus intuitif pour la géométrie des éléments. |
mxGraphModel | GraphModel ou DataModel | Simplification du nom du modèle de données du graphe. |
mxEditor | Editor ou GraphEditor | Nom plus court pour l’éditeur de graphes. |
mxToolbar | Toolbar ou GraphToolbar | Simplification du nom pour la barre d’outils. |
mxWindow | Window ou Popup | Terme plus générique pour une fenêtre ou une popup. |
Tableau 2 : Évolutions des noms de fonctions
| Fonction mxGraph | Évolution possible (MaxGraph) | Description du changement |
|---|---|---|
mxGraph.insertVertex() | graph.addNode() | Terme plus intuitif pour ajouter un nœud. |
mxGraph.insertEdge() | graph.addEdge() | Terme plus intuitif pour ajouter une arête. |
mxGraph.getModel() | graph.getDataModel() | Clarification du rôle du modèle de données. |
mxGraph.getSelectionCells() | graph.getSelectedItems() | Terme plus générique pour les éléments sélectionnés. |
mxGraph.removeCells() | graph.deleteItems() | Simplification du nom pour supprimer des éléments. |
mxGraph.getDefaultParent() | graph.getRootLayer() | Clarification du rôle du parent par défaut (souvent une couche racine). |
mxGraph.setCellStyle() | graph.setItemStyle() | Terme plus générique pour appliquer un style à un élément. |
mxGraph.getCellAt() | graph.getItemAt() | Terme plus générique pour récupérer un élément à une position donnée. |
Tableau 3 : Évolutions des noms d’événements
| Événement mxGraph | Évolution possible (MaxGraph) | Description du changement |
|---|---|---|
mxEvent.CHANGE | EventType.DATA_CHANGE | Clarification du type d’événement (changement de données). |
mxEvent.ADD_CELLS | EventType.ITEMS_ADDED | Terme plus générique pour l’ajout d’éléments. |
mxEvent.REMOVE_CELLS | EventType.ITEMS_REMOVED | Terme plus générique pour la suppression d’éléments. |
mxEvent.CONNECT_CELL | EventType.CONNECTION_CREATED | Clarification de l’événement de création de connexion. |
mxEvent.DOUBLE_CLICK | EventType.ITEM_DOUBLE_CLICK | Clarification de l’événement de double-clic sur un élément. |
Tableau 4 : Évolutions des noms de styles et de propriétés
| Propriété mxGraph | Évolution possible (MaxGraph) | Description du changement |
|---|---|---|
mxConstants.STYLE_SHAPE | ShapeStyle.SHAPE_TYPE | Simplification et clarification du nom de la propriété. |
mxConstants.STYLE_FILLCOLOR | ShapeStyle.FILL_COLOR | Nom plus explicite pour la couleur de remplissage. |
mxConstants.STYLE_STROKECOLOR | ShapeStyle.STROKE_COLOR | Nom plus explicite pour la couleur de contour. |
mxConstants.STYLE_FONTCOLOR | TextStyle.FONT_COLOR | Clarification du style de texte. |
mxConstants.STYLE_EDGE | EdgeStyle.LINE_TYPE | Clarification du style des arêtes. |
Remarques :
- Ces évolutions sont basées sur des tendances courantes en matière de refactoring et de modernisation d’API.
- Les évolutions visent souvent à simplifier les noms, à les rendre plus intuitifs et à les aligner sur les conventions modernes de développement.
Vous trouverez aussi d’autres informations sur la migration de MxGraph vers MaxGraph .
maxGraph APIs are not fully compatible with mxGraph APIs. The concepts are the same, so experienced mxGraph users should be able to switch from mxGraph to maxGraph without issues.
For a complete guide, see the dedicated migration page.
Un regard sur le cloud computing 