# Using mermaid code to create Diagrams

**URL:** <https://community.glideapps.com/t/using-mermaid-code-to-create-diagrams/81270>\
**Category:** Ask for Help\
**Created:** [April 10, 2025, 4:13pm UTC](https://community.glideapps.com/t/using-mermaid-code-to-create-diagrams/81270 "2025-04-10T16:13:51Z")\
**Posts on this page:** 1\
**Showing post:** 11

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [April 12, 2025, 1:16am UTC](https://community.glideapps.com/t/using-mermaid-code-to-create-diagrams/81270/11 "2025-04-12T01:16:47Z")

</div>

I did this before.

I have a template column to put my Mermaid code inside a “HTML structure”.

```auto
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
</head>
<body>

    <pre class="mermaid">
{G}
   </pre>

    <pre class="mermaid">
{M}
   </pre>
<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
</script>
</body>
</html>

```

{G} and {M} here are the content of my Gantt and Mermaid charts.

Then, I pass the result of that to a “HTML to URL” column and display it with web embed.

 ![CleanShot 2025-04-12 at 08.16.34](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/0/60e31ec73e8a4ebff98afd84eb201d2df5af1c20.png)

 ![CleanShot 2025-04-12 at 08.16.21](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/d/ed0fe9b8ae6f8e1c9232d6904b9667e70179e369.png)

---

_[View the full topic](https://community.glideapps.com/t/using-mermaid-code-to-create-diagrams/81270)._