From ec41e918fabb175f6be9a8fc20672c0aa6ea4094 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sun, 27 Feb 2022 20:21:57 +0100 Subject: [PATCH 1/4] #186 LAYOUT_AS_SKETCH() styles can be set via SET_SKETCH_STYLE() --- C4.puml | 47 ++++++++++++++++++++++++++++++++++++++++---- LayoutOptions.md | 51 +++++++++++++++++++++++++++++++++++++++++++++++- README.md | 4 ++-- 3 files changed, 95 insertions(+), 7 deletions(-) diff --git a/C4.puml b/C4.puml index 3f824160..7cea3c98 100644 --- a/C4.puml +++ b/C4.puml @@ -29,6 +29,11 @@ rectangle C4VersionDetailsArea <> [ !global $LEGEND_DARK_COLOR = "#66622E" !global $LEGEND_LIGHT_COLOR = "#khaki" +!global $SKETCH_BG_COLOR = "#EEEBDC" +!global $SKETCH_FONT_COLOR = "" +!global $SKETCH_WARNING_COLOR = "red" +!global $SKETCH_FONT_NAME = "Comic Sans MS" + ' Labels ' ################################## @@ -44,6 +49,9 @@ rectangle C4VersionDetailsArea <> [ !global $LEGEND_DASHED_LINE = "(dashed) " !global $LEGEND_BOLD_LINE = "(bold) " +!global $SKETCH_FOOTER_WARNING = "Warning:" +!global $SKETCH_FOOTER_TEXT = "Created for discussion, needs to be validated" + ' Styling ' ################################## @@ -893,11 +901,42 @@ $getLegendTable() hide stereotype !endprocedure +!unquoted procedure SET_SKETCH_STYLE($bgColor="_dont_change_", $fontColor="_dont_change_", $warningColor="_dont_change_", $fontName="_dont_change_", $footerWarning="_dont_change_", $footerText="_dont_change_") +!if $bgColor != "_dont_change_" + !global $SKETCH_BG_COLOR = $bgColor +!endif +!if $fontColor != "_dont_change_" + !global $SKETCH_FONT_COLOR = $fontColor +!endif +!if $warningColor != "_dont_change_" + !global $SKETCH_WARNING_COLOR = $warningColor +!endif +!if $fontName != "_dont_change_" + !global $SKETCH_FONT_NAME = $fontName +!endif +!if $footerWarning != "_dont_change_" + !global $SKETCH_FOOTER_WARNING = $footerWarning +!endif +!if $footerText != "_dont_change_" + !global $SKETCH_FOOTER_TEXT = $footerText +!endif +!endprocedure + !procedure LAYOUT_AS_SKETCH() -skinparam backgroundColor #EEEBDC -skinparam handwritten true -skinparam defaultFontName "Comic Sans MS" -center footer Warning: Created for discussion, needs to be validated + skinparam handwritten true +!if $SKETCH_BG_COLOR > "" + skinparam backgroundColor $SKETCH_BG_COLOR +!endif +!if $SKETCH_FONT_COLOR > "" + skinparam defaultFontColor $SKETCH_FONT_COLOR +!endif +!if $SKETCH_FONT_NAMES > "" + skinparam defaultFontName $SKETCH_FONT_NAME +!endif +!if $SKETCH_FOOTER_WARNING > "" || $SKETCH_FOOTER_TEXT > "" + !$line = "footer "+ $SKETCH_FOOTER_WARNING + " " + $SKETCH_FOOTER_TEXT + $line +!endif !endprocedure !global $fix_direction=%false() diff --git a/LayoutOptions.md b/LayoutOptions.md index 96d9c553..59d6231a 100644 --- a/LayoutOptions.md +++ b/LayoutOptions.md @@ -192,7 +192,7 @@ Lay_Distance(LEGEND(), e, 1) ![Compact Legend Layout Sample](https://www.plantuml.com/plantuml/png/RP7VQ-em5CVVyrUavS9juTwMmPu60vtjtA1JqOqzXfWURLXC9Jbb-j_lr6gri9Ss-Nn_d3OPUPGEcvrXWRRAD2Nm2d7l7zBKoUzagx5greq7fsgBO35HzIxzqavL7gjqSlz_OQJ5ZxSYXGFf9PG4nOJCKbjmoRwjPcm1pjSsalzus2tvE8nPRulM9FGx_XJI5a5LbaoheqVOHOfGj-IJGRGSHBFRQ8z5Vi08IA5tmg_k_DRDbc34ilt6DL4bZV54MvX5H1H1EeWh8r0EsJ8Y02tRbn9Fc0MRnYhKzCT5FirdMHIpm04spl9mOsg9scw5WItOCcG1FIz-jdgPVuhdOZv-VvrDnJbzAObP8OyYqtHzLa6FJ-FlQ2pxouC_7UMFFEm62Eb0XYJzMdssnwGFki_yKZsY8hhK7m00 "Compact Legend Layout Sample") -## LAYOUT_AS_SKETCH() +## LAYOUT_AS_SKETCH() and SET_SKETCH_STYLE(?bgColor, ?fontColor, ?warningColor, ?fontName, ?footerWarning, ?footerText) 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. @@ -225,6 +225,55 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") ![LAYOUT_AS_SKETCH Sample](https://www.plantuml.com/plantuml/png/NL1DI_D04BxlhvYtxw4fj0aLJvuQGx5Wgy6aYgUmILQxi1_BxeHGnF_kBDLMp6N8pFFnFBiAo3qEMi4sVttSrqrUDTNzkYusK77jb63_fEdKq0iu8BfmasMUZ-cxnCFG3a7upXeK1jFEwimfRgBM8c2lP9iLruiohlQxRQPvGE5frHJ4uD88dph2ClRNE9anLWeVh4buhwMPmoIFKmRq7AsVp5Xr937TtDh1zDmVasuvX-afxtG67mpeEziaesWRxXpfl8WMSkUKx3XAQoQqAlxF8Q_Az65T4yKBk4gNi7ikuYrNoeu1Oiq0Q84wEauGFIYKv0NrA95Q0Kej57a5olRvdIx1qv5qJh0Od3q9zTFg4ciVY4bpKzTbHQW8EbylCdS20_sAEDwyrRyfAs7w-9fV "LAYOUT_AS_SKETCH Sample") +Additional styles and the footer text can be changed with SET_SKETCH_STYLE(): + +* `SET_SKETCH_STYLE(?bgColor, ?fontColor, ?warningColor, ?fontName, ?footerWarning, ?footerText)`: + Enables the modification of differnt sketch styles and footer text. + +The possible font name(s) depend on the output format (e.g. PNG uses fonts which are installed on the server and SVG fonts have to be installed on the client). +Additional is it possible to define comma separated fall back fonts (if the diagrams are exported as SVG. Atm +PNG does not support fallback fonts based on a PlantUML [bug](https://forum.plantuml.net/14842/specify-fall-back-fonts-is-not-working), but this could be fixed in one of the following versions) + +```plantuml +@startuml LAYOUT_AS_SKETCH Sample +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml + +SET_SKETCH_STYLE($bgColor="lightblue", $fontColor="darkblue", $warningColor="darkred", $footerWarning="Sketch", $footerText="Created for discussion") + +' PNG with font jlm_cmmi10 (typically another font is used) +' SET_SKETCH_STYLE($fontName="jlm_cmmi10") + +' SVG with fallback fonts MS Gothic,Comic Sans MS, Comic Sans, Chalkboard SE, Comic Neue, cursive, sans-serif (typically without "MS Gothic") +SET_SKETCH_STYLE($fontName="MS Gothic,Comic Sans MS,Comic Sans,Chalkboard SE,Comic Neue,cursive,sans-serif") + +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 +``` + +PNG with font `jlm_cmmi10` + +![LAYOUT_AS_SKETCH with custom style png Sample](https://www.plantuml.com/plantuml/png/VL9TQzim57tFhxZp2ad1JTQnfq6WcGajhCt2xBRqoSZoJQD57qQwMXR6_lkkcgJEO5jUP9rxFiv5kGeaF4MZ1s-KbJgs26kYBdoSJBpOZfyLhMCJ0thfBA6biNHcqcbXa-OYKAjLCoa-N2mJT7ztEp4Y47g6we8LGbdquoxv3yfvLPUVvrLnKvVLq-ryTDOy5quxFysqUbvJeoDcEPojM7V0Zz1MUAliaTqAl_7OxhcEqnxtusbMRf3akXzK-8EcMU5H4BQmSXvQ5MGCGJcRdGy6GrWkhc7BIq9AXM_QrD8OTVaEHhJhb1HQxq1OHslqUueA40EsvtzP9yqNmk0qwttsAUN3COKD6o4tBru1xaguPcybyy8P9Q4KDe4vz5V-NWkzQPpmBPJpusY14NEGqGVrdJy2Coy2UhKwBPuYNIJ8NdEupX3-r_nVZKuA_TddfCwnJLycRNyxU_foNzMpyf0vOco9FZWx4grHDeTibauLo0jodZNbBX2Q-fEBjXL-DvANEGnBOJgDmtFuEG3-lVwxHbjiQj5rxFE83SowJlFwb5wOeU9j3hDoELxCAvPuXFVZIxXxAD9ifhNRlZod3q0Ef3ETO8g9cXHdGRLLHEY1b47DMO6x_Jgq6z5-o3u7MbhsA-hZLdsj-y1AFc-gQbaoYqbzwTxc6Ydm5TEnyiwSIgxGjj7etm00 "LAYOUT_AS_SKETCH with custom style png Sample") + +SVG with fallback fonts MS Gothic,Comic Sans MS,Comic Sans,Chalkboard SE,Comic Neue,cursive,sans-serif + +![LAYOUT_AS_SKETCH with custom style svg Sample](https://www.plantuml.com/plantuml/svg/VP9lQzim4CRVvrFSl49TS9DrxDKWqCo45jPcONPR-ih8ygNHeZz6EYqBOzzz9vBK6MFB6rbtpptFxr2k0mbFqUZH6sMbZXt2cgWF7oSJBxRZ5qNhsCQ0NZfBQ6aidPdqMjWqSnceqwgTb1ykbwdqS7ytCI8GUYur9Ky8PT6F--G_gkPrKtsUr-LjKzNFT_Fyh7qfdNP-ccdrigPMHymAE5lntA5-B6s5jyeUrPtm6u_TNkiuxMdVdcRL1ackXqQDFsYQbHu5OGShvw5JGSOGbBFPnMXq3il53MnvIKYfy4sRHXgZhjv1JhjUIQ7r3eHrj4Q_bwW0CM1tmRD_BvGK2s5mcWrE-vpgyPZ3bgsG6qZQ0FSLtB2xaaNfZ99G2PkA1GnN_buBlMcTy1rd7biBZ5Y0Z3wex_mHM7aPqAlLANgAT94WUyrXdFzn_uld1ETFcXEO8yk0adQ_cpr_UQYRMNN8pBcsH1-SpKLdb2qWcwLJ1VA2d4-0kq1ecayksaxuNIwl2ZYlXEardb_0pn7mx_NVbM-nRKJViyyJjZ3hUytBKtfXBfLl2vXLo_5YNlE8HtW_leBxnpBrPbgxRNfEfW5o89tf1KjCrAGu2-gj8a8Ff0ngpWhCzkj0bzE-oJu7MLhsA-hZLWFMG-19Fc_hUbcnYaK3z61pWnJuYkbOUMTEHwxHTj7etm00 "LAYOUT_AS_SKETCH with custom style svg Sample") + +All available (PNG) fonts can be displayed with + +```plantuml +@startuml +listfonts +@enduml +``` ## HIDE_STEREOTYPE() diff --git a/README.md b/README.md index 4806e4bf..1ffff254 100644 --- a/README.md +++ b/README.md @@ -365,7 +365,7 @@ C4-PlantUML also comes with some layout options to make it easy and reusable to * [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) +* [LAYOUT_AS_SKETCH() and SET_SKETCH_STYLE(?bgColor, ?fontColor, ?warningColor, ?fontName, ?footerWarning, ?footerText)](LayoutOptions.md#layout_as_sketch) * [HIDE_STEREOTYPE()](LayoutOptions.md#hide_stereotype) C4-PlantUML also comes with some person sprite/portrait options: @@ -691,7 +691,7 @@ C4-PlantUML also comes with some layout options to make it easy and reuseable to * [LAYOUT_TOP_DOWN or LAYOUT_LEFT_RIGHT](LayoutOptions.md#layout_top_down-or-layout_left_right) * [LAYOUT_WITH_LEGEND](LayoutOptions.md#layout_with_legend) -* [LAYOUT_AS_SKETCH](LayoutOptions.md#layout_as_sketch) +* [LAYOUT_AS_SKETCH and SET_SKETCH_STYLE(?bgColor, ?fontColor, ?warningColor, ?fontName, ?footerWarning, ?footerText)](LayoutOptions.md#layout_as_sketch) ## Advanced Samples From e607396e47fa101a019f31b28d323a8e77c312c6 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sat, 5 Mar 2022 21:47:38 +0100 Subject: [PATCH 2/4] #186 LAYOUT_AS_SKETCH() styles can be set via SET_SKETCH_STYLE() (2 - border and arrow color changed too) --- C4.puml | 18 +++++++++++++++++- percy/TestSketchStyle.puml | 28 ++++++++++++++++++++++++++++ 2 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 percy/TestSketchStyle.puml diff --git a/C4.puml b/C4.puml index 7cea3c98..c81f5dd9 100644 --- a/C4.puml +++ b/C4.puml @@ -928,7 +928,23 @@ hide stereotype skinparam backgroundColor $SKETCH_BG_COLOR !endif !if $SKETCH_FONT_COLOR > "" - skinparam defaultFontColor $SKETCH_FONT_COLOR + skinparam footer { + FontColor $SKETCH_FONT_COLOR + } + !if $ARROW_COLOR == "#666666" + !global $ARROW_COLOR = $SKETCH_FONT_COLOR + skinparam arrow { + Color $ARROW_COLOR + FontColor $ARROW_COLOR + } + !endif + !if $BOUNDARY_COLOR == "#444444" + !global $BOUNDARY_COLOR = $SKETCH_FONT_COLOR + skinparam rectangle<> { + FontColor $BOUNDARY_COLOR + BorderColor $BOUNDARY_COLOR + } + !endif !endif !if $SKETCH_FONT_NAMES > "" skinparam defaultFontName $SKETCH_FONT_NAME diff --git a/percy/TestSketchStyle.puml b/percy/TestSketchStyle.puml new file mode 100644 index 00000000..6d3222ce --- /dev/null +++ b/percy/TestSketchStyle.puml @@ -0,0 +1,28 @@ +@startuml LAYOUT_AS_SKETCH Sample +!if %variable_exists("RELATIVE_INCLUDE") + !include ./../C4_Container.puml +!else + !include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Container.puml +!endif + +SET_SKETCH_STYLE($bgColor="lightblue", $fontColor="darkblue", $warningColor="darkred", $footerWarning="Sketch", $footerText="Created for discussion") + +' PNG with font jlm_cmmi10 (typically another font is used) +' SET_SKETCH_STYLE($fontName="jlm_cmmi10") + +' SVG with fallback fonts MS Gothic,Comic Sans MS, Comic Sans, Chalkboard SE, Comic Neue, cursive, sans-serif (typically without "MS Gothic") +SET_SKETCH_STYLE($fontName="MS Gothic,Comic Sans MS,Comic Sans,Chalkboard SE,Comic Neue,cursive,sans-serif") + +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") + +SHOW_LEGEND() +@enduml \ No newline at end of file From c65e5de534485ce311a3f24d89c6bfa30fa78fa3 Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sun, 6 Mar 2022 11:53:41 +0100 Subject: [PATCH 3/4] #186 LAYOUT_AS_SKETCH() styles can be set via SET_SKETCH_STYLE() (3 - cleanup) --- LayoutOptions.md | 2 +- README.md | 8 -------- percy/TestSketchStyle.puml | 4 ++-- 3 files changed, 3 insertions(+), 11 deletions(-) diff --git a/LayoutOptions.md b/LayoutOptions.md index 59d6231a..103a75d5 100644 --- a/LayoutOptions.md +++ b/LayoutOptions.md @@ -228,7 +228,7 @@ Rel(web_app, twitter, "Gets tweets from", "HTTPS") Additional styles and the footer text can be changed with SET_SKETCH_STYLE(): * `SET_SKETCH_STYLE(?bgColor, ?fontColor, ?warningColor, ?fontName, ?footerWarning, ?footerText)`: - Enables the modification of differnt sketch styles and footer text. + Enables the modification of differnt sketch styles and footer. The possible font name(s) depend on the output format (e.g. PNG uses fonts which are installed on the server and SVG fonts have to be installed on the client). Additional is it possible to define comma separated fall back fonts (if the diagrams are exported as SVG. Atm diff --git a/README.md b/README.md index 1ffff254..334c0d7c 100644 --- a/README.md +++ b/README.md @@ -685,14 +685,6 @@ It is possible to save them directly inside VS Code: [Creating your own snippets ![C4-PlantUML Snippets Video](images/intellij_c4plantum_live_template1.gif) ![C4-PlantUML Snippets Video](images/intellij_c4plantum_live_template2.gif) -## Layout Options - -C4-PlantUML also comes with some layout options to make it easy and reuseable to create nice and useful diagrams: - -* [LAYOUT_TOP_DOWN or LAYOUT_LEFT_RIGHT](LayoutOptions.md#layout_top_down-or-layout_left_right) -* [LAYOUT_WITH_LEGEND](LayoutOptions.md#layout_with_legend) -* [LAYOUT_AS_SKETCH and SET_SKETCH_STYLE(?bgColor, ?fontColor, ?warningColor, ?fontName, ?footerWarning, ?footerText)](LayoutOptions.md#layout_as_sketch) - ## Advanced Samples The following advanced samples are reproductions with C4-PlantUML from official [C4 model samples](https://c4model.com/#examples) created by [Simon Brown](https://simonbrown.je/). diff --git a/percy/TestSketchStyle.puml b/percy/TestSketchStyle.puml index 6d3222ce..d0b85ff7 100644 --- a/percy/TestSketchStyle.puml +++ b/percy/TestSketchStyle.puml @@ -2,7 +2,7 @@ !if %variable_exists("RELATIVE_INCLUDE") !include ./../C4_Container.puml !else - !include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/C4_Container.puml + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master//C4_Container.puml !endif SET_SKETCH_STYLE($bgColor="lightblue", $fontColor="darkblue", $warningColor="darkred", $footerWarning="Sketch", $footerText="Created for discussion") @@ -25,4 +25,4 @@ Rel(admin, web_app, "Uses", "HTTPS") Rel(web_app, twitter, "Gets tweets from", "HTTPS") SHOW_LEGEND() -@enduml \ No newline at end of file +@enduml From 59f24b597c62b7dd6fdfe2d0d6ddd6050eaab58d Mon Sep 17 00:00:00 2001 From: KIRCHSTH Date: Sun, 6 Mar 2022 12:10:16 +0100 Subject: [PATCH 4/4] #186 LAYOUT_AS_SKETCH() styles can be set via SET_SKETCH_STYLE() (4 - build) --- percy/TestSketchStyle.puml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/percy/TestSketchStyle.puml b/percy/TestSketchStyle.puml index d0b85ff7..8a9a6b2e 100644 --- a/percy/TestSketchStyle.puml +++ b/percy/TestSketchStyle.puml @@ -2,7 +2,7 @@ !if %variable_exists("RELATIVE_INCLUDE") !include ./../C4_Container.puml !else - !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master//C4_Container.puml + !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml !endif SET_SKETCH_STYLE($bgColor="lightblue", $fontColor="darkblue", $warningColor="darkred", $footerWarning="Sketch", $footerText="Created for discussion")