Using mermaid code to create Diagrams

[Kamil_Soree]

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!

[Jeff_Hager]

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?

[nathanaelb]

@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?

[Kamil_Soree]

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!

[Darren_Murphy]

You don’t have any replacements in your Template.

Template Column | Glide Docs

[Kamil_Soree]

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

[Jeff_Hager]

@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.

[Kamil_Soree]

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?

[nathanaelb]

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.

[Jeff_Hager]

@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.

[ThinhDinh]

I did this before.

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

<!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.

[Kamil_Soree]

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

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

[Kamil_Soree]

Awesome work!

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

Thanks

[ThinhDinh]

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

[Nicolas_Joseph]

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

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=
     • {{diagram}} : Encoding URL

Here’s the result in Data:

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

Just sharing the doc here: Using the QuickChart GraphViz API | QuickChart

Perhaps someone might find this useful