Mermaid exporter now correctly styles software system/container boundaries in the same way the Structurizr renderer and PlantUML exporters do.

Author: simonbrowndotje

src/main/java/com/structurizr/export/mermaid/MermaidDiagramExporter.java

@@ -133,12 +133,8 @@ protected void endGroupBoundary(ModelView view, IndentingWriter writer) {
 
     @Override
     protected void startSoftwareSystemBoundary(ModelView view, SoftwareSystem softwareSystem, IndentingWriter writer) {
-        String color;
-        if (softwareSystem.equals(view.getSoftwareSystem())) {
-            color = "#444444";
-        } else {
-            color = "#cccccc";
-        }
+        ElementStyle elementStyle = view.getViewSet().getConfiguration().getStyles().findElementStyle(softwareSystem);
+        String color = elementStyle.getStroke();
 
         writer.writeLine(String.format("subgraph %s [%s]", softwareSystem.getId(), softwareSystem.getName()));
         writer.indent();
@@ -155,20 +151,8 @@ protected void endSoftwareSystemBoundary(ModelView view, IndentingWriter writer)
 
     @Override
     protected void startContainerBoundary(ModelView view, Container container, IndentingWriter writer) {
-        String color = "#444444";
-        if (view instanceof ComponentView) {
-            if (container.equals(((ComponentView)view).getContainer())) {
-                color = "#444444";
-            } else {
-                color = "#cccccc";
-            }
-        } else if (view instanceof DynamicView) {
-            if (container.equals(((DynamicView)view).getElement())) {
-                color = "#444444";
-            } else {
-                color = "#cccccc";
-            }
-        }
+        ElementStyle elementStyle = view.getViewSet().getConfiguration().getStyles().findElementStyle(container);
+        String color = elementStyle.getStroke();
 
         writer.writeLine(String.format("subgraph %s [%s]", container.getId(), container.getName()));
         writer.indent();

src/test/java/com/structurizr/export/mermaid/36141-Components.mmd

@@ -16,7 +16,7 @@ graph TB
     style 21 fill:#438dd5,stroke:#2e6295,color:#ffffff
 
     subgraph 20 [API Application]
-      style 20 fill:#ffffff,stroke:#444444,color:#444444
+      style 20 fill:#ffffff,stroke:#2e6295,color:#2e6295
 
       29["<div style='font-weight: bold'>Sign In Controller</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring MVC Rest Controller]</div><div style='font-size: 80%; margin-top:10px'>Allows users to sign in to<br />the Internet Banking System.</div>"]
       style 29 fill:#85bbf0,stroke:#5d82a8,color:#000000

src/test/java/com/structurizr/export/mermaid/36141-Containers.mmd

@@ -12,7 +12,7 @@ graph TB
     style 6 fill:#999999,stroke:#6b6b6b,color:#ffffff
 
     subgraph 2 [Internet Banking System]
-      style 2 fill:#ffffff,stroke:#444444,color:#444444
+      style 2 fill:#ffffff,stroke:#0b4884,color:#0b4884
 
       17["<div style='font-weight: bold'>Single-Page Application</div><div style='font-size: 70%; margin-top: 0px'>[Container: JavaScript and Angular]</div><div style='font-size: 80%; margin-top:10px'>Provides all of the Internet<br />banking functionality to<br />customers via their web<br />browser.</div>"]
       style 17 fill:#438dd5,stroke:#2e6295,color:#ffffff

src/test/java/com/structurizr/export/mermaid/36141-SignIn.mmd

@@ -5,7 +5,7 @@ graph TB
     style diagram fill:#ffffff,stroke:#ffffff
 
     subgraph 20 [API Application]
-      style 20 fill:#ffffff,stroke:#444444,color:#444444
+      style 20 fill:#ffffff,stroke:#2e6295,color:#2e6295
 
       29["<div style='font-weight: bold'>Sign In Controller</div><div style='font-size: 70%; margin-top: 0px'>[Component: Spring MVC Rest Controller]</div><div style='font-size: 80%; margin-top:10px'>Allows users to sign in to<br />the Internet Banking System.</div>"]
       style 29 fill:#85bbf0,stroke:#5d82a8,color:#000000

src/test/java/com/structurizr/export/mermaid/MermaidDiagramExporterTests.java

@@ -149,14 +149,14 @@ public void test_renderContainerDiagramWithExternalContainers() {
                 "    style diagram fill:#ffffff,stroke:#ffffff\n" +
                 "\n" +
                 "    subgraph 1 [Software System 1]\n" +
-                "      style 1 fill:#ffffff,stroke:#444444,color:#444444\n" +
+                "      style 1 fill:#ffffff,stroke:#9a9a9a,color:#9a9a9a\n" +
                 "\n" +
                 "      2[\"<div style='font-weight: bold'>Container 1</div><div style='font-size: 70%; margin-top: 0px'>[Container]</div>\"]\n" +
                 "      style 2 fill:#dddddd,stroke:#9a9a9a,color:#000000\n" +
                 "    end\n" +
                 "\n" +
                 "    subgraph 3 [Software System 2]\n" +
-                "      style 3 fill:#ffffff,stroke:#cccccc,color:#cccccc\n" +
+                "      style 3 fill:#ffffff,stroke:#9a9a9a,color:#9a9a9a\n" +
                 "\n" +
                 "      4[\"<div style='font-weight: bold'>Container 2</div><div style='font-size: 70%; margin-top: 0px'>[Container]</div>\"]\n" +
                 "      style 4 fill:#dddddd,stroke:#9a9a9a,color:#000000\n" +
@@ -190,14 +190,14 @@ public void test_renderComponentDiagramWithExternalComponents() {
                 "    style diagram fill:#ffffff,stroke:#ffffff\n" +
                 "\n" +
                 "    subgraph 2 [Container 1]\n" +
-                "      style 2 fill:#ffffff,stroke:#444444,color:#444444\n" +
+                "      style 2 fill:#ffffff,stroke:#9a9a9a,color:#9a9a9a\n" +
                 "\n" +
                 "      3[\"<div style='font-weight: bold'>Component 1</div><div style='font-size: 70%; margin-top: 0px'>[Component]</div>\"]\n" +
                 "      style 3 fill:#dddddd,stroke:#9a9a9a,color:#000000\n" +
                 "    end\n" +
                 "\n" +
                 "    subgraph 5 [Container 2]\n" +
-                "      style 5 fill:#ffffff,stroke:#cccccc,color:#cccccc\n" +
+                "      style 5 fill:#ffffff,stroke:#9a9a9a,color:#9a9a9a\n" +
                 "\n" +
                 "      6[\"<div style='font-weight: bold'>Component 2</div><div style='font-size: 70%; margin-top: 0px'>[Component]</div>\"]\n" +
                 "      style 6 fill:#dddddd,stroke:#9a9a9a,color:#000000\n" +

src/test/java/com/structurizr/export/mermaid/groups-Components.mmd

@@ -8,7 +8,7 @@ graph TB
     style 3 fill:#dddddd,stroke:#9a9a9a,color:#000000
 
     subgraph 6 [F]
-      style 6 fill:#ffffff,stroke:#444444,color:#444444
+      style 6 fill:#ffffff,stroke:#9a9a9a,color:#9a9a9a
 
       subgraph group1 [Group 4]
         style group1 fill:#ffffff,stroke:#cccccc,color:#cccccc

src/test/java/com/structurizr/export/mermaid/groups-Containers.mmd

@@ -8,7 +8,7 @@ graph TB
     style 3 fill:#dddddd,stroke:#9a9a9a,color:#000000
 
     subgraph 4 [D]
-      style 4 fill:#ffffff,stroke:#444444,color:#444444
+      style 4 fill:#ffffff,stroke:#9a9a9a,color:#9a9a9a
 
       subgraph group1 [Group 3]
         style group1 fill:#ffffff,stroke:#cccccc,color:#cccccc