mermaid: Layered Blocks Layout
Is your feature request related to a problem? Please describe.
I would prefer to describe APIs and such in terms of layered rectangles, rather than have a scattered array of boxes and curvy arrows.
It makes diagrams easier for me to read, plus this would be very useful for an API Layer diagram, to make it obvious that entity X is part of the foundational layer, where it consumes no other types. Then something at the top layer could all below it.
E.g. something like this, without the description bubbles on the left column. But with the connecting arrows, if desired.
Describe the solution you’d like
When working with (say) a class diagram. It would be nice if there was a way to apply an attribute to say that it was part of layer N.
This might require an attribute of classDiagram
that would be similar to direction
such as layout LAYERS
or something.
The renderer would then create an encompassing rectangle around all classes of the same layer, and the encompassing rectangle would be stacked according to its relative number.
Describe alternatives you’ve considered
Presently, I think the class diagram is useful for describing dependencies, and the c4 diagram are the closest for providing encompassing rectangles, but neither seem to offer the ability to use a stacked rendering method instead of a graph solver with arrows.
** Additional Context **
Additional examples:
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 4
- Comments: 19 (7 by maintainers)
Commits related to this issue
- #3358 First commit with basic grammar and 1st test — committed to mermaid-js/mermaid by knsv a year ago
- #3358 Adding db calls from node statements — committed to mermaid-js/mermaid by knsv 10 months ago
- #3358 Recursive positioning — committed to mermaid-js/mermaid by knsv 9 months ago
- #3358 Recursive positioning — committed to mermaid-js/mermaid by knsv 9 months ago
- #3358 Recursive positioning — committed to mermaid-js/mermaid by knsv 9 months ago
- #3358 Recursive positioning paddings — committed to mermaid-js/mermaid by knsv 9 months ago
- #3358 Adding support for column statements — committed to mermaid-js/mermaid by knsv 9 months ago
- #3358 Putting the elements back in — committed to mermaid-js/mermaid by knsv 9 months ago
- #3358 Adding support for space blocks and different shapes — committed to mermaid-js/mermaid by knsv 8 months ago
- #3358 Adding support for space blocks and different shapes — committed to mermaid-js/mermaid by knsv 8 months ago
- #3358 Adding arrows to syntax — committed to mermaid-js/mermaid by knsv 7 months ago
- #3358 Adding arrows to rendering — committed to mermaid-js/mermaid by knsv 6 months ago
- #3358 Multiple arrows — committed to mermaid-js/mermaid by knsv 6 months ago
- #3358 Edge labels — committed to mermaid-js/mermaid by knsv 6 months ago
- #3358 Adding support for classDef and class statements — committed to mermaid-js/mermaid by knsv 6 months ago
- #3358 Adding support for style statements — committed to mermaid-js/mermaid by knsv 6 months ago
- #3358 Support for adding tests and fixed issues for some shapes — committed to mermaid-js/mermaid by knsv 6 months ago
- #3358 Fix for layout where a siebling has wider siize — committed to mermaid-js/mermaid by knsv 6 months ago
- #3358 Sieblinmg height alignment — committed to mermaid-js/mermaid by knsv 6 months ago
- #3358 Fix for width of composite blocks — committed to mermaid-js/mermaid by knsv 5 months ago
@Yokozuna59 I think we can give it a shot
@nirname Perhaps a call to work this out.