GitHub中Mermaid C4图组件布局优化技术问询

以下是几种原生、不依赖主题的解决方案，替代临时添加空元素的workaround：

1. 全局调整C4图布局间距 #

通过Mermaid初始化配置直接设置C4图的全局元素间距，让所有元素间保持足够空间：

%%{init: {'c4': {'spacing': 60}}}%%
C4Context
Person(user, "终端用户") --> System(backend, "后端服务") : "提交请求"

spacing参数控制元素间的基础间距，数值越大，元素距离越远，可根据实际需求调整。

2. 强制关联关系的方向 #

在关联箭头后添加方向标记（left/right/up/down），强制元素按指定方向排列，自然拉开距离：

C4Context
Person(user, "终端用户") -->right System(backend, "后端服务") : "提交请求"

横向（right/left）排列的元素默认间距更大，能给关联文本留出足够显示空间。

3. 调整链接文本的内边距 #

使用linkStyle指令单独调整关联链接的文本内边距，避免文本被元素边缘遮挡：

C4Context
Person(user, "终端用户") --> System(backend, "后端服务") : "提交请求"
linkStyle 0 text-padding:12px;

text-padding参数控制文本与线条、元素的间距，数值越大，文本越远离元素。

4. 调整元素自身尺寸 #

如果元素内容过长导致宽度过大挤压空间，可拆分元素文本或显式设置元素宽度：

C4Context
Person(user, "终端用户") --> System(backend, "后端服务\n处理业务逻辑") : "提交请求"
UpdateElementStyle backend $width=200px$

拆分文本或扩大元素宽度，能避免元素之间过度拥挤。

内容的提问来源于stack exchange，提问作者Boris Faniuk