Présentation sur HN : une interface graphique pour éditer les diagrammes de classes Mermaid

Une interface graphique pour l’édition des diagrammes de classes Mermaid

• Atouts des diagrammes Mermaid : les diagrammes Mermaid, qui permettent de représenter rapidement des schémas complexes, sont devenus encore plus intuitifs et faciles à éditer pour les diagrammes de classes grâce à une mise à jour récente. Cette nouvelle fonctionnalité étend l’éditeur visuel pour prendre en charge l’interaction directe avec les diagrammes de classes et fournit divers outils permettant aux utilisateurs d’améliorer leur expérience de création de diagrammes.

Qu’est-ce qu’un diagramme de classes ?

• Définition d’un diagramme de classes : il s’agit d’un type d’UML (langage de modélisation unifié) qui modélise la structure d’un système en montrant les classes, les attributs, les méthodes et les relations entre objets. C’est un outil essentiel de la conception orientée objet, qui aide à visualiser la manière dont les différentes parties d’un système interagissent.
• Éléments de base :
  • Classe : représente un objet ou un concept.
  • Attribut : caractéristique ou propriété d’une classe.
  • Méthode : action ou opération qu’une classe peut exécuter.
  • Relation : connexion ou interaction entre les classes.

Nouveaux outils de l’éditeur visuel

• Présentation des outils : la barre d’outils de l’éditeur visuel introduit plusieurs nouveaux outils pour les diagrammes de classes.
  • Changer le sens de rendu du diagramme : ajuste la disposition du diagramme.
  • Ajouter une nouvelle classe : ajoute facilement une nouvelle classe au diagramme.
  • Ajouter un titre et des notes : ajoute un titre au diagramme ou insère des notes non rattachées à une classe spécifique.
  • Ajouter un espace de noms vide : définit un espace réservé pour les classes appartenant à un espace de noms donné.
  • Mettre à jour la configuration du diagramme : active ou désactive des options, comme la visibilité des « boîtes de membres vides », afin de conserver une apparence épurée.
  • Changer le thème et la disposition : permet de choisir différents thèmes et d’ajuster l’apparence du diagramme.

Création de nouvelles classes et relations

• Méthodes de création des classes et des relations :
  • Créer une nouvelle classe à partir d’une relation existante : cliquez sur une classe existante du diagramme, puis faites-la glisser vers un espace vide pour créer une nouvelle classe et établir une relation directe avec la classe d’origine.
  • Créer une relation entre des classes existantes : faites glisser une ligne de relation d’une classe à une autre pour établir rapidement le lien.

Modification des détails d’une classe

• Modifier les propriétés d’une classe : l’éditeur visuel fournit une interface interactive puissante qui permet de modifier les propriétés d’une classe sans écrire de code. Chaque propriété de la classe peut être configurée avec précision.
  • Attributs : définir le modificateur de visibilité, le type de données et le nom de l’attribut.
  • Méthodes : définir la visibilité de la méthode, le type de retour, le nom de la méthode et ses paramètres.

Conseils supplémentaires pour optimiser les diagrammes

• Tester différentes dispositions : exploitez les options de disposition et de thème pour trouver l’apparence optimale du diagramme.
• Ajouter du contexte avec des notes : utilisez la fonction de notes pour expliquer certaines parties du diagramme et clarifier des relations complexes.

Bien démarrer

• Tirer parti des outils de l’éditeur visuel Mermaid : explorez ces nouvelles fonctionnalités pour rendre les diagrammes de classes plus efficaces et plus accessibles. Que vous créiez un nouveau diagramme à partir de zéro ou que vous amélioriez un diagramme existant, ces mises à jour vous permettent de gagner du temps et de vous concentrer sur la conception et la structure du système.

[GN⁺]

Commentaires sur Hacker News

