Mais de plus en plus j'ai cherché à faire des diagrammes en exprimant les concepts directement dans le texte. Pour ça j'ai commencé à utiliser eraser.io
Schéma d'architecture fait avec eraser.io
Ici tout ce schéma a été généré à partir de cette expression:
Ce texte est simple a lire et est beaucoup plus simple a sauvegarder dans git ou a modifier.
En comparaison, un export excalidraw est un fichier json qui contient les positions et propriétés de chaque élément. Quasiment impossible a modifier manuellement.
Le soucis avec eraser.io est que c'est un outil payant... et qu'en version gratuite la customisation ou partage des schémas est limitée.
Un autre soucis (qu'on avait aussi avec excalidraw) est qu'a chaque modification il faut aller sur le site pour re-générer un schéma.
Du coup j'ai cherché un autre outil qui pourrait répondre à tous ces problèmes.
D2 est un outil de création de diagrammes comparable à mermaid, graphviz, plantuml, etc. comparaison
Avec un sytaxe plus simple, mais avec des fonctionnalités avancées.
Un point intéressant de D2 est l'utilisation de classes pour styliser des elements. Et la possibilité d'importer des fichiers pour les ré-utiliser.
Pourquoi il faut un plugin?
Il existe déjà un plugin pour remark remark-d2, mais il n'est pas à jour depuis 2 ans et manque des fonctionnalités tel que les imports et la gestion d'un theme clair/sombre.
Du coup j'ai créé mon propre plugin.
Note: Entre temps un autre plugin rehype-d2 a été créé, cependant il ne supporte pas l'utilisation d'imports différents selon le theme et le format de sorti ne me convient pas
@terrastruct/d2 utilises des imports dynamiques de wasm et js, ce qui pose soucis avec contentlayerissue.
Pour éviter cela il faut modifier les options esbuild du plugin: