mermaid icon indicating copy to clipboard operation
mermaid copied to clipboard

Feature request: Flowchart node size or emphasis

Open pineapplemachine opened this issue 2 years ago • 2 comments

Is your feature request related to a problem? Please describe.

Problem: There is no documented way to make some flowchart nodes more visually emphasized than others. Applying height styling results in misaligned arrows and misaligned text. Applying font-size or font-weight styling results in misaligned text, and truncated text when the larger text exceeds the size of the node shape.

Describe the solution you'd like

Ideally, every node would accept a percentage size factor that scales both the shape and the font by that amount, perhaps as a class style.

Practically, charts should probably just be more responsive to changes in height and font styling.

Or at the very least, a flag to make certain nodes emphasized would go a long way. These nodes should be roughly 150% the height and font size of other nodes.

Describe alternatives you've considered

Current styling options cannot effectively achieve this.

Additional context

image

graph TD
    A[Very Important Node]:::em1 --> B
    B[Less Important Node] --> C[Another Important Node]:::em2
    D[Also Important Node]:::em3 --> B
    C --> E[Important Node Redux]:::em4
    classDef em1 font-size:20px
    classDef em2 height:75px
    classDef em3 font-weight:bold
    classDef em4 font-size:20px,height:75px,font-weight:bold

Potentially related issues:

https://github.com/mermaid-js/mermaid/issues/3032 https://github.com/mermaid-js/mermaid/issues/2139 https://github.com/mermaid-js/mermaid/issues/1540 https://github.com/mermaid-js/mermaid/issues/1250

pineapplemachine avatar Jun 28 '22 15:06 pineapplemachine

Good idea! I think it needs to be done before the styling but it could be done!

knsv avatar Aug 20 '22 11:08 knsv

I also am wanting to make the font size of a node bigger but am having issues with text being truncated

octokatherine avatar Feb 03 '23 22:02 octokatherine