• Comme frontend pour Mermaid, j’utilise généralement Claude. Quand il faut expliquer des idées complexes, les diagrammes que Claude produit rapidement rendent les explications bien plus faciles à suivre
  Il existe aussi un compte payant Mermaid, mais comme j’utilise de toute façon surtout Claude, Claude reste mon point d’entrée principal. Ce que j’attends d’une GUI, c’est la possibilité d’ajouter du style et des couleurs à ces diagrammes créés rapidement, et de déplacer un peu les boîtes pour obtenir de meilleures flèches que celles du placement automatique
  D’après le billet de blog, il semble possible que la fonction pour modifier la couleur et le style des boîtes individuelles soit absente, alors que c’est la partie qui prend le plus de temps quand on le fait manuellement dans le code, donc ce serait bien d’avoir des outils riches sur ce point

  • Intéressant, mais je me demande s’il n’y a pas eu de blocages. La semaine dernière, j’ai demandé à Claude de créer un diagramme syntaxique pour une grammaire jouet, et le code Mermaid contenait une erreur de syntaxe à cause de caractères spéciaux non échappés
    Même avec le widget Mermaid intégré à Claude, je n’ai pas réussi à lui faire corriger ses propres erreurs de code

• Je suis Dominic de l’équipe produit Mermaid. Si vous avez des problèmes produit, des demandes d’amélioration ou des sujets à discuter, écrivez à [e-mail] ou réservez un créneau dans mon calendrier : https://calendly.com/dominic-01w/mermaid-shapers-product-int...

  • Je me demande quand les diagrammes Mermaid seront rendus en dehors du navigateur web : https://github.com/mermaid-js/mermaid/issues/2485
    J’ai créé un éditeur Markdown appelé KeenWrite(https://keenwrite.com/) qui permet d’intégrer des diagrammes avec la syntaxe triple backtick. Il analyse le préfixe diagram- pour transmettre à Kroki(https://kroki.io/) des termes comme graphviz, et Kroki rend ensuite plusieurs diagrammes ASCII, dont Mermaid
    Dans Markdown, les extraits de code source sont normalement affichés en police à chasse fixe avec un identifiant de langage après les triples backticks, et c’est regrettable que GitHub ait cassé cette convention en imposant de fait un standard pour les diagrammes Mermaid
  • Je suis d’accord sur la question du rendu sans navigateur. Jusqu’ici, j’ai essayé sans succès d’ajuster une configuration Selenium pour des builds headless, et le texte était aussi mal rendu
    Pour un outil qui cherche à être largement adopté, le rendu sans navigateur devrait être la priorité absolue comme fonctionnalité de base, et pas seulement quelque chose qui va au-delà du PoC
  • J’aimerais voir de meilleurs contrôles de disposition pour éviter que les éléments du diagramme ne se chevauchent. Ce n’est sûrement pas une demande facile, mais je rencontre assez souvent des éléments mal placés, et résoudre cela pourrait devenir un gros point fort de Mermaid

• J’ai essayé ça récemment et ça m’a plu au début. ChatGPT générait aussi assez bien des diagrammes Mermaid, mais je n’ai pas testé la fonction IA intégrée
  En revanche, après avoir créé un diagramme d’une complexité moyenne, j’ai essayé d’améliorer la mise en page en déplaçant directement les éléments avec la fonction Whiteboard, et ça s’est nettement dégradé. Il était difficile de les ranger à l’endroit voulu ou même de bien les faire glisser, et les chevauchements restaient compliqués à résoudre. C’est aussi dommage que certains types de diagrammes ne prennent pas en charge Whiteboard
  La différence de fonctionnalités entre mermaidchart.com et mermaid.live est aussi déroutante. Je ne sais pas s’il s’agit de produits concurrents ou de variantes d’une application similaire, et les noms « Playground » et « Live Editor » ajoutent encore à la confusion. Malgré tout, je suis content que ça existe et j’espère que ça continuera de s’améliorer

  • Je suis le CEO de Mermaid. Whiteboard en est encore à ses débuts, donc il devrait beaucoup s’améliorer dans les mois à venir
    mermaidchart.com et mermaid.live sont opérés par la même équipe. Mermaid.live est l’éditeur d’origine d’un projet open source vieux de 10 ans, ainsi que son éditeur hébergé entièrement open source
    Le créateur de Mermaid a récemment lancé mermaidchart.com avec le venture studio du CEO de GitLab, et le service est en cours d’extension pour davantage d’utilisateurs et des fonctionnalités de niveau entreprise. L’entreprise suit un modèle open core et a reçu des investissements en capital-risque, mais le projet Mermaid restera open source et continuera à recevoir des investissements
  • Le fait que Mermaid ne permette la disposition que comme « lui » le veut, et non comme on le souhaite, est peut-être un problème fondamental de Mermaid. Depuis longtemps, il crée d’énormes espaces vides et il est difficile d’obtenir la mise en page voulue

• Les outils de diagramme avec algorithmes de placement automatique, je ne les utilise surtout que lorsque je génère par programmation des visualisations pour le débogage. Pour la documentation, je préfère dessiner à la main avec OmniGraffle
  Obtenir un joli graphe avec un outil comme graphviz est très complexe, et on finit par détourner les fonctionnalités pour obtenir la forme voulue
  À mon avis, ce qu’il faut vraiment, c’est un algorithme de placement de graphes basé sur le machine learning capable de prendre en compte la lisibilité et l’esthétique. Jusqu’ici, ceux que j’ai trouvés étaient plutôt orientés vers l’affichage de grands graphes, donc plus proches d’un autre domaine
  Si Mermaid collecte tous les points d’édition produits dans l’UI, cela pourrait faire un assez bon jeu de données

  • Je développe et vends justement un moteur de placement de ce type, et on peut l’essayer ici : https://play.d2lang.com/?script=qlDQtVOo5AIEAAD__w%3D%3D&lay...
    Un exemple plus grand est disponible ici : https://play.d2lang.com/?script=rJLfavMwDMXv_RR6gYbvo3ce7FWG...
    Je n’aime pas faire mon autopromo dans le fil d’un concurrent, mais comme Mermaid n’est pas en concurrence avec la création de son propre moteur de placement, je pense que c’est pertinent dans ce contexte
  • En explorant ce domaine, j’ai trouvé quelques liens intéressants. ELK, une bibliothèque généraliste de dessin de graphes similaire à Graphviz, avec davantage d’options et de contrôle : https://eclipse.dev/elk/
    Une expérimentation de l’équipe de Kiel University qui a développé ELK : https://github.com/kieler/KLighD
    Le wiki du projet Kieler : https://rtsys.informatik.uni-kiel.de/confluence/display/KIEL...
    Une bibliothèque de dessin de graphes basée sur des contraintes : https://www.adaptagrams.org/, implémentation JS : https://ialab.it.monash.edu/webcola/
    Sinon, le papier HOLA https://ialab.it.monash.edu/~dwyer/papers/hola2015.pdf, la démo Confluent Graphs https://www.aviz.fr/~bbach/confluentgraphs/, le papier sur le placement orthogonal https://arxiv.org/pdf/1408.4626.pdf et celui sur la compression par power graphs https://arxiv.org/pdf/1311.6996v1.pdf valent aussi le détour
  • Dominic de l’équipe produit Mermaid ici. Nous avons lancé Whiteboard pour aider les utilisateurs à obtenir exactement la mise en page qu’ils veulent, mais c’est encore tôt et nous l’améliorons beaucoup
    Je comprends que les algorithmes de placement automatique constituent un gros attrait de Mermaid parce qu’ils apportent de la rapidité, mais la mise en page actuelle peut parfois devenir un peu compliquée et emmêlée
    L’idée d’un modèle de machine learning est intéressante, et je me demande quels sont les critères de base d’un diagramme à la fois lisible et agréable à regarder. Par exemple, faut-il que les angles soient droits ou arrondis ? Si vous voulez partager vos idées, envoyez un mail à [e-mail]
  • Je travaille sur un outil qui combine une syntaxe pour écrire des diagrammes sous forme de code avec une syntaxe permettant de définir des contraintes de rendu. Par exemple, cette partie doit être à gauche de celle-là, ou cette flèche ne doit pas croiser cette autre flèche
    J’espère que cela facilitera énormément le rendu cohérent des diagrammes et les derniers ajustements au pixel près. Une toute première version alpha du moteur de rendu utilisant Cassowary fonctionne déjà, et je suis en train de créer une bonne GUI

• Rien que le bouton « Create your account » m’a tout de suite fait perdre mon intérêt. Ce serait bien de pouvoir essayer l’éditeur avant de créer un compte, et de pouvoir enregistrer dans le stockage local du navigateur tant que ça me plaît

• J’aime voir Mermaid continuer à s’améliorer. Pour les diagrammes de séquence, je pense que https://sequencediagram.org/ est le meilleur. Je n’ai aucun lien avec eux, je suis juste un utilisateur satisfait

  • Je l’ai utilisé autrefois dans une session collaborative de diagrammes, et j’avais aimé sa simplicité et sa facilité d’usage. Cela dit, l’essence de Mermaid, c’est la portabilité. Le fait de pouvoir l’intégrer dans un document Markdown et l’afficher dans divers éditeurs et plateformes est important
  • Du point de vue de l’équipe produit Mermaid Chart, je trouve que les fonctionnalités de diagrammes de séquence de Mermaid se défendent très bien aussi. Je suis curieux de savoir en quoi https://sequencediagram.org/ est meilleur que les diagrammes de séquence Mermaid
  • J’ai essayé d’autres éditeurs, mais au final je reviens toujours à sequencediagram.org. Ça fonctionne, tout simplement, et avec moins de friction
  • J’ai l’impression que l’éditeur de diagrammes de séquence de MermaidChart est meilleur que sequencediagram.org
  • sequencediagram.org semble probablement utiliser PlantUML, donc on peut faire la même chose en local sans passer par le site web

• Je comprends que la philosophie soit différente, mais j’aimerais bien voir arriver le jour où l’on pourra utiliser Mermaid dans LaTeX. À défaut, au moins un outil capable de convertir Mermaid en TikZ de manière fiable rendrait la préparation de slides bien plus simple
  L’export en PNG/JPG est possible, mais on perd généralement beaucoup en possibilités de personnalisation, et on ne peut guère faire plus qu’agrandir ou réduire l’image pour l’adapter à la page
  J’ai justement regardé ça hier, je suis tombé sur la nouvelle GUI présentée dans cet article, et au final j’ai galéré à exporter en PNG puis à l’ajuster à la mise en page Beamer

• Draw.io peut intégrer des diagrammes Mermaid, et il existe aussi des plugins VSCode et pour plusieurs IDE ; je me demande donc en quoi c’est spécial

  • L’intégration Mermaid de Draw.io et les plugins VSCode/IDE sont bien, mais ils servent surtout à l’édition programmatique des diagrammes
    Ce qui distingue Mermaid Chart, c’est l’édition bidirectionnelle. On peut modifier le code pour changer le diagramme, et si l’on modifie directement le diagramme, ces changements sont automatiquement répercutés dans le code
    Actuellement, cette édition bidirectionnelle est disponible pour les diagrammes de classes et les organigrammes, avec une extension prévue à d’autres types de diagrammes populaires
  • La concurrence est bonne pour l’innovation, et avoir du choix est bénéfique pour tout le monde. Est-ce que ça doit forcément être spécial ?

• L’image « Theme Customization in Toolbar » ne s’affiche pas

• Le projet en lui-même est chouette, mais sur le plan philosophique j’ai des réserves
  Mermaid cherche à devenir le Markdown des diagrammes, donc le plus important est de pouvoir les éditer et les consommer comme du texte brut. S’il faut utiliser un éditeur visuel, je ne vois pas pourquoi ne pas prendre un outil plus puissant au lieu de rester dans un format limité
  C’est un peu comme les éditeurs Markdown WYSIWYG. Il y a sans doute un marché de niche, mais dans ce cas, pourquoi ne pas simplement utiliser Google Docs ou MS Word ?