styles and docu update

docs/clab2drawio.md

@@ -98,6 +98,48 @@ Using graph-level helps manage the vertical alignment of nodes in the generated
 ## Customization
 The tool allows for customization of node and link styles within the generated diagrams, making it possible to adjust the appearance to fit specific requirements or preferences.
 
+
+Below are some example images of the available custom styles:
+
+<div style="display: flex; flex-wrap: wrap; justify-content: space-around;">
+
+  <div style="text-align: center; margin: 10px;">
+    <a href="img/nokia_bright.png" target="_blank">
+      <img src="img/nokia_bright.png" alt="Nokia Bright Mode" style="width: 200px;">
+    </a>
+    <p>nokia_bright</p>
+  </div>
+
+  <div style="text-align: center; margin: 10px;">
+    <a href="img/nokia_dark.png" target="_blank">
+      <img src="img/nokia_dark.png" alt="Nokia Dark Mode" style="width: 200px;">
+    </a>
+    <p>nokia_dark</p>
+  </div>
+
+  <div style="text-align: center; margin: 10px;">
+    <a href="img/modern_bright.png" target="_blank">
+      <img src="img/modern_bright.png" alt="Modern Bright Mode" style="width: 200px;">
+    </a>
+    <p>nokia_modern_bright</p>
+  </div>
+
+  <div style="text-align: center; margin: 10px;">
+    <a href="img/modern_dark.png" target="_blank">
+      <img src="img/modern_dark.png" alt="Modern Dark Mode" style="width: 200px;">
+    </a>
+    <p>nokia_modern_dark</p>
+  </div>
+
+  <div style="text-align: center; margin: 10px;">
+    <a href="img/grafana_dark.png" target="_blank">
+      <img src="img/grafana_dark.png" alt="Grafana Dark Mode" style="width: 200px;">
+    </a>
+    <p>grafana_dark</p>
+  </div>
+
+</div>
+
 ### Custom Styles
 To customize styles, you can edit or copy the `nokia_bright.yaml` configuration file. This file defines the base style, link style, source and target label styles, and custom styles for different types of nodes based on their roles (e.g., routers, switches, servers).
 

styles/nokia_bright.yaml

@@ -1,7 +1,7 @@
 #General Diagram settings:
 background: "#FFFFFF"
 shadow: "0"
-grid: "1"
+grid: "0"
 pagew: "auto"
 pageh: "auto"
 

styles/nokia_dark.yaml

@@ -1,7 +1,7 @@
 #General Diagram settings:
 background: "#4D5766"
 shadow: "0"
-grid: "1"
+grid: "0"
 pagew: "auto"
 pageh: "auto"
 
@@ -26,8 +26,8 @@ connector_height: 4
 link_style: "endArrow=none;html=1;startSize=6;fontSize=14;strokeColor=#98A2AE;fontColor=#FFFFFF;textOpacity=100;labelBackgroundColor=#4D5766;jumpStyle=gap;strokeWidth=3;"
 
 # Style for labels
-src_label_style: "rounded=1;whiteSpace=wrap;html=1;fontFamily=Google Sans;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DGoogle%2BSans;arcSize=32;spacing=0;spacingBottom=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#98A2AE;fontSize=6;horizontal=1;"
-trgt_label_style: "rounded=1;whiteSpace=wrap;html=1;fontFamily=Google Sans;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DGoogle%2BSans;arcSize=32;spacing=0;spacingBottom=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#98A2AE;fontSize=6;horizontal=1;"
+src_label_style: "edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontColor=#FFFFFF;labelBackgroundColor=#4D5766"
+trgt_label_style: "edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontColor=#FFFFFF;labelBackgroundColor=#4D5766"
 
 default_labels: true
 label_offset: 20

styles/nokia_modern_dark.yaml

@@ -26,11 +26,11 @@ connector_height: 4
 link_style: "endArrow=none;html=1;startSize=6;fontSize=14;strokeColor=#98A2AE;fontColor=#FFFFFF;textOpacity=100;labelBackgroundColor=#4D5766;jumpStyle=gap;strokeWidth=3;"
 
 # Style for labels
-src_label_style: "rounded=1;whiteSpace=wrap;html=1;fontFamily=Google Sans;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DGoogle%2BSans;arcSize=32;spacing=0;spacingBottom=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#98A2AE;fontSize=6;horizontal=1;"
-trgt_label_style: "rounded=1;whiteSpace=wrap;html=1;fontFamily=Google Sans;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DGoogle%2BSans;arcSize=32;spacing=0;spacingBottom=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#98A2AE;fontSize=6;horizontal=1;"
+src_label_style: "rounded=1;whiteSpace=wrap;html=1;fontFamily=Google Sans;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DGoogle%2BSans;arcSize=32;spacing=0;spacingBottom=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#98A2AE;fontSize=8;fontStyle=1;horizontal=1;"
+trgt_label_style: "rounded=1;whiteSpace=wrap;html=1;fontFamily=Google Sans;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DGoogle%2BSans;arcSize=32;spacing=0;spacingBottom=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#98A2AE;fontSize=8;fontStyle=1;horizontal=1;"
 
 default_labels: false
-label_offset: 20
+label_offset: 25
 label_height: 10
 label_width: 20
 label_alignment: center