Diagrammes
Les diagrammes peuvent être affichés en utilisant Mermaid dans un bloc de code.
Installation
- npm
- Yarn
- pnpm
npm install --save @docusaurus/theme-mermaid
yarn add @docusaurus/theme-mermaid
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
.
export default {
markdown: {
mermaid: true,
},
themes: ['@docusaurus/theme-mermaid'],
};
Utilisation
Ajoutez un bloc de code avec le langage mermaid
:
```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.
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
:
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
:
import Mermaid from '@theme/Mermaid';
<Mermaid
value={`graph TD;
A-->B;
A-->C;
B-->D;
C-->D;`}
/>