How to Embed Mermaid Diagrams on Your Shopify Store Using EmbedAny

Want to showcase detailed diagrams, flowcharts, or sequence diagrams on your Shopify store? Mermaid Ink allows you to create and share visual diagrams, and with EmbedAny, you can display these diagrams directly on your Shopify store with no coding required!

What is Mermaid Ink?

Mermaid Ink is a tool that renders Mermaid diagrams and creates shareable links. Mermaid itself is a JavaScript-based diagramming tool that allows you to create flowcharts, sequence diagrams, class diagrams, and more using simple text notation.

Step-by-Step Guide to Embedding Mermaid Ink on Shopify

Step 1: Install the EmbedAny App

1. Visit EmbedAny on the Shopify App Store
2. Click “Add app” and follow the installation instructions
3. After installation, make sure the app is activated on your store

Step 2: Get Your Mermaid Ink Link

1. Create your diagram using Mermaid syntax
2. Generate a shareable link from Mermaid Ink (usually in the format https://mermaid.ink/…)
3. Copy this link to your clipboard

Step 3: Embed the Mermaid Diagram on Your Store

1. Navigate to the page or product where you want to display the diagram
2. Paste the Mermaid Ink link into your content editor
3. Important step: Italicise the link by selecting it and clicking the italic button (or pressing Ctrl+I/Cmd+I)
4. Save your changes

That’s it! The Mermaid diagram will now display as an interactive element on your page.

Where to Use Mermaid Diagrams on Your Shopify Store

Mermaid diagrams can be particularly useful for:

• Product descriptions: Show assembly instructions or product specifications
• About pages: Create organisation charts or process flows
• Tutorial pages: Illustrate step-by-step guides with flowcharts
• Technical documentation: Display system architectures or workflows

Benefits of Using Mermaid Diagrams

• Clear visual communication: Explain complex concepts visually
• Professional presentation: Add technical details to your store in a clean format
• Educational content: Help customers understand your products or services better
• Dynamic updates: Update your diagrams on Mermaid Ink, and they’ll automatically update on your Shopify store

Final Tips

Remember that your diagrams will be fully interactive, allowing customers to zoom or interact with elements depending on the diagram type. If you update the original diagram on Mermaid Ink, the changes will automatically appear on your Shopify store without you having to re-embed anything.

EmbedAny works with 800+ platforms beyond just Mermaid Ink, so you can use the same simple process to embed content from TikTok, Instagram, YouTube, and hundreds of other services.