> ## Documentation Index
> Fetch the complete documentation index at: https://craft-support.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Diagrammes Mermaid

> Utilisez Mermaid pour créer des organigrammes, des diagrammes de séquence, des diagrammes ER et d'autres diagrammes textuels dans Craft.

Craft prend en charge les diagrammes Mermaid — un moyen de créer des visuels en écrivant une syntaxe textuelle simple. Saisissez quelques lignes de code et Craft affiche un diagramme net et précis directement dans votre document.

Les diagrammes se mettent à jour en temps réel pendant que vous tapez, fonctionnent sur toutes les plateformes et s'affichent sur les pages partagées et publiées.

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/flowchart-preview.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=db14d9fa849df0904c0cc4c051e19905" alt="Un organigramme Mermaid affiché dans un document Craft" width="1498" height="991" data-path="images/write-and-edit/mermaid-diagrams/en/content/flowchart-preview.png" />

## Insérer un diagramme Mermaid

Ajoutez un diagramme Mermaid à l'aide de l'une de ces méthodes :

* Tapez `/mermaid` et sélectionnez **Diagramme Mermaid**
* Choisissez **Diagramme Mermaid** depuis le panneau **Insérer** dans la barre latérale (sous Blocs enrichis)
* Collez du markdown contenant une balise de code ` ```mermaid ` — Craft la convertit automatiquement

## Modification

Lorsque vous ouvrez un bloc Mermaid, il affiche une vue partagée — le diagramme rendu en haut, votre code en bas. L'aperçu se met à jour en temps réel pendant que vous tapez.

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/split-view-editing.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=894c6b5397d22b4673f1aecf7de6e11c" alt="Vue partagée avec l'aperçu du diagramme en haut et l'éditeur de code en bas" width="1498" height="991" data-path="images/write-and-edit/mermaid-diagrams/en/content/split-view-editing.png" />

<Tabs>
  <Tab title="macOS">
    Cliquez sur le bloc Mermaid pour l'ouvrir en vue partagée. L'aperçu du diagramme apparaît en haut et l'éditeur de code en bas. Double-tapez l'aperçu pour zoomer.
  </Tab>

  <Tab title="iOS / iPad">
    Appuyez sur le bloc pour ouvrir l'éditeur de code avec un aperçu en direct au-dessus. Sur iPhone, masquez le clavier pour voir le diagramme. Double-tapez l'aperçu pour zoomer.
  </Tab>

  <Tab title="Web / Windows">
    Cliquez sur le bloc pour le modifier. Utilisez le menu de mode d'affichage dans le menu contextuel du bloc pour basculer entre Modifier, Aperçu et Vue partagée.
  </Tab>
</Tabs>

<Tip>
  Inutile de connaître la syntaxe Mermaid par cœur — l'assistant IA de Craft peut générer des diagrammes à votre place. Décrivez simplement ce que vous souhaitez et il écrira le code pour vous.
</Tip>

## Types de diagrammes pris en charge

### Organigrammes

Représentez des processus, des décisions et des flux de travail. Utilisez `graph TD` pour un affichage de haut en bas ou `graph LR` pour un affichage de gauche à droite.

```
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do This]
    B -->|No| D[Do That]
    C --> E[Done]
    D --> E
```

### Diagrammes de séquence

Montrez les interactions entre personnes ou systèmes dans le temps.

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/sequence-diagram.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=f75ca4347237c5fe789fb65a48060ca2" alt="Un diagramme de séquence illustrant un flux de livraison de repas" width="1473" height="927" data-path="images/write-and-edit/mermaid-diagrams/en/content/sequence-diagram.png" />

```
sequenceDiagram
    User->>App: Place order
    App->>Payment: Charge card
    Payment-->>App: Confirmed
    App-->>User: Order placed
```

### Diagrammes d'état

Visualisez comment quelque chose transite entre différents états — idéal pour le suivi de commandes, les flux de travail ou les processus.

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/state-diagram.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=6700ddefd98c2df1c74175826f6d65e4" alt="Un diagramme d'état illustrant le cycle de vie d'une commande" width="1473" height="927" data-path="images/write-and-edit/mermaid-diagrams/en/content/state-diagram.png" />

```
stateDiagram-v2
    [*] --> Draft
    Draft --> Review
    Review --> Published
    Review --> Draft : Needs changes
    Published --> [*]
