Passer au contenu principal

Documentation Index

Fetch the complete documentation index at: https://craft-support.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

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. Un organigramme Mermaid affiché dans un document Craft

​
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. Vue partagée avec l'aperçu du diagramme en haut et l'éditeur de code en bas
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.
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.

​
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. Un diagramme de séquence illustrant un flux de livraison de repas 
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. Un diagramme d'état illustrant le cycle de vie d'une commande 
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. Diagramme Mermaid en thème clair Diagramme Mermaid en thème sombre

​
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

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.
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.
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.
Mermaid est un standard ouvert utilisé dans de nombreux outils. Visitez mermaid.js.org pour découvrir la syntaxe complète de chaque type de diagramme.