From abe5940384e241cdb535fbef06b874ee9f36c0c0 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sat, 21 Aug 2021 13:39:52 +0200 Subject: [PATCH] #174 Add Layout Landscape --- C4.puml | 73 +++++++++++++++++++++------ C4_Dynamic.puml | 32 ++++++------ LayoutOptions.md | 39 ++++++++++++-- README.md | 2 +- percy/TestLayoutLandscape.puml | 32 ++++++++++++ percy/TestLayoutLandscapeDynamic.puml | 32 ++++++++++++ 6 files changed, 174 insertions(+), 36 deletions(-) create mode 100644 percy/TestLayoutLandscape.puml create mode 100644 percy/TestLayoutLandscapeDynamic.puml diff --git a/C4.puml b/C4.puml index bef1de5..558f00c 100644 --- a/C4.puml +++ b/C4.puml @@ -749,11 +749,52 @@ skinparam defaultFontName "Comic Sans MS" center footer Warning: 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 diff --git a/C4_Dynamic.puml b/C4_Dynamic.puml index a307e84..8ba4a09 100644 --- a/C4_Dynamic.puml +++ b/C4_Dynamic.puml @@ -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 diff --git a/LayoutOptions.md b/LayoutOptions.md index 781d0d3..c9c885c 100644 --- a/LayoutOptions.md +++ b/LayoutOptions.md @@ -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) diff --git a/README.md b/README.md index 66453fd..6c0450c 100644 --- a/README.md +++ b/README.md @@ -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) diff --git a/percy/TestLayoutLandscape.puml b/percy/TestLayoutLandscape.puml new file mode 100644 index 0000000..a709ea9 --- /dev/null +++ b/percy/TestLayoutLandscape.puml @@ -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 diff --git a/percy/TestLayoutLandscapeDynamic.puml b/percy/TestLayoutLandscapeDynamic.puml new file mode 100644 index 0000000..2a2a0cb --- /dev/null +++ b/percy/TestLayoutLandscapeDynamic.puml @@ -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