Prise en charge de Mermaid

Diagrammix3 prend en charge l'import et l'export de diagrammes en utilisant la syntaxe Mermaid, un langage de création de diagrammes textuel populaire.

Qu'est-ce que Mermaid ?

Mermaid est un outil de création de diagrammes basé sur JavaScript qui utilise une syntaxe de type 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 prévisualisation et validation)

La façon la plus rapide d'amener 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 tapez votre syntaxe Mermaid dans l'éditeur
3. Au fur et à mesure que vous tapez, Diagrammix valide la syntaxe en direct et affiche :
   • si le diagramme est valide
   • le type de diagramme détecté
   • le nombre de nœuds et de connecteurs
   
   Les erreurs sont signalées en ligne, vous pouvez donc les corriger avant qu'elles n'arrivent sur votre canevas.
4. Cliquez sur Appliquer pour placer le diagramme, ou sur Annuler pour fermer

Coller Mermaid depuis le presse-papiers passe par la même validation, de sorte qu'une syntaxe mal formée ne produit jamais un diagramme cassé.

Remarque : Mermaid s'importe en collant ou en tapant dans le panneau Insérer Mermaid — il n'existe pas de commande « importer un fichier » distincte. Pour récupérer un fichier .mmd, ouvrez-le dans n'importe quel éditeur de texte 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 (chronologie, parcours utilisateur, quadrant, graphique XY, Sankey, graphe Git, et bien d'autres) sont reconnus et importés, mais sont rendus sous forme de graphe générique de nœuds et de connecteurs plutôt qu'avec une mise en page spécialisée. Le panneau Insérer Mermaid vous indique le type détecté avant d'appliquer.

Syntaxe des diagrammes d'états

Les diagrammes d'états modélisent les états possibles d'un objet et les transitions entre ces états.

Diagramme d'états 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 les formes d'états appropriées et les transitions étiquetées.

Exemples d'import

Diagramme de flux

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 diagramme de flux vertical avec des formes rectangle, rectangle arrondi et losange connecté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 messages.

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 « exporter vers un fichier » distincte.

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

L'export s'adapte à ce qui est dans la portée : une carte mentale est copiée en syntaxe mindmap, et une page de classes UML ou de séquence en classDiagram / sequenceDiagram ; tout le reste est exporté sous forme de flowchart.

Continuer à modifier en Mermaid (aller-retour)

Les diagrammes Mermaid importés conservent leur source, vous pouvez donc continuer à travailler en notation Mermaid au lieu 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 pré-rempli
4. Modifiez le texte et réaffichez pour mettre à jour le diagramme en place

Si vos modifications devaient changer la structure du diagramme (par exemple, supprimer des nœuds dont d'autres éléments dépendent), le panneau liste ces incompatibilités à l'avance pour que vous puissiez décider avant de valider.

Modifier en tant qu'objets natifs

Vous pouvez également modifier un diagramme importé directement en tant qu'objets Diagrammix natifs :

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

Astuce : Décidez à l'avance comment vous souhaitez maintenir un diagramme. Utilisez l'éditeur source </> pour le garder piloté par Mermaid, ou modifiez les formes directement pour une mise en forme visuelle ponctuelle. Des modifications manuelles importantes peuvent diverger de ce que produirait le réaffichage de la source.

Limitations

• Styles complexes : Les directives de style Mermaid peuvent ne pas être entièrement traduites
• 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 : L'export d'un diagramme que vous avez fortement modifié à la main peut ne pas reproduire une syntaxe Mermaid identique — pour les allers-retours, préférez l'éditeur source </>

Conseils

1. Nettoyez après l'import : Utilisez la mise en page 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. Stylisez de manière cohérente : Appliquez les styles Diagrammix pour un rendu soigné
4. Conservez la source : Sauvegardez vos fichiers Mermaid originaux pour le contrôle de version