Il existe trois façons d'insérer un diagramme Mermaid dans WordPress : un plugin pour l'éditeur de blocs tel que MerPress, un plugin de shortcodes tel que WP Mermaid, ou encore en évitant complètement les plugins et en exportant une image statique depuis l'éditeur Mermaid Live. Le choix de la méthode dépend de votre éditeur et de la fréquence à laquelle le diagramme sera modifié.
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. Je vais vous présenter ci-dessous chacune de ces méthodes, avec un exemple concret et une remarque honnête sur les cas où l'utilisation d'un plugin serait superflue.
Principaux enseignements
- Mermaid transforme la syntaxe en texte brut en diagrammes ; vous pouvez donc modifier un organigramme en modifiant le texte, sans avoir à redessiner l'image.
- MerPress Voici la commande native « block » : elle ajoute un bloc ; pour l'ouvrir, il suffit de taper
/MermaidJSdans l'éditeur de blocs, et il affiche un aperçu en temps réel du diagramme au fur et à mesure que vous le rédigez. - WP Mermaid Voici la méthode rapide : collez le code Mermaid dans un bloc de code, ou encadrez-le avec
[sirène]balises pour l'éditeur classique et les constructeurs de pages. - Les diagrammes s'affichent dans le navigateur du visiteur à partir de votre texte, ce qui permet de les garder modifiables tout en chargeant le script Mermaid sur ces pages.
- Pour un diagramme ponctuel que vous n'utiliserez plus jamais, exportez-le au format SVG ou PNG depuis l'éditeur Mermaid Live, sans avoir à installer le moindre 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 qu'un texte intégré à votre article ; le mettre à jour est donc aussi rapide que de modifier une phrase, ce qui est très important pour les flux de processus ou les structures de contenu qui évoluent au fil du temps.
Quel plugin Mermaid choisir pour WordPress ?
Choisissez celui qui correspond à l'éditeur que vous utilisez. Ces deux plugins sont gratuits et disponibles sur WordPress.org ; ils résolvent le même problème en adoptant des approches opposées.
| Itinéraire | Comment ajouter le schéma | Idéal pour |
|---|---|---|
| MerPress (plugin de blocage) | Type /MermaidJS dans l'éditeur de blocs pour insérer son bloc. Vous saisissez la syntaxe dans le volet supérieur et le diagramme s'affiche dans le volet inférieur au fur et à mesure que vous tapez. | L'éditeur de blocs, ainsi que toute personne souhaitant consulter le schéma tout en rédigeant le texte. |
| WP Mermaid (plugin de shortcodes) | Collez le code Mermaid dans un bloc de code, ou encadrez-le avec [sirène] ... [/sirène] pour l'éditeur classique ou l'élément « Shortcode » d'un constructeur de pages. Source : terrylinooo/wp-mermaid. | L'éditeur classique, les constructeurs de pages et tout site fonctionnant encore sous WordPress en version antérieure à la 5.0, où le shortcode est la seule option disponible. |
| Sans plugin : Éditeur Mermaid Live | Créez votre schéma dans l'éditeur gratuit Mermaid Live Editor, exportez-le au format SVG ou PNG, puis insérez-le comme une image classique. | Un diagramme que vous ne modifierez que rarement, voire jamais. |
Comment ajouter un diagramme Mermaid dans WordPress, étape par étape
Étape 1 : Installer un plugin 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, puis recherchez MerPress si vous travaillez dans l'éditeur de blocs, ou WP Mermaid Si vous avez besoin du shortcode, installez et activez le plugin.
É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 représente une connexion. Échanger TD pour LR pour le présenter de gauche à droite ; l'intégralité Documentation sur les sirènes présente la syntaxe de chaque type de diagramme.
Étape 3 : Ajoutez-le dans l'éditeur de blocs (Gutenberg)
Avec MerPress, tapez /MermaidJS Placez le diagramme à l'endroit souhaité et sélectionnez son bloc. Saisissez la syntaxe dans la zone supérieure : le diagramme se dessine automatiquement en dessous au fur et à mesure que vous tapez ; tant que le bloc n'est pas sélectionné, il s'affiche exactement tel que les visiteurs le verront. Tant que la syntaxe n'est pas valide, une erreur de syntaxe s'affichera dans l'aperçu : le plugin préfère ainsi vous signaler le problème plutôt que de s'arrêter sans rien dire.
Avec WP Mermaid Ajoutez plutôt un simple Code Sélectionnez le bloc et collez-y la syntaxe Mermaid. Le plugin 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 en ligne.
Étape 4 : Ajoutez-le dans l'éditeur classique ou dans un constructeur de pages
En dehors de l'éditeur de blocs, utilisez le shortcode de WP Mermaid. Encadrez votre code Mermaid entre les balises du shortcode et il s'affichera de la même manière :
[mermaid] graphe TD ; A[Début] --> B[Fin] ; [/mermaid]Dans un constructeur de pages, insérez un élément « Shortcode » (ou un widget « shortcode ») et collez-y le même contenu. C'est d'ailleurs la seule solution possible pour toutes les versions de WordPress antérieures à la version 5.0, où l'éditeur de blocs n'existe pas.
À 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 noter 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 aspect à 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, un plugin est clairement l'outil qu'il vous faut. Si vous n'avez besoin que d'un seul diagramme que vous ne modifierez que rarement, créez-le dans l'éditeur gratuit Mermaid Live Editor, exportez-le au format SVG ou PNG, puis insérez cette image : aucun plugin n'est nécessaire. Les deux solutions sont valables ; choisissez celle qui convient 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 et que j'utilisais l'éditeur de blocs, j'opterais pour MerPress, car le fait de voir le diagramme s'afficher au fur et à mesure que l'on saisit le code permet d'éviter les tâtonnements, et le fait de conserver les diagrammes sous forme de texte modifiable fait gagner un temps considérable par rapport au redessinage d'images. Si je devais gérer un site plus ancien utilisant l'éditeur classique ou un constructeur de pages, WP Mermaid et son shortcode seraient la solution la plus adaptée.
Le seul cas où je choisirais de ne pas utiliser ces deux options serait une situation vraiment exceptionnelle : un graphique unique que je ne modifierai jamais, pour lequel l'exportation d'une image statique permet d'alléger légèrement le site. Pour tout le reste, le faible coût de rendu côté client est un prix raisonnable à payer pour des diagrammes que l'on peut mettre à jour en un clin d'œil.
Journal des mises à jour
12 juillet 2026
- Le guide a été élargi pour couvrir les trois méthodes réelles au lieu de se limiter à un seul plugin : MerPress pour l'éditeur de blocs (avec son
/MermaidJS(mode bloc et aperçu en direct), WP Mermaid pour les shortcodes et les sites plus anciens, ainsi qu'une exportation statique sans plugin. Ajout d'un tableau comparatif et d'une recommandation plus claire pour chaque éditeur.
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.
Vous souhaitez que nos publications apparaissent plus souvent sur Google ?
En un clic, Google affichera ce site dans votre rubrique « À la une ».
