{"id":3409,"date":"2024-09-08T03:11:19","date_gmt":"2024-09-08T03:11:19","guid":{"rendered":"https:\/\/wpconsults.com\/?p=3409"},"modified":"2026-03-19T20:00:34","modified_gmt":"2026-03-19T20:00:34","slug":"mermaid-diagram-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.wpconsults.com\/en_gb\/mermaid-diagram-in-wordpress\/","title":{"rendered":"How to Show a Mermaid Diagram in WordPress Post or Page"},"content":{"rendered":"\n

In this tutorial, you’ll learn how to display a Mermaid diagram in WordPress post or page.<\/p>\n\n\n\n

\"Mermaid<\/figure>\n\n\n\n

Mermaid is a powerful diagramming tool that allows users to create flowcharts, sequence diagrams, Gantt charts, and more using simple markdown-like syntax. <\/p>\n\n\n\n

Let’s dive into the steps to integrate Mermaid diagrams in your WordPress website.<\/p>\n\n\n\n

Displaying Mermaid Diagram in WordPress<\/strong>: Step-by-Step Guide<\/strong><\/h2>\n\n\n\n

Step 1: Install and Activate the Mermaid Plugin<\/strong><\/h3>\n\n\n\n

First, you need to install a plugin that enables Mermaid.js support in WordPress. Here’s how:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
    \n
  1. Log in to your WordPress dashboard.<\/li>\n\n\n\n
  2. Go to Plugins<\/strong> > Add New<\/strong>.<\/li>\n\n\n\n
  3. Search for \u201cWP Mermaid<\/strong>\u201d plugin.<\/li>\n\n\n\n
  4. Click Install Now<\/strong> next to the Mermaid plugin of your choice.<\/li>\n\n\n\n
  5. After installation, click Activate<\/strong>.<\/li>\n<\/ol>\n\n\n\n

    Once activated, this plugin will allow Mermaid syntax in your WordPress posts and pages.<\/p>\n\n\n\n

    Step 2: Create a Mermaid Diagram<\/strong><\/h3>\n\n\n\n

    Now that the plugin is activated, it’s time to create your Mermaid diagram. Mermaid syntax is simple and effective for generating diagrams. <\/p>\n\n\n\n

    Below is an example of a basic flowchart in Mermaid:<\/p>\n\n\n\n

    graph LR\n    Fitness -- Strength Training\n    Fitness -- Cardio\n    Fitness -- Nutrition\n    Strength Training -- Weightlifting\n    Strength Training -- Bodyweight Exercises\n    Cardio -- Running\n    Cardio -- Cycling\n    Nutrition -- Meal Planning\n    Nutrition -- Supplements<\/code><\/pre>\n\n\n\n
    You can adjust the diagram by modifying the Mermaid syntax according to your needs. Mermaid supports various types of diagrams, including:<\/p>\n\n\n\n