From 88b7224b499788fc499f0e3d46b276a6801c4dac Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Mon, 13 Oct 2025 20:13:52 +0800
Subject: [PATCH] fix

---
 .../components/FlowchartEvaluationDisplay.vue |  44 +++--
 .../problem/components/ProblemFlowchart.vue   |  44 +----
 src/oj/problem/components/SubmitFlowchart.vue |   6 +-
 .../composables/useFlowchartEvaluation.ts     |  97 +++++++++
 .../composables/useFlowchartSubmission.ts     | 185 +++++++++---------
 .../problem/composables/useFlowchartSubmit.ts | 108 ----------
 .../components/FlowchartEditor/CustomNode.vue |  33 +---
 .../components/FlowchartEditor/index.vue      |  20 +-
 src/shared/composables/useMermaid.ts          |  54 +++++
 9 files changed, 296 insertions(+), 295 deletions(-)
 create mode 100644 src/oj/problem/composables/useFlowchartEvaluation.ts
 delete mode 100644 src/oj/problem/composables/useFlowchartSubmit.ts
 create mode 100644 src/shared/composables/useMermaid.ts

diff --git a/src/oj/problem/components/FlowchartEvaluationDisplay.vue b/src/oj/problem/components/FlowchartEvaluationDisplay.vue
index a88fd18..3c50f4d 100644
--- a/src/oj/problem/components/FlowchartEvaluationDisplay.vue
+++ b/src/oj/problem/components/FlowchartEvaluationDisplay.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import FlowchartEditor from "shared/components/FlowchartEditor/index.vue"
 import { atou } from "utils/functions"
