Diagrammes

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

Installation

npm

npm install --save @docusaurus/theme-mermaid

Yarn

yarn add @docusaurus/theme-mermaid

pnpm

pnpm add @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

module.exports = {
  markdown: {
    mermaid: true,
  },
  themes: ['@docusaurus/theme-mermaid'],
};

Utilisation

Ajoutez un bloc de code avec la langue mermaid :

Example Mermaid diagram

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

Consultez 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

module.exports = {
  themeConfig: {
    mermaid: {
      theme: {light: 'neutral', dark: 'forest'},
    },
  },
};

Consultez la Documentation du thème Mermaid pour plus d'informations sur la thématisation des diagrammes Mermaid.

Configuration de Mermaid

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

docusaurus.config.js

module.exports = {
  themeConfig: {
    mermaid: {
      options: {
        maxTextSize: 50,
      },
    },
  },
};

Consultez la documentation de configuration de Mermaid pour connaître les options de configuration disponibles.