#186 Change SKETCH layout via SET_SKETCH_STYLE (incl. fonts, color,....)

[kirchsth]

Implementation of #186

LAYOUT_AS_SKETCH() 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.

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, but this could be fixed in one of the following versions)

@startuml LAYOUT_AS_SKETCH Sample
!include https://raw.githubusercontent.com/kirchsth/C4-PlantUML/extended/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

SVG with fallback fonts MS Gothic,Comic Sans MS,Comic Sans,Chalkboard SE,Comic Neue,cursive,sans-serif

It can be tested with my extended branch

BR Helmut

PS.: PlantUml version 2022.2.beta## has a bug that already defined skinparams cannot be changed anymore. This is fixed in the (yesterday) released 2022.2. With this and (also older) relesed versions the color of the arrows/boundaries/text is changed via the $fontColore too