Mermaid Markdown Flow chart support

Mermaid https://github.com/mermaid-js/mermaid can generate flow charts from markdown,

It’s used on Gitlab and Azure DevOps wiki, and I’ve found it very useful for creaiting straighforward flowcharts

7 Likes

This would be a great feature add. Could be a part of Code Block Syntax Highlighting too.

2 Likes

This would absolutely be extremely useful

Mermaid would be so cool.

especially if it could be used like the Latex pack.

For example, imagine there were a formula like ReferencedBy that could show the user all the formulas that reference (depend on) this formula.

Then you could pass that object into something like: FormatForMermaid and then into RenderMermaid which would allow you to see the graph of everything that relies on your formula.

In sum it could be:

MyFormula.ReferencedBy().FormatForMermaid().RenderMermaid()

Just trying to point out the ways in which this could be nicely integrated with the output from other tools.

1 Like

I am glad to share that a Mermaid pack is coming :tada:

Quick showcase → Mermaid pack for Coda - YouTube

If you are interested in trying it out before general release please send me a private message with your Coda account email address and I will share it with you :slight_smile:

4 Likes

That’s so :fire::fire::fire: Would love to give it a shot.

1 Like

And now anyone can install and use the Mermaid Pack :tada:

4 Likes

Thank you so much for your pack. It’s awesome.

I am running into a little bit of a problem tho, as the chart that I am trying to create have reached the character limit, and Mermaid refuses to render. Is there a workaround?

I am glad you like it @Pak_H_Chau !

Yes it is a current limitation but working with a solution as we speak, one thing you can do depending on the type of chart you are creating is to split it in two. For example if it is a flowchart you can do one half of the chart, and in a new formula the other half.

Anyway will post in here once the limit no longer applies :raised_hands:

1 Like

I don’t think that would work particularly well, based on my current requirements, but still grateful that you released the pack, and is actively working on the solution to this bottleneck.

Obviously would love to have great news from you soon.

@Pak_H_Chau I was able to increase the limit in more than 3x, I will continue working on finding the best way to completely remove it :slight_smile:

Let me know how it goes!

It’s awesome. It totally works. But yes, hopefully the limit will be completely lifted.

I have been working on a template doc that allows us to create the mermaid diagram in a more intuitive database Coda kinda way. Please take a look, and see what you think.

2 Likes

Ok that is really cool!

Made my own little graph:
image

Would be nice if I had a way to arrange the nodes as I like. In this case, I was trying to replicate this image:

Hi @Leandro_Zubrezki , love the Mermaid pack, kudos on the launch!

I tried it out just now, and noticed that it seems not to be able to handle any special characters.

When the text to be displayed is solely text, it works. However, when the text to be displayed contains either (), ', or other special characters, it throws an error (see screenshot).

Are you aware of any work-arounds?

Thanks,
Nina

@Nina_Ledid

the mermaid syntax uses those characters so it gets confused

there are 2 work-arounds

enclosing text in quotes should signal mermaid to ignore any special characters inside the quotes

or

escaping the text ala the EncodeForUrl() function

but it all depends how the strings are processed and passed along by the mermaid pack. and i’m not in my office, so i cant try them out myself yet.

max

1 Like

Thanks so much for your insights! I appreciate the workarounds.

my main goal is to retrieve data from tables formulaically to use them for the mermaid graph visualization.

As per you information, I tried the encodeforurl feature, but that caused a problem in the text display (which, due to encoding, now shows blanks between words with %, thus not a readable solution). See screenshot.

The easiest workaround for now will probably be to remember to avoid special characters :wink:

Thanks,
Nina

ah. sorry about that

the interface i use for mermaid accepts escaped characters and the use of quotation marks.

i host a version of mermaid on my companies server.

but the interface used by the pack may be different

max

Hi @Nina_Ledid!

As Max pointed out, the way to deal with special characters is enclosing the text in double quotes, for example: id1["This is the (text) in the box"]

In Coda you can escape double quotes like this "id1[\"Text in quotes\"] --o id2" as well :slight_smile:

Let me know if that helps!

Hi @Leandro_Zubrezki,

if you don’t mind, could you please advise how you’d recommend to write the formula to parse the data from the table’s column to the text box (which will then populate the mermaid-formula).
Specifically, how would you concatenate in order to ensure the escaping of special characters?

Thanks,
Nina

For now, I’ve used:

Steps.FormulaMap("id"+CurrentValue.[Order of Steps]+"{{"+CurrentValue.[Task with Apostrophe]+"}}").Join(" --> ")

See screen shot for easier reference:

Sure thing, you can insert double quotes escaping it like this: \"

Final result:

Steps.FormulaMap("id"+CurrentValue.[Order of Steps]+"{{\""+CurrentValue.[Task with Apostrophe]+"\"}}").Join(" --> ")

:raised_hands: