All posts tagged code

Diagramme UML généré par du texte : Mermaid et Nomnoml

La création de diagramme et de modélisation d’organisation est un vaste sujet. De très nombreuses solutions visuelles existent du célèbre draw.io à Microsoft Visio, de LibreOffice Draw à Powerpoint.

À l’occasion de l’exploration des océans de dépôts que sont Gitlab et Github, je suis tombé face à une typologie de flowchart que je n’avais pas alors encore approchée : les diagrammes UML générés par des scripts textuels.

Mermaid et Nomnoml sont 2 programmes qui vont vous permettre au travers d’une syntaxe textuelle de créer des schémas avec 2 grands avantages lors de leurs créations :

  • Grâce au format texte, il est beaucoup plus simple de suivre les modifications qui sont réalisées sur chacune des versions grâce un outil tel que Git. Simplicité de collaboration et légèreté au rendez-vous.
  • Plus besoin de se fatiguer à placer correctement les différents éléments. Le soft le fait pour vous (parfois le résultat est surprenant).
Suivi de modification du schéma Mermaid sous Gitlab

Les 2 frameworks sont proches mais présentent évidemment des différences :

  • Mermaid propose un grand choix de types de visualisations : Flowchart, Sequence diagram, Gantt diagram, User Journey Diagram et Class diagram experimental, Git graph, Entity Relationship Diagram en version encore expérimentale.
  • Nomnoml quant à lui se concentre sur les flowcharts et offre un grand nombre de liaisons et de formes de blocs. Il donne aussi la possibilité d’exporter le schéma en PNG et SVG.
Quelques lignes texte et un magnifique diagramme apparait !

Autre différence forte au-delà du style graphique que proposent les deux solutions :

Là ou Mermaid ne permet pas (sauf en version beta) de relier des conteneurs (nommés subgraph) entre eux mais uniquement des "fonctions" entre elles (qu’elles soient dans le même conteneur ou dans plusieurs), Nomnoml permet quant à lui de relier les conteneurs entre eux, mais pas des fonctions abritées dans différents conteneurs.

One, two et three ne peuvent être reliés sur Mermaid
Avec Nomnoml impossible de relier “foul mouth” avec “singing”

On trouve également des extensions pour entre autre Grav et WordPress.