Add more options for the way the mermaid graph is generated

[stylianosgakis]

I personally enjoy when a tree like this looks vertical instead of horizontal, so you get a view like this for example (taken from here) instead of horizontal, which I personally have a bit of a harder time reading.

So adding such an option and others in the future would be a great addition to give more customisation options. Not sure how many exist for mermaid diagrams, as this is the first time I ever hear about them, but I'm sure there's a lot of room for creativity here :D

[iury souza]

Totally agree! This is a cool feature.

I've been thinking about adding more customization options later on. Mermaid lets you tweak colors and styles using theme variables and flowchart variables.

With that in mind, it could be better to let users set the whole JSON config themselves. For example, they could set the themeVariables as a string like this:

{
    "primaryColor": "#BB2528",
    "primaryTextColor": "#fff",
    "primaryBorderColor": "#7C0000",
    "lineColor": "#F8B229",
    "secondaryColor": "#006100",
    "tertiaryColor": "#fff"
}

We'll probably need to play around with this idea to see what works best.

[stylianosgakis]

Yeah I agree with you. The safest and easy to maintain backwards compatible way can definitely be to let users free-form the entire styling with a String. And I mean everything starting from the first %% until the last %%.

Because making the gradle extension expose something for every single option mermaid graphs allow you to edit might be quite a challenge. Also not sure how often the mermaid graph syntax changes and if it'd be a maintenance burden to keep up.

Or you can even go with both options, providing a free-form option like:

moduleGraphConfig {
  heading...
  initText.set( // or a better name than `initText` of course 😅
    """
    %%{
      init: {
        'theme': 'base',
        'themeVariables': {
          'primaryColor': '#BB2528',
          'primaryTextColor': '#fff',
          'primaryBorderColor': '#7C0000',
          'lineColor': '#F8B229',
          'secondaryColor': '#006100',
          'tertiaryColor': '#fff'
        }
      }
    }%%
    """
  )
}

and then another option to set each one of these attributes 1 by 1, like

moduleGraphConfig {
  heading...
  themeVariables {
    primaryColor.set(...)
    primaryTextColor.set(...)
  }
}

But doing both requires the most effort on the code here 😅

[iury souza]

closed by #18