upgrade deps

Author: hojas

package.json

@@ -1,8 +1,8 @@
 {
   "name": "vue-mermaid-render",
   "type": "module",
-  "version": "0.1.2",
-  "packageManager": "pnpm@8.13.1",
+  "version": "0.1.3",
+  "packageManager": "pnpm@8.14.1",
   "license": "MIT",
   "repository": "hojas/vue-mermaid-render",
   "bugs": "https://github.com/hojas/vue-mermaid-render/issues",
@@ -33,17 +33,17 @@
     "push": "pnpm build && npm publish"
   },
   "dependencies": {
-    "mermaid": "^10.6.1"
+    "mermaid": "^10.7.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.6.1",
-    "@types/node": "^20.10.6",
-    "@vitejs/plugin-vue": "^5.0.2",
+    "@antfu/eslint-config": "^2.6.3",
+    "@types/node": "^20.11.5",
+    "@vitejs/plugin-vue": "^5.0.3",
     "eslint": "^8.56.0",
     "shelljs": "^0.8.5",
     "typescript": "^5.3.3",
-    "vite": "^5.0.10",
-    "vue": "^3.4.3",
+    "vite": "^5.0.12",
+    "vue": "^3.4.15",
     "vue-tsc": "^1.8.27"
   }
 }

packages/vue-mermaid-render/src/components/VueMermaidRender.vue

@@ -3,23 +3,40 @@ import { ref, watchEffect } from 'vue'
 import mermaid from 'mermaid'
 import type { MermaidConfig } from 'mermaid'
 
+/**
+ * props
+ *
+ * @param {string} content - mermaid graph definition
+ * @param {MermaidConfig} config - mermaid config
+ */
 const props = defineProps<{ content: string, config?: MermaidConfig }>()
 
 const el = ref()
 const mermaidString = ref('')
 
+/**
+ * generate svg id
+ */
 function genSvgId() {
-  const min = Math.ceil(1)
-  const max = Math.floor(100000)
-  return `mermaid-svg-${Math.floor(Math.random() * (max - min + 1))}${min}`
+  const max = 1000000
+  return `mermaid-svg-${genId(max)}${genId(max)}`
+
+  function genId(max: number) {
+    return ~~(Math.random() * max)
+  }
 }
 
+/**
+ * update graph
+ * @param graphDefinition - mermaid graph definition
+ */
 async function updateGraph(graphDefinition: string) {
   const id = genSvgId()
   const res = await mermaid.render(id, graphDefinition, el.value)
   mermaidString.value = res.svg
 }
 
+// init mermaid
 watchEffect(() => {
   if (!el.value)
     return
@@ -30,6 +47,7 @@ watchEffect(() => {
     mermaid.initialize({ startOnLoad: false })
 })
 
+// update graph
 watchEffect(() => {
   if (!el.value)
     return