Proposal to Clarify Parameter Names for alt and loop Blocks in Sequence Diagrams

[AlGuil]

Proposal

Hello,
I would like to draw your attention to the use of the word "label" in some parameter names related to the alt and loop blocks within sequence diagrams.
Given that the term "label" is only used in the context of modifying the "themeVariables" of sequence diagrams and is not clearly explained in the documentation, nor used while creating the diagram itself, it could be confusing for users.

I propose renaming the following parameters to improve clarity:

1. labelBoxBkgColor → altLoopBackgroundColor
2. labelBoxBorderColor → altLoopBorderColor
3. labelTextColor → altLoopTextColor
4. loopTextColor → altLoopTitleTextColor

These changes could enhance understanding and make the modification of the theme more accessible for all users.

Additionally, another solution with even better syntax would be to completely separate the styling of loop blocks and alt blocks. This would create better customization options with the following parameters:

1. labelBoxBkgColor becoming: altBackgroundColor and loopBackgroundColor
2. labelBoxBorderColor becoming: altBorderColor and loopBorderColor
3. labelTextColor becoming: altTextColor and loopTextColor
4. loopTextColor becoming: altTitleTextColor and loopTitleTextColor

Example

Here’s a small example using the current syntax and both proposed syntaxes:

Current Syntax:

%%{init: {
'themeVariables': {
'labelBoxBkgColor': '#ff0000',
'labelBoxBorderColor': '#00ff00',
'labelTextColor': '#0000ff',
'loopTextColor': '#00ffff'
}
}}%%
…

%%{init: {
    'themeVariables': {
        'labelBoxBkgColor': '#ff0000',
        'labelBoxBorderColor': '#00ff00',
        'labelTextColor': '#0000ff',
        'loopTextColor': '#00ffff'
    }
}}%%
sequenceDiagram
    alt Example Alt Block
        User->>App: Do something
    else Alternative Action
        App->>User: Do something else
    end

    loop Repeat Action
        User->>App: Perform action
        App->>User: Action completed
    end

Loading

Proposed Syntax (Renaming):

%%{init: {
'themeVariables': {
'altLoopBackgroundColor': '#ff0000',
'altLoopBorderColor': '#00ff00',
'altLoopTextColor': '#0000ff',
'altLoopTitleTextColor': '#00ffff'
}
}}%%
…

Proposed Syntax (Separating):

Better customization, the alt block and loop block would have completely different colors.

%%{init: {
'themeVariables': {
'altBackgroundColor': '#ff0000',
'altBorderColor': '#00ff00',
'altTextColor': '#0000ff',
'altTitleTextColor': '#00ffff',
'loopBackgroundColor': 'aa0000',
'loopBorderColor': '#00aa00',
'loopTextColor': '#0000aa',
'loopTitleTextColor': '#00aaaa'
}
}}%%
…

Thank you for considering these suggestions!
Best regards,
Alban