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
72.8k stars 6.65k forks source link

Color / properties inheritance for mindmap mermaid diagrams #5156

Open deajan opened 11 months ago

deajan commented 11 months ago

Proposal

I know that mindmap diagrams are experimental for now, but it would be so nice to be able to self assign colors to mindmap parts in order to let's say show progression / priority depending on the color. When set on an item, all sub items should inherit from assigned color.

Example

mindmap
  root{{Root Text}}
    {{Some Sub Text}}
    ::: color-red
      something
      else
    {{Some other sub text}}
    ::: color #080085
      another
      thing

Screenshots

No response

deajan commented 11 months ago

I know I am asking alot here, but a similar concept could be used to add percentages on items of the mindmap, something like ::: percentage 40%, where the root node percentage is calculated by the mean value of it's sub items percentages.

In the below example, item Some Sub Text would have percentage of 50% calculated by mermaid.js, Some other sub text would have a calculated percentage of 70%, and root item would this have 60%.

mindmap
  root{{Root Text}}
  ::: percentage auto
    {{Some Sub Text}}
    ::: percentage auto
    ::: color-red
      something
      ::: percentage 100%
      other thing
      ::: percentage 0%
    {{Some other sub text}}
    ::: color #080085
      another
      ::: percentage 70%
      thing
      ::: percentage 70%

The percentage value could be used as weight for items, or as progression for items. This would allow using mindmaps as progression lists, like sorts of GANNTs but with more graphic freedom or TODO lists with visual representation.

Thank you for considering this enhancement ;)

signaledge commented 11 months ago

I second this, as I was trying to use classDef similar to how it can be inserted in flowchart diagram, but from what I gather of the docs, css classes have to be defined on the site itself, or in another place in mermaid config which I can't access with the static site generator I use, or Github/Gitlab. This way to edit the color is simpler overall, though implemented a classDef support could also work and be more flexible potentially.

deajan commented 10 months ago

Any thoughts about this ? I'd happily sponsor this feature btw ;)

apalazzin commented 10 months ago

very interesting feature - up!

deajan commented 10 months ago

very interesting feature - up!

Please use the thumb up in the first post to "up" the feature request