wip: trying out mermaid-cli

public/docs-static/img/how-to-guides/networks-access-management/diagram.mmd

@@ -0,0 +1,72 @@
+---
+# Usage:
+#  mmdc -i diagram.mmd -o diagram.png -b transparent -t dark
+#  watchexec -w diagram.mmd --debounce=300ms --fs-events=create,modify --shell=bash -- 'mmdc -i diagram.mmd -o diagram.png -b transparent -t dark'
+#
+# to analyze the resulting SVG and styles:
+#  mmdc -i diagram.mmd -o diagram.svg -b transparent -t dark
+#
+# Note that only PNG will contain icons etc.
+title: Network Resource Access Policies
+
+config:
+  theme: base
+  layout: dagre
+  themeCSS: |-
+    .nodeLabel {
+      text-align: center;
+    }
+
+    path.edge-thickness-thick.edge-pattern-solid {
+      stroke: #f35e32 !important;
+    }
+    path.edge-thickness-normal.edge-pattern-dotted {
+      stroke: #2beb8d !important;
+    }
+    marker path {
+      fill: #ff0000 !important;
+      stroke: #ff0000 !important;
+    }
+
+---
+
+flowchart LR
+
+    subgraph NetBird["NetBird Network"]
+        subgraph User["<i class='fa fa-user'></i> User"]
+            User-NB["100.xx.1.123"]
+        end
+
+        subgraph RP2["<i class='fa fa-network-wired'></i> router-2"]
+            direction LR
+
+            RP2-NB["100.xx.0.2"]
+            RP2-LAN["192.168.1.2"]
+
+            RP2-NB ~~~ RP2-LAN
+        end
+
+        subgraph RP1["<i class='fa fa-network-wired'></i> router-1</br>(selected)"]
+            direction LR
+            RP1-NB["100.xx.0.1"]
+            RP1-LAN["192.168.1.1"]
+
+            RP1-NB ~~~ RP1-LAN
+        end
+    end
+
+    subgraph Resources["LAN"]
+        subgraph Server["<i class='fa fa-server'></i> Server"]
+            Server-LAN["192.168.1.51"]
+        end
+    end
+
+%% NetBird connections
+
+    User-NB ==> RP1-NB
+    User-NB ==> RP2-NB
+    RP1-NB ==> RP1-LAN
+
+%% Resource connections
+    RP1-NB -.-> RP2-LAN
+    RP1-LAN -.-> Server-LAN