Prise en charge de Mermaid

Diagrammix3 prend en charge l'import et l'export de diagrammes à l'aide de la syntaxe Mermaid, un langage de diagrammes textuel très répandu.

Qu'est-ce que Mermaid ?

Mermaid est un outil de diagrammes basé sur JavaScript qui utilise une syntaxe proche du Markdown pour définir des diagrammes. Il est couramment utilisé dans la documentation, les wikis et les fichiers README.

Exemple de syntaxe Mermaid :

flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]

Importer des diagrammes Mermaid

Remarque : l'import et l'export Mermaid sont une fonctionnalité PRO.

Insérer Mermaid (avec aperçu et validation)

Le moyen le plus rapide d'amener du Mermaid sur votre canevas est le panneau Insérer Mermaid, qui prévisualise et valide le diagramme avant que quoi que ce soit ne soit placé.

1. Allez dans Édition → Insérer Mermaid
2. Collez ou saisissez votre syntaxe Mermaid dans l'éditeur
3. Au fur et à mesure de la saisie, Diagrammix valide la syntaxe et le bandeau d'état affiche soit le problème, soit Valide · N nœuds, M connecteurs. Vous pouvez aussi cliquer sur Valider à tout moment
4. Cliquez sur Appliquer pour placer le diagramme, ou Annuler pour fermer le panneau. Appliquer ne place un diagramme que s'il est valide

Coller du Mermaid depuis le presse-papiers passe par la même validation, si bien qu'une syntaxe malformée ne produit jamais de diagramme cassé.

Remarque : Mermaid s'importe en collant ou en saisissant le texte dans le panneau Insérer Mermaid — il n'existe pas de commande distincte « importer un fichier ». Pour intégrer un fichier .mmd, ouvrez-le dans un éditeur de texte quelconque et collez son contenu.

Types de diagrammes pris en charge

Diagrammix reconnaît un large éventail de types de diagrammes Mermaid, notamment :

Les autres types Mermaid (timeline, user journey, quadrant, XY chart, Sankey, Git graph, et plus) sont reconnus et importés, mais s'affichent comme un graphe générique de nœuds et de connecteurs plutôt qu'une disposition spécialisée. Utilisez Valider pour vérifier le nombre de nœuds et de connecteurs avant d'appliquer.

Syntaxe des diagrammes d'état

Les diagrammes d'état modélisent les états qu'un objet peut prendre et les transitions entre ces états.

Diagramme d'état basique :

stateDiagram-v2
    [*] --> Active
    Active --> Inactive : deactivate
    Inactive --> Active : activate
    Active --> [*] : terminate

États et transitions :

• [*] représente les états de début et de fin
• --> crée une flèche de transition
• : label ajoute des étiquettes de transition
• Les états imbriqués utilisent l'indentation

États composites :

stateDiagram-v2
    state Processing {
        [*] --> Validating
        Validating --> Executing
        Executing --> [*]
    }

Résultat : un diagramme de machine à états avec des formes d'état appropriées et des transitions étiquetées.

Exemples d'import

Organigramme

Entrée Mermaid :

flowchart TD
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

Résultat : un organigramme de haut en bas avec des formes rectangle, rectangle arrondi et losange, reliées par des flèches étiquetées.

Diagramme de séquence

Entrée Mermaid :

sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Hello Bob!
    B-->>A: Hi Alice!

Résultat : un diagramme de séquence avec deux participants et des flèches de message.

Diagramme de classes

Entrée Mermaid :

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()

Résultat : un diagramme de classes UML avec des relations d'héritage.

Exporter vers Mermaid

Copier Mermaid

Diagrammix exporte vers Mermaid via le presse-papiers — il n'existe pas de commande distincte « exporter vers un fichier ».

1. Sélectionnez les formes que vous voulez exporter, ou ne sélectionnez rien pour exporter tout le canevas
2. Allez dans Édition → Copier Mermaid
3. Collez la syntaxe Mermaid où vous en avez besoin (puis enregistrez-la en fichier .mmd si vous le souhaitez)

L'export s'adapte au contenu concerné : une carte mentale est copiée en syntaxe mindmap, une page de classes ou de séquence UML en classDiagram / sequenceDiagram ; tout le reste est exporté comme un flowchart.

Continuer à modifier en Mermaid (aller-retour)

Les diagrammes Mermaid importés conservent leur source, ce qui vous permet de continuer à travailler en notation Mermaid plutôt que de modifier les formes une par une.

1. Sélectionnez un diagramme Mermaid importé
2. Cliquez sur le bouton </> (Modifier la source Mermaid) sur le diagramme
3. Le panneau Modifier la source Mermaid s'ouvre avec le texte Mermaid d'origine déjà rempli
4. Modifiez le texte et cliquez sur Régénérer pour mettre à jour le diagramme sur place

Si vous avez modifié le diagramme sur le canevas depuis son import, le panneau liste ces changements sous Modifications sur le canevas qui seront perdues, afin que vous puissiez décider avant de régénérer.

Modifier comme des objets natifs

Vous pouvez aussi modifier un diagramme importé directement comme des objets Diagrammix natifs :

• Déplacer et redimensionner librement les formes
• Changer les styles via l'Inspecteur (couleurs, polices, styles de ligne)
• Ajouter de nouveaux éléments avec les outils Diagrammix
• Modifier les connexions en faisant glisser les extrémités
• Appliquer une disposition automatique pour réorganiser le diagramme

Astuce : décidez à l'avance comment vous voulez maintenir un diagramme. Utilisez l'éditeur de source </> pour continuer à le piloter depuis Mermaid, ou modifiez les formes directement pour une retouche visuelle ponctuelle. Des modifications manuelles importantes peuvent diverger de ce que produirait une régénération depuis la source.

Limitations

• Style complexe : les directives de style Mermaid peuvent ne pas se traduire complètement
• Sous-graphes : convertis en formes groupées
• Fonctionnalités avancées : certaines fonctionnalités spécifiques à Mermaid (comme les gestionnaires de clic) sont ignorées
• Aller-retour : exporter un diagramme fortement modifié à la main peut ne pas reproduire une syntaxe Mermaid identique — pour les allers-retours, préférez l'éditeur de source </>

Astuces

1. Nettoyez après l'import : utilisez la disposition automatique pour organiser les diagrammes importés
2. Vérifiez les relations : assurez-vous que les types de relations ont été importés correctement
3. Uniformisez le style : appliquez des styles Diagrammix pour un rendu soigné
4. Conservez la source : gardez vos fichiers Mermaid d'origine pour le suivi de versions