How to correctly place components in c4 diagram?

[boris-faniuk-n26]

Hello!

I am playing with mermaid to build C4 diagrams in GitHub.
I cannot find any good way to place elements correctly.

I have tried putting 2 elements with a relation between them (see live editor).
Both elements are located so close to each that relation text is not visible.
Is there any way to improve this?

I have also tried adding empty element with white background (see live editor).
However, then we depend on the background colour that is different across GitHub themes.
Anyway, empty element which requires it's own UpdateElementStyle block seems as workaround for me.
I hope there's a better native solution for this.

Thanks for any help.

[asos-robbell]

The layout support for C4 diagrams is really poor from what I can tell. The most I've seen is that you can limit the number of entities in a row before it wraps, but the diagrams it produces are not easy to interpret. I'd love to see support for the layout hints that the core PlantUML C4 libraries use as grouping and layout is important to telling an understandable story—as it stands the diagrams it produces are no better than trying to achieve the same thing with text.