chore: support mermaid 11

Author: emersonbottero

docs/guide/more-examples.md

@@ -26,20 +26,16 @@ In case you set an base you should prefix images with it.
 
 ```mmd
 graph LR;
-    K([...........<img src='/vitepress-plugin-mermaid/K.png' width='60' >...........])-.->G((...........<img id='git' src='/vitepress-plugin-mermaid/Octocat.png' width='50' >...........));
-    H([...........<img id='helm' src='/vitepress-plugin-mermaid/helm.png' width='60' >...........])-.->G
+    K([<img src='/vitepress-plugin-mermaid/K.png' width='60' >])-.->G((<img id='git' src='/vitepress-plugin-mermaid/Octocat.png' width='50' >));
+    H([<img id='helm' src='/vitepress-plugin-mermaid/helm.png' width='60' >])-.->G
     G-->A;
-    A(...........<img src='/vitepress-plugin-mermaid/argo-cd.png' width='60' >...........)-->D(...........<img src='/vitepress-plugin-mermaid/ocp.png' width='60' >...........);
+    A(<img src='/vitepress-plugin-mermaid/argo-cd.png' width='60' >)-->D(<img src='/vitepress-plugin-mermaid/ocp.png' width='60' >);
 classDef img fill:none,color:transparent,stroke:none,borderRadius:50px
 class G,D,A,K,H,B img
 click K "https://kustomize.io/" _blank
 click G "http://www.github.com" "This is a link" _blank
 ```
 
-::: danger
-Isolated images are nor rendering while using mermaid bigger than 9.1 [see the issue on github](https://github.com/mermaid-js/mermaid/issues/4023).  
-The transparent wrapper `...........` is a workaround until it is fixed.
-:::
 
 # Render
 
@@ -49,10 +45,10 @@ Kustomize and github are links in here!
 
 ```mermaid
 graph LR;
-    K([...........<img src='/vitepress-plugin-mermaid/K.png' width='60' >...........])-.->G((...........<img id='git' src='/vitepress-plugin-mermaid/Octocat.png' width='50' >...........));
-    H([...........<img id='helm' src='/vitepress-plugin-mermaid/helm.png' width='60' >...........])-.->G
+    K([<img src='/vitepress-plugin-mermaid/K.png' width='60' >])-.->G((<img id='git' src='/vitepress-plugin-mermaid/Octocat.png' width='50' >));
+    H([<img id='helm' src='/vitepress-plugin-mermaid/helm.png' width='60' >])-.->G
     G-->A;
-    A(...........<img src='/vitepress-plugin-mermaid/argo-cd.png' width='60' >...........)-->D(...........<img src='/vitepress-plugin-mermaid/ocp.png' width='60' >...........);
+    A(<img src='/vitepress-plugin-mermaid/argo-cd.png' width='60' >)-->D(<img src='/vitepress-plugin-mermaid/ocp.png' width='60' >);
 classDef img fill:none,color:transparent,stroke:none,borderRadius:50px
 class G,D,A,K,H,B img
 click K "https://kustomize.io/" _blank
@@ -151,12 +147,5 @@ gantt
     border-radius: 50px;
   }
 
-  #helm,
-  .dark #git{
-    transform: scale(1.5);
-  }
 
-  .dark #helm {
-    filter: brightness(1.5);
-  }
 </style>