1 Star 1 Fork 10

爱余星痕 / C4-PlantUML

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
LayoutOptions.md 12.82 KB
一键复制 编辑 原始数据 按行查看 历史
Ricardo Niepel 提交于 2018-11-09 23:21 . Updated readme and samples

Layout Options

PlantUML uses Graphviz for his graph visualization. Thus the rendering itself is done automatically for you - that it one of the biggest advantages of using PlantUML.

...and also sometimes one of the biggest disadvantages, if the rendering is not what the user intended.

For this reason, C4-PlantUML also comes with some layout options.

LAYOUT_TOP_DOWN or LAYOUT_LEFT_RIGHT

With the two macros LAYOUT_TOP_DOWN and LAYOUT_LEFT_RIGHT it is possible to easily change the flow visualization of the diagram. LAYOUT_TOP_DOWN is the default.

@startuml LAYOUT_TOP_DOWN Sample
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml

/' Not needed because this is the default '/
LAYOUT_TOP_DOWN

Person(admin, "Administrator")
System_Boundary(c1, 'Sample') {
    Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines")
}
System(twitter, "Twitter")

Rel(admin, web_app, "Uses", "HTTPS")
Rel(web_app, twitter, "Gets tweets from", "HTTPS")
@enduml

LAYOUT_TOP_DOWN Sample

Using LAYOUT_LEFT_RIGHT

@startuml LAYOUT_LEFT_RIGHT Sample
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml

LAYOUT_LEFT_RIGHT

Person(admin, "Administrator")
System_Boundary(c1, 'Sample') {
    Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines")
}
System(twitter, "Twitter")

Rel(admin, web_app, "Uses", "HTTPS")
Rel(web_app, twitter, "Gets tweets from", "HTTPS")
@enduml

LAYOUT_LEFT_RIGHT Sample

LAYOUT_WITH_LEGEND

Colors can help to add additional information or simply to make the diagram more aesthetically pleasing. It can also help to save some space.

All of that is the reason, C4-PlantUML uses colors and prefer also to enable a layout without <<stereotypes>> and with a legend. This can be enabled with LAYOUT_WITH_LEGEND.

@startuml LAYOUT_WITH_LEGEND Sample
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml

LAYOUT_WITH_LEGEND

Person(admin, "Administrator")
System_Boundary(c1, 'Sample') {
    Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines")
}
System(twitter, "Twitter")

Rel(admin, web_app, "Uses", "HTTPS")
Rel(web_app, twitter, "Gets tweets from", "HTTPS")
@enduml

LAYOUT_WITH_LEGEND Sample

LAYOUT_AS_SKETCH

C4-PlantUML can be especially helpful during up-front design sessions. One thing which is often ignored is the fact, that these software architecture sketches are just sketches.

Without any proof

  • if they are technically possible
  • if they can fullfil all requirements
  • if they keep what they promise

More often these sketches are used by many people as facts and are manifested into their documentations. With LAYOUT_AS_SKETCH you can make a difference.

@startuml LAYOUT_AS_SKETCH Sample
!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml

LAYOUT_AS_SKETCH

Person(admin, "Administrator")
System_Boundary(c1, 'Sample') {
    Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", "Allows users to compare multiple Twitter timelines")
}
System(twitter, "Twitter")

Rel(admin, web_app, "Uses", "HTTPS")
Rel(web_app, twitter, "Gets tweets from", "HTTPS")
@enduml

LAYOUT_AS_SKETCH Sample

1
https://gitee.com/starmark947618/C4-PlantUML.git
git@gitee.com:starmark947618/C4-PlantUML.git
starmark947618
C4-PlantUML
C4-PlantUML
master

搜索帮助