# 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:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kamil\_Soree](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kamil_soree/32/86272_2.png) [@Kamil\_Soree](https://community.glideapps.com/u/Kamil_Soree)\
**Post date:** [April 10, 2025, 4:13pm UTC](https://community.glideapps.com/t/using-mermaid-code-to-create-diagrams/81270/1 "2025-04-10T16:13:51Z")

</div>

Hi everyone! 👋  
I’m building an interactive workflow tool in Glide, where users complete a form about how they perform document authoring. Their choices are saved in multiple columns (e.g., Step 1 – how they receive content, Step 2 – how they extract it, etc.).

I’m trying to automatically generate a **Mermaid.js `flowchart TD` string** in a template column using these answers, so each row produces a visual-ready workflow string like this:

flowchart TD  
A1[Step 1: Download from publisher’s website]  
A2[Step 2: Use Adobe Acrobat Pro]  
A3[Step 3: Remove ads and reorder pages]  
A4[Step 4: Enter metadata manually]  
A5[Step 5: Adapt from publisher text]  
A6[Step 6: Upload to SharePoint]  
A1 → A2 → A3 → A4 → A5 → A6

I tried using a `Template Column` and inserted the following template:

flowchart TD  
A1[Step 1: {{Step 1 - How do you access the document issue for authoring?}}]  
A2[Step 2: {{Step 2 - How do you extract content for authoring?}}]  
A3[Step 3: {{Step 3 - Which formatting tasks do you typically apply?}}]  
A4[Step 4: {{Step 4 - How do you capture or review metadata (e.g. titles, dates, sources)?}}]  
A5[Step 5: {{Step 5 - Do you write your own abstract or reuse existing summaries?}}]  
A6[Step 6: {{Step 6 - Where do you upload or save completed documents?}}]  
A1 → A2 → A3 → A4 → A5 → A6

But it doesn’t render the values from those columns — I only see “`flowchart TD`” or partial results.

🛠 I’ve checked that the column names exactly match what’s inside `{{ }}`.

**Question:**  
Is this the correct way to use a template column for building a string with multiple column values? Am I missing a formatting or setup step?

Would love any tips or best practices! 🙏

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [April 10, 2025, 5:18pm UTC](https://community.glideapps.com/t/using-mermaid-code-to-create-diagrams/81270/2 "2025-04-10T17:18:22Z")

</div>

You can use simpler replacement values, such as `{{A1}}` and `{{A2}}` so they aren’t so wordy, and replace them with the appropriate column values.

Are you using carriage returns in your template? If so, might all be there, but you have to click on the cell to see all of its contents.

Can you show a screenshot of how your template column is set up?

---

<div class="post-metadata">

**Author:** ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)\
**Post date:** [April 10, 2025, 10:19pm UTC](https://community.glideapps.com/t/using-mermaid-code-to-create-diagrams/81270/3 "2025-04-10T22:19:16Z")

</div>

> [@Kamil\_Soree](#):
>
> trying to automatically generate a **Mermaid.js `flowchart TD` string** in a template column

Is it expected behavior at all that Mermaid.js would render inside a template column?

---

<div class="post-metadata">

**Author:** ![Kamil\_Soree](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kamil_soree/32/86272_2.png) [@Kamil\_Soree](https://community.glideapps.com/u/Kamil_Soree)\
**Post date:** [April 11, 2025, 9:15am UTC](https://community.glideapps.com/t/using-mermaid-code-to-create-diagrams/81270/4 "2025-04-11T09:15:27Z")

</div>

Hi, thanks for your feedback. I’ve updated my column names to simpler ones—specifically, I renamed my columns to **A1, A2, A3, A4, A5,** and **A6** and then updated my Template column (“Workflow Diagram”) accordingly. My updated template now uses the following code:

flowchart TD  
A1[Receive: {{A1}}]  
A2[Extract: {{A2}}]  
A3[Format: {{A3}}]  
A4[Metadata: {{A4}}]  
A5[Abstract: {{A5}}]  
A6[Upload: {{A6}}]  
A1 → A2 → A3 → A4 → A5 → A6

I’m indeed using carriage returns to separate the lines in my template (each node is on a new line). When I click on the cell in the Data Editor, I can see that the entire multi-line code is present, but the default view only shows the first line (“flowchart TD”). I’ve attached a screenshot of my Template Column settings so you can see exactly how it’s set up.

Any ideas on how to force the full output to display or be exported properly? Thanks in advance!

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/b/dbabe41d61dd4238f2a328396637733e378fce0a.png)

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [April 11, 2025, 9:18am UTC](https://community.glideapps.com/t/using-mermaid-code-to-create-diagrams/81270/5 "2025-04-11T09:18:29Z")

</div>

You don’t have any replacements in your Template.

 ![CleanShot 2025-04-11 at 17.17.29@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/3/c3113a6bf5b288fb9eaf4107329deea1e3151e40.jpeg)

> **[Template Column | Glide Docs](https://www.glideapps.com/docs/automation/computed-columns/template-column)**
>
> Display dynamic text that can change with the values in other columns.

---

<div class="post-metadata">

**Author:** ![Kamil\_Soree](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kamil_soree/32/86272_2.png) [@Kamil\_Soree](https://community.glideapps.com/u/Kamil_Soree)\
**Post date:** [April 11, 2025, 9:20am UTC](https://community.glideapps.com/t/using-mermaid-code-to-create-diagrams/81270/6 "2025-04-11T09:20:16Z")

</div>

Hi Nathan, It is expected behaviour. Is this to optimistic?

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [April 11, 2025, 12:00pm UTC](https://community.glideapps.com/t/using-mermaid-code-to-create-diagrams/81270/7 "2025-04-11T12:00:05Z")

</div>

> [@Kamil\_Soree](#):
>
> updated my column names

It was not necessary to rename your columns. Just rename the replacement values in the template, and as @Darren_Murphy pointed out, you need to actually set up your replacements in the template to take in values from the each column and replace those curly bracket strings.

> [@Kamil\_Soree](#):
>
> Any ideas on how to force the full output to display or be exported properly

Not sure what you are expecting. The cell contains the full text. As you mentioned, clicking on a cell shows the entire contents. The cell is not going to expand in height if you have multiple lines of text. I guess I don’t see a problem regarding this. Displaying it with a text component or passing it to whatever API or javascript you intent to use would still include the entire contents of the cell.

---

<div class="post-metadata">

**Author:** ![Kamil\_Soree](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kamil_soree/32/86272_2.png) [@Kamil\_Soree](https://community.glideapps.com/u/Kamil_Soree)\
**Post date:** [April 11, 2025, 2:25pm UTC](https://community.glideapps.com/t/using-mermaid-code-to-create-diagrams/81270/8 "2025-04-11T14:25:08Z")

</div>

My template column now looks like the attached. I also used the AI component to render the mermaid code generated into a diagram. However this isn’t done automatically and I have to prompt it to complete the render.

Do anyone no of a way to make this automatic?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/c/4c20f341056d222dd9cbd906193229465bbd84bc.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/d/cdccacc0cb28560a5e20003edcd43b7d3a08d3df.jpeg)

---

<div class="post-metadata">

**Author:** ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)\
**Post date:** [April 11, 2025, 8:13pm UTC](https://community.glideapps.com/t/using-mermaid-code-to-create-diagrams/81270/9 "2025-04-11T20:13:31Z")

</div>

I have no clue, I have never used code in my apps. I just find it amazing that one could create diagrams with Glide. Makes me want to start coding.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [April 11, 2025, 8:19pm UTC](https://community.glideapps.com/t/using-mermaid-code-to-create-diagrams/81270/10 "2025-04-11T20:19:27Z")

</div>

> [@Kamil\_Soree](#):
>
> However this isn’t done automatically and I have to prompt it to complete the render

What do you mean by “prompt it”? Do you mean the fact that they have to press a button? Reading through your AI chat dialog, I’m assuming that the chart was generating prior to you adding the button? Were you trying to prevent it from generating prior to completing the form?

If I’m assuming correctly, you could undo the addition of the button and instead put a visibility condition in the AI component to only display if all form values are not empty.

---

<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)

---

<div class="post-metadata">

**Author:** ![Kamil\_Soree](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kamil_soree/32/86272_2.png) [@Kamil\_Soree](https://community.glideapps.com/u/Kamil_Soree)\
**Post date:** [May 12, 2025, 9:22am UTC](https://community.glideapps.com/t/using-mermaid-code-to-create-diagrams/81270/12 "2025-05-12T09:22:47Z")

</div>

Hi Jeff,

Apologies for the late reply my project and other responsibilities are a challenge.

Your suggestion about the conditions seems to have done the trick. Please try the below:

[Kamil’s App · Glide](https://go.glideapps.com/app/ducrDS5ccWIhR3bMdbmf/layout)

But now my users can’t enter their work emails to register and I’m getting complaints that the process map is not being generated.

Any suggestions?

Thanks

---

<div class="post-metadata">

**Author:** ![Kamil\_Soree](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kamil_soree/32/86272_2.png) [@Kamil\_Soree](https://community.glideapps.com/u/Kamil_Soree)\
**Post date:** [May 12, 2025, 9:24am UTC](https://community.glideapps.com/t/using-mermaid-code-to-create-diagrams/81270/13 "2025-05-12T09:24:12Z")

</div>

Awesome work!

How is the map displayed? Is it in a separate window?

Thanks

---

<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:** [May 12, 2025, 9:30am UTC](https://community.glideapps.com/t/using-mermaid-code-to-create-diagrams/81270/14 "2025-05-12T09:30:41Z")

</div>

It’s embedded directly on the screen using Web Embed component.

---

<div class="post-metadata">

**Author:** ![Nicolas\_Joseph](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nicolas_joseph/32/76105_2.png) [@Nicolas\_Joseph](https://community.glideapps.com/u/Nicolas_Joseph)\
**Post date:** [May 12, 2025, 2:33pm UTC](https://community.glideapps.com/t/using-mermaid-code-to-create-diagrams/81270/15 "2025-05-12T14:33:09Z")

</div>

Very cool stuff @ThinhDinh 😉

For your information, I’d like to mention that it’s possible to create diagrams of this kind (flowcharts, directed graphs, etc.) using **[Quickchart.io](http://Quickchart.io)** too.  
It generates an image (.png or .svg) from a graph description written in DOT language, which is very similar to what’s used in Mermaid.js.

  

> [@Kamil\_Soree](#):
>
> flowchart TD  
> A1[Step 1: Download from publisher’s website]  
> A2[Step 2: Use Adobe Acrobat Pro]  
> A3[Step 3: Remove ads and reorder pages]  
> A4[Step 4: Enter metadata manually]  
> A5[Step 5: Adapt from publisher text]  
> A6[Step 6: Upload to SharePoint]  
> A1 → A2 → A3 → A4 → A5 → A6

Concretely, your example converted to DOT looks like this:

```auto
digraph workflow {
    rankdir=TD;
    node [shape=box, style=filled, color=lightgrey];

    A1 [label="Step 1: Download from publisher’s website"];
    A2 [label="Step 2: Use Adobe Acrobat Pro"];
    A3 [label="Step 3: Remove ads and reorder pages"];
    A4 [label="Step 4: Enter metadata manually"];
    A5 [label="Step 5: Adapt from publisher text"];
    A6 [label="Step 6: Upload to SharePoint"];

    A1 -> A2 -> A3 -> A4 -> A5 -> A6;
}

```

  

To get the result in **Glide** , just follow these steps.

1. Add a column to store the diagram code `Diagram code` (_Text_)
2. Encode it to URL using a _Encode Text_ column `Encoding URL`:
  - Text = `Diagram code`
  - Encoding = url  
3 - . Create the `URL Quickchart` with a _Template_ column (which gonna produces an image):
  - Template = {{quickchart}}{{diagram}}
  - Replacements =
    - {{quickchart}} : [https://quickchart.io/graphviz?graph=](https://quickchart.io/graphviz?graph=)
    - {{diagram}} : `Encoding URL`

  

Here’s the result in **Data** :

![Quickchart](https://us1.discourse-cdn.com/flex002/uploads/glideapps/optimized/3X/6/6/66d1a1fce2c6fa4d9709acd01ec75ac1f830ca69_2_690x57.png)

and what we obtain in **Layout** after adding an _Image_ component with `URL Quickchart` as source:

 ![Diagram in layout](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/b/db9b62100c1a175c2d1d52761425648810c86ed6.png)

  

Just sharing the doc here: [Using the QuickChart GraphViz API | QuickChart](https://quickchart.io/documentation/graphviz-api/)

  

Perhaps someone might find this useful 🙂