#174 Add Layout Landscape

pull/177/head
KIRCHSTH 5 years ago
parent 4f7c12dd63
commit 229360281e

@ -749,11 +749,52 @@ skinparam defaultFontName "Comic Sans MS"
center footer <font color=red>Warning:</font> Created for discussion, needs to be validated
!endprocedure
!global $fix_direction=%false()
!function $down($start,$end)
!if ($fix_direction)
!return $start+"RIGHT"+$end
!else
!return $start+"DOWN"+$end
!endif
!endfunction
!function $up($start,$end)
!if ($fix_direction)
!return $start+"LEFT"+$end
!else
!return $start+"UP"+$end
!endif
!endfunction
!function $left($start,$end)
!if ($fix_direction)
!return $start+"UP"+$end
!else
!return $start+"LEFT"+$end
!endif
!endfunction
!function $right($start,$end)
!if ($fix_direction)
!return $start+"DOWN"+$end
!else
!return $start+"RIGHT"+$end
!endif
!endfunction
!procedure LAYOUT_TOP_DOWN()
!global $fix_direction=%false()
top to bottom direction
!endprocedure
!procedure LAYOUT_LEFT_RIGHT()
!global $fix_direction=%false()
left to right direction
!endprocedure
!procedure LAYOUT_LANDSCAPE()
!global $fix_direction=%true()
left to right direction
!endprocedure
@ -859,59 +900,59 @@ $getRel("<<-", $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure Rel_D($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("-DOWN->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
$getRel($down("-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure Rel_Down($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("-DOWN->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
$getRel($down("-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure BiRel_D($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("<<-DOWN->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
$getRel($down("<<-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure BiRel_Down($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("<<-DOWN->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
$getRel($down("<<-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure Rel_U($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("-UP->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
$getRel($up("-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure Rel_Up($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("-UP->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
$getRel($up("-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure BiRel_U($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("<<-UP->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
$getRel($up("<<-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure BiRel_Up($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("<<-UP->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
$getRel($up("<<-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure Rel_L($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("-LEFT->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
$getRel($left("-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure Rel_Left($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("-LEFT->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
$getRel($left("-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure BiRel_L($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("<<-LEFT->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
$getRel($left("<<-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure BiRel_Left($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("<<-LEFT->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
$getRel($left("<<-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure Rel_R($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("-RIGHT->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
$getRel($right("-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure Rel_Right($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("-RIGHT->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
$getRel($right("-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure BiRel_R($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("<<-RIGHT->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
$getRel($right("<<-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure BiRel_Right($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("<<-RIGHT->>", $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
$getRel($right("<<-","->>"), $from, $to, $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
' Layout Helpers

@ -94,53 +94,53 @@ $getRel("<<-", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $t
!endprocedure
!unquoted procedure Rel_D($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("-DOWN->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link)
$getRel($down("-","->>"), $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure Rel_Down($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("-DOWN->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link)
$getRel($down("-","->>"), $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure RelIndex_D($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("-DOWN->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link)
$getRel($down("-","->>"), $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure RelIndex_Down($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("-DOWN->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link)
$getRel($down("-","->>"), $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure Rel_U($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("-UP->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link)
$getRel($up("-","->>"), $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure Rel_Up($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("-UP->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link)
$getRel($up("-","->>"), $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure RelIndex_U($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("-UP->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link)
$getRel($up("-","->>"), $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure RelIndex_Up($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("-UP->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link)
$getRel($up("-","->>"), $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure Rel_L($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("-LEFT->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link)
$getRel($left("-","->>"), $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure Rel_Left($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("-LEFT->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link)
$getRel($left("-","->>"), $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure RelIndex_L($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("-LEFT->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link)
$getRel($left("-","->>"), $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure RelIndex_Left($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("-LEFT->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link)
$getRel($left("-","->>"), $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure Rel_R($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("-RIGHT->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link)
$getRel($right("-","->>"), $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure Rel_Right($from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("-RIGHT->>", $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link)
$getRel($right("-","->>"), $from, $to, Index() + ": " + $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure RelIndex_R($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("-RIGHT->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link)
$getRel($right("-","->>"), $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure
!unquoted procedure RelIndex_Right($e_index, $from, $to, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
$getRel("-RIGHT->>", $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link)
$getRel($right("-","->>"), $from, $to, $e_index + ": " + $label, $techn, $descr, $sprite, $tags, $link)
!endprocedure

@ -6,7 +6,7 @@ PlantUML uses [Graphviz](https://www.graphviz.org/) for its graph visualization.
For this reason, C4-PlantUML also comes with some layout options.
## LAYOUT_TOP_DOWN() or LAYOUT_LEFT_RIGHT()
## LAYOUT_TOP_DOWN() or LAYOUT_LEFT_RIGHT() or LAYOUT_LANDSCAPE()
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.
@ -30,8 +30,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
![LAYOUT_TOP_DOWN Sample](https://www.plantuml.com/plantuml/png/NP1DJyCm38Rl-HLc7DP9ezKG9quh0y5X7nNhc3XLQUknI6aI9IxLXFZlkDhO454aI_Rhruyz3IGzjOs6UVg-skH5ligAnzLs2MlPE8tYIfbAjpN2diY5-oJniei_5EtRiWteAsi83SMLRH9PUoNDfsvTcypkRZ8j3MqMyqHBma2SAcQibigWZnsF528Pmj8I6CGQQoYnakm9j5S1-DCUeSQTR3N1C17_0AEH41dwO4qawqQPCGpIFgf0NfBrWv5O7m9XKppOrjJI7w9gCeRXSQ_X2Bu4y3iZHHsMXNIEVRPOGkgSLfKaPSs0KxFhCQJhB5u-vTpY4MxZ2IpUPdqjrTfs0VfpCBG5leMJB6aONF4io3j5X1v8DQXvLc2sxnDTHCSY-vnaN1Ilg7-tkc1j0dToVCdpRCsgNdIkNcoUaHYZmpxil6t-japHr7pv7m00 "LAYOUT_TOP_DOWN Sample")
Using `LAYOUT_LEFT_RIGHT()`
`LAYOUT_LEFT_RIGHT()` rotates the flow visualization to *from Left to Right* and directed relations like `Rel_Left()`, `Rel_Right()`, `Rel_Up()` and `Rel_Down()` are rotated too.
```csharp
@startuml LAYOUT_LEFT_RIGHT Sample
@ -52,6 +51,40 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS")
![LAYOUT_LEFT_RIGHT Sample](https://www.plantuml.com/plantuml/png/PL1DIyD05BplhrZheIdKX8edJusXjaAhfKaLJs6RFEt2Vh7xrb34_-uBhLPmBmDlvhsPsMb0uJ5gnPVvwzEsgfUp-whUFCmN5I-5TWhOXJIDYYtmFQ8BjrdcHPU-Izp7NGpW6siG3AQDrPbelHJcGqKNi-BcQgs4mUrgcIc14916TK5g8Gtur94fO_zSan5ZQ_31caIqMfen7-Gzoe1UeFM34IiF0K7NTpQQLlX3qap6V7WCEnpnJyRf_Vea7UnguHpTUO4TpvrJiX4ehHdGgBWSyxnSfu-pYbOyyEjqmbVFHS_bIjakyBvZu6Wv5NI293egbEJ5gquYWkSeDIZo2fJjwvGkmID9Tquo8ja6r4-hSwnje4t2HLMjIrBreb_sV6OEI34wwE7DM_rtPGgcfU_y1W00 "LAYOUT_LEFT_RIGHT Sample")
`LAYOUT_LANDSCAPE()` rotates the default flow visualization to *from Left to Right* like `LAYOUT_LEFT_RIGHT()` additional **directed relations** like Rel_Left(), Rel_Right(), Rel_Up() and Rel_Down() **are not rotated** anymore.
```csharp
@startuml LAYOUT_LANDSCAPE Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
LAYOUT_LANDSCAPE()
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")
System(S,"S")
System(SU,"S Up")
System(SD,"S Down")
System(SL,"S Left")
System(SR,"S Right")
Rel_Up(S, SU, "Up")
Rel_Down(S, SD, "Down")
Rel_Left(S, SL, "Left")
Rel_Right(S, SR, "Right")
SHOW_LEGEND()
@enduml
```
![LAYOUT_LANDSCAPE Sample](https://www.plantuml.com/plantuml/png/NOzFRvj04CNlV8gjUmYM75kfUkef5ApaG1nae55FQ0sJUANzizeTXAAgtxqpCNQiSa7lDxFllRcFA0EEHeio-_tSDbsPxOewpwgjgANn6f8lolPw740S4NtyiTa4EQtV51x7mnWXzCuYM5ptpcoybfQzRYCEMXqs-VVRYb7xL6wCZ0Y1K9VJ2waiXBMdtIJvFpXT9aa58JgRoi4eknABZFygOf3emcAPrEzaPhgVRhI33EzfVxSIDwU-Dqln9n7qNMBI2GwTz9vyNk0WCk-rwYKgPnU4ygyhaTNLUhTjw4a0yMrz9vv-vJpBj7PJ57nc5EW4tUWbhPXHew8iqKmA4O90PK1JLgHkV-TsAPw6v3ElqJ3PWpvVzLchZH0vxx5fgfgsUEao_RHv08maWN-lmPdh9-VGUhLWULOjIT7wAr8mATnahrZ9h8HNl69xPdlrTiIvTjTwSXTrouNPaHaRVT22A8kPiza7Bucpc3aRdWPx6bpiwyVdbwxSFcntHKho7kmm6lqF "LAYOUT_LANDSCAPE Sample")
## LAYOUT_WITH_LEGEND() or SHOW_LEGEND(?hideStereotype)

@ -357,7 +357,7 @@ Lay_Distance(LEGEND(), db, 1)
C4-PlantUML also comes with some layout options to make it easy and reusable to create nice and useful diagrams:
* [LAYOUT_TOP_DOWN() or LAYOUT_LEFT_RIGHT()](LayoutOptions.md#layout_top_down-or-layout_left_right)
* [LAYOUT_TOP_DOWN() or LAYOUT_LEFT_RIGHT() or LAYOUT_LANDSCAPE()](LayoutOptions.md#layout_top_down-or-layout_left_right-or-layout_landscape)
* [LAYOUT_WITH_LEGEND() or SHOW_LEGEND(?hideStereotype)](LayoutOptions.md#layout_with_legend-or-show_legend)
* [SHOW_FLOATING_LEGEND(?alias, ?hideStereotype) and LEGEND()](LayoutOptions.md#show_floating_legendalias-hidestereotype-and-legend)
* [LAYOUT_AS_SKETCH()](LayoutOptions.md#layout_as_sketch)

@ -0,0 +1,32 @@
@startuml
' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
!if %variable_exists("RELATIVE_INCLUDE")
!include ./../C4_Component.puml
!else
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
!endif
LAYOUT_LANDSCAPE()
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")
System(S,"S")
System(SU,"S Up")
System(SD,"S Down")
System(SL,"S Left")
System(SR,"S Right")
Rel_Up(S, SU, "Up")
Rel_Down(S, SD, "Down")
Rel_Left(S, SL, "Left")
Rel_Right(S, SR, "Right")
SHOW_LEGEND()
@enduml

@ -0,0 +1,32 @@
@startuml
' convert it with additional command line argument -DRELATIVE_INCLUDE="." to use locally
!if %variable_exists("RELATIVE_INCLUDE")
!include ./../C4_Dynamic.puml
!else
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Dynamic.puml
!endif
LAYOUT_LANDSCAPE()
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")
System(S,"S")
System(SU,"S Up")
System(SD,"S Down")
System(SL,"S Left")
System(SR,"S Right")
Rel_Up(S, SU, "Up")
Rel_Down(S, SD, "Down")
Rel_Left(S, SL, "Left")
Rel_Right(S, SR, "Right")
SHOW_LEGEND()
@enduml
Loading…
Cancel
Save