mermaid
mermaid copied to clipboard
Feature request: Flowchart node size or emphasis
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:
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
Good idea! I think it needs to be done before the styling but it could be done!
I also am wanting to make the font size of a node bigger but am having issues with text being truncated