Merge pull request #1 from evan-bradley/mx-psi/style-improvements

Add CSS styling for diagrams

Author: evan-bradley

diagram/config.json

@@ -1,14 +1,15 @@
 {
     "theme": "base",
     "themeVariables": {
-      "primaryColor": "#CEDEF3",
-      "primaryTextColor": "#000",
-      "primaryBorderColor": "#ADC8EB",
-      "lineColor": "#ADC8EB",
-      "secondaryColor": "#CEDEF3",
-      "tertiaryColor": "#CEDEF3",
-      "tertiaryBorderColor": "#ADC8EB",
-      "tertiaryTextColor": "#000",
+      "primaryColor": "#ffffff",
+      "primaryTextColor": "#7d88a1",
+      "primaryBorderColor": "#ffffff",
+      "lineColor": "#8ea9ec",
+      "secondaryColor": "#e8f6fc",
+      "secondaryBorderColor": "#e8f6fc",
+      "tertiaryColor": "#e8f6fc",
+      "tertiaryBorderColor": "#e8f6fc",
+      "tertiaryTextColor": "#0778d4",
       "fontFamily": "Montserrat"
     }
-  }
+  }

diagram/custom-distro-releasing.mmd

@@ -26,4 +26,7 @@ flowchart LR
     end
 
 artifacts["fa:fa-cube Artifacts"]
-release2 --> artifacts
+release2 --> artifacts
+
+class PR,main,Release,uu,Hotfix,Testing,release2,artifacts box;
+class upstream,distro container;

diagram/ocb-build-pipeline.mmd

@@ -12,3 +12,6 @@ flowchart LR
     manifest --> ocb
     ocb --> code
     code -->|" go build "| bin
+
+class manifest,tmpl,code,bin box;
+class ocb container;

diagram/theme.css

@@ -0,0 +1,29 @@
+/* 
+This file is used to style all diagram.
+Use the 'class' directive to style a specific element.
+Note that SVG elements do not support all CSS properties.
+*/
+
+.box rect {
+    /* Add subtle shadow to boxes. SVG does not support box-shadow. */
+    filter:drop-shadow( 0px 0px 3px rgb(213, 213, 213)) !important;
+    /* Round corners of boxes. SVG does not support border-radius. */
+    rx: 4 !important;
+    ry: 4 !important;
+}
+
+/* The label of nodes has class 'nodeLabel' */
+.container .nodeLabel {
+    font-weight: 600 !important;
+}
+
+/* The label is inside a foreignObject element */
+.container foreignObject {
+    /* HACK:
+        Mermaid seems to calculate the spacing using the default font style.
+        This means changes in font family or weight can lead to text overflowing the box.
+        This is a workaround to show the text correctly. It won't work in some cases.
+    */
+    overflow: visible !important;
+}
+

render.sh

@@ -12,8 +12,8 @@ for dir in ${directories}; do
     files=$(find . -iname '*.mmd' -type f)
     rm -f output/*.png
     for file in $files; do
-        docker run --rm -u $(id -u):$(id -g) -v $(pwd):/data mermaid-cli-fonts -c config.json -s 20 -i ${file} -o output/$(basename ${file}).png
+        docker run --rm -u $(id -u):$(id -g) -v $(pwd):/data mermaid-cli-fonts -c config.json --cssFile theme.css -b transparent -s 25 -i ${file} -o output/$(basename ${file}).png
     done
 
     popd
-done
+done