+import { useMermaid } from "shared/composables/useMermaid"
 
 interface EvaluationResult {
   score?: number
@@ -13,6 +13,7 @@ interface EvaluationResult {
 interface Props {
   evaluationResult: EvaluationResult | null
   myFlowchartZippedStr: string
+  myMermaidCode: string
 }
 
 const props = defineProps<Props>()
@@ -24,9 +25,11 @@ const emit = defineEmits<{
 
 const showDetailModal = ref(false)
 
-const readonlyFlowchartEditorRef = useTemplateRef<any>(
-  "readonlyFlowchartEditorRef",
-)
+// mermaid 渲染相关
+const mermaidContainer = useTemplateRef<HTMLElement>("mermaidContainer")
+
+// 使用 mermaid composable
+const { renderError, renderFlowchart } = useMermaid()
 
 // 根据分数获取标签类型
 const getScoreType = (score: number) => {
@@ -39,12 +42,7 @@ const getScoreType = (score: number) => {
 async function openDetailModal() {
   showDetailModal.value = true
   await nextTick()
-  const str = atou(props.myFlowchartZippedStr)
-  const json = JSON.parse(str)
-  readonlyFlowchartEditorRef.value.setFlowchartData({
-    nodes: json.nodes || [],
-    edges: json.edges || [],
-  })
+  await renderFlowchart(mermaidContainer.value, props.myMermaidCode)
 }
 
 function closeModal() {
@@ -87,14 +85,13 @@ function loadToEditor() {
     >
       <n-grid :cols="5" :x-gap="16">
         <n-gi :span="3">
-          <n-card title="大致缩略图（有错位问题，建议加载到流程图编辑器查看）">
-            <div class="flowchart">
-              <FlowchartEditor
-                ref="readonlyFlowchartEditorRef"
-                readonly
-                height="400px"
-              />
-            </div>
+          <n-card title="流程图预览">
+            <n-alert v-if="renderError" type="error" title="流程图渲染失败">
+              <template #default>
+                {{ renderError }}
+              </template>
+            </n-alert>
+            <div v-else ref="mermaidContainer" class="flowchart"></div>
           </n-card>
           <n-flex style="margin-top: 16px" justify="center">
             <n-button @click="loadToEditor" type="primary">
@@ -160,9 +157,14 @@ function loadToEditor() {
 
 <style scoped>
 .flowchart {
-  height: 400px;
+  height: 500px;
   width: 100%;
-  border-radius: 4px;
-  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+:deep(.flowchart > svg) {
+  height: 100%;
 }
 </style>
diff --git a/src/oj/problem/components/ProblemFlowchart.vue b/src/oj/problem/components/ProblemFlowchart.vue
index 874e7e8..0ab5199 100644
--- a/src/oj/problem/components/ProblemFlowchart.vue
+++ b/src/oj/problem/components/ProblemFlowchart.vue
@@ -1,54 +1,24 @@
 <script setup lang="ts">
 import { useProblemStore } from "oj/store/problem"
-import { nanoid } from "nanoid"
+import { useMermaid } from "shared/composables/useMermaid"
 
 const problemStore = useProblemStore()
 const { problem } = storeToRefs(problemStore)
 const mermaidContainer = useTemplateRef<HTMLElement>("mermaidContainer")
 
-// 渲染状态
-const renderError = ref<string | null>(null)
-
-// 动态导入 mermaid
-let mermaid: any = null
-
-// 动态加载 Mermaid
-const loadMermaid = async () => {
-  if (!mermaid) {
-    const mermaidModule = await import("mermaid")
-    mermaid = mermaidModule.default
-    mermaid.initialize({
-      startOnLoad: false,
-      securityLevel: "loose",
-      theme: "default",
-    })
-  }
-  return mermaid
-}
+// 使用 mermaid composable
+const { renderError, renderFlowchart } = useMermaid()
 
 // 渲染流程图的函数
-const renderFlowchart = async () => {
-  try {
-    renderError.value = null
-
-    // 确保 mermaid 已加载
-    await loadMermaid()
-
-    // 渲染流程图
-    if (mermaidContainer.value && problem.value?.mermaid_code) {
-      const id = `mermaid-${nanoid()}`
-      const { svg } = await mermaid.render(id, problem.value.mermaid_code)
-      mermaidContainer.value.innerHTML = svg
-    }
-  } catch (error) {
-    renderError.value =
-      error instanceof Error ? error.message : "流程图渲染失败，请检查代码格式"
+const renderProblemFlowchart = async () => {
+  if (problem.value?.mermaid_code) {
+    await renderFlowchart(mermaidContainer.value, problem.value.mermaid_code)
   }
 }
 
 // 初始化Mermaid并渲染
 onMounted(() => {
-  renderFlowchart()
+  renderProblemFlowchart()
 })
 </script>
 
diff --git a/src/oj/problem/components/SubmitFlowchart.vue b/src/oj/problem/components/SubmitFlowchart.vue
index d98ae01..991f539 100644
--- a/src/oj/problem/components/SubmitFlowchart.vue
+++ b/src/oj/problem/components/SubmitFlowchart.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useBreakpoints } from "shared/composables/breakpoints"
-import { useFlowchartSubmit } from "../composables/useFlowchartSubmit"
+import { useFlowchartSubmission } from "../composables/useFlowchartSubmission"
 import FlowchartEvaluationDisplay from "./FlowchartEvaluationDisplay.vue"
 
 const { isDesktop } = useBreakpoints()
@@ -14,11 +14,12 @@ const {
   loading,
   submissionCount,
   myFlowchartZippedStr,
+  myMermaidCode,
   connect,
   disconnect,
   checkCurrentSubmissionStatus,
   submitFlowchartData,
-} = useFlowchartSubmit()
+} = useFlowchartSubmission()
 
 // 组件挂载时连接 WebSocket 并检查状态
 onMounted(() => {
@@ -65,6 +66,7 @@ function handleLoadToEditor(data: any) {
     <FlowchartEvaluationDisplay
       :evaluation-result="evaluationResult"
       :my-flowchart-zipped-str="myFlowchartZippedStr"
+      :my-mermaid-code="myMermaidCode"
       @close="() => {}"
       @load-to-editor="handleLoadToEditor"
     />
diff --git a/src/oj/problem/composables/useFlowchartEvaluation.ts b/src/oj/problem/composables/useFlowchartEvaluation.ts
new file mode 100644
index 0000000..3991301
--- /dev/null
+++ b/src/oj/problem/composables/useFlowchartEvaluation.ts
@@ -0,0 +1,97 @@
+import { ref } from "vue"
+import { useMessage } from "naive-ui"
+import {
+  useFlowchartWebSocket,
+  type FlowchartEvaluationUpdate,
+} from "shared/composables/websocket"
+
+export interface EvaluationResult {
+  score?: number
+  grade?: string
+  feedback?: string
+  suggestions?: string
+  criteriaDetails?: any
+}
+
+export interface SubmissionStatus {
+  status: string
+  submission_id: string
+  created_time?: string
+}
+
+export function useFlowchartEvaluation() {
+  const message = useMessage()
+
+  const evaluationResult = ref<EvaluationResult | null>(null)
+  const submissionStatus = ref<SubmissionStatus | null>(null)
+  const loading = ref(false)
+
+  // 处理 WebSocket 消息
+  const handleWebSocketMessage = (data: FlowchartEvaluationUpdate) => {
+    console.log("收到流程图评分更新:", data)
+
+    if (data.type === "flowchart_evaluation_completed") {
+      loading.value = false
+      evaluationResult.value = {
+        score: data.score,
+        grade: data.grade,
+        feedback: data.feedback,
+      }
+      submissionStatus.value = null // 清除状态
+      message.success(`流程图评分完成！得分: ${data.score}分 (${data.grade}级)`)
+    } else if (data.type === "flowchart_evaluation_failed") {
+      console.log("处理评分失败消息")
+      loading.value = false
+      submissionStatus.value = null // 清除状态
+      message.error(`流程图评分失败: ${data.error}`)
+    } else {
+      console.log("未知的消息类型:", data.type)
+    }
+  }
+
+  // 创建 WebSocket 连接
+  const { connect, disconnect, subscribe } = useFlowchartWebSocket(
+    handleWebSocketMessage,
+  )
+
+  // 订阅提交更新
+  const subscribeToSubmission = (submissionId: string) => {
+    console.log("开始订阅WebSocket更新")
+    subscribe(submissionId)
+
+    // 设置评分状态显示
+    submissionStatus.value = {
+      status: "processing",
+      submission_id: submissionId,
+      created_time: new Date().toISOString(),
+    }
+  }
+
+  // 清除结果
+  const clearResult = () => {
+    evaluationResult.value = null
+    submissionStatus.value = null
+  }
+
+  // 设置加载状态
+  const setLoading = (value: boolean) => {
+    loading.value = value
+  }
+
+  // 设置评估结果
+  const setEvaluationResult = (result: EvaluationResult) => {
+    evaluationResult.value = result
+  }
+
+  return {
+    evaluationResult,
+    submissionStatus,
+    loading,
+    connect,
+    disconnect,
+    subscribeToSubmission,
+    clearResult,
+    setLoading,
+    setEvaluationResult,
+  }
+}
diff --git a/src/oj/problem/composables/useFlowchartSubmission.ts b/src/oj/problem/composables/useFlowchartSubmission.ts
index 92e374b..16e9318 100644
--- a/src/oj/problem/composables/useFlowchartSubmission.ts
+++ b/src/oj/problem/composables/useFlowchartSubmission.ts
@@ -1,98 +1,18 @@
-import { ref, watch } from "vue"
+import { ref } from "vue"
 import { useMessage } from "naive-ui"
-import {
-  useFlowchartWebSocket,
-  type FlowchartEvaluationUpdate,
-} from "shared/composables/websocket"
-
-export interface EvaluationResult {
-  score?: number
-  grade?: string
-  feedback?: string
-  suggestions?: string
-  criteriaDetails?: any
-}
-
-export interface SubmissionStatus {
-  status: string
-  submission_id: string
-  created_time?: string
-}
+import { submitFlowchart, getCurrentProblemFlowchartSubmission } from "oj/api"
+import { useProblemStore } from "oj/store/problem"
+import { utoa } from "utils/functions"
+import { useMermaidConverter } from "./useMermaidConverter"
+import { useFlowchartEvaluation } from "./useFlowchartEvaluation"
 
 export function useFlowchartSubmission() {
   const message = useMessage()
+  const problemStore = useProblemStore()
+  const { problem } = toRefs(problemStore)
 
-  const evaluationResult = ref<EvaluationResult | null>(null)
-  const submissionStatus = ref<SubmissionStatus | null>(null)
-  const loading = ref(false)
-
-  // 处理 WebSocket 消息
-  const handleWebSocketMessage = (data: FlowchartEvaluationUpdate) => {
-    console.log("收到流程图评分更新:", data)
-
-    if (data.type === "flowchart_evaluation_completed") {
-      loading.value = false
-      evaluationResult.value = {
-        score: data.score,
-        grade: data.grade,
-        feedback: data.feedback,
-      }
-      submissionStatus.value = null // 清除状态
-      message.success(`流程图评分完成！得分: ${data.score}分 (${data.grade}级)`)
-    } else if (data.type === "flowchart_evaluation_failed") {
-      console.log("处理评分失败消息")
-      loading.value = false
-      submissionStatus.value = null // 清除状态
-      message.error(`流程图评分失败: ${data.error}`)
-    } else {
-      console.log("未知的消息类型:", data.type)
-    }
-  }
-
-  // 创建 WebSocket 连接
-  const { connect, disconnect, subscribe, status } = useFlowchartWebSocket(
-    handleWebSocketMessage,
-  )
-
-  // 监听WebSocket状态变化
-  watch(
-    status,
-    (newStatus) => {
-      console.log("WebSocket状态变化:", newStatus)
-    },
-    { immediate: true },
-  )
-
-  // 订阅提交更新
-  const subscribeToSubmission = (submissionId: string) => {
-    console.log("开始订阅WebSocket更新")
-    subscribe(submissionId)
-
-    // 设置评分状态显示
-    submissionStatus.value = {
-      status: "processing",
-      submission_id: submissionId,
-      created_time: new Date().toISOString(),
-    }
-  }
-
-  // 清除结果
-  const clearResult = () => {
-    evaluationResult.value = null
-    submissionStatus.value = null
-  }
-
-  // 设置加载状态
-  const setLoading = (value: boolean) => {
-    loading.value = value
-  }
-
-  // 设置评估结果
-  const setEvaluationResult = (result: EvaluationResult) => {
-    evaluationResult.value = result
-  }
-
-  return {
+  const { convertToMermaid } = useMermaidConverter()
+  const {
     evaluationResult,
     submissionStatus,
     loading,
@@ -102,5 +22,90 @@ export function useFlowchartSubmission() {
     clearResult,
     setLoading,
     setEvaluationResult,
+  } = useFlowchartEvaluation()
+
+  // 提交次数
+  const submissionCount = ref(0)
+
+  // 存储流程图数据
+  const myFlowchartZippedStr = ref("")
+  const myMermaidCode = ref("")
+
+  // 检查当前问题的流程图提交状态
+  const checkCurrentSubmissionStatus = async () => {
+    if (!problem.value?.id) return
+
+    const { data } = await getCurrentProblemFlowchartSubmission(
+      problem.value.id,
+    )
+    const submission = data.submission
+    submissionCount.value = data.count
+    if (submission && submission.status === 2) {
+      myFlowchartZippedStr.value = data.submission.flowchart_data.data
+      myMermaidCode.value = data.submission.mermaid_code
+      setEvaluationResult({
+        score: submission.ai_score,
+        grade: submission.ai_grade,
+        feedback: submission.ai_feedback,
+        suggestions: submission.ai_suggestions,
+        criteriaDetails: submission.ai_criteria_details,
+      })
+    }
+  }
+
+  // 提交流程图
+  const submitFlowchartData = async (flowchartEditorRef: any) => {
+    if (!flowchartEditorRef?.value) return
+
+    // 获取流程图的JSON数据
+    const flowchartData = flowchartEditorRef.value.getFlowchartData()
+
+    if (flowchartData.nodes.length === 0 || flowchartData.edges.length === 0) {
+      message.error("流程图节点或边不能为空")
+      return
+    }
+
+    const mermaidCode = convertToMermaid(flowchartData)
+    const compressed = utoa(JSON.stringify(flowchartData))
+
+    setLoading(true)
+    clearResult() // 清除之前的结果
+
+    try {
+      const response = await submitFlowchart({
+        problem_id: problem.value!.id,
+        mermaid_code: mermaidCode,
+        flowchart_data: {
+          compressed: true,
+          data: compressed,
+        },
+      })
+
+      // 获取提交ID并订阅更新
+      const submissionId = response.data.submission_id
+
+      if (submissionId) {
+        subscribeToSubmission(submissionId)
+      }
+
+      message.success("流程图已提交，请耐心等待评分")
+    } catch (error) {
+      setLoading(false)
+      message.error("流程图提交失败")
+      console.error("提交流程图失败:", error)
+    }
+  }
+
+  return {
+    evaluationResult,
+    submissionStatus,
+    loading,
+    submissionCount,
+    myFlowchartZippedStr,
+    myMermaidCode,
+    connect,
+    disconnect,
+    checkCurrentSubmissionStatus,
+    submitFlowchartData,
   }
 }
diff --git a/src/oj/problem/composables/useFlowchartSubmit.ts b/src/oj/problem/composables/useFlowchartSubmit.ts
deleted file mode 100644
index 60ec958..0000000
--- a/src/oj/problem/composables/useFlowchartSubmit.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import { ref } from "vue"
-import { useMessage } from "naive-ui"
-import { submitFlowchart, getCurrentProblemFlowchartSubmission } from "oj/api"
-import { useProblemStore } from "oj/store/problem"
-import { atou, utoa } from "utils/functions"
-import { useMermaidConverter } from "./useMermaidConverter"
-import { useFlowchartSubmission } from "./useFlowchartSubmission"
-
-export function useFlowchartSubmit() {
-  const message = useMessage()
-  const problemStore = useProblemStore()
-  const { problem } = toRefs(problemStore)
-
-  const { convertToMermaid } = useMermaidConverter()
-  const {
-    evaluationResult,
-    submissionStatus,
-    loading,
-    connect,
-    disconnect,
-    subscribeToSubmission,
-    clearResult,
-    setLoading,
-    setEvaluationResult,
-  } = useFlowchartSubmission()
-
-  // 提交次数
-  const submissionCount = ref(0)
-
-  // 存储流程图数据
-  const myFlowchartZippedStr = ref("")
-
-  // 检查当前问题的流程图提交状态
-  const checkCurrentSubmissionStatus = async () => {
-    if (!problem.value?.id) return
-
-    const { data } = await getCurrentProblemFlowchartSubmission(
-      problem.value.id,
-    )
-    const submission = data.submission
-    submissionCount.value = data.count
-    if (submission && submission.status === 2) {
-      myFlowchartZippedStr.value = data.submission.flowchart_data.data
-      setEvaluationResult({
-        score: submission.ai_score,
-        grade: submission.ai_grade,
-        feedback: submission.ai_feedback,
-        suggestions: submission.ai_suggestions,
-        criteriaDetails: submission.ai_criteria_details,
-      })
-    }
-  }
-
-  // 提交流程图
-  const submitFlowchartData = async (flowchartEditorRef: any) => {
-    if (!flowchartEditorRef?.value) return
-
-    // 获取流程图的JSON数据
-    const flowchartData = flowchartEditorRef.value.getFlowchartData()
-
-    if (flowchartData.nodes.length === 0 || flowchartData.edges.length === 0) {
-      message.error("流程图节点或边不能为空")
-      return
-    }
-
-    const mermaidCode = convertToMermaid(flowchartData)
-    const compressed = utoa(JSON.stringify(flowchartData))
-
-    setLoading(true)
-    clearResult() // 清除之前的结果
-
-    try {
-      const response = await submitFlowchart({
-        problem_id: problem.value!.id,
-        mermaid_code: mermaidCode,
-        flowchart_data: {
-          compressed: true,
-          data: compressed,
-        },
-      })
-
-      // 获取提交ID并订阅更新
-      const submissionId = response.data.submission_id
-
-      if (submissionId) {
-        subscribeToSubmission(submissionId)
-      }
-
-      message.success("流程图已提交，请耐心等待评分")
-    } catch (error) {
-      setLoading(false)
-      message.error("流程图提交失败")
-      console.error("提交流程图失败:", error)
-    }
-  }
-
-  return {
-    evaluationResult,
-    submissionStatus,
-    loading,
-    submissionCount,
-    myFlowchartZippedStr,
-    connect,
-    disconnect,
-    checkCurrentSubmissionStatus,
-    submitFlowchartData,
-  }
-}
diff --git a/src/shared/components/FlowchartEditor/CustomNode.vue b/src/shared/components/FlowchartEditor/CustomNode.vue
index cdae3ed..31c7033 100644
--- a/src/shared/components/FlowchartEditor/CustomNode.vue
+++ b/src/shared/components/FlowchartEditor/CustomNode.vue
@@ -1,18 +1,14 @@
 <template>
   <div
     class="custom-node"
-    :class="{
-      'is-hovered': isHovered,
-      'is-editing': isEditing,
-      readonly: readonly,
-    }"
+    :class="{ 'is-hovered': isHovered, 'is-editing': isEditing }"
     :data-node-type="nodeType"
-    :draggable="!isEditing && !readonly"
-    @mouseenter="!readonly ? (isHovered = true) : undefined"
-    @mouseleave="!readonly ? handleMouseLeave : undefined"
-    @dblclick="!readonly ? handleDoubleClick : undefined"
-    @dragstart="!readonly ? handleDragStart : undefined"
-    @mousedown="!readonly ? handleMouseDown : undefined"
+    :draggable="!isEditing"
+    @mouseenter="isHovered = true"
+    @mouseleave="handleMouseLeave"
+    @dblclick="handleDoubleClick"
+    @dragstart="handleDragStart"
+    @mousedown="handleMouseDown"
   >
     <!-- 连线点 - 根据节点类型动态显示 -->
     <NodeHandles :node-type="nodeType" :node-config="nodeConfig" />
@@ -43,7 +39,7 @@
 
     <!-- 悬停时显示的操作按钮 -->
     <NodeActions
-      v-if="isHovered && !readonly"
+      v-if="isHovered"
       @delete="handleDelete"
       @mouseenter="handleMouseEnter"
       @mouseleave="handleMouseLeave"
@@ -62,7 +58,6 @@ interface Props {
   id: string
   type: string
   data: any
-  readonly?: boolean
 }
 
 interface Emits {
@@ -71,9 +66,7 @@ interface Emits {
 }
 
 // Props 和 Emits
-const props = withDefaults(defineProps<Props>(), {
-  readonly: false,
-})
+const props = defineProps<Props>()
 const emit = defineEmits<Emits>()
 
 // 响应式状态
@@ -222,14 +215,6 @@ onUnmounted(() => {
   filter: brightness(1.1);
 }
 
-.custom-node.readonly {
-  cursor: default;
-  pointer-events: none;
-}
-
-.custom-node.readonly .node-content {
-  pointer-events: auto;
-}
 
 /* 节点内容区域 */
 .node-content {
diff --git a/src/shared/components/FlowchartEditor/index.vue b/src/shared/components/FlowchartEditor/index.vue
index 610eb15..81ccffd 100644
--- a/src/shared/components/FlowchartEditor/index.vue
+++ b/src/shared/components/FlowchartEditor/index.vue
@@ -22,12 +22,10 @@ import CustomNode from "./CustomNode.vue"
 import { useProblemStore } from "oj/store/problem"
 
 interface Props {
-  readonly?: boolean
   height?: string
 }
 
 withDefaults(defineProps<Props>(), {
-  readonly: false,
   height: "calc(100vh - 133px)",
 })
 
@@ -183,12 +181,11 @@ defineExpose({
     <VueFlow
       v-model:nodes="nodes"
       v-model:edges="edges"
-      :readonly="readonly"
-      @dragover="!readonly ? handleDragOver : undefined"
-      @dragleave="!readonly ? handleDragLeave : undefined"
-      @drop="!readonly ? handleDrop : undefined"
-      @connect="!readonly ? handleConnect : undefined"
-      @edge-click="!readonly ? handleEdgeClick : undefined"
+      @dragover="handleDragOver"
+      @dragleave="handleDragLeave"
+      @drop="handleDrop"
+      @connect="handleConnect"
+      @edge-click="handleEdgeClick"
       :default-edge-options="{
         type: 'step',
         style: {
@@ -211,7 +208,7 @@ defineExpose({
         markerEnd: 'url(#connection-arrow)',
         filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))',
       }"
-      :fit-view-on-init="readonly"
+      :fit-view-on-init="false"
       :connect-on-click="false"
       :multi-selection-key-code="null"
       :delete-key-code="null"
@@ -240,17 +237,14 @@ defineExpose({
           :id="id"
           :type="type"
           :data="data"
-          :readonly="readonly"
           @delete="handleNodeDelete"
           @update="handleNodeUpdate"
         />
       </template>
 
       <Background variant="lines" :gap="20" :size="1" />
-      <Controls v-if="!readonly" />
+      <Controls />
       <Toolbar
-        v-if="!readonly"
-        r
         :can-undo="canUndo"
         :can-redo="canRedo"
         :is-saving="isSaving"
diff --git a/src/shared/composables/useMermaid.ts b/src/shared/composables/useMermaid.ts
new file mode 100644
index 0000000..53bf433
--- /dev/null
+++ b/src/shared/composables/useMermaid.ts
@@ -0,0 +1,54 @@
+import { nanoid } from "nanoid"
+
+export function useMermaid() {
+  // 渲染状态
+  const renderError = ref<string | null>(null)
+  
+  // 动态导入 mermaid
+  let mermaid: any = null
+
+  // 动态加载 Mermaid
+  const loadMermaid = async () => {
+    if (!mermaid) {
+      const mermaidModule = await import("mermaid")
+      mermaid = mermaidModule.default
+      mermaid.initialize({
+        startOnLoad: false,
+        securityLevel: "loose",
+        theme: "default",
+      })
+    }
+    return mermaid
+  }
+
+  // 渲染流程图的函数
+  const renderFlowchart = async (container: HTMLElement | null, mermaidCode: string) => {
+    try {
+      renderError.value = null
+
+      // 确保 mermaid 已加载
+      await loadMermaid()
+
+      // 渲染流程图
+      if (container && mermaidCode) {
+        const id = `mermaid-${nanoid()}`
+        const { svg } = await mermaid.render(id, mermaidCode)
+        container.innerHTML = svg
+      }
+    } catch (error) {
+      renderError.value =
+        error instanceof Error ? error.message : "流程图渲染失败，请检查代码格式"
+    }
+  }
+
+  // 清除渲染错误
+  const clearError = () => {
+    renderError.value = null
+  }
+
+  return {
+    renderError: readonly(renderError),
+    renderFlowchart,
+    clearError,
+  }
+}