Feature request: Flowchart node size or emphasis

[pineapplemachine]

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

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:

#3032
#2139
#1540
#1250

[knsv]

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

[octokatherine]

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

[pranavm2109]

Hi, I ( @pranavm2109 ), and my teammates @Shahir47 , @nghtlinh would like to work on this issue!

[pranavm2109]

Quick clarification: if the font-size is set to 2em, then the box height dynamically readjusts itself, without having the need to introduce any additional emphasis parameter like the one that is requested. For instance, in the example code, if the height attribute for em4 in classDef em4 font-size:20px,height:75px,font-weight:bold is removed, then the box resizes itself without any truncation of text. So, could you please clarify the problem?

[pineapplemachine]

Quick clarification: if the font-size is set to 2em, then the box height dynamically readjusts itself, without having the need to introduce any additional emphasis parameter like the one that is requested. For instance, in the example code, if the height attribute for em4 in classDef em4 font-size:20px,height:75px,font-weight:bold is removed, then the box resizes itself without any truncation of text. So, could you please clarify the problem?

The layout behavior seems to have changed since I originally created the issue. The layout is drastically different now than the previously shared screenshot in more ways than this. I haven't been following this project and I have no idea, I'm just here because I still follow this one issue, but it certainly looks like this was already fixed at some point in the last year and a half:

[pranavm2109]

@jgreywolf It seems like according to @pineapplemachine , this issue has been resolved somewhere in the last year and a half. If that is the case, could this issue be closed?