Replace absolute paths by urls in generated svg and dot_json files, related to https://github.com/philippemerle/KubeDiagrams/issues/38

bin/kube-diagrams

@@ -1194,3 +1194,60 @@ with Diagram("", filename=args.output, show=False, direction="TB", outformat=arg
             _ = from_node >> Edge(**custom_edge, tooltip=edge_tooltip) >> to_node
 
 print(f"{args.output}.{args.format} generated.")
+
+if args.format in ("svg", "dot_json"):
+    filename = f"{args.output}.{args.format}"
+    print("Replace absolute paths by urls...")
+    # read all the lines of the generated file
+    with open(filename, "rt", encoding="utf-8") as fs:
+        lines = fs.readlines()
+    # compute absolute paths to be replaced by urls
+    from pathlib import Path
+    DIAGRAMS_PATH = str(Path(os.path.abspath(os.path.dirname(diagrams.__file__))).parent)
+    DIAGRAMS_URL = \
+        "https://raw.githubusercontent.com/mingrammer/diagrams/refs/heads/master"
+    KUBEDIAGRAMS_PATH = str(Path(os.path.abspath(os.path.dirname(__file__))).parent)
+    KUBEDIAGRAMS_URL = \
+        "https://raw.githubusercontent.com/philippemerle/KubeDiagrams/refs/heads/main"
+    if args.format == "svg":
+        what_to_search = "image xlink:href"
+        what_regex_to_search = r'image xlink:href="([^"]+)"'
+    elif args.format == "dot_json":
+        DIAGRAMS_PATH = DIAGRAMS_PATH.replace("/", "\\/")
+        KUBEDIAGRAMS_PATH = KUBEDIAGRAMS_PATH.replace("/", "\\/")
+        what_to_search = '"image": "'
+        what_regex_to_search = r'"image": "([^"]+)"'
+    else:
+        what_to_search = None
+        what_regex_to_search = None
+    # rewrite all the lines of the generated file
+    with open(filename, "wt", encoding="utf-8") as fs:
+        for line in lines:
+            if what_to_search in line:
+                # replace absolute paths by urls
+                if DIAGRAMS_PATH in line:
+                    line = line.replace(DIAGRAMS_PATH, DIAGRAMS_URL)
+                elif KUBEDIAGRAMS_PATH in line:
+                    line = line.replace(KUBEDIAGRAMS_PATH, KUBEDIAGRAMS_URL)
+                else:
+                    # embed the image
+                    import re
+                    img_paths = re.findall(what_regex_to_search, line)
+                    for img_path in img_paths:
+                        full_img_path = Path(img_path.replace("\\/", "/"))
+                        if full_img_path.exists():
+                            # read the image
+                            with open(full_img_path, 'rb') as img_file:
+                                img_data = img_file.read()
+                            # encode the image in base64
+                            import base64
+                            mime_type = 'image/png'
+                            b64_data = base64.b64encode(img_data).decode('ascii')
+                            data_uri = f"data:{mime_type};base64,{b64_data}"
+                            # replace absolute path by image encoded in base64
+                            line = line.replace(img_path, data_uri)
+                        else:
+                            print(f"Warning: Image not found: {full_img_path}")
+            # write the line
+            fs.write(line)
+    print(f"{filename} saved.")

interactive_viewer/script/main.js

@@ -114,13 +114,13 @@ function addNodesElementsParsedFromNodesJson(elements, nodesJson) {
                 isClose : false,
                 label: (nodesJson[i].label.includes('<') && nodesJson[i].label.includes('>')) ? nodesJson[i].tooltip : nodesJson[i].label, 
                 bs: getCorrespondingBorderStyle(nodesJson[i].style),
-                bgcolor: nodesJson[i].bgcolor ?? 'blue',
+                bgcolor: getCorrespondingColor(nodesJson[i].bgcolor ?? 'blue'),
                 bc: nodesJson[i].pencolor ?? 'gray',
                 parent: parent[nodesJson[i]._gvid] ?? '',
                 fontsize: nodesJson[i].fontsize ?? '',
                 fontfamily: nodesJson[i].fontname ?? '',
                 fontcolor: nodesJson[i].fontcolor ?? '',
-                image: (nodesJson[i].image) ? getURLImage(nodesJson[i].image) : '',
+                image: (nodesJson[i].image) ? nodesJson[i].image : '',
                 tooltip: nodesJson[i].tooltip ?? ''
             }
         }
@@ -186,22 +186,12 @@ function getCorrespondingBorderStyle(style) {
 }
 
 /**
- * Get the corresponding url image based on the local url of the image parameter get from a dot_jon file. 
- * @param {*} image 
+ * Get the corresponding color.
+ * @param {*} color
  * @returns 
  */
-function getURLImage(image) {
-    let idx = image.indexOf("resources\/")
-    if(idx != -1) {
-      return "https://raw.githubusercontent.com/mingrammer/diagrams/refs/heads/master/" + image.slice(image.indexOf("resources"))
-    } else {
-      idx = image.indexOf("bin\/icons\/")
-      if(idx != -1) {
-        return "https://raw.githubusercontent.com/philippemerle/KubeDiagrams/refs/heads/main/" + image.slice(image.indexOf("bin\/icons\/"))
-      } else {
-        return image
-      }
-    }
+function getCorrespondingColor(color) {
+  return (color == 'transparent') ? '#ffffff00' : color;
 }
 
 /**