Bug reportOct 12, 2026· 0:29· 0 views
Mermaid C4: same-row Rel label overpaints the adjacent component box
0:29 total
Comments · 0
Be the first to comment.
Bug report— by SceneRecap AI
mediumc4 diagram layout engine / relationship label positioning
os: macOSapp: Mermaid Live Editor v12.1.0browser: Chromium 151.0.7922.34viewport: 1280x720
Repro steps
- 1.Open Mermaid Live Editor and select the code editor pane
- 2.Paste C4 diagram code containing a long relationship label between two horizontally adjacent components on the same row (e.g. 'enqueue events.digest after a 60s debounce')
- 3.Observe the rendered diagram layout and relationship label positioning
Expected
Horizontal spacing between same-row components should expand or wrap the relationship label text so the label does not overlap adjacent component boxes.
Actual
The relationship label text (191px wide) exceeds the inter-component gap (~50px) and bleeds across the adjacent component box ('Digest').
Evidence
visualAt 7.0s and 15.0s, the text 'enqueue events.digest after a 60s debounce' between 'Grouping' and 'Digest' overlaps directly on top of the 'Digest' component box.
consoleWarning logged: C4 label overlap: {"found":true,"labelW":191,"labelX":827,"labelY":442,"overlapsBoxes":2}
visualControl case at 19.0s-23.0s: replacing the label with a short label ('uses') renders cleanly within the inter-box gap without overlapping.
Issue markdown (copy-paste ready)
### Description In Mermaid C4 container/component diagrams, long relationship labels between nodes placed on the same row do not push the components apart or wrap appropriately. As a result, the label text extends past the gap between components and renders directly over the adjacent component box. ### Steps to Reproduce 1. Open Mermaid Live Editor. 2. Paste C4 diagram code with a same-row relationship between two components with a long description label (e.g., `enqueue events.digest after a 60s debounce`). 3. Inspect the rendered diagram. ### Expected Behavior Component spacing should automatically expand to accommodate the full label width, or the label should wrap to prevent overpainting adjacent nodes. ### Actual Behavior The label width (191px) overflows the inter-component gap (~50px), visibly overlapping and obscuring the adjacent component box text. ### Control Observation When using a short label (e.g. `uses`), the label fits within the ~50px gap without overlapping the adjacent box. *Recorded with SceneRecap.*
Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →