如何在PlantUML的C4组件图中增加组件间水平边距？

我尝试使用PlantUML创建UML图，想要增加组件之间的水平边距。我已经试过使用skinparam nodesep设置，但似乎不起作用。以下是我的示例代码：

@startuml Component Diagram

!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

skinparam nodesep 200 ' horizontal margin '
skinparam ranksep 100 ' vertical margin '

title Example Workflow

AddElementTag("System", $bgColor="#AEC6CF", $borderColor="#AEC6CF", $legendText="System")
AddElementTag("External", $bgColor="#D3D3D3", $borderColor="#D3D3D3", $legendText="External Service")

System_Boundary(c1, "Example System") { 

    Component(component1, "Component 1", "Description 1")
    Component(component2, "Component 2", "Description 2")
    Component(component3, "Component 3", "Description 3")
    Component(component4, "Component 4", "Description 4")
    Component(component5, "Component 5", "Description 5", $tags="External")
    Component(error_handle, "Error Handling", "Handle errors")

    Component(component6, "Component 6", "Description 6")
    
}

' External interactions
Person(user, "User", "Initiates request")

' Interactions and workflow arrows
Rel(user, component1 , "Action 1")
Rel(component1, component2, "Action 2")
Rel(component2, component3, "Action 3")
Rel(component3, component4, "Action 4")
Rel(component4, component5, "Action 5")

Rel(user, component6, "Action 6")

' Error handling interactions
Rel(component2, error_handle, "Failed action", "If input is invalid")
Rel(error_handle, component1, "Prompt retry", "If retry allowed")

SHOW_LEGEND()

@enduml

我希望在不改变布局的前提下增加组件之间的水平间距，该如何实现这一点？

全局的skinparam nodesep对C4-PlantUML的组件元素不生效，因为C4库的布局逻辑依赖PlantUML原生的布局指令，而非skinparam的全局设置。你可以通过以下两种方法解决：

方法1：使用PlantUML原生nodesep指令 #

直接在代码中添加原生的nodesep指令（无需skinparam前缀），它会直接控制同层级节点的水平间距，且不会改变原有布局结构：

@startuml Component Diagram

!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

' 原生nodesep设置水平间距，ranksep设置垂直间距
nodesep 200
ranksep 100

title Example Workflow

AddElementTag("System", $bgColor="#AEC6CF", $borderColor="#AEC6CF", $legendText="System")
AddElementTag("External", $bgColor="#D3D3D3", $borderColor="#D3D3D3", $legendText="External Service")

System_Boundary(c1, "Example System") { 

    Component(component1, "Component 1", "Description 1")
    Component(component2, "Component 2", "Description 2")
    Component(component3, "Component 3", "Description 3")
    Component(component4, "Component 4", "Description 4")
    Component(component5, "Component 5", "Description 5", $tags="External")
    Component(error_handle, "Error Handling", "Handle errors")

    Component(component6, "Component 6", "Description 6")
    
}

' External interactions
Person(user, "User", "Initiates request")

' Interactions and workflow arrows
Rel(user, component1 , "Action 1")
Rel(component1, component2, "Action 2")
Rel(component2, component3, "Action 3")
Rel(component3, component4, "Action 4")
Rel(component4, component5, "Action 5")

Rel(user, component6, "Action 6")

' Error handling interactions
Rel(component2, error_handle, "Failed action", "If input is invalid")
Rel(error_handle, component1, "Prompt retry", "If retry allowed")

SHOW_LEGEND()

@enduml

方法2：针对组件单独设置skinparam #

如果只想调整组件的水平间距，而不影响其他元素，可以用skinparam component单独配置：

skinparam component {
    nodesep 200
}

内容的提问来源于stack exchange，提问作者Louis Dasselaar