{"id":3409,"date":"2024-09-08T03:11:19","date_gmt":"2024-09-08T03:11:19","guid":{"rendered":"https:\/\/wpconsults.com\/?p=3409"},"modified":"2026-06-27T19:47:06","modified_gmt":"2026-06-27T19:47:06","slug":"diagramme-de-sirene-dans-wordpress","status":"publish","type":"post","link":"https:\/\/www.wpconsults.com\/fr\/mermaid-diagram-in-wordpress\/","title":{"rendered":"Comment afficher un diagramme de sir\u00e8ne dans un article ou une page WordPress"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Mermaid lets you write diagrams as plain text, a few lines of simple syntax, and have them render as clean flowcharts, sequence diagrams, or Gantt charts. In WordPress you get that with a small plugin, so you can build and edit diagrams right inside a post instead of designing images by hand.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is how to set it up in the block editor, the classic editor, and page builders, with a live example, plus an honest note on when a plugin is the right call and when a static image is simpler.<\/p>\n\n\n\n<div class=\"wp-block-group wpc-takeaways is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Key Takeaways<\/h3>\n<ul class=\"wp-block-list\">\n<li>Mermaid turns plain-text syntax into diagrams, so you edit a flowchart by editing text, not redrawing an image.<\/li>\n<li>The <strong>WP Mermaid<\/strong> plugin adds the support; then you paste Mermaid code into a Code block, a <code>[mermaid]<\/code> shortcode, or a Shortcode block.<\/li>\n<li>Diagrams render in the browser from your text, which keeps them editable but adds a small script load on those pages.<\/li>\n<li>For a one-off diagram you rarely change, exporting a static image from the Mermaid Live Editor avoids adding a plugin at all.<\/li>\n<\/ul>\n<\/div>\n\n\n<style>.kb-table-of-content-nav.kb-table-of-content-id7066_f7400a-9c .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);border-top:1px solid var(--global-palette10, #3182CE);border-right:1px solid var(--global-palette10, #3182CE);border-bottom:1px solid var(--global-palette10, #3182CE);border-left:1px solid var(--global-palette10, #3182CE);border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:15px 15px 0px 0px rgba(160, 152, 255, 0.31);}.kb-table-of-content-nav.kb-table-of-content-id7066_f7400a-9c .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id7066_f7400a-9c .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id7066_f7400a-9c .kb-table-of-content-wrap .kb-table-of-content-list{color:var(--global-palette1, #3182CE);font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}@media all and (max-width: 1024px){.kb-table-of-content-nav.kb-table-of-content-id7066_f7400a-9c .kb-table-of-content-wrap{border-top:1px solid var(--global-palette10, #3182CE);border-right:1px solid var(--global-palette10, #3182CE);border-bottom:1px solid var(--global-palette10, #3182CE);border-left:1px solid var(--global-palette10, #3182CE);}}@media all and (max-width: 767px){.kb-table-of-content-nav.kb-table-of-content-id7066_f7400a-9c .kb-table-of-content-wrap{border-top:1px solid var(--global-palette10, #3182CE);border-right:1px solid var(--global-palette10, #3182CE);border-bottom:1px solid var(--global-palette10, #3182CE);border-left:1px solid var(--global-palette10, #3182CE);}}<\/style>\n\n\n<h2 class=\"wp-block-heading\">What Mermaid is, and why use it in WordPress<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Mermaid is a diagramming tool that reads a markdown-like syntax and draws the diagram for you. Instead of dragging boxes around in a design tool, you describe the structure in text (for example, A points to B, B points to C) and Mermaid lays it out. It supports flowcharts, sequence diagrams, Gantt charts, class diagrams, and more.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The reason it is worth using inside WordPress is editability. A diagram saved as an image is frozen; changing one step means reopening a design tool and re-exporting. A Mermaid diagram is just text in your post, so updating it is as quick as editing a sentence, which matters a lot for things like process flows or content structures that change over time.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to add a Mermaid diagram in WordPress, step by step<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Install the WP Mermaid plugin<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress does not render Mermaid on its own, so you need a plugin that loads the Mermaid library and handles the markup. From your dashboard, go to <strong>Plugins &gt; Add New<\/strong>, search for <a href=\"https:\/\/wordpress.org\/plugins\/wp-mermaid\/\" rel=\"nofollow noopener\" target=\"_blank\">WP Mermaid<\/a>, then install and activate it. Once active, it allows Mermaid syntax in your posts and pages.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Write your diagram in Mermaid syntax<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Mermaid syntax is short and readable. Here is a basic flowchart that maps a main topic down to its parts:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>graph TD\n    A[Fitness] --> B[Strength Training]\n    A --> C[Cardio]\n    A --> D[Nutrition]\n    B --> E[Weightlifting]\n    C --> F[Running]\n    D --> G[Meal Planning]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The first line sets the diagram type and direction (<code>graph TD<\/code> means a top-down flowchart), and each arrow line draws a connection. You can swap <code>TD<\/code> for <code>LR<\/code> to lay it left-to-right, and the same idea extends to sequence and Gantt charts; the full <a href=\"https:\/\/mermaid.js.org\/intro\/\" rel=\"nofollow noopener\" target=\"_blank\">Mermaid documentation<\/a> has the syntax for each type.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Add it in the block editor (Gutenberg)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In the block editor, click the <strong>+<\/strong> to add a new block, choose the <strong>Code<\/strong> block, and paste your Mermaid syntax into it. WP Mermaid picks up the code block and renders the diagram on the front end, so what looks like plain text in the editor becomes a drawn chart on the live page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Add it in the classic editor or a page builder<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If you are on the classic editor or a page builder, use the shortcode instead. Wrap your Mermaid code in the shortcode tags and the plugin will render it the same way:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>[mermaid] graph TD; A[Start] --> B[End]; [\/mermaid]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In a page builder, drop in a Shortcode element (or a shortcode widget) and paste the same thing. This is also the route to use on any WordPress version below 5.0, where the block editor is not available.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What that diagram looks like<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here is the flowchart from Step 2, drawn out so you can see how the text maps to the shape:<\/p>\n\n\n\n<figure class=\"svg-chart-graph\">\n<svg viewBox=\"0 0 760 340\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"Flowchart with Fitness branching into Strength Training, Cardio, and Nutrition, each with a sub-step\">\n<defs><marker id=\"arr-tip\" markerWidth=\"8\" markerHeight=\"8\" refX=\"6\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L7,3 L0,6 z\" fill=\"context-stroke\"\/><\/marker><\/defs>\n<rect class=\"live\" x=\"310\" y=\"20\" width=\"140\" height=\"46\" rx=\"8\"\/>\n<text class=\"lbl on-dark\" x=\"380\" y=\"48\" text-anchor=\"middle\">Fitness<\/text>\n<rect class=\"box\" x=\"20\" y=\"140\" width=\"180\" height=\"46\" rx=\"8\"\/>\n<text class=\"lbl\" x=\"110\" y=\"168\" text-anchor=\"middle\">Strength Training<\/text>\n<rect class=\"box\" x=\"290\" y=\"140\" width=\"180\" height=\"46\" rx=\"8\"\/>\n<text class=\"lbl\" x=\"380\" y=\"168\" text-anchor=\"middle\">Cardio<\/text>\n<rect class=\"box\" x=\"560\" y=\"140\" width=\"180\" height=\"46\" rx=\"8\"\/>\n<text class=\"lbl\" x=\"650\" y=\"168\" text-anchor=\"middle\">Nutrition<\/text>\n<rect class=\"box\" x=\"20\" y=\"260\" width=\"180\" height=\"46\" rx=\"8\"\/>\n<text class=\"lbl\" x=\"110\" y=\"288\" text-anchor=\"middle\">Weightlifting<\/text>\n<rect class=\"box\" x=\"290\" y=\"260\" width=\"180\" height=\"46\" rx=\"8\"\/>\n<text class=\"lbl\" x=\"380\" y=\"288\" text-anchor=\"middle\">Running<\/text>\n<rect class=\"box\" x=\"560\" y=\"260\" width=\"180\" height=\"46\" rx=\"8\"\/>\n<text class=\"lbl\" x=\"650\" y=\"288\" text-anchor=\"middle\">Meal Planning<\/text>\n<line class=\"arr-accent\" x1=\"380\" y1=\"66\" x2=\"115\" y2=\"138\" marker-end=\"url(#arr-tip)\"\/>\n<line class=\"arr-accent\" x1=\"380\" y1=\"66\" x2=\"380\" y2=\"138\" marker-end=\"url(#arr-tip)\"\/>\n<line class=\"arr-accent\" x1=\"380\" y1=\"66\" x2=\"645\" y2=\"138\" marker-end=\"url(#arr-tip)\"\/>\n<line class=\"arr-accent\" x1=\"110\" y1=\"186\" x2=\"110\" y2=\"258\" marker-end=\"url(#arr-tip)\"\/>\n<line class=\"arr-accent\" x1=\"380\" y1=\"186\" x2=\"380\" y2=\"258\" marker-end=\"url(#arr-tip)\"\/>\n<line class=\"arr-accent\" x1=\"650\" y1=\"186\" x2=\"650\" y2=\"258\" marker-end=\"url(#arr-tip)\"\/>\n<\/svg>\n<figcaption>The Step 2 Mermaid code shown as the flowchart it produces, with Fitness branching into three areas, each leading to a sub-step.<\/figcaption>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Diagrams like this are handy for showing structure visually, which is exactly why they fit content-planning work such as a <a href=\"https:\/\/wpconsults.com\/topical-map-seo-guide\/\" target=\"_blank\" rel=\"noopener nofollow\">topical map for SEO<\/a>, where a pillar topic branches into clusters.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Plugin or static image: which should you use?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The one trade-off worth knowing is that Mermaid renders client-side, in the visitor&#8217;s browser, so any page with a diagram loads the Mermaid script to draw it. On a handful of pages that is nothing to worry about, but it is a real consideration if you are very strict about script load.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That gives a simple rule of thumb. If you publish diagrams often and want them editable, the plugin is clearly the right tool. If you just need a single diagram you will rarely touch, you can build it in the free Mermaid Live Editor, export it as an SVG or PNG, and place that image, no plugin required. Both are valid; pick by how often the diagram will change.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">So, is the Mermaid plugin the right way to add diagrams?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If this were my site, I would install WP Mermaid the moment I knew I would be making diagrams regularly, because keeping them as editable text saves real time over redrawing images. The small client-side render cost is a fair price for that flexibility on a normal content site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The only time I would skip it is a true one-off: a single chart I will never edit, where exporting a static image keeps the site that bit leaner. For everything else, the plugin is the cleaner long-term choice.<\/p>\n\n\n\n<div class=\"wp-block-group wpc-changelog is-layout-flow wp-block-group-is-layout-flow\" id=\"article-update-logs\">\n<h2 class=\"wp-block-heading\">Update Logs<\/h2>\n<p class=\"wp-block-paragraph\"><strong>28 Jun 2026<\/strong><\/p>\n<ul class=\"wp-block-list\"><li>Refreshed the walkthrough with clearer block and shortcode steps, a cleaner rendered example, and guidance on when to use the plugin versus a static exported image.<\/li><\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>D\u00e9couvrez comment ajouter un diagramme Mermaid dans WordPress, afin de g\u00e9n\u00e9rer des organigrammes et des graphiques \u00e0 partir de texte brut dans l'\u00e9diteur de blocs, l'\u00e9diteur classique ou un constructeur de pages.<\/p>","protected":false},"author":1,"featured_media":7281,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kb_optimizer_status":0,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","rank_math_title":"How to Add a Mermaid Diagram in WordPress (Guide)","rank_math_description":"Add a Mermaid diagram in WordPress: render flowcharts from plain text in the block editor, classic editor, or page builder, plus when to skip the plugin.","rank_math_focus_keyword":"Mermaid Diagram in WordPress","_colophon_preset":"regular","_colophon_fc_on":"","_colophon_edited_on":"","footnotes":""},"categories":[7],"tags":[],"class_list":["post-3409","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-tips-tutorials"],"_links":{"self":[{"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/posts\/3409","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/comments?post=3409"}],"version-history":[{"count":4,"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/posts\/3409\/revisions"}],"predecessor-version":[{"id":7283,"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/posts\/3409\/revisions\/7283"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/media\/7281"}],"wp:attachment":[{"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/media?parent=3409"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/categories?post=3409"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/tags?post=3409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}