mermaid c4 diagram: bad component placement

Question

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.

Rademacher

Answer 1

Use rgba() when setting the font, bg and border colors on the "empty" shape.

The 4th argument to rgba is the opacity. Set that to 0, and the shape will be fully transparent.

UpdateElementStyle(empty, $fontColor="rgba(0,0,0,0)", $bgColor="rgba(0,0,0,0)", $borderColor="rgba(0,0,0,0)")

Live Editor Link

Mood

It's still an awful workaround for Mermaid's layout of proper layout controls, but it worked for me and allows the important shapes to be spaced further apart. – Mood