Mermaid is an advanced diagram tool where you can easily create or edit any diagram on the run. You can also create any useful educational chart which will be converted into a helpful image.
EmbedPress allows you to embed Mermaid diagrams on your WordPress website instantly, whether built with Elementor, Gutenberg, or Classic Editor. Follow this step-by-step guide below to find out how to embed Mermaid links in WordPress with EmbedPress.
How To Collect Mermaid URL? #
To embed Mermaid diagrams on your WordPress site, first head over to the Mermaid website. Here you can edit your diagrams parameter or functions any way you like. Under the ‘Sample Diagram‘ option pick your preferred diagram layout and customize it.
After you have done your customization copy the URL from the ‘COPY MARKDOWN‘ section and open it in a new tab. Simply copy and save the URL to embed the content in EmbedPress.
How To Embed Mermaid In Gutenberg? #
EmbedPress has its own blocks to embed any type of content using the Gutenberg block editor. To embed Mermaid diagrams using Gutenberg, follow the steps below.
Step 1: Search For The EmbedPress Block #
From your website dashboard, open the page where you want to embed Mermaid charts. Click on the ‘+’ icon to add blocks and search for ‘EmbedPress’. Simply click on the block that appears in the search and insert it onto the page.
Step 2: Paste The Mermaid URL In EmbedPress Block #
Afterward, paste the collected Mermaid URL into the input field and click on the ‘Embed’ button beside the URL field. The Content will be successfully embedded using the Gutenberg block editor.
Step 3: Edit & Publish Your Mermaid Embed #
You can add some customization and choose how you want to showcase your embedded Mermaid diagram. You can adjust the width and height of your file from the options under the Block tab on your right-hand side.
To find out how your embedded Mermaid is looking, click on the ‘Preview’ button of your website and have a look.
How To Embed Mermaid In Elementor? #
After collecting the Mermaid URL, head over to your WordPress dashboard and open the page where you want to embed Mermaid links, then follow the instructions given below.
Note: To embed Mermaid links in WordPress using Elementor, make sure you have installed and activated the plugin.
Step 1: Search The EmbedPress Element #
First, select this ‘Edit with Elementor’ button on the top of your page. It will take you to the Elementor editing panel. Search for the ‘EmbedPress’ element on the widget panel and then drag and drop the element on your page.
Step 2: Paste The Post’s URL In ‘Content Settings’ #
Next, paste the Mermaid URL you just collected into the input field of the ‘Content Settings’. It will automatically then fetch and embed your posts into the Elementor editor.
Step 3: Style Your Embedded Content #
You can edit EmbedPress to present your content in a more visually appealing way based on the design of your website.
Simply click on the ‘Style’ tab. You can change the ‘Width’ and ‘Height’ of your embedded content. Tweak and turn ‘Margin ’and ‘Padding’ to fit it more neatly into your website.
After making all changes hit the ‘Publish’ button and your content will be successfully embedded.
How To Embed Mermaid In Classic Editor? #
If you are a Classic Editor user, you can easily embed Mermaid diagrams with just one click.
Step 1: Paste The Link On Classic Editor #
To do this, open a new page with Classic Editor and paste the content URL. You can preview the embedded by clicking the ‘Preview’ button.
Click on the ‘Pencil’ icon to change the ‘Width’ and ‘Height’ of your embedded content. You can also change the URL of your Mermaid files. After making all changes hit the ‘Publish’ button and your content will be successfully embedded.
With these simple steps, you can embed the Mermaid diagrams instantly into your WordPress website with EmbedPress using any of Gutenberg Editor, Classic Editor, or Elementor Editor.
If you are facing problems and require further assistance, feel free to contact our support or join our Facebook Community to get in touch with WordPress experts and content creators like yourself.
