You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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):
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.
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.
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.
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
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
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):
![template](https://private-user-images.githubusercontent.com/126526717/286996821-2e75a3df-94b9-4de8-b0ee-845394cffccf.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM5OTY4MzEsIm5iZiI6MTcyMzk5NjUzMSwicGF0aCI6Ii8xMjY1MjY3MTcvMjg2OTk2ODIxLTJlNzVhM2RmLTk0YjktNGRlOC1iMGVlLTg0NTM5NGNmZmNjZi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxOFQxNTU1MzFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jYzdlMzQxNDU2YWIzODU2NTliZjhlYjQyNTNkZjYzZDFiZTAwN2RkNmE1N2Y1NTJkMjIzNjcyYTEzZGM0N2NjJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.VnxZqD8CQyhg5uukLRkV0nJKNw51KkYQldlpgdheZNs)
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.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 nestedsubgraph
'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.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.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 adirection
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:
Beta Was this translation helpful? Give feedback.
All reactions