Allow passing config to mermaid diagram

[ad1992]

Requested in https://discord.com/channels/723672430744174682/1234480820262142033

This would need to pass site config on initialization similar to how it happens in the mermaid live editor.

Test 👇🏻
Main_Flow_v35-0.txt
Throws max edge exceeded so setting the max edge to 5000 fixes the error related to edges.

[subratsri]

@ad1992 by passing the following configuration, it will parse it in mermaid live editor:
{
"maxEdges": 5000,
"maxTextSize": 99000
}

[ad1992]

It doesn't work for me @subratsri , here is the link

[subratsri]

Ah @ad1992 , I was checking with some other diagram, please increase the maxTextSize as follow:
{
"maxEdges": 2800,
"maxTextSize": 150000,
"theme": "dark"
}
You can check it here

[ad1992]

Thinking about this again, I think we shouldn't be allowing custom configs by users as its not really needed and might overwhelm the user (with a separate field for config), and moreover will complicate the excal diagram generation as there is a long list configs supported by Mermaid.

Instead, we can increase the range of text and edges to decent number so that the diagrams work.
Wdyt @subratsri ?
cc @dwelle

[subratsri]

@ad1992 that sound like a good work around as the list is really long for supported params.
But can there be a way to just add the text size and edge settings to the diagram? I am saying this because diagram size may increase further than we anticipate.
It might work if we keep it to a very high number!

[ad1992]

@ad1992 that sound like a good work around as the list is really long for supported params. But can there be a way to just add the text size and edge settings to the diagram? I am saying this because diagram size may increase further than we anticipate. It might work if we keep it to a very high number!

Yes I am up for keeping it at a higher number, whats a decent number as per your requirements?

[subratsri]

The settings I shared above + some extra should do, so "maxEdges": 3500, "maxTextSize": 200000 should be more than enough.

[ad1992]

The settings I shared above + some extra should do, so "maxEdges": 3500, "maxTextSize": 200000 should be more than enough.

Hmm still I think the text size is just too large for a diagram :)

[subratsri]

Ya, I guess text size can be managed with substitution. Probably we can have text size as some multiple of edges e.g. each edge can have 30 chars so maxTextSize become 3500*30 = 105000.

[ad1992]

@subratsri I am curious to know, how you use these diagrams ? And are these created programmatically?
Looking at the complexity of the diagram, looks like its representation of a very huge data but not sure how useful is it.

[subratsri]

@ad1992 we are using it to visualize our Contact Center flow, basically all the paths a customer can take in our IVR.
Yes, this mermaid flow is generated programmatically where we convert the [YAML file of Genesys Architect] (https://help.mypurecloud.com/articles/define-architect-flows-using-yaml/) to mermaid diagram using python script.

This diagram in excalidraw will help our business to see and suggest changes to the flow rather than knowing the technical logic behind it. Currently it looks something like this in Genesys Architect
.

[ad1992]

@ad1992 we are using it to visualize our Contact Center flow, basically all the paths a customer can take in our IVR. Yes, this mermaid flow is generated programmatically where we convert the [YAML file of Genesys Architect] (https://help.mypurecloud.com/articles/define-architect-flows-using-yaml/) to mermaid diagram using python script.

This diagram in excalidraw will help our business to see and suggest changes to the flow rather than knowing the technical logic behind it. Currently it looks something like this in Genesys Architect .

@subratsri in that case instead of altering the config in excalidraw editor how about exposing an API from mermaid-to-excalidraw where you can pass in your own config which gives you excalidraw elements and that you can pass to excalidraw editor directly?
That way it will be customized as per your needs and we don't have to make any changes in excalidraw editor

[subratsri]

@ad1992 for us that works, it will give us an option to pass every config (if we decided to do so) of mermaid graph.
If this is feasible, might be the best alternative.

[ad1992]

@ad1992 for us that works, it will give us an option to pass every config (if we decided to do so) of mermaid graph. If this is feasible, might be the best alternative.

Great then I will create a public API soon for it which you can use. Yes config would work as long as transformation to excalidraw is supported, for eg properties like font family, arrowMarkerAbsolute and more won't work as we don't transform it to excalidraw equivalent

[subratsri]

Sure, that will work
thanks @ad1992