Architecture Diagram - add per group border color and style

[hakanson]

Proposal

For architecture-beta diagrams, instead of a single archGroupBorderColor themeVariable, enable each group to specify inline a border color (e.g. hex color) and border style (e.g. dotted, dashed, or plain/solid). Also add archGroupBorderStyle to theme.

Example

assume themeVariables of archGroupBorderColor of #000000 and archGroupBorderStyle of plain are set

I'm not sure the best syntax, but a # character at the end of the line, followed by a hex color and optional border style. a group without color and style specified would use the theme value.

group awscloud(aws:aws-cloud)[AWS Cloud]
group region(aws:region)[Region] in awscloud #00A4A6{dotted}
group vpc(aws:vpc)[Virtual private cloud] in awscloud #8C4FFF
group az1[Availability Zone 1] in vpc #00A4A6{dashed}
group az1public(aws:public-subnet)[Public Subnet] in az1 #7AA116
group az1private(aws:private-subnet)[Private Subnet] in az1 #00A4A6

Screenshots

The groups from AWS Architecture Icons prefer colored borders with most solid, some groups dashed, and others "dotted" (short dashes).

Take this PlantUML example from https://github.com/awslabs/aws-icons-for-plantuml/tree/main/examples/s3-upload-workflow

and compare against this mermaid version (using custom aws icons)

---

or this PlantUML example from https://github.com/awslabs/aws-icons-for-plantuml/blob/main/examples/Groups%20-%20VPC.puml

and compare to this mermaid version without the different borders

[dave-c-vt]

extending the linkStyle formatter to work in architecture diagrams would be a win as well. default palette to accessible tones per standards like https://www.inclusivecolors.com/ (for example).

W3C has more info on accessible color palettes: https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html