Mermaid vous permet de rédiger des diagrammes sous forme de texte brut, à l'aide de quelques lignes de syntaxe simple, et de les afficher sous forme d'organigrammes, de diagrammes de séquence ou de diagrammes de Gantt clairs et lisibles. Sous WordPress, cela est possible grâce à un petit plugin, ce qui vous permet de créer et de modifier des diagrammes directement dans un article, sans avoir à concevoir des images manuellement.
Voici comment procéder dans l'éditeur de blocs, l'éditeur classique et les constructeurs de pages, avec un exemple concret, ainsi qu'une remarque honnête sur les cas où il vaut mieux utiliser un plugin et ceux où une image statique est plus simple.
Principaux enseignements
- Mermaid transforme la syntaxe en texte brut en diagrammes ; vous pouvez donc modifier un organigramme en éditant le texte, sans avoir à redessiner l'image.
- Le WP Mermaid Le plugin ajoute cette fonctionnalité ; il suffit ensuite de coller le code Mermaid dans un bloc de code, un
[sirène]un shortcode ou un bloc « Shortcode ». - Les diagrammes sont générés dans le navigateur à partir de votre texte, ce qui permet de les modifier tout en ajoutant un léger chargement de script sur ces pages.
- Pour un diagramme ponctuel que vous modifiez rarement, l'exportation d'une image statique depuis l'éditeur Mermaid Live vous évite d'avoir à installer un plugin.
Qu'est-ce que Mermaid, et pourquoi l'utiliser dans WordPress ?
Mermaid est un outil de création de diagrammes qui interprète une syntaxe de type Markdown et génère automatiquement le diagramme à votre place. Au lieu de faire glisser des rectangles dans un outil de conception, vous décrivez la structure sous forme de texte (par exemple, A pointe vers B, B pointe vers C) et Mermaid se charge de la mettre en page. Il prend en charge les organigrammes, les diagrammes de séquence, les diagrammes de Gantt, les diagrammes de classes, et bien plus encore.
La raison pour laquelle il est intéressant de l’utiliser au sein de WordPress réside dans sa facilité de modification. Un diagramme enregistré sous forme d’image est figé ; modifier une étape implique de rouvrir un outil de conception et de réexporter le fichier. Un diagramme Mermaid n’est quant à lui qu’un simple texte intégré à votre article ; le mettre à jour est donc aussi rapide que de modifier une phrase, ce qui est particulièrement important pour des éléments tels que les flux de processus ou les structures de contenu qui évoluent au fil du temps.
Comment ajouter un diagramme Mermaid dans WordPress, étape par étape
Étape 1 : Installez le plugin WP Mermaid
WordPress ne prend pas en charge le rendu Mermaid de manière native ; vous aurez donc besoin d'un plugin qui charge la bibliothèque Mermaid et gère le balisage. Depuis votre tableau de bord, rendez-vous dans Plugins > Ajouter un nouveau, rechercher WP Mermaid, puis installez-le et activez-le. Une fois activé, il permet l'utilisation de la syntaxe Mermaid dans vos articles et vos pages.
Étape 2 : Rédigez votre diagramme en syntaxe Mermaid
La syntaxe Mermaid est concise et lisible. Voici un organigramme simple qui décompose un sujet principal en ses différents éléments :
graph TD
A[Fitness] --> B[Musculation]
A --> C[Cardio]
A --> D[Nutrition]
B --> E[Haltérophilie]
C --> F[Course à pied]
D --> G[Planification des repas]La première ligne définit le type et le sens du diagramme (graph TD désigne un organigramme descendant), et chaque flèche établit une connexion. Vous pouvez permuter TD pour LR pour le présenter de gauche à droite, et ce principe s'applique également aux diagrammes de séquence et aux diagrammes de Gantt ; l'intégralité Documentation sur les sirènes indique la syntaxe de chaque type.
Étape 3 : Ajoutez-le dans l'éditeur de blocs (Gutenberg)
Dans l'éditeur de blocs, cliquez sur le + Pour ajouter un nouveau bloc, sélectionnez le Code bloc, puis collez-y votre syntaxe Mermaid. WP Mermaid détecte le bloc de code et affiche le diagramme sur la page publique ; ainsi, ce qui apparaît comme du texte brut dans l'éditeur se transforme en diagramme dessiné sur la page publiée.
Étape 4 : Ajoutez-le dans l'éditeur classique ou dans un constructeur de pages
Si vous utilisez l'éditeur classique ou un constructeur de pages, utilisez plutôt le shortcode. Placez votre code Mermaid entre les balises du shortcode et le plugin l'affichera de la même manière :
[mermaid] graphe TD ; A[Début] --> B[Fin] ; [/mermaid]Dans un éditeur de pages, insérez un élément « Shortcode » (ou un widget « shortcode ») et collez-y le même contenu. C'est également la méthode à suivre pour toutes les versions de WordPress antérieures à la version 5.0, où l'éditeur de blocs n'est pas disponible.
À quoi ressemble ce schéma ?
Voici l'organigramme de l'étape 2, schématisé pour vous permettre de voir comment le texte correspond à la forme :
Les schémas de ce type sont pratiques pour illustrer visuellement une structure, et c’est précisément pour cette raison qu’ils conviennent parfaitement à des tâches de planification de contenu telles que : carte thématique pour le référencement naturel (SEO), où un thème principal se ramifie en groupes.
Plugin ou image statique : lequel choisir ?
Il convient toutefois de savoir que Mermaid effectue le rendu côté client, dans le navigateur du visiteur ; ainsi, toute page contenant un diagramme charge le script Mermaid pour l'afficher. Sur quelques pages, cela ne pose aucun problème, mais c'est un élément à prendre sérieusement en compte si vous êtes très strict en matière de chargement des scripts.
Voilà une règle empirique simple. Si vous publiez souvent des diagrammes et que vous souhaitez pouvoir les modifier, le plugin est clairement l'outil qu'il vous faut. Si vous n'avez besoin que d'un seul diagramme que vous modifierez rarement, vous pouvez le créer dans l'éditeur gratuit Mermaid Live Editor, l'exporter au format SVG ou PNG, puis insérer cette image ; aucun plugin n'est nécessaire. Les deux solutions sont valables ; choisissez en fonction de la fréquence à laquelle le diagramme sera modifié.
Alors, est-ce que le plugin Mermaid est la bonne solution pour ajouter des schémas ?
Si c'était mon site, j'installerais WP Mermaid dès que je saurais que je devrais créer régulièrement des diagrammes, car le fait de les conserver sous forme de texte modifiable permet de gagner du temps par rapport à la refonte des images. Le faible coût de rendu côté client est un prix raisonnable à payer pour bénéficier de cette flexibilité sur un site de contenu classique.
La seule situation où je m'en passerais, c'est dans un cas vraiment exceptionnel : un graphique unique que je ne modifierai jamais, et pour lequel l'exportation d'une image statique permet d'alléger un peu plus le site. Pour tout le reste, le plugin reste la solution la plus propre à long terme.
Journal des mises à jour
28 juin 2026
- Nous avons mis à jour le guide pratique en y ajoutant des étapes plus claires concernant les blocs et les codes courts, un exemple mieux présenté, ainsi que des conseils permettant de savoir quand utiliser le plugin plutôt qu'une image exportée statique.
Want our posts to show up more often on Google?
One step & Google will surface this site in your Top Stories.