```

### Diagrammes de classes

Montrez la structure d'un système — ce qui existe, ses propriétés et ses relations.

```
classDiagram
    class Document {
        +String title
        +Date created
        +publish()
    }
    class Folder {
        +String name
        +getDocuments()
    }
    Folder "1" --> "*" Document : contains
```

### Diagrammes entité-relation

Modélisez les relations entre données — parfait pour la conception de bases de données et la planification.

```
erDiagram
    AUTHOR ||--o{ POST : writes
    POST ||--o{ COMMENT : has
```

### Graphiques

Créez des graphiques en barres, des graphiques en courbes ou une combinaison des deux.

```
xychart-beta
    title "Monthly Revenue ($K)"
    x-axis [Jan, Feb, Mar, Apr, May, Jun]
    y-axis "Revenue" 0 --> 120
    bar [45, 62, 78, 55, 89, 105]
```

## Changer le thème

Les diagrammes Mermaid s'adaptent au thème de votre éditeur de code. Pour modifier l'apparence, appuyez sur l'**icône de pinceau** dans la barre d'outils et choisissez un thème — les options incluent Tokyo Night, Dracula, Nord, GitHub, et bien d'autres.

Le diagramme se met à jour instantanément. Les diagrammes respectent également le mode clair ou sombre de votre document.

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/theme-light.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=1d50b09075c75df863b7a97c39a86a9b" alt="Diagramme Mermaid en thème clair" width="1473" height="927" data-path="images/write-and-edit/mermaid-diagrams/en/content/theme-light.png" />

<img src="https://mintcdn.com/craft-support/ivoQJBaJTefk9e0t/images/write-and-edit/mermaid-diagrams/en/content/theme-dark.png?fit=max&auto=format&n=ivoQJBaJTefk9e0t&q=85&s=fb81678ca8d061283a3e7afc87e4a69b" alt="Diagramme Mermaid en thème sombre" width="1473" height="927" data-path="images/write-and-edit/mermaid-diagrams/en/content/theme-dark.png" />

## Partage et publication

Les diagrammes Mermaid s'affichent sur les pages partagées et publiées — toute personne consultant le lien voit le diagramme rendu, pas le code. Aucune configuration particulière n'est nécessaire.

## Importation et exportation

* **Importation Markdown** : collez ou importez du markdown contenant des balises de code ` ```mermaid ` et Craft crée automatiquement des blocs Mermaid.
* **Exportation Markdown** : les blocs Mermaid sont exportés sous forme de balises de code ` ```mermaid ` standard, compatibles avec d'autres outils.

## Conseils

<AccordionGroup>
  <Accordion title="Que faire si mon diagramme affiche « Invalid Mermaid diagram » ?">
    Cela indique généralement une erreur de syntaxe dans votre code. Vérifiez les fautes de frappe ou les flèches manquantes. Si vous copiez une syntaxe depuis un autre outil, notez que Craft prend en charge les organigrammes, les diagrammes de séquence, les diagrammes d'état, les diagrammes de classes, les diagrammes entité-relation et les graphiques XY — les autres types tels que les graphiques circulaires, les diagrammes de Gantt ou les cartes mentales ne sont pas encore pris en charge.
  </Accordion>

  <Accordion title="L'assistant IA peut-il m'aider à créer des diagrammes Mermaid ?">
    Oui. Décrivez le diagramme souhaité et l'assistant IA de Craft générera le code Mermaid à votre place. Vous pouvez également lui demander de modifier ou d'enrichir un diagramme existant.
  </Accordion>

  <Accordion title="Puis-je zoomer sur un grand diagramme ?">
    Sur Mac et iPad, double-tapez l'aperçu du diagramme pour zoomer. Sur le Web, utilisez la vue plein écran pour les grands diagrammes.
  </Accordion>
</AccordionGroup>

<Info title="Apprendre la syntaxe Mermaid">
  Mermaid est un standard ouvert utilisé dans de nombreux outils. Visitez [mermaid.js.org](https://mermaid.js.org/intro/) pour découvrir la syntaxe complète de chaque type de diagramme.
</Info>