mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
69.16k stars 6.12k forks source link

Control brackets around loopText and friends #5364

Open Pomax opened 4 months ago

Pomax commented 4 months ago

Proposal

Mermaid should offer a way to control whether or not it adds brackets to loopText and friends, as having control over CSS means those can be hidden so people can toggle them if they don't want them.

Example

Say we have the plain alt example diagram:

sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
        Bob->>Alice: Thanks for asking
    end

But with a custom style that matches whatever the user's style requirements are, including "no text brackets, because it's just ascii art pretending to be a box":

.loopText {
  font-family: Helvetica;
  font-weight: bold !important;
  font-style: italic;
  fill: #4945ce !important;
  /* use a real box */
  outline: 1px solid #E0D6F5;
  outline-offset: 2px;
  /* taking advantage of CSS in 2024 finally having nesting */
  .brackets { display: none }
}

Screenshots

image