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

Depuis le presse-papiers

1. Copiez la syntaxe Mermaid dans votre presse-papiers
2. Dans Diagrammix3, allez dans Fichier → Importer → Mermaid depuis le presse-papiers
3. Le diagramme sera créé sur votre canevas

Depuis un fichier

1. Allez dans Fichier → Importer → Fichier Mermaid...
2. Sélectionnez un fichier .mmd ou .mermaid
3. Le diagramme sera importé sur votre canevas

Types de diagrammes pris en charge

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

Exporter le diagramme courant

1. Allez dans Fichier → Exporter → Mermaid...
2. Choisissez un emplacement de sauvegarde
3. Le diagramme est exporté sous forme de fichier .mmd

Copier en tant que Mermaid

1. Sélectionnez les formes que vous souhaitez exporter (ou sélectionnez tout avec Cmd+A)
2. Allez dans Édition → Copier en tant que Mermaid
3. Collez la syntaxe Mermaid où vous en avez besoin

Modifier les diagrammes importés

Une fois importés, les diagrammes Mermaid deviennent des objets natifs Diagrammix. Vous pouvez :

• 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

Le lien avec la source Mermaid d'origine n'est pas maintenu — les modifications sont apportées directement aux objets du diagramme.

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 importé peut ne pas produire une syntaxe Mermaid identique

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