Aller au contenu principal
Version : 3.6.3

Diagrammes

Les diagrammes peuvent être affichés en utilisant Mermaid dans un bloc de code.

Installation​

npm install --save @docusaurus/theme-mermaid

Activez la fonctionnalité Mermaid en ajoutant le plugin @docusaurus/theme-mermaid et en définissant markdown.mermaid à true dans votre docusaurus.config.js.

docusaurus.config.js
export default {
  markdown: {
    mermaid: true,
  },
  themes: ['@docusaurus/theme-mermaid'],
};

Utilisation​

Ajoutez un bloc de code avec le langage mermaid :

Example Mermaid diagram
```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

Voir la documentation de la syntaxe de Mermaid pour plus d'informations sur la syntaxe de Mermaid.

Thème​

Les thèmes sombres et clairs du diagramme peuvent être modifiés en définissant les valeurs mermaid.theme dans le themeConfig de votre docusaurus.config.js. Vous pouvez définir des thèmes pour le mode clair et sombre.

docusaurus.config.js
export default {
  themeConfig: {
    mermaid: {
      theme: {light: 'neutral', dark: 'forest'},
    },
  },
};

Voir la documentation du thème de Mermaid pour plus d'informations sur le thème de Mermaid.

Configuration de Mermaid​

Les options dans mermaid.options seront passées directement à mermaid.initialize :

docusaurus.config.js
export default {
  themeConfig: {
    mermaid: {
      options: {
        maxTextSize: 50,
      },
    },
  },
};

Consultez la documentation de configuration Mermaid et les [types de configuration Mermaid(https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts) pour connaître les options de configuration disponibles.

Composant Mermaid dynamique​

Pour générer des diagrammes dynamiques, vous pouvez utiliser le composant Mermaid :

Example of dynamic Mermaid component
import Mermaid from '@theme/Mermaid';

<Mermaid
  value={`graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;`}
/>