How to create a flow chart?

[Katy_Stalcup]

What’s the best way to make a flow chart in Coda?

[Leandro_Zubrezki]

Hi @Katy_Stalcup!

Welcome to the Coda community

The best way to create flowcharts in Coda is using the Mermaid Pack (I am the creator )

You can check or copy this doc to see examples and how it works, I am also happy to answer any questions you may have, just reply in here.

[TSStrickand1]

Hi there! Really love the Mermaid pack, so thank you for contributing. That said, I’m having some trouble with it. Specifically, I can’t seem to get it to work with FormulaMap( ). Do you know why that might be?

[Leandro_Zubrezki]

Hi @TSStrickand1, more than happy to help!

Would you please share what you are trying to accomplish? An example doc or the formula you have written will be super useful

[TSStrickand1]

Well, I feel pretty foolish. I was trying to use phrases (with spaces, etc.) as node id’s. Obviously, that caused Mermaid to throw a syntax error. I substituted RowID( ) for the node id and put the text in parentheses and it worked like a charm. Thank you!

[Leandro_Zubrezki]

We all have been there! Mermaid syntax is pretty specific so it takes a while to grasp some concepts but once you do plus Coda formulas then you can create some amazing charts

[shushimi]

Thanks for creating this wonderful mermaid pack.
I am very new to coda, and is considering migrating from notion. I am currently trying out your pack.

Normally when i write mermaid code, i prefer to do it in https://mermaid.live/. Then I can simply copy the whole chunk of mermaid code and paste into notion 's code block, and its just work beautifully.

For coda and mermaid pack, i notice, its about writing fomula. As i am new to coda, I not sure if there is any means for me to just paste the mermaid code into coda, and the plugin will just render it.
E.g I want to paste the below into coda to render the flow chart, and hopefully with as minimum adjustment as possible (after pasting into coda).

graph TD

A[Christmas] -->|Get money| B(Go shopping)

B --> C{Let me think}

C -->|One| D[Laptop]

C -->|Two| E[iPhone]

C -->|Three| F[fa:fa-car Car]

[shushimi]

I initially try to copy the sample mermaid code (see my above query) into the mermaid pack’s formula like this. Turns out there is error rendering.

Flowchart("forest","TB", "
    graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]")

Then i realize i must exclude “graph TD” from the code. So that render is successful.

Flowchart("forest","TB", "
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]")

Just sharing what i observe in case anyone encounters same issue as me.

[shushimi]

@Leandro_Zubrezki
Not sure if it would be also be feasible to provide a generic mermaid formula, where the function name does not reflect the diagram type.
In addition, the mermaid code can include the diagram type and orientation, such as “graph TD”. In other word, no need to specify the orientation parameter, since the mermaid code already have it.

E.g diagram(, )

[Agile_Dynamics]

you can use the mermaid server directly to render the whole string

• save the whole diagram string in a variable, lets call it DIAGRAM
• save the URL of the mermaid server in URL, see below
• render the diagram using the Embed() formula

the URL to use is

https://mermaid.ink/svg/

the Embed() formula to use is

Embed(
    URL.Concatenate(
        EncodeAsBase64(
            DIAGRAM
        ),
        WIDTH, HEIGHT,
        force: True
)

Where WIDTH & HEIGHT are the size of the diagram you need.

Use this on the canvas or in a column formula.

If you want, you can use semicolon chars instead of Newline chars in the DIAGRAM source.

The EncodeAsBase64() function converts your DIAGRAM text into a character string that is safe to use inside a URL call to the server.

Max

[Leandro_Zubrezki]

Hi @shushimi! I am glad you like the Pack

There are a couple of reasons of why splitting the Pack in several formulas instead of just having a generic Mermaid one. The first is to give visibility of the available charts you can create for users that know anything about Mermaid. The second is to provide examples on each formula depending the chart type. There are more reasons, like making it easier to create charts using Coda formulas for example!

The only thing you need to have in consideration is selecting the correct chart formula and avoid copying the first line from the Mermaid Live playground. For the rest of the chart you can copy and paste

@Agile_Dynamics nice one Max! What I shame that we can’t use Coda formulas in Packs