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

[subratsri]

Hey @ad1992 Any updates on the same?

[ad1992]

Hey @ad1992 Any updates on the same?

Hi, I haven't gotten a chance to pick this up yet. I hope to pick this up in the coming weeks.

[ad1992]

@subratsri I have released a next version with the changes, can you try it out and let me know?

You will need to install the library as shown below and then use the function parseMermaidToExcalidraw with the additional config. The elements that you get as a result of calling this function should be passed to Excalidraw.

yarn add @excalidraw/mermaid-to-excalidraw@next

[subratsri]

Sure @ad1992 will try this and let you know

[subratsri]

Hey @ad1992, This is working after adding the custom configurations Thank you so much for the same

[ad1992]

Hey @ad1992, This is working after adding the custom configurations Thank you so much for the same

Awesome! I will soon merge this PR and ship a release then :)

[ad1992]

@subratsri you can start using v1.1.0 🚀