diff --git a/src/js/src/bookmark/main.js b/src/js/src/bookmark/main.js
index 40756e9..9c15d54 100644
--- a/src/js/src/bookmark/main.js
+++ b/src/js/src/bookmark/main.js
@@ -5,48 +5,33 @@
 // Graphviz  ---
 
 (async function() {
-  document.querySelector("#ref-map").setAttribute("data", await dot2svg());
+  const mime ="image/svg+xml";
   document.querySelector("#dot-src-viewer").value = card2dot();
-  const dataUri = await dot2svg(document.querySelector("#dot-src-viewer").value);
+  const dataUri = text2DataUriScheme(await dot2svg(document.querySelector("#dot-src-viewer").value),mime);
   document.querySelector("#ref-map").setAttribute("data", dataUri);
 })();
 
 window.addEventListener("load", (event) => {
-  const editor = document.querySelector("#menuView");
+  const menu = document.querySelector("#menuView");
+
+  menu.addEventListener("click", handleGenerateButton)
+  menu.addEventListener("click", handleLoadCsvButton)
+  menu.addEventListener("click", handleSaveButton)
+  menu.addEventListener("click", handleExportButton)
+
+  const editor = document.querySelector("#editView");
   editor.addEventListener("click", handleAppendCardButton)
   editor.addEventListener("click", handleDeleteCardButton)
-  editor.addEventListener("click", handleLoadCsvButton)
-  editor.addEventListener("click", handleSaveButton)
-  editor.addEventListener("click", handleExportButton)
 
-  const geneBtn = document.querySelector("#generate");
-  geneBtn.addEventListener("click",handleGenerateButton);
 
-  function handleAppendCardButton(event) {
-    if(event.target.classList.contains("card-append")){
-      const bigBrotherCard = event.target.closest("div.ref-card");
-      appendCard(bigBrotherCard, {
-        id: counter++ + "",
-        parent: "root",
-        type: "folder",
-        label: "nonelabel",
-        url: "https://www.exmple.com/"
-      })
-    }
-  }
-  
   function handleGenerateButton(event) {
+    if(event.target.id != "generate") {
+      return;
+    }
+
     document.querySelector("#dot-src-viewer").value = card2dot();
     dot2svg(document.querySelector("#dot-src-viewer").value)
-      .then(dataUri => document.querySelector("#ref-map").setAttribute("data", dataUri));
-  }
-
-  function handleDeleteCardButton(event) {
-    if(event.target.classList.contains("card-delete")) {
-      setTimeout(() => {
-        deleteCard(event.target.closest("div.ref-card"));
-      } ,50);
-    }    
+      .then(xml => document.querySelector("#ref-map").setAttribute("data", text2DataUriScheme(xml,"image/svg+xml")));
   }
 
   function handleLoadCsvButton(event) {
@@ -68,35 +53,53 @@
     if(event.target.id !="save") {
       return;
     }
-    const save = document.querySelector("#savelink");
-    const data = await dot2svg(card2dot());
 
-    save.setAttribute("href", data);
-    save.setAttribute("download", "result.svg");
-    save.click();
+    const data = await dot2svg(card2dot());
+    download(data, "image/svg+xml", "result.svg");
   }
 
   function handleExportButton(event) {
     if (event.target.id != "export") {
       return;
     }
-
     download(card2csv(),"text/csv", "favorite.csv",);
   }
 
-  function download(text, mimeType, name,) {
-    const save = document.querySelector("#savelink");
-    const encoded = window.btoa(unescape(encodeURIComponent(text)))
-    const dataUri = `data:${mimeType};charset=UTF-8;base64,${encoded}`
-  
-    save.setAttribute("href", dataUri);
-    save.setAttribute("download", name);
-    setTimeout(() => {
-      save.click();
-    } ,50);
+  function handleAppendCardButton(event) {
+    if(event.target.classList.contains("card-append")){
+      const bigBrotherCard = event.target.closest("div.ref-card");
+      appendCard(bigBrotherCard, {
+        id: counter++ + "",
+        parent: "root",
+        type: "folder",
+        label: "nonelabel",
+        url: "https://www.exmple.com/"
+      })
+    }
   }
+  
+  function handleDeleteCardButton(event) {
+    if(event.target.classList.contains("card-delete")) {
+      setTimeout(() => {
+        deleteCard(event.target.closest("div.ref-card"));
+      } ,50);
+    }    
+  }
+
 });
 
+function download(text, mimeType, name,) {
+  const save = document.querySelector("#savelink");    
+  const dataUri = text2DataUriScheme(text, mimeType);
+
+  save.setAttribute("href", dataUri);
+  save.setAttribute("download", name);
+  setTimeout(() => {
+    save.click();
+    save.setAttribute("href", "");
+    save.setAttribute("download", "");
+  } ,50);
+}
 
 function appendCard(bigbrother, node = {}) {
   const newCard = document.querySelector("#tmpl-ref-card").content.cloneNode(true);
@@ -247,11 +250,8 @@
 async function dot2svg(dot = "") {
   const graphviz = await Graphviz.load();
   const src = dot == "" ? 'digraph G { Hello -> World }' : dot;
-  const graph = graphviz.circo(src);
-  //const graph = graphviz.neato(src);
-  const encoded = window.btoa(unescape(encodeURIComponent(graph)))
-  const dataUri = `data:image/svg+xml;charset=UTF-8;base64,${encoded}`
-  return dataUri
+  const svg = graphviz.circo(src);
+  return svg;
 }
 
 function card2csv() {
@@ -275,4 +275,11 @@
   }
 
   return csvText.join("\n")
-}
\ No newline at end of file
+}
+
+function text2DataUriScheme(text, mimeType) {
+  const encoded = window.btoa(unescape(encodeURIComponent(text)))
+  const dataUri = `data:${mimeType};charset=UTF-8;base64,${encoded}`
+  return dataUri;
+}
+