Flowchart - Suggested Improvements

[jtyler76]

Hi there! First off I'd like to say that I love this tool, and use it regularly. There are however some aspects of flowcharts that I'd like to have a bit better control over, and as far as I can tell, these can't be done.

The following flowchart demonstrates several of things I'd like to suggest (mermaid source included at the bottom):

1. In the "Legend", you can see two sections, each that contains a few items. These sections are implemented as subgraph's with some aesthetic styling. There is a large gap in between these two sections. It would be nice if there was a way to reduce the gap in between these two sections without influencing the spacing between other elements in other parts of the flowchart.
2. In the bottom, right-hand side of the diagram you can see an "Area2" subgraph that contains a "Area3" subgraph. Note that the text title for these two subgraphs are very cramped. I've noticed this to be a frequent issue with nested subgraph's. It would be nice if these were either spaced out better automatically, or if there was a way to influence the spacing around this text.
3. It would be nice if you could control the shape of subgraph's beyond just a rectangle. I realize that not all of the shapes supported for node's would be practical, but some of the simpler options like rounded corners and pointed edges would be nice.
4. Note in the "ComponentC" subgraph, in order to display items in a grid formation, I had to create a series of invisible links, and it took a while to find a ordering and combination that resulted in almost a perfect grid. Providing a direction layout that would display items in a grid would be a very helpful feature.

Thanks for considering my feedback, again I love the tool!

Source:

flowchart LR

    subgraph Graph
        direction LR

        subgraph Area1["Area1"]
            ComponentA
        end

        ComponentB[("ComponentB")]

        subgraph Area2

            subgraph Area3["Area3"]
                direction LR

                subgraph ComponentC
                    direction TB
                    ComponentD{{"ComponentD"}}
                    ComponentE{{"ComponentE"}}
                    ComponentF{{"ComponentF"}}
                    ComponentG>"ComponentG"]

                    %% invisible links to rearrange boxes
                    ComponentD ~~~ ComponentF
                    ComponentD ~~~ ComponentG
                    ComponentE ~~~ ComponentF
                    ComponentE ~~~ ComponentG
                end

                    ComponentH
        
                    subgraph ComponentI
                        ComponentJ{{"ComponentJ"}}
                    end

                    
            end

            ComponentC -->|"action"| ComponentH
            ComponentH -->|"action"| ComponentI
            
        end
    end

    ComponentA -->|"action"| ComponentB
    ComponentB -->|"action"| ComponentC

    subgraph Legend
        direction LR
        subgraph Division1
            direction TB
            classification1["C1"]
            classification2["C2"]
            classification3["C3"]
        end

        subgraph Division2
            direction TB
            classification4["C4"]
            classification5{{"C5"}}
            classification6>"C6"]
        end
    end



    classDef classification1_style fill:#C0FFCB
    class classification1 classification1_style
    class ComponentC classification1_style
    class ComponentH classification1_style
    class ComponentI classification1_style
    class ComponentD classification1_style
    class ComponentE classification1_style
    class ComponentF classification1_style
    class ComponentG classification1_style
    
    classDef classification2_style fill:#FFC68C
    class classification2 classification2_style
    class ComponentA classification2_style

    classDef classification3_style fill:#B0D8E6
    class classification3 classification3_style
    class ComponentJ classification3_style

    classDef hidden fill:#fff
    class Graph hidden

    classDef hidden2 fill:#F7F5D7,stroke:#F7F5D6,color:#F7F5D7
    class Division1 hidden2
    class Division2 hidden2