diff --git a/apps/web/package.json b/apps/web/package.json
index b2369a0..a4eefbe 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -22,9 +22,6 @@
     "@codemirror/view": "^6.43.14",
     "@lezer/highlight": "^1.2.5",
     "@oj2/contract": "workspace:*",
-    "@vue-flow/background": "^1.3.2",
-    "@vue-flow/controls": "^1.1.3",
-    "@vue-flow/core": "^1.48.2",
     "@vueuse/core": "^15.0.0",
     "@vueuse/router": "^15.0.0",
     "@wangeditor-next/editor": "^6.5.0",
diff --git a/apps/web/src/oj/flowchart/index.vue b/apps/web/src/oj/flowchart/index.vue
deleted file mode 100644
index cd8329d..0000000
--- a/apps/web/src/oj/flowchart/index.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script lang="ts" setup>
-import FlowchartEditor from "shared/components/FlowchartEditor/index.vue"
-</script>
-<template>
-  <FlowchartEditor />
-</template>
-<style scoped></style>
diff --git a/apps/web/src/oj/problem/components/EditorToolbar.vue b/apps/web/src/oj/problem/components/EditorToolbar.vue
index 74eaae1..1616e3e 100644
--- a/apps/web/src/oj/problem/components/EditorToolbar.vue
+++ b/apps/web/src/oj/problem/components/EditorToolbar.vue
@@ -17,6 +17,7 @@ import { openStatistics, useEditorMenu } from "../composables/editorMenu"
 import { useTeacherCollab } from "../composables/teacherCollab"
 
 const SubmitFlowchart = defineAsyncComponent(() => import("./SubmitFlowchart.vue"))
+const FlowchartControls = defineAsyncComponent(() => import("./FlowchartControls.vue"))
 
 const collabStore = useCollabStore()
 
@@ -211,6 +212,8 @@ const changeLanguage = (v: LANGUAGE) => {
 
     <div class="spacer" />
 
+    <FlowchartControls v-if="drawing && isDesktop" />
+
     <n-button
       v-if="showHelpButton"
       :size="buttonSize"
diff --git a/apps/web/src/oj/problem/components/FlowchartControls.vue b/apps/web/src/oj/problem/components/FlowchartControls.vue
new file mode 100644
index 0000000..f8c8aa3
--- /dev/null
+++ b/apps/web/src/oj/problem/components/FlowchartControls.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { useThemeVars } from "naive-ui"
+import { storeToRefs } from "pinia"
+import { useFlowchartStore } from "oj/store/flowchart"
+import { parseTime } from "utils/functions"
+
+/**
+ * 画流程图时工具栏右边那一组：已保存几点、撤销、重做（设计稿 FlowEdB）。
+ * 原来这几个和节点库挤在画布右上角的面板里，盖住画好的框；保存状态只是一个 20px 的圆点。
+ * 「清空画布」收进了「⋯」。
+ */
+const { editor } = storeToRefs(useFlowchartStore())
+const theme = useThemeVars()
+
+const saved = computed(() => {
+  const at = editor.value?.savedAt
+  return at ? `已保存 ${parseTime(at, "HH:mm")}` : ""
+})
+</script>
+
+<template>
+  <div v-if="editor" class="flowchart-controls">
+    <span v-if="saved" class="saved">{{ saved }}</span>
+    <n-button
+      :disabled="!editor.canUndo"
+      aria-label="撤销"
+      title="撤销（Ctrl+Z）"
+      @click="editor.undo()"
+    >
+      <template #icon>
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M9 14L4 9l5-5" />
+          <path d="M4 9h10a6 6 0 010 12h-3" />
+        </svg>
+      </template>
+    </n-button>
+    <n-button
+      :disabled="!editor.canRedo"
+      aria-label="重做"
+      title="重做（Ctrl+Y）"
+      @click="editor.redo()"
+    >
+      <template #icon>
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M15 14l5-5-5-5" />
+          <path d="M20 9H10a6 6 0 000 12h3" />
+        </svg>
+      </template>
+    </n-button>
+  </div>
+</template>
+
+<style scoped>
+.flowchart-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.saved {
+  font-size: 13px;
+  color: v-bind("theme.textColor3");
+  white-space: nowrap;
+}
+</style>
diff --git a/apps/web/src/oj/problem/components/FlowchartResult.vue b/apps/web/src/oj/problem/components/FlowchartResult.vue
index ba5fb23..a96df0d 100644
--- a/apps/web/src/oj/problem/components/FlowchartResult.vue
+++ b/apps/web/src/oj/problem/components/FlowchartResult.vue
@@ -7,6 +7,7 @@ import { useProblemStore } from "oj/store/problem"
 import { useUserStore } from "shared/store/user"
 import { sortFlowchartCriteria } from "utils/constants"
 import { decompressFromBase64, parseTime } from "utils/functions"
+import { parseDoc, signature } from "shared/components/FlowchartEditor/model"
 
 /**
  * 「结果」页签里流程图作业的那一块：AI 在评 / 评完了几分 / 历次分数 / 评语和改进建议。
@@ -104,63 +105,15 @@ function percentType(ratio: number) {
 }
 
 // ==================== 载回画布 ====================
-/** 这一版的画布数据（压缩前的 JSON 字符串）；老提交的压缩数据可能是坏的 */
-const versionJson = computed(() => {
+/**
+ * 这一版的图（结构树）。2026-10 换成插入式编辑器之前交的是 vue-flow 的格式，读不出来就是
+ * null：那些只能看上面的图，载不回画布。老提交的压缩数据也可能是坏的
+ */
+const versionDoc = computed(() => {
   const data = detail.value?.flowchartData?.data
   if (typeof data !== "string" || !data) return null
   try {
-    return decompressFromBase64(data)
-  } catch {
-    return null
-  }
-})
-
-/**
- * 一张图「长什么样」：节点的 id / 类型 / data（字写在里面）/ 位置，连线的两端和标签。不直接比 JSON 字符串 ——
- * 载回画布时编辑器会补上默认字段（sourceHandle: null 之类），老提交还带着 vue-flow 的运行时
- * 字段，字符串永远对不上，按钮就一直在。
- */
-type Shape = { nodes?: unknown[]; edges?: unknown[] }
-function signature(data: Shape) {
-  const nodes = (data.nodes ?? []).map((raw) => {
-    const node = raw as {
-      id?: string
-      type?: string
-      data?: unknown
-      position?: { x?: number; y?: number }
-    }
-    return [
-      node.id,
-      node.type,
-      // 节点上的字（customLabel）和原始类型都在 data 里，整个带上
-      JSON.stringify(node.data ?? {}),
-      Math.round(node.position?.x ?? 0),
-      Math.round(node.position?.y ?? 0),
-    ].join("|")
-  })
-  const edges = (data.edges ?? []).map((raw) => {
-    const edge = raw as {
-      source?: string
-      target?: string
-      sourceHandle?: string | null
-      targetHandle?: string | null
-      label?: unknown
-    }
-    return [
-      edge.source,
-      edge.target,
-      edge.sourceHandle ?? "",
-      edge.targetHandle ?? "",
-      edge.label ?? "",
-    ].join("|")
-  })
-  return JSON.stringify([nodes.sort(), edges.sort()])
-}
-
-const versionSignature = computed(() => {
-  if (!versionJson.value) return null
-  try {
-    return signature(JSON.parse(versionJson.value) as Shape)
+    return parseDoc(JSON.parse(decompressFromBase64(data)))
   } catch {
     return null
   }
@@ -168,22 +121,18 @@ const versionSignature = computed(() => {
 
 /**
  * 只有画布和这一版不一样时才给「载回画布」：刚交完、还没动过的时候，这个按钮点了什么
- * 都不会变，只会让人以为它坏了。读 getFlowchartData() 会顺带跟踪画布的节点和边。
+ * 都不会变，只会让人以为它坏了。比的是结构和字，不比 id。
+ * 读 getDoc() 会顺带跟踪画布的数据
  */
 const canvasDiffers = computed(() => {
-  if (!editor.value || !versionSignature.value) return false
-  return signature(editor.value.getFlowchartData()) !== versionSignature.value
+  if (!editor.value || !versionDoc.value) return false
+  return signature(editor.value.getDoc()) !== signature(versionDoc.value)
 })
 
 function loadToCanvas() {
-  if (!editor.value || !versionJson.value) return
-  try {
-    const json = JSON.parse(versionJson.value)
-    editor.value.setFlowchartData({ nodes: json.nodes || [], edges: json.edges || [] })
-    message.success("已载回画布，按 Ctrl+Z 可以撤回")
-  } catch {
-    message.error("这一版的图数据坏了，载不回画布")
-  }
+  if (!editor.value || !versionDoc.value) return
+  editor.value.setDoc(versionDoc.value)
+  message.success("已载回画布，按 Ctrl+Z 可以撤回")
 }
 
 /** A / S 之后：照着图写代码。切回学生习惯的那门语言 */
diff --git a/apps/web/src/oj/problem/components/SubmitFlowchart.vue b/apps/web/src/oj/problem/components/SubmitFlowchart.vue
index 8e13c14..4fe9f66 100644
--- a/apps/web/src/oj/problem/components/SubmitFlowchart.vue
+++ b/apps/web/src/oj/problem/components/SubmitFlowchart.vue
@@ -2,7 +2,7 @@
 import { storeToRefs } from "pinia"
 import { compressToBase64 } from "utils/functions"
 import { useBreakpoints } from "shared/composables/breakpoints"
-import { useMermaidConverter } from "../composables/useMermaidConverter"
+import { countBlank, toMermaid } from "shared/components/FlowchartEditor/model"
 import { useProblemStore } from "oj/store/problem"
 import { useFlowchartStore, type FlowchartEditorInstance } from "oj/store/flowchart"
 
@@ -21,20 +21,22 @@ const { problem } = storeToRefs(useProblemStore())
 const flowchartStore = useFlowchartStore()
 const { loading } = storeToRefs(flowchartStore)
 const { isDesktop } = useBreakpoints()
-const { convertToMermaid } = useMermaidConverter()
 
 function submit() {
   const editor = flowchartEditorRef?.value
   if (!editor) return
-  const flowchartData = editor.getFlowchartData()
-  if (!flowchartData?.nodes?.length || !flowchartData?.edges?.length) {
-    message.warning("画布上还没有图：从左边拖几个框进来，再用线连起来")
+  const doc = editor.getDoc()
+  if (!doc.steps.length) {
+    message.warning("画布上还没有图：点「开始」下面的 +，加第一步")
     return
   }
-  flowchartStore.submit(
-    convertToMermaid(flowchartData),
-    compressToBase64(JSON.stringify(flowchartData)),
-  )
+  // 空框交上去 AI 只能瞎猜，学生也不知道扣分是因为忘了写字
+  const blank = countBlank(doc.steps)
+  if (blank) {
+    message.warning(`有 ${blank} 个框还没写字，点一下框就能写`)
+    return
+  }
+  flowchartStore.submit(toMermaid(doc), compressToBase64(JSON.stringify(doc)))
 }
 
 // 进题、换题都读一次历次分数（store 里同一道题只读一次）
diff --git a/apps/web/src/oj/problem/composables/editorMenu.ts b/apps/web/src/oj/problem/composables/editorMenu.ts
index 0d2b4c1..dc2c73d 100644
--- a/apps/web/src/oj/problem/composables/editorMenu.ts
+++ b/apps/web/src/oj/problem/composables/editorMenu.ts
@@ -9,6 +9,7 @@ import { compressToBase64, copyToClipboard } from "utils/functions"
 import storage from "utils/storage"
 import { useDraftKey } from "./draftKey"
 import { useTeacherCollab } from "./teacherCollab"
+import { useFlowchartStore } from "oj/store/flowchart"
 import { useProblemPageContext } from "./problemPageContext"
 
 /**
@@ -48,7 +49,9 @@ export function useEditorMenu(statisticsInline: Ref<boolean>) {
     if (ctx.value.classStats && !statisticsInline.value && userStore.isTeacherOrAbove) {
       items.push({ label: "课堂统计", key: "statistics" })
     }
-    if (codeStore.code.language !== "Flowchart") {
+    if (codeStore.code.language === "Flowchart") {
+      items.push({ label: "清空画布", key: "clearFlowchart" })
+    } else {
       if (codeStore.code.language !== "SQL") items.push({ label: "去自测猫", key: "testcat" })
       items.push({ label: "复制代码", key: "copy" })
       // 协作中的教师不给「重置代码」：那会儿编辑器里是**学生的**代码，而 v-model
@@ -80,6 +83,23 @@ export function useEditorMenu(statisticsInline: Ref<boolean>) {
     })
   }
 
+  // 清空会连这道题存着的草稿一起删掉（空图不留草稿），点错了只剩 Ctrl+Z
+  const flowchartStore = useFlowchartStore()
+  function clearFlowchart() {
+    const editor = flowchartStore.editor
+    if (!editor) return
+    dialog.warning({
+      title: "清空画布",
+      content: "画布上的图会全部清掉。确定吗？",
+      positiveText: "清空",
+      negativeText: "再想想",
+      onPositiveClick: () => {
+        editor.clear()
+        message.success("已清空，按 Ctrl+Z 可以撤回")
+      },
+    })
+  }
+
   function goTestCat() {
     const data = {
       lang: LANGUAGE_FORMAT_VALUE[codeStore.code.language],
@@ -124,6 +144,9 @@ export function useEditorMenu(statisticsInline: Ref<boolean>) {
       case "reset":
         reset()
         return true
+      case "clearFlowchart":
+        clearFlowchart()
+        return true
       case "edit":
         goEdit()
         return true
diff --git a/apps/web/src/oj/problem/composables/useMermaidConverter.ts b/apps/web/src/oj/problem/composables/useMermaidConverter.ts
deleted file mode 100644
index e689340..0000000
--- a/apps/web/src/oj/problem/composables/useMermaidConverter.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * 节点/连线标签是学生自己敲的任意文字，而下面是直接把它塞进 "..." 里。
- * 出现一个双引号就会把 mermaid 语法撑破：图渲染不出来，坏掉的代码还会原样送去
- * 给 AI 打分，学生完全不知道自己被扣分是因为一个引号。
- *
- * mermaid 用 `#NN;` 形式的实体转义。`#` 必须**先**转，否则标签里本来就有的
- * `#quot;` 之类会被当成实体解释。换行转成 <br/>，不然会截断整条语句。
- */
-function escapeLabel(raw: unknown) {
-  return String(raw ?? "")
-    .replace(/#/g, "#35;")
-    .replace(/"/g, "#quot;")
-    .replace(/\r?\n/g, "<br/>")
-}
-
-/**
- * 将流程图 JSON 数据转换为 Mermaid 格式
- */
-export function useMermaidConverter() {
-  const convertToMermaid = (flowchartData: any) => {
-    const nodes = flowchartData?.nodes
-    // edges 原来没做空值保护（nodes 有），拿到 undefined 会直接抛
-    const edges = flowchartData?.edges ?? []
-
-    if (!nodes || nodes.length === 0) {
-      return "graph TD\n    A[空流程图]"
-    }
-
-    let mermaid = "graph TD\n"
-
-    // Build safe ID mapping to prevent Mermaid syntax errors from special characters
-    const idMap = new Map<string, string>()
-    nodes.forEach((node: any, index: number) => {
-      idMap.set(node.id, `node_${index}`)
-    })
-    const safeId = (id: string) => idMap.get(id) || id.replace(/[^a-zA-Z0-9_]/g, "_")
-
-    // 处理节点 - 根据原始类型和自定义标签
-    nodes.forEach((node: any) => {
-      const nodeId = safeId(node.id)
-      const label = escapeLabel(node.data?.customLabel || node.data?.label || "节点")
-      const originalType = node.data?.originalType || node.type
-
-      // 根据节点原始类型确定Mermaid语法
-      switch (originalType) {
-        case "start":
-          mermaid += `    ${nodeId}(("${label}"))\n`
-          break
-        case "end":
-          mermaid += `    ${nodeId}(("${label}"))\n`
-          break
-        case "input":
-          // 输入框使用平行四边形
-          mermaid += `    ${nodeId}[/"${label}"/]\n`
-          break
-        case "output":
-          // 输出框使用平行四边形
-          mermaid += `    ${nodeId}[/"${label}"/]\n`
-          break
-        case "default":
-          mermaid += `    ${nodeId}["${label}"]\n`
-          break
-        case "decision":
-          mermaid += `    ${nodeId}{"${label}"}\n`
-          break
-        case "loop":
-          // 循环使用菱形
-          mermaid += `    ${nodeId}{"${label}"}\n`
-          break
-        default:
-          mermaid += `    ${nodeId}["${label}"]\n`
-      }
-    })
-
-    // 处理边
-    edges.forEach((edge: any) => {
-      const source = safeId(edge.source)
-      const target = safeId(edge.target)
-      const rawLabel = String(edge.label ?? "")
-
-      if (rawLabel.trim() !== "") {
-        mermaid += `    ${source} -->|"${escapeLabel(rawLabel)}"| ${target}\n`
-      } else {
-        mermaid += `    ${source} --> ${target}\n`
-      }
-    })
-
-    // 添加样式定义来区分不同类型的节点
-    mermaid += "\n"
-    mermaid += "    classDef startNode fill:#dcfce7,stroke:#16a34a,stroke-width:2px,color:#0f172a\n"
-    mermaid += "    classDef endNode fill:#fee2e2,stroke:#dc2626,stroke-width:2px,color:#0f172a\n"
-    mermaid += "    classDef input fill:#dbeafe,stroke:#2563eb,stroke-width:2px,color:#0f172a\n"
-    mermaid += "    classDef output fill:#ede9fe,stroke:#7c3aed,stroke-width:2px,color:#0f172a\n"
-    mermaid += "    classDef process fill:#f0f9ff,stroke:#0284c7,stroke-width:2px,color:#0f172a\n"
-    mermaid += "    classDef decision fill:#fef3c7,stroke:#d97706,stroke-width:2px,color:#0f172a\n"
-    mermaid += "    classDef loop fill:#fae8ff,stroke:#c026d3,stroke-width:2px,color:#0f172a\n"
-    mermaid += "\n"
-
-    // 为节点应用样式
-    nodes.forEach((node: any) => {
-      const nodeId = safeId(node.id)
-      const originalType = node.data?.originalType || node.type
-
-      switch (originalType) {
-        case "start":
-          mermaid += `    class ${nodeId} startNode\n`
-          break
-        case "end":
-          mermaid += `    class ${nodeId} endNode\n`
-          break
-        case "input":
-          mermaid += `    class ${nodeId} input\n`
-          break
-        case "output":
-          mermaid += `    class ${nodeId} output\n`
-          break
-        case "decision":
-          mermaid += `    class ${nodeId} decision\n`
-          break
-        case "loop":
-          mermaid += `    class ${nodeId} loop\n`
-          break
-        default:
-          mermaid += `    class ${nodeId} process\n`
-      }
-    })
-
-    return mermaid
-  }
-
-  return {
-    convertToMermaid,
-  }
-}
diff --git a/apps/web/src/oj/store/flowchart.ts b/apps/web/src/oj/store/flowchart.ts
index 7155e28..7fbce91 100644
--- a/apps/web/src/oj/store/flowchart.ts
+++ b/apps/web/src/oj/store/flowchart.ts
@@ -2,7 +2,7 @@ import { createDiscreteApi } from "naive-ui"
 import { defineStore } from "pinia"
 import { errorCode } from "utils/api"
 import { isFlowchartPass, type FlowchartScores, type FlowchartSubmission } from "@oj2/contract"
-import type { Edge, Node } from "@vue-flow/core"
+import type { FlowDoc } from "shared/components/FlowchartEditor/model"
 import { getFlowchartScores, getFlowchartSubmission, submitFlowchart } from "oj/api"
 import { useProblemStore } from "oj/store/problem"
 import { useSubmissionStore } from "oj/store/submission"
@@ -22,10 +22,16 @@ export interface FlowchartRating {
 
 type Outcome = { ok: true; score: number; grade: string } | { ok: false; error?: string }
 
-/** 编辑器对外的两个方法（FlowchartEditor 的 defineExpose） */
+/** 编辑器对外的东西（FlowchartEditor 的 defineExpose；ref 经组件实例读出来已经解包） */
 export interface FlowchartEditorInstance {
-  getFlowchartData: () => { nodes: unknown[]; edges: unknown[] }
-  setFlowchartData: (data: { nodes: Node[]; edges: Edge[] }) => void
+  getDoc: () => FlowDoc
+  setDoc: (doc: FlowDoc) => void
+  undo: () => void
+  redo: () => void
+  clear: () => void
+  canUndo: boolean
+  canRedo: boolean
+  savedAt: Date | null
 }
 
 // 「A / S 算做完」的规则在契约里，前后端一份；这里转出去，组件照旧从 flowchart store 引
diff --git a/apps/web/src/routes.ts b/apps/web/src/routes.ts
index 8055ebc..c743cbb 100644
--- a/apps/web/src/routes.ts
+++ b/apps/web/src/routes.ts
@@ -138,11 +138,6 @@ export const ojs: RouteRecordRaw = {
       component: () => import("oj/ai/analysis.vue"),
       meta: { requiresAuth: true },
     },
-    {
-      path: "flowchart",
-      name: "flowchart",
-      component: () => import("oj/flowchart/index.vue"),
-    },
     {
       path: "problemset",
       component: () => import("oj/problemset/list.vue"),
diff --git a/apps/web/src/shared/components/FlowchartEditor/CustomNode.vue b/apps/web/src/shared/components/FlowchartEditor/CustomNode.vue
deleted file mode 100644
index 0a7c039..0000000
--- a/apps/web/src/shared/components/FlowchartEditor/CustomNode.vue
+++ /dev/null
@@ -1,270 +0,0 @@
-<template>
-  <div
-    class="custom-node"
-    :class="{ 'is-hovered': isHovered, 'is-editing': isEditing }"
-    :data-node-type="nodeType"
-    :draggable="!isEditing"
-    @mouseenter="handleMouseEnter"
-    @mouseleave="handleMouseLeave"
-    @dblclick="handleDoubleClick"
-    @dragstart="handleDragStart"
-    @mousedown="handleMouseDown"
-  >
-    <!-- 连线点 - 根据节点类型动态显示 -->
-    <NodeHandles :node-type="nodeType" :node-config="nodeConfig" />
-
-    <!-- 节点内容 -->
-    <div class="node-content">
-      <!-- 显示模式 -->
-      <span v-if="!isEditing" class="node-label">{{ displayLabel }}</span>
-
-      <!-- 编辑模式 -->
-      <input
-        v-if="isEditing"
-        ref="editInput"
-        v-model="editText"
-        class="node-input"
-        @blur="handleSaveEdit"
-        @keydown.enter="handleSaveEdit"
-        @keydown.escape="handleCancelEdit"
-        @click.stop
-      />
-
-      <!-- 隐藏的文字用于保持尺寸 -->
-      <span v-if="isEditing" class="node-label-hidden" aria-hidden="true">
-        {{ displayLabel }}
-      </span>
-    </div>
-
-    <!-- 悬停时显示的操作按钮 -->
-    <NodeActions
-      v-if="isHovered"
-      @delete="handleDelete"
-      @mouseenter="handleMouseEnter"
-      @mouseleave="handleMouseLeave"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, onUnmounted, nextTick, computed } from "vue"
-import { getNodeTypeConfig } from "./useNodeStyles"
-import NodeHandles from "./NodeHandles.vue"
-import NodeActions from "./NodeActions.vue"
-
-interface NodeData {
-  label: string
-  color: string
-  originalType: string
-  customLabel?: string
-}
-
-interface Props {
-  id: string
-  type: string
-  data: NodeData
-}
-
-interface Emits {
-  delete: [nodeId: string]
-  update: [nodeId: string, newLabel: string]
-}
-
-// Props 和 Emits
-const props = defineProps<Props>()
-const emit = defineEmits<Emits>()
-
-// 响应式状态
-const isHovered = ref(false)
-const isEditing = ref(false)
-const editText = ref("")
-const editInput = useTemplateRef<HTMLInputElement>("editInput")
-
-// 定时器和事件处理器
-let hideTimeout: ReturnType<typeof setTimeout> | null = null
-let globalClickHandler: ((event: MouseEvent) => void) | null = null
-
-// 计算属性
-const nodeType = computed(() => props.data.originalType || props.type)
-const nodeConfig = computed(() => getNodeTypeConfig(nodeType.value))
-const displayLabel = computed(() => props.data.customLabel || nodeConfig.value.label)
-
-// 事件处理器
-const handleDelete = () => emit("delete", props.id)
-
-const handleMouseDown = (event: MouseEvent) => {
-  const target = event.target as HTMLElement
-  if (target.closest(".vue-flow__handle")) {
-    event.preventDefault()
-  }
-}
-
-const handleDragStart = (event: DragEvent) => {
-  if (isEditing.value) return
-
-  const target = event.target as HTMLElement
-  if (target.closest(".vue-flow__handle")) {
-    event.preventDefault()
-    return
-  }
-
-  if (event.dataTransfer) {
-    event.dataTransfer.effectAllowed = "move"
-  }
-}
-
-const handleDoubleClick = (event: MouseEvent) => {
-  event.stopPropagation()
-  if (!isEditing.value) {
-    isEditing.value = true
-    editText.value = displayLabel.value
-    nextTick(() => {
-      editInput.value?.focus()
-      editInput.value?.select()
-    })
-    addGlobalClickHandler()
-  }
-}
-
-const handleSaveEdit = () => {
-  if (isEditing.value) {
-    emit("update", props.id, editText.value.trim())
-    isEditing.value = false
-    removeGlobalClickHandler()
-  }
-}
-
-const handleCancelEdit = () => {
-  isEditing.value = false
-  editText.value = ""
-  removeGlobalClickHandler()
-}
-
-const handleMouseEnter = () => {
-  isHovered.value = true
-  if (hideTimeout) {
-    clearTimeout(hideTimeout)
-    hideTimeout = null
-  }
-}
-
-const handleMouseLeave = () => {
-  if (hideTimeout) {
-    clearTimeout(hideTimeout)
-  }
-  hideTimeout = setTimeout(() => {
-    isHovered.value = false
-  }, 300)
-}
-
-// 全局点击处理器
-const addGlobalClickHandler = () => {
-  if (globalClickHandler) return
-
-  globalClickHandler = (event: MouseEvent) => {
-    if (isEditing.value && !(event.target as Element)?.closest(".custom-node")) {
-      handleSaveEdit()
-    }
-  }
-  document.addEventListener("click", globalClickHandler, { capture: true })
-}
-
-const removeGlobalClickHandler = () => {
-  if (globalClickHandler) {
-    document.removeEventListener("click", globalClickHandler, { capture: true })
-    globalClickHandler = null
-  }
-}
-
-// 清理函数
-onUnmounted(() => {
-  if (hideTimeout) {
-    clearTimeout(hideTimeout)
-  }
-  removeGlobalClickHandler()
-})
-</script>
-
-<style scoped>
-/* 主容器 */
-.custom-node {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: inherit;
-  transition: all 0.2s ease;
-  padding: 0 20px;
-}
-
-.custom-node.is-hovered {
-  z-index: 1;
-}
-
-.custom-node.is-hovered .node-content {
-  filter: brightness(1.1);
-}
-
-/* 节点内容区域 */
-.node-content {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  width: 100%;
-  height: 100%;
-  border-radius: inherit;
-  transition: all 0.2s ease;
-}
-
-/* 节点标签 */
-.node-label {
-  font-size: 16px;
-  font-weight: 500;
-  white-space: nowrap;
-  display: inline-block;
-  text-align: center;
-  line-height: 1.2;
-}
-
-/* 编辑输入框 */
-.node-input {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: transparent;
-  border: none;
-  outline: none;
-  font-size: 16px;
-  font-weight: 500;
-  color: inherit;
-  text-align: center;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-  white-space: nowrap;
-  overflow: hidden;
-  resize: none;
-  font-family: inherit;
-  line-height: 1.2;
-}
-
-/* 隐藏标签（用于保持尺寸） */
-.node-label-hidden {
-  font-size: 16px;
-  font-weight: 500;
-  white-space: nowrap;
-  display: inline-block;
-  visibility: hidden;
-  pointer-events: none;
-  text-align: center;
-  line-height: 1.2;
-}
-</style>
diff --git a/apps/web/src/shared/components/FlowchartEditor/NodeActions.vue b/apps/web/src/shared/components/FlowchartEditor/NodeActions.vue
deleted file mode 100644
index c72535e..0000000
--- a/apps/web/src/shared/components/FlowchartEditor/NodeActions.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-  <div class="node-actions" @mouseenter="$emit('mouseenter')" @mouseleave="$emit('mouseleave')">
-    <button class="action-btn delete-btn" @click.stop="$emit('delete')" title="删除节点">
-      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-        <path
-          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-        />
-      </svg>
-    </button>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineEmits<{
-  delete: []
-  mouseenter: []
-  mouseleave: []
-}>()
-</script>
-
-<style scoped>
-.node-actions {
-  position: absolute;
-  top: -40px;
-  right: -20px;
-  padding: 8px;
-}
-
-.action-btn {
-  width: 24px;
-  height: 24px;
-  border: none;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-  font-size: 10px;
-}
-
-.delete-btn {
-  background: #ef4444;
-  color: white;
-}
-
-.delete-btn:hover {
-  background: #dc2626;
-  transform: scale(1.05);
-}
-</style>
diff --git a/apps/web/src/shared/components/FlowchartEditor/NodeHandles.vue b/apps/web/src/shared/components/FlowchartEditor/NodeHandles.vue
deleted file mode 100644
index 07e9977..0000000
--- a/apps/web/src/shared/components/FlowchartEditor/NodeHandles.vue
+++ /dev/null
@@ -1,238 +0,0 @@
-<template>
-  <!-- 开始节点：只有输出 handle -->
-  <template v-if="nodeType === 'start'">
-    <Handle
-      type="source"
-      id="output"
-      :position="Position.Bottom"
-      :style="getHandleStyle('#10b981', { bottom: '-10px' })"
-    />
-  </template>
-
-  <!-- 结束节点：只有输入 handle -->
-  <template v-else-if="nodeType === 'end'">
-    <Handle
-      type="target"
-      id="input"
-      :position="Position.Top"
-      :style="getHandleStyle('#ef4444', { top: '-10px' })"
-    />
-  </template>
-
-  <!-- 选择判断节点：一个输入 + 两个输出（是/否） -->
-  <template v-else-if="nodeType === 'decision'">
-    <Handle
-      type="target"
-      id="input"
-      :position="Position.Top"
-      :style="getHandleStyle('#f59e0b', { top: '-16px' })"
-    />
-    <Handle
-      type="source"
-      :position="Position.Left"
-      id="yes"
-      :style="{
-        background: '#10b981',
-        width: '12px',
-        height: '12px',
-        border: '2px solid white',
-        zIndex: 10,
-        left: '-10px',
-        top: '50%',
-        transform: 'translateY(-50%)',
-      }"
-    />
-    <Handle
-      type="source"
-      :position="Position.Right"
-      id="no"
-      :style="{
-        background: '#ef4444',
-        width: '12px',
-        height: '12px',
-        border: '2px solid white',
-        zIndex: 10,
-        right: '-10px',
-        top: '50%',
-        transform: 'translateY(-50%)',
-      }"
-    />
-
-    <!-- 是/否标签 -->
-    <div class="decision-labels">
-      <span class="decision-label decision-label-yes">是</span>
-      <span class="decision-label decision-label-no">否</span>
-    </div>
-  </template>
-
-  <!-- 循环判断节点：两个输入 + 两个输出（进入/循环体返回 + 继续/退出） -->
-  <template v-else-if="nodeType === 'loop'">
-    <!-- 进入循环的输入 -->
-    <Handle
-      type="target"
-      :position="Position.Top"
-      id="enter"
-      :style="getHandleStyle('#f59e0b', { top: '-16px' })"
-    />
-    <!-- 循环体返回的输入 -->
-    <Handle
-      type="target"
-      :position="Position.Bottom"
-      id="return"
-      :style="
-        getHandleStyle('#8b5cf6', {
-          bottom: '-16px',
-        })
-      "
-    />
-    <!-- 继续执行循环体 -->
-    <Handle
-      type="source"
-      :position="Position.Right"
-      id="continue"
-      :style="
-        getHandleStyle('#10b981', {
-          right: '-10px',
-          top: '50%',
-          transform: 'translateY(-50%)',
-        })
-      "
-    />
-    <!-- 退出循环 -->
-    <Handle
-      type="source"
-      :position="Position.Left"
-      id="exit"
-      :style="
-        getHandleStyle('#ef4444', {
-          left: '-10px',
-          top: '50%',
-          transform: 'translateY(-50%)',
-        })
-      "
-    />
-
-    <!-- 标签 -->
-    <div class="loop-labels">
-      <span class="loop-label loop-label-enter">进入</span>
-      <span class="loop-label loop-label-return">返回</span>
-      <span class="loop-label loop-label-continue">继续</span>
-      <span class="loop-label loop-label-exit">退出</span>
-    </div>
-  </template>
-
-  <!-- 上下两个 handle -->
-  <template v-else>
-    <Handle
-      type="target"
-      id="input"
-      :position="Position.Top"
-      :style="getHandleStyle(nodeConfig.color, { top: '-10px' })"
-    />
-    <Handle
-      type="source"
-      id="output"
-      :position="Position.Bottom"
-      :style="getHandleStyle(nodeConfig.color, { bottom: '-10px' })"
-    />
-  </template>
-</template>
-
-<script lang="ts" setup>
-import { Handle, Position } from "@vue-flow/core"
-
-interface Props {
-  nodeType: string
-  nodeConfig: {
-    color: string
-    label: string
-  }
-}
-
-defineProps<Props>()
-
-// 获取 handle 样式
-const getHandleStyle = (color: string, position: Record<string, string>) => ({
-  background: color,
-  width: "12px",
-  height: "12px",
-  border: "2px solid white",
-  zIndex: 10,
-  ...position,
-})
-</script>
-
-<style scoped>
-/* 判断节点标签样式 */
-.decision-labels {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-  z-index: 1000;
-}
-
-.decision-label {
-  position: absolute;
-  font-size: 16px;
-  font-weight: 600;
-  color: #000;
-  white-space: nowrap;
-  pointer-events: none;
-  user-select: none;
-}
-
-.decision-label-yes {
-  left: -25px;
-  top: -20px;
-}
-
-.decision-label-no {
-  right: -25px;
-  top: -20px;
-}
-
-/* 循环节点标签样式 */
-.loop-labels {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-}
-
-.loop-label {
-  position: absolute;
-  font-size: 16px;
-  font-weight: 600;
-  color: #000;
-  white-space: nowrap;
-  pointer-events: none;
-  user-select: none;
-}
-
-.loop-label-enter {
-  right: 20px;
-  top: -45px;
-}
-
-.loop-label-return {
-  right: 20px;
-  bottom: -45px;
-}
-
-.loop-label-continue {
-  right: -40px;
-  top: -16px;
-  transform: translateY(-50%);
-}
-
-.loop-label-exit {
-  left: -40px;
-  top: -16px;
-  transform: translateY(-50%);
-}
-</style>
diff --git a/apps/web/src/shared/components/FlowchartEditor/Toolbar.vue b/apps/web/src/shared/components/FlowchartEditor/Toolbar.vue
deleted file mode 100644
index 34efb9e..0000000
--- a/apps/web/src/shared/components/FlowchartEditor/Toolbar.vue
+++ /dev/null
@@ -1,400 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue"
-import { parseTime } from "utils/functions"
-import { getNodeTypeConfig } from "./useNodeStyles"
-import { currentDragNodeType } from "./useDnD"
-
-// 拖拽开始处理
-const onDragStart = (event: DragEvent, type: string) => {
-  if (!event.dataTransfer || !type) return
-
-  event.dataTransfer.setData("application/vueflow", type)
-  event.dataTransfer.effectAllowed = "move"
-  currentDragNodeType.value = type
-
-  // 隐藏浏览器默认拖影，改用 canvas 跟随预览
-  const emptyImg = new Image(1, 1)
-  emptyImg.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-  event.dataTransfer.setDragImage(emptyImg, 0, 0)
-}
-
-const onDragEnd = () => {
-  currentDragNodeType.value = null
-}
-
-// Props
-const props = defineProps<{
-  canUndo?: boolean
-  canRedo?: boolean
-  isSaving?: boolean
-  lastSaved?: Date | null
-  hasUnsavedChanges?: boolean
-}>()
-
-// Emits
-const emit = defineEmits<{
-  deleteNode: [nodeId: string]
-  undo: []
-  redo: []
-  clear: []
-}>()
-
-// 工具栏状态
-
-// 节点类型定义 - 优化性能
-const nodeTypes = computed(() =>
-  ["start", "input", "default", "decision", "loop", "output", "end"].map((type) => {
-    const config = getNodeTypeConfig(type)
-    return {
-      type,
-      ...config,
-    }
-  }),
-)
-
-const saveStatusTitle = computed(() => {
-  if (props.isSaving) {
-    return "正在保存..."
-  } else if (props.hasUnsavedChanges) {
-    return "有未保存的更改"
-  } else if (props.lastSaved) {
-    // 和站内其它时间同一口径（东八区），不用 toLocaleTimeString() 跟着浏览器走
-    return `已保存 - ${parseTime(props.lastSaved, "HH:mm:ss")}`
-  } else {
-    return "已保存"
-  }
-})
-</script>
-<template>
-  <div class="toolbar">
-    <!-- 工具栏头部 -->
-    <div class="toolbar-header">
-      <div class="header-content">
-        <h3>节点库</h3>
-        <div
-          class="save-status-indicator"
-          :class="{
-            saving: props.isSaving,
-            unsaved: props.hasUnsavedChanges && !props.isSaving,
-            saved: !props.hasUnsavedChanges && !props.isSaving,
-          }"
-          :title="saveStatusTitle"
-        >
-          <span v-if="props.isSaving" class="spinner">⏳</span>
-          <span v-else-if="props.hasUnsavedChanges">●</span>
-          <span v-else>✔</span>
-        </div>
-      </div>
-    </div>
-
-    <!-- 节点列表 -->
-    <div class="nodes">
-      <div
-        v-for="nodeType in nodeTypes"
-        :key="nodeType.type"
-        class="node-item"
-        :draggable="true"
-        @dragstart="onDragStart($event, nodeType.type)"
-        @dragend="onDragEnd"
-        :style="{ borderColor: nodeType.color }"
-        :title="`${nodeType.label} - ${nodeType.description}`"
-      >
-        <div class="node-icon" :style="{ backgroundColor: nodeType.color }">
-          {{ nodeType.icon }}
-        </div>
-        <div class="node-info">
-          <div class="node-label">{{ nodeType.label }}</div>
-          <div class="node-description">{{ nodeType.description }}</div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 工具栏操作 -->
-    <div class="toolbar-actions">
-      <div class="history-controls">
-        <button
-          class="action-btn history-btn"
-          :disabled="!canUndo"
-          @click="$emit('undo')"
-          title="撤销 (Ctrl+Z)"
-        >
-          <span class="btn-icon">↶</span>
-          <span class="btn-text">撤销</span>
-        </button>
-        <button
-          class="action-btn history-btn"
-          :disabled="!canRedo"
-          @click="$emit('redo')"
-          title="重做 (Ctrl+Y)"
-        >
-          <span class="btn-icon">↷</span>
-          <span class="btn-text">重做</span>
-        </button>
-      </div>
-      <button class="action-btn clear-btn" @click="$emit('clear')" title="清空画布">
-        <span class="btn-icon">🗑️</span>
-        <span class="btn-text">清空画布</span>
-      </button>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.toolbar {
-  width: 140px;
-  height: auto;
-  max-height: calc(100vh - 40px);
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  z-index: 1000;
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-  padding: 16px;
-  overflow-y: auto;
-  transition: all 0.3s ease;
-}
-
-.toolbar-header {
-  margin-bottom: 16px;
-  border-bottom: 1px solid #e5e7eb;
-  padding-bottom: 12px;
-}
-
-.header-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.toolbar-header h3 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #1f2937;
-}
-
-/* 保存状态指示器样式 */
-.save-status-indicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  font-size: 12px;
-  font-weight: bold;
-  transition: all 0.3s ease;
-  cursor: pointer;
-}
-
-.save-status-indicator.saving {
-  background: #fef3c7;
-  color: #d97706;
-  animation: pulse 1.5s ease-in-out infinite;
-}
-
-.save-status-indicator.unsaved {
-  background: #fef2f2;
-  color: #dc2626;
-  animation: pulse 1.5s ease-in-out infinite;
-}
-
-.save-status-indicator.saved {
-  background: #f0fdf4;
-  color: #16a34a;
-}
-
-.spinner {
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-/* 节点列表样式 */
-.nodes {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-bottom: 16px;
-}
-
-.node-item {
-  display: flex;
-  align-items: center;
-  padding: 10px;
-  border: 2px solid #e5e7eb;
-  border-radius: 8px;
-  cursor: grab;
-  transition: all 0.2s ease;
-  background: white;
-}
-
-.node-item:hover {
-  border-color: #3b82f6;
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
-  transform: translateY(-2px);
-}
-
-.node-item:active {
-  cursor: grabbing;
-  transform: translateY(0);
-}
-
-.node-icon {
-  width: 32px;
-  height: 32px;
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  color: white;
-  margin-right: 10px;
-  flex-shrink: 0;
-}
-
-.node-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.node-label {
-  font-weight: 500;
-  color: #1f2937;
-  margin-bottom: 2px;
-  font-size: 14px;
-}
-
-.node-description {
-  font-size: 12px;
-  color: #6b7280;
-  line-height: 1.3;
-}
-
-/* 工具栏操作按钮样式 */
-.toolbar-actions {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  border-top: 1px solid #e5e7eb;
-  padding-top: 12px;
-}
-
-.history-controls {
-  display: flex;
-  gap: 6px;
-  margin-bottom: 8px;
-}
-
-.action-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 10px 12px;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
-  background: white;
-  color: #374151;
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  gap: 6px;
-}
-
-.action-btn:hover {
-  background: #f9fafb;
-  border-color: #9ca3af;
-  transform: translateY(-1px);
-}
-
-.action-btn:active {
-  background: #f3f4f6;
-  transform: translateY(0);
-}
-
-.history-btn {
-  flex: 1;
-  font-size: 11px;
-  padding: 8px 10px;
-}
-
-.history-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  background: #f9fafb;
-  color: #9ca3af;
-}
-
-.history-btn:disabled:hover {
-  background: #f9fafb;
-  border-color: #d1d5db;
-  transform: none;
-}
-
-.clear-btn {
-  background: #fef2f2;
-  border-color: #fecaca;
-  color: #dc2626;
-}
-
-.clear-btn:hover {
-  background: #fee2e2;
-  border-color: #fca5a5;
-}
-
-.btn-icon {
-  font-size: 14px;
-}
-
-.btn-text {
-  font-size: 12px;
-}
-
-/* 滚动条样式 */
-.toolbar::-webkit-scrollbar {
-  width: 6px;
-}
-
-.toolbar::-webkit-scrollbar-track {
-  background: #f1f5f9;
-  border-radius: 3px;
-}
-
-.toolbar::-webkit-scrollbar-thumb {
-  background: #cbd5e1;
-  border-radius: 3px;
-}
-
-.toolbar::-webkit-scrollbar-thumb:hover {
-  background: #94a3b8;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .toolbar {
-    width: 180px;
-    top: 10px;
-    left: 10px;
-  }
-}
-</style>
diff --git a/apps/web/src/shared/components/FlowchartEditor/index.vue b/apps/web/src/shared/components/FlowchartEditor/index.vue
index 8a7ace2..9d178e0 100644
--- a/apps/web/src/shared/components/FlowchartEditor/index.vue
+++ b/apps/web/src/shared/components/FlowchartEditor/index.vue
@@ -1,349 +1,1025 @@
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted } from "vue"
-import Toolbar from "./Toolbar.vue"
-import "@vue-flow/core/dist/style.css"
-import "@vue-flow/core/dist/theme-default.css"
-import "@vue-flow/controls/dist/style.css"
-import { useVueFlow, VueFlow, type Node, type Edge, MarkerType } from "@vue-flow/core"
-import { Controls } from "@vue-flow/controls"
-import { Background } from "@vue-flow/background"
-
-import { useDnD, currentDragNodeType } from "./useDnD"
-import { getNodeTypeConfig } from "./useNodeStyles"
-import { useHistory } from "./useHistory"
-import { useFlowOperations } from "./useFlowOperations"
-import { useCache } from "./useCache"
-import { toPortableEdges, toPortableNodes } from "./serialize"
-import CustomNode from "./CustomNode.vue"
+import { useThemeVars } from "naive-ui"
+import storage from "utils/storage"
 import { useProblemStore } from "oj/store/problem"
+import {
+  cloneDoc,
+  emptyDoc,
+  findStep,
+  insertStep,
+  parseDoc,
+  removeStep,
+  STEP_LABEL,
+  type FlowDoc,
+  type StepKind,
+} from "./model"
+import { layoutDoc, PLACEHOLDER, type LaidNode, type LaidSlot } from "./layout"
+
+/**
+ * 画流程图（插入式）。设计稿：画布「画流程图重设计」页的 FlowEdB / FlowEdBLoop。
+ *
+ * 没有拖拽：每根箭头上有个 +，点了选「输入 / 输出 / 处理 / 判断 / 循环」，新的一步就接在
+ * 那根箭头上；判断自动分出是 / 否两路再合回来，排版全自动。点一个框直接改字，旁边有「删除」。
+ * 原来的 vue-flow 编辑器要从节点库拖框、对准连接点拉线、自己摆位置，学生大半时间花在
+ * 理线上，还能画出断线和孤立的框。
+ *
+ * 画布本身只剩平移和缩放：按住空白处拖动、滚轮上下移、Ctrl + 滚轮缩放、左下角三个按钮。
+ */
 
 interface Props {
   height?: string
 }
-
 const { height = "calc(100vh - 134px)" } = defineProps<Props>()
 
-// Vue Flow 实例
-const { addEdges, removeNodes, removeEdges, fitView, onNodesInitialized } = useVueFlow()
+const message = useMessage()
+const theme = useThemeVars()
+const isDark = useDark()
 
-/**
- * 进页面读回草稿、载回旧版之后缩放到正好装下整张图。原来画布停在默认的位置和缩放上，
- * 图大一点就有一半在外面，学生以为草稿丢了。只在这两种时候缩：拖进一个新节点时也会
- * 触发 nodes-initialized，那时候跟着缩放会让画布跳一下。
- * 画布是空的就不挂：空画布不会触发 nodes-initialized，挂着的这一下会一直留到学生拖进
- * 第一个节点，正好把画布拉近、对准那一个节点 —— 就是上面要躲开的那一跳
- */
-let fitPending = false
-function fitSoon() {
-  fitPending = nodes.value.length > 0
+// ==================== 数据与历史 ====================
+
+const doc = ref<FlowDoc>(emptyDoc())
+
+/** 每一步改动之后的样子，撤销就是往回退一格。打字不进历史，改完（失焦 / 回车）才进 */
+const history = ref<string[]>([])
+const cursor = ref(-1)
+const HISTORY_LIMIT = 50
+const canUndo = computed(() => cursor.value > 0)
+const canRedo = computed(() => cursor.value < history.value.length - 1)
+
+function snapshot() {
+  const state = JSON.stringify(doc.value)
+  if (history.value[cursor.value] === state) return
+  history.value = [...history.value.slice(0, cursor.value + 1), state].slice(-HISTORY_LIMIT)
+  cursor.value = history.value.length - 1
 }
-onNodesInitialized(() => {
-  if (!fitPending) return
-  fitPending = false
-  fitView({ padding: 0.15, maxZoom: 1.2 })
-})
 
-// 节点和边的响应式数据
-// 显式标注成 Ref<Node[]>，不走 ref<T>() 的 UnwrapRef 推导 —— vue-flow 的
-// Node/Edge 嵌套很深，让 TS 去调和两种形态会直接撞上「实例化层级过深」
-const nodes = ref([]) as Ref<Node[]>
-const edges = ref([]) as Ref<Edge[]>
+function resetHistory() {
+  history.value = [JSON.stringify(doc.value)]
+  cursor.value = 0
+}
 
-// 历史记录管理
-const { canUndo, canRedo, resetHistory, saveState, undo, redo } = useHistory()
+function restore(index: number) {
+  const state = history.value[index]
+  if (state === undefined) return
+  cursor.value = index
+  doc.value = JSON.parse(state) as FlowDoc
+  deselect()
+}
+
+function undo() {
+  commitText()
+  if (canUndo.value) restore(cursor.value - 1)
+}
+
+function redo() {
+  commitText()
+  if (canRedo.value) restore(cursor.value + 1)
+}
+
+// ==================== 草稿 ====================
 
 const problemStore = useProblemStore()
-const { problem } = storeToRefs(problemStore)
 const route = useRoute()
 /**
- * 缓存管理：用 computed key 支持题目 ID 异步加载后自动切换到正确的 storage。
- * 题单入口单独一份草稿：加入题单之前在题库里画到 A 的那张，不能一进题单就摆在画布上
- * （设计文档第 11 节 3，和代码草稿同理）
+ * 每道题一份草稿；题单入口单独一份：加入题单之前在题库里画到 A 的那张，不能一进题单就
+ * 摆在画布上（设计文档第 11 节 3，和代码草稿同理）。
+ * 键名带 v2：2026-10 之前的草稿是 vue-flow 的格式，这里读不了，也不去覆盖它
  */
 const cacheKey = computed(() => {
-  if (!problem.value?._id) return "flowchart-editor-data"
-  const base = `flowchart-editor-data-problem-${problem.value._id}`
+  const id = problemStore.problem?._id
+  if (!id) return "flowchart-v2"
+  const base = `flowchart-v2-problem-${id}`
   const problemSetId = route.params.problemSetId
   return problemSetId ? `${base}-problemset-${problemSetId}` : base
 })
-const { isSaving, lastSaved, hasUnsavedChanges, saveToCache, loadFromCache, clearCache } = useCache(
-  nodes,
-  edges,
-  cacheKey,
+
+const savedAt = ref<Date | null>(null)
+
+function loadDraft() {
+  let saved: unknown = null
+  try {
+    saved = storage.get(cacheKey.value)
+  } catch {
+    saved = null
+  }
+  const record = saved as { doc?: unknown; savedAt?: string } | null
+  const parsed = parseDoc(record?.doc)
+  doc.value = parsed ?? emptyDoc()
+  savedAt.value = parsed && record?.savedAt ? new Date(record.savedAt) : null
+  deselect()
+  resetHistory()
+  fitSoon()
+}
+
+const saveDraft = useDebounceFn((key: string) => {
+  // 换题之后才到点的这一下是上一道题的，别写进新题的键
+  if (key !== cacheKey.value) return
+  try {
+    if (doc.value.steps.length) {
+      const now = new Date()
+      storage.set(key, { doc: doc.value, savedAt: now.toISOString() })
+      savedAt.value = now
+    } else {
+      storage.remove(key)
+      savedAt.value = null
+    }
+  } catch {
+    // 本地存储满了或者被禁用：画布照常能画，只是刷新会丢
+  }
+}, 400)
+
+let loading = false
+watch(
+  doc,
   () => {
-    // 换题后画布已经被换成新题的草稿，历史必须跟着重建，
-    // 否则一次撤销就会把上一题的图还原到这一题里
-    resetHistory(nodes.value, edges.value)
-    fitSoon()
+    if (loading) return
+    saveDraft(cacheKey.value)
   },
+  { deep: true },
 )
 
-// 拖拽处理
-const { onDragOver, onDragLeave, onDrop, isDragOver, screenDragPos } = useDnD()
+watch(cacheKey, () => {
+  loading = true
+  loadDraft()
+  nextTick(() => (loading = false))
+})
 
-const dragPreviewStyle = computed(() => {
-  if (!screenDragPos.value || !currentDragNodeType.value) return null
-  const config = getNodeTypeConfig(currentDragNodeType.value)
-  const type = currentDragNodeType.value
-  return {
-    left: `${screenDragPos.value.x}px`,
-    top: `${screenDragPos.value.y}px`,
-    background: config.color,
-    borderRadius: type === "start" || type === "end" ? "20px" : "8px",
+// ==================== 排版与视口 ====================
+
+const viewport = useTemplateRef<HTMLElement>("viewport")
+const { width: viewW, height: viewH } = useElementSize(viewport)
+
+/** 量字宽用的画布。字体跟着编辑器自己的（Naive 的全局字体），量出来和 SVG 里画的一致 */
+let measureCtx: CanvasRenderingContext2D | null = null
+const fontFamily = ref("")
+function measure(text: string) {
+  if (measureCtx) return measureCtx.measureText(text).width
+  let w = 0
+  for (const ch of text) w += ch.charCodeAt(0) > 0x2e80 ? 14 : 7.8
+  return w
+}
+
+const layout = computed(() => {
+  // 字体就位之后重排一次
+  void fontFamily.value
+  return layoutDoc(doc.value, measure)
+})
+
+const zoom = ref(1)
+const pan = ref({ x: 0, y: 0 })
+const MIN_ZOOM = 0.4
+const MAX_ZOOM = 1.6
+
+function clampZoom(value: number) {
+  return Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, Math.round(value * 100) / 100))
+}
+
+/**
+ * 缩放到正好装下整张图（最多 100%），横向居中、靠上。
+ * 进页面、载回旧版时（auto）高度方向最多缩到 85%：机房 1366×768 的屏上画布只有五百来像素高，
+ * 十几个框的图（蜜橘分拣是 p90）整张塞进去字只剩 10px，宁可往下滚。左下角的按钮是真的整张装下
+ */
+function fit(auto = false) {
+  const vw = viewW.value
+  const vh = viewH.value
+  if (!vw || !vh) return
+  const { width, height: h } = layout.value
+  const byHeight = (vh - 16) / h
+  zoom.value = clampZoom(Math.min(1, (vw - 24) / width, auto ? Math.max(byHeight, 0.85) : byHeight))
+  pan.value = { x: (vw - width * zoom.value) / 2, y: 8 }
+}
+
+/** 进页面、换题、载回旧版：等视口量出尺寸再缩放 */
+let fitPending = false
+function fitSoon() {
+  fitPending = true
+  nextTick(() => {
+    if (fitPending && viewW.value && viewH.value) {
+      fitPending = false
+      fit(true)
+    }
+  })
+}
+watch([viewW, viewH], () => {
+  if (fitPending && viewW.value && viewH.value) {
+    fitPending = false
+    fit(true)
   }
 })
 
-// 流程操作
-const {
-  handleConnect,
-  handleEdgeClick,
-  handleNodeDelete,
-  handleNodeUpdate,
-  clearCanvas,
-  deleteSelected,
-} = useFlowOperations(nodes, edges, addEdges, removeNodes, removeEdges, saveState)
+/**
+ * 加了一步之后整张图会重排：左边长出一个分支，中线就往右挪。画布不跟着挪的话，
+ * 学生刚点的那个位置会在眼前跳走。这里把中线（开始那个框）钉在屏幕上原来的位置
+ */
+const startX = computed(() => {
+  const start = layout.value.nodes.find((n) => n.kind === "start")
+  return start ? start.x + start.w / 2 : 0
+})
+watch(startX, (next, prev) => {
+  if (fitPending || prev === undefined) return
+  pan.value = { ...pan.value, x: pan.value.x - (next - prev) * zoom.value }
+})
 
-const handleDrop = async (event: DragEvent) => {
-  const newNode = onDrop(event)
-  if (newNode) {
-    await nextTick()
-    saveState(nodes.value, edges.value)
-  }
+function zoomAt(next: number, sx: number, sy: number) {
+  const z = clampZoom(next)
+  const k = z / zoom.value
+  pan.value = { x: sx - (sx - pan.value.x) * k, y: sy - (sy - pan.value.y) * k }
+  zoom.value = z
 }
 
-// 撤销/重做处理
-const handleUndo = () => {
-  const state = undo()
-  if (state) {
-    nodes.value = state.nodes
-    edges.value = state.edges
-    saveToCache()
-  }
+function zoomBy(delta: number) {
+  zoomAt(zoom.value + delta, viewW.value / 2, viewH.value / 2)
 }
 
-const handleRedo = () => {
-  const state = redo()
-  if (state) {
-    nodes.value = state.nodes
-    edges.value = state.edges
-    saveToCache()
-  }
-}
-
-// 清空画布。工具栏那个按钮点一下就全没了，且 clearCache() 会连本题存着的草稿
-// 一起删掉，刷新也找不回来 —— 学生误点的代价太大，加一道确认
-const dialog = useDialog()
-const handleClear = () => {
-  if (nodes.value.length === 0 && edges.value.length === 0) return
-  dialog.warning({
-    title: "清空画布",
-    content: "画布上的内容会被清掉，这道题存着的草稿也会一起删除。确定吗？",
-    positiveText: "清空",
-    negativeText: "再想想",
-    onPositiveClick: () => {
-      clearCanvas()
-      clearCache()
-    },
-  })
-}
-
-// 键盘事件
-const handleKeyDown = (event: KeyboardEvent) => {
-  if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement)
-    return
-
-  if (event.key === "Delete" || event.key === "Backspace") {
-    deleteSelected()
-  }
-
+function onWheel(event: WheelEvent) {
   if (event.ctrlKey || event.metaKey) {
-    const key = event.key.toLowerCase()
-    if (key === "z" && !event.shiftKey) {
-      event.preventDefault()
-      handleUndo()
-    } else if ((key === "z" && event.shiftKey) || key === "y") {
-      // 工具栏上的提示写的就是 Ctrl+Y，但原来只实现了 Ctrl+Shift+Z，按 Y 没反应
-      event.preventDefault()
-      handleRedo()
+    const rect = viewport.value!.getBoundingClientRect()
+    zoomAt(
+      zoom.value * (event.deltaY < 0 ? 1.1 : 1 / 1.1),
+      event.clientX - rect.left,
+      event.clientY - rect.top,
+    )
+    return
+  }
+  const dx = event.shiftKey ? event.deltaY : event.deltaX
+  const dy = event.shiftKey ? 0 : event.deltaY
+  pan.value = { x: pan.value.x - dx, y: pan.value.y - dy }
+  menuSlot.value = null
+}
+
+/** 按住空白处拖动画布；没怎么动就算点了一下空白：取消选中、收起菜单 */
+let drag: { x: number; y: number; px: number; py: number; moved: boolean; id: number } | null = null
+const dragging = ref(false)
+function onPointerDown(event: PointerEvent) {
+  if (event.button !== 0) return
+  drag = {
+    x: event.clientX,
+    y: event.clientY,
+    px: pan.value.x,
+    py: pan.value.y,
+    moved: false,
+    id: event.pointerId,
+  }
+  viewport.value?.setPointerCapture(event.pointerId)
+}
+function onPointerMove(event: PointerEvent) {
+  if (!drag || drag.id !== event.pointerId) return
+  const dx = event.clientX - drag.x
+  const dy = event.clientY - drag.y
+  if (!drag.moved && Math.hypot(dx, dy) < 4) return
+  drag.moved = true
+  dragging.value = true
+  pan.value = { x: drag.px + dx, y: drag.py + dy }
+}
+function onPointerUp(event: PointerEvent) {
+  if (!drag || drag.id !== event.pointerId) return
+  const moved = drag.moved
+  drag = null
+  dragging.value = false
+  if (!moved) {
+    menuSlot.value = null
+    deselect()
+  }
+}
+
+/** 某个框在不在视口里，不在就挪到看得见 */
+function reveal(id: string) {
+  const node = layout.value.nodes.find((n) => n.id === id)
+  if (!node) return
+  const margin = 40
+  const z = zoom.value
+  const left = pan.value.x + node.x * z
+  const right = pan.value.x + (node.x + node.w) * z
+  const top = pan.value.y + node.y * z
+  const bottom = pan.value.y + (node.y + node.h) * z
+  let { x, y } = pan.value
+  if (bottom > viewH.value - margin) y -= bottom - (viewH.value - margin)
+  if (top < margin) y += margin - top
+  if (right > viewW.value - margin) x -= right - (viewW.value - margin)
+  if (left < margin) x += margin - left
+  pan.value = { x, y }
+}
+
+// ==================== 插一步 ====================
+
+const menuSlot = ref<LaidSlot | null>(null)
+const MENU: { kind: StepKind }[] = [
+  { kind: "input" },
+  { kind: "output" },
+  { kind: "process" },
+  { kind: "if" },
+  { kind: "while" },
+]
+const MENU_W = 300
+const MENU_H = 62
+
+const menuStyle = computed(() => {
+  const slot = menuSlot.value
+  if (!slot) return {}
+  const sx = pan.value.x + slot.x * zoom.value
+  const sy = pan.value.y + slot.y * zoom.value
+  let left = sx - MENU_W / 2
+  let top = sy + 16
+  left = Math.max(8, Math.min(left, viewW.value - MENU_W - 8))
+  if (top + MENU_H > viewH.value - 8) top = sy - 16 - MENU_H
+  return { left: `${left}px`, top: `${top}px`, width: `${MENU_W}px` }
+})
+
+function openMenu(slot: LaidSlot) {
+  commitText()
+  deselect()
+  menuSlot.value = menuSlot.value?.key === slot.key ? null : slot
+}
+
+function insert(kind: StepKind) {
+  const slot = menuSlot.value?.slot
+  menuSlot.value = null
+  if (!slot) return
+  const step = insertStep(doc.value, slot, kind)
+  if (!step) return
+  snapshot()
+  select(step.id)
+  justInserted = step.id
+  nextTick(() => reveal(step.id))
+}
+
+// ==================== 选中、改字、删除 ====================
+
+const selectedId = ref<string | null>(null)
+const selected = computed(() =>
+  selectedId.value ? (layout.value.nodes.find((n) => n.id === selectedId.value) ?? null) : null,
+)
+const textInput = useTemplateRef<HTMLInputElement>("textInput")
+/** 开始改字前的字，按 Esc 还原 */
+let textBefore = ""
+/** 刚从菜单里加上的那一步 */
+let justInserted: string | null = null
+
+function editable(node: LaidNode) {
+  return node.kind !== "start" && node.kind !== "end"
+}
+
+function select(id: string) {
+  commitText()
+  menuSlot.value = null
+  const found = findStep(doc.value.steps, id)
+  if (!found) return
+  selectedId.value = id
+  textBefore = found.step.text
+  nextTick(() => textInput.value?.focus())
+}
+
+function onNodeClick(node: LaidNode) {
+  if (!editable(node)) {
+    menuSlot.value = null
+    deselect()
+    return
+  }
+  if (selectedId.value !== node.id) select(node.id)
+}
+
+const selectedText = computed({
+  get: () =>
+    selectedId.value ? (findStep(doc.value.steps, selectedId.value)?.step.text ?? "") : "",
+  set: (value: string) => {
+    const found = selectedId.value ? findStep(doc.value.steps, selectedId.value) : null
+    if (found) found.step.text = value
+  },
+})
+
+/** 字改完了：进历史 */
+function commitText() {
+  if (!selectedId.value) return
+  const found = findStep(doc.value.steps, selectedId.value)
+  if (found && found.step.text !== textBefore) {
+    found.step.text = found.step.text.replace(/\s+/g, " ").trim()
+    textBefore = found.step.text
+    snapshot()
+  }
+}
+
+function deselect() {
+  commitText()
+  selectedId.value = null
+}
+
+function onTextKey(event: KeyboardEvent) {
+  if (event.key === "Enter") {
+    event.preventDefault()
+    deselect()
+  } else if (event.key === "Escape") {
+    // 刚加上、一个字没写就按 Esc：当它没加过（连历史那一格一起撤掉）
+    if (selectedId.value === justInserted && !selectedText.value.trim()) {
+      selectedId.value = null
+      restore(cursor.value - 1)
+      history.value = history.value.slice(0, cursor.value + 1)
+      return
     }
+    selectedText.value = textBefore
+    selectedId.value = null
+  }
+}
+
+function removeSelected() {
+  const id = selectedId.value
+  if (!id) return
+  commitText()
+  selectedId.value = null
+  const count = removeStep(doc.value, id)
+  if (!count) return
+  snapshot()
+  if (count > 1) message.info(`删掉了 ${count} 个框，按 Ctrl+Z 可以撤回`)
+}
+
+/** 判断 / 循环里的字框要比外框窄，免得打字时字跑出菱形 */
+function inputBox(node: LaidNode) {
+  const inset =
+    node.kind === "if" || node.kind === "while" ? node.w * 0.22 : node.kind === "process" ? 8 : 16
+  return {
+    left: `${node.x + inset}px`,
+    top: `${node.y}px`,
+    width: `${node.w - inset * 2}px`,
+    height: `${node.h}px`,
+  }
+}
+
+function clear() {
+  if (!doc.value.steps.length) return
+  doc.value = emptyDoc()
+  deselect()
+  snapshot()
+}
+
+// ==================== 键盘 ====================
+
+function onKeyDown(event: KeyboardEvent) {
+  const target = event.target as HTMLElement | null
+  if (
+    target instanceof HTMLInputElement ||
+    target instanceof HTMLTextAreaElement ||
+    target?.isContentEditable
+  )
+    return
+  if (event.key === "Escape" && menuSlot.value) {
+    menuSlot.value = null
+    return
+  }
+  if (!(event.ctrlKey || event.metaKey)) return
+  const key = event.key.toLowerCase()
+  if (key === "z" && !event.shiftKey) {
+    event.preventDefault()
+    undo()
+  } else if ((key === "z" && event.shiftKey) || key === "y") {
+    event.preventDefault()
+    redo()
   }
 }
 
 onMounted(() => {
-  document.addEventListener("keydown", handleKeyDown)
-
-  // 从缓存恢复数据，并把当前画布作为历史起点，
-  // 否则第一步操作没有可回退的目标，撤销按钮一直是灰的
-  loadFromCache()
-  resetHistory(nodes.value, edges.value)
-  fitSoon()
+  const family = getComputedStyle(viewport.value!).fontFamily
+  measureCtx = document.createElement("canvas").getContext("2d")
+  if (measureCtx) measureCtx.font = `14px ${family}`
+  fontFamily.value = family
+  loading = true
+  loadDraft()
+  nextTick(() => (loading = false))
+  document.addEventListener("keydown", onKeyDown)
 })
+onUnmounted(() => document.removeEventListener("keydown", onKeyDown))
 
-onUnmounted(() => {
-  document.removeEventListener("keydown", handleKeyDown)
-})
+// ==================== 颜色 ====================
 
-// 加载外部数据到编辑器
-const setFlowchartData = (data: { nodes: Node[]; edges: Edge[] }) => {
-  if (data && data.nodes && data.edges) {
-    // 确保节点数据包含必要的位置信息
-    const processedNodes = data.nodes.map((node) => ({
-      ...node,
-      position: node.position || { x: 0, y: 0 },
-    }))
+type Paint = { fill: string; stroke: string; text: string }
+const paints = computed<Record<string, Paint>>(() =>
+  isDark.value
+    ? {
+        terminal: { fill: "rgba(24,160,88,0.16)", stroke: "#3fbf7f", text: "#8fe0b4" },
+        io: { fill: "rgba(70,130,220,0.18)", stroke: "#5b8fdc", text: "#a9c6f2" },
+        process: { fill: "#26272b", stroke: "#8a8f98", text: "#e6e7ea" },
+        decision: { fill: "rgba(208,138,28,0.18)", stroke: "#e0a040", text: "#f2cd8c" },
+      }
+    : {
+        terminal: { fill: "#eef8f2", stroke: "#18a058", text: "#0c6b3b" },
+        io: { fill: "#eef4fd", stroke: "#2f6bc4", text: "#1d4f9c" },
+        process: { fill: "#ffffff", stroke: "#7d828a", text: "#1f2225" },
+        decision: { fill: "#fdf5e6", stroke: "#d08a1c", text: "#8a5200" },
+      },
+)
+function paint(kind: LaidNode["kind"]) {
+  if (kind === "start" || kind === "end") return paints.value.terminal!
+  if (kind === "input" || kind === "output") return paints.value.io!
+  if (kind === "if" || kind === "while") return paints.value.decision!
+  return paints.value.process!
+}
+const lineColor = computed(() => (isDark.value ? "#8a8f98" : "#7d828a"))
+const dotColor = computed(() => (isDark.value ? "#34363b" : "#e3e5e8"))
 
-    // 确保边数据包含必要的 handle 信息
-    const processedEdges = data.edges.map((edge) => ({
-      ...edge,
-      sourceHandle: edge.sourceHandle || null,
-      targetHandle: edge.targetHandle || null,
-    }))
-
-    nodes.value = processedNodes
-    edges.value = processedEdges
-    saveState(nodes.value, edges.value)
-    fitSoon()
-  }
+function shapePoints(node: LaidNode) {
+  const { x, y, w, h } = node
+  if (node.kind === "if" || node.kind === "while")
+    return `${x + w / 2},${y} ${x + w},${y + h / 2} ${x + w / 2},${y + h} ${x},${y + h / 2}`
+  const s = 10
+  return `${x + s},${y} ${x + w},${y} ${x + w - s},${y + h} ${x},${y + h}`
 }
 
-// 暴露节点和边数据给父组件
-defineExpose({
-  nodes,
-  edges,
-  // 提交出去的这份会压缩后长期存进数据库，同样裁掉运行时内部字段
-  getFlowchartData: () => ({
-    nodes: toPortableNodes(nodes.value),
-    edges: toPortableEdges(edges.value),
-  }),
-  setFlowchartData,
-})
+function nodeLabel(node: LaidNode) {
+  if (node.kind === "start" || node.kind === "end") return node.text
+  return node.text.trim() || PLACEHOLDER[node.kind]
+}
+
+/** 菜单里的小图标：和画布上同一套形状 */
+function miniPoints(kind: StepKind) {
+  if (kind === "input" || kind === "output") return "6,2 25,2 20,14 1,14"
+  if (kind === "if") return "13,1 25,8 13,15 1,8"
+  return "15,1 25,6 15,11 5,6"
+}
+
+// ==================== 对外 ====================
+
+/**
+ * 交出去 / 和某一版比：一份拷贝，外面改不到画布。不顺手 commitText —— 结果页签在 computed
+ * 里读它，读一下就往历史里塞一格是副作用；正在打的字本来就已经写进 doc 了
+ */
+function getDoc(): FlowDoc {
+  return cloneDoc(doc.value)
+}
+
+/** 载回某一版。进历史：载错了 Ctrl+Z 能回来 */
+function setDoc(next: FlowDoc) {
+  doc.value = cloneDoc(next)
+  deselect()
+  snapshot()
+  fitSoon()
+}
+
+defineExpose({ getDoc, setDoc, undo, redo, clear, canUndo, canRedo, savedAt })
 </script>
 
 <template>
-  <div class="container" :style="{ height }">
-    <!-- 拖拽时跟随鼠标的节点预览 -->
-    <Transition name="drag-preview">
-      <div
-        v-if="isDragOver && dragPreviewStyle && currentDragNodeType"
-        class="drag-node-preview"
-        :style="dragPreviewStyle"
-      >
-        <span class="preview-icon">{{ getNodeTypeConfig(currentDragNodeType).icon }}</span>
-        <span>{{ getNodeTypeConfig(currentDragNodeType).label }}</span>
-      </div>
-    </Transition>
-    <VueFlow
-      v-model:nodes="nodes"
-      v-model:edges="edges"
-      @dragover="onDragOver"
-      @dragleave="onDragLeave"
-      @drop="handleDrop"
-      @connect="handleConnect"
-      @edge-click="handleEdgeClick"
-      :default-edge-options="{
-        type: 'default',
-        style: {
-          stroke: '#6366f1',
-          strokeWidth: 2.5,
-          cursor: 'pointer',
-          filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))',
-        },
-        markerEnd: {
-          type: MarkerType.ArrowClosed,
-          color: '#6366f1',
-          width: 16,
-          height: 16,
-        },
+  <div
+    ref="viewport"
+    class="flow-editor"
+    :class="{ panning: dragging }"
+    :style="{ height }"
+    @pointerdown="onPointerDown"
+    @pointermove="onPointerMove"
+    @pointerup="onPointerUp"
+    @pointercancel="onPointerUp"
+    @wheel.prevent="onWheel"
+  >
+    <div
+      class="stage"
+      :style="{
+        width: `${layout.width}px`,
+        height: `${layout.height}px`,
+        transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
       }"
-      :connection-line-style="{
-        stroke: '#6366f1',
-        strokeWidth: 2.5,
-        strokeDasharray: '8,4',
-        markerEnd: 'url(#connection-arrow)',
-        filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))',
-      }"
-      :fit-view-on-init="false"
-      :connect-on-click="false"
-      :multi-selection-key-code="null"
-      :delete-key-code="null"
     >
-      <!-- SVG 定义用于连接线箭头 -->
-      <defs>
-        <marker
-          id="connection-arrow"
-          markerWidth="12"
-          markerHeight="12"
-          refX="10"
-          refY="3"
-          orient="auto"
-          markerUnits="strokeWidth"
-        >
-          <path d="M0,0 L0,6 L10,3 z" fill="#6366f1" stroke="#6366f1" strokeWidth="0.5" />
-        </marker>
-      </defs>
-      <template #node-custom="{ data, id, type }">
-        <CustomNode
-          :id="id"
-          :type="type"
-          :data="data"
-          @delete="handleNodeDelete"
-          @update="handleNodeUpdate"
+      <svg
+        :width="layout.width"
+        :height="layout.height"
+        :viewBox="`0 0 ${layout.width} ${layout.height}`"
+        role="img"
+        aria-label="流程图"
+        class="chart"
+      >
+        <defs>
+          <marker
+            id="flow-arrow"
+            viewBox="0 0 10 10"
+            refX="9"
+            refY="5"
+            markerWidth="5.5"
+            markerHeight="5.5"
+            orient="auto-start-reverse"
+          >
+            <path d="M0 0L10 5L0 10z" :fill="lineColor" />
+          </marker>
+        </defs>
+        <path
+          v-for="(d, i) in layout.lines"
+          :key="`l${i}`"
+          :d="d"
+          fill="none"
+          :stroke="lineColor"
+          stroke-width="1.6"
         />
-      </template>
+        <path
+          v-for="(d, i) in layout.arrows"
+          :key="`a${i}`"
+          :d="d"
+          fill="none"
+          :stroke="lineColor"
+          stroke-width="1.6"
+          marker-end="url(#flow-arrow)"
+        />
+        <circle
+          v-for="(p, i) in layout.dots"
+          :key="`d${i}`"
+          :cx="p.x"
+          :cy="p.y"
+          r="2.6"
+          :fill="lineColor"
+        />
+        <text
+          v-for="(t, i) in layout.labels"
+          :key="`t${i}`"
+          :x="t.x"
+          :y="t.y"
+          :text-anchor="t.anchor"
+          class="branch-label"
+        >
+          {{ t.text }}
+        </text>
+        <g
+          v-for="node in layout.nodes"
+          :key="node.id"
+          class="node"
+          :class="{ editable: editable(node), selected: node.id === selectedId }"
+          @pointerdown.stop
+          @click.stop="onNodeClick(node)"
+        >
+          <rect
+            v-if="node.kind === 'start' || node.kind === 'end'"
+            :x="node.x"
+            :y="node.y"
+            :width="node.w"
+            :height="node.h"
+            :rx="node.h / 2"
+            :fill="paint(node.kind).fill"
+            :stroke="paint(node.kind).stroke"
+            stroke-width="1.6"
+          />
+          <rect
+            v-else-if="node.kind === 'process'"
+            :x="node.x"
+            :y="node.y"
+            :width="node.w"
+            :height="node.h"
+            rx="2"
+            :fill="paint(node.kind).fill"
+            :stroke="paint(node.kind).stroke"
+            stroke-width="1.6"
+          />
+          <polygon
+            v-else
+            :points="shapePoints(node)"
+            :fill="paint(node.kind).fill"
+            :stroke="paint(node.kind).stroke"
+            stroke-width="1.6"
+          />
+          <text
+            v-if="node.id !== selectedId"
+            :x="node.x + node.w / 2"
+            :y="node.y + node.h / 2 + 5"
+            text-anchor="middle"
+            :fill="paint(node.kind).text"
+            :class="{ placeholder: editable(node) && !node.text.trim() }"
+          >
+            {{ nodeLabel(node) }}
+          </text>
+        </g>
+      </svg>
 
-      <Background variant="lines" :gap="20" :size="1" />
-      <Controls />
-      <Toolbar
-        :can-undo="canUndo"
-        :can-redo="canRedo"
-        :is-saving="isSaving"
-        :last-saved="lastSaved"
-        :has-unsaved-changes="hasUnsavedChanges"
-        @clear="handleClear"
-        @undo="handleUndo"
-        @redo="handleRedo"
-        @deleteNode="handleNodeDelete"
-      />
-    </VueFlow>
+      <button
+        v-for="slot in layout.slots"
+        :key="slot.key"
+        type="button"
+        class="slot"
+        :class="{ active: menuSlot?.key === slot.key, lone: !doc.steps.length }"
+        :style="{ left: `${slot.x}px`, top: `${slot.y}px` }"
+        aria-label="在这里加一步"
+        @pointerdown.stop
+        @click.stop="openMenu(slot)"
+      >
+        <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
+          <path d="M1 5H9M5 1V9" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
+        </svg>
+      </button>
+
+      <template v-if="selected">
+        <input
+          ref="textInput"
+          v-model="selectedText"
+          class="text-input"
+          :style="inputBox(selected)"
+          :placeholder="PLACEHOLDER[selected.kind as StepKind]"
+          :aria-label="`${STEP_LABEL[selected.kind as StepKind]}框里的字`"
+          maxlength="60"
+          @pointerdown.stop
+          @keydown="onTextKey"
+          @blur="commitText"
+        />
+        <div
+          class="node-bar"
+          :style="{
+            left: `${selected.x + selected.w - 24}px`,
+            top: `${selected.y - 4}px`,
+          }"
+          @pointerdown.stop
+        >
+          <button type="button" class="remove" @mousedown.prevent @click="removeSelected">
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M4 7h16M9 7V4h6v3M6.5 7l1 13h9l1-13" />
+            </svg>
+            删除
+          </button>
+        </div>
+      </template>
+    </div>
+
+    <div
+      v-if="menuSlot"
+      class="insert-menu"
+      :style="menuStyle"
+      role="menu"
+      aria-label="加一步"
+      @pointerdown.stop
+    >
+      <button
+        v-for="item in MENU"
+        :key="item.kind"
+        type="button"
+        role="menuitem"
+        class="insert-item"
+        @click="insert(item.kind)"
+      >
+        <svg width="26" height="16" viewBox="0 0 26 16" aria-hidden="true">
+          <rect
+            v-if="item.kind === 'process'"
+            x="2"
+            y="2"
+            width="22"
+            height="12"
+            rx="1"
+            :fill="paint('process').fill"
+            :stroke="paint('process').stroke"
+            stroke-width="1.4"
+          />
+          <polygon
+            v-else
+            :points="miniPoints(item.kind)"
+            :fill="paint(item.kind).fill"
+            :stroke="paint(item.kind).stroke"
+            stroke-width="1.4"
+          />
+          <path
+            v-if="item.kind === 'while'"
+            d="M15 11v3H2V6h3"
+            fill="none"
+            :stroke="lineColor"
+            stroke-width="1.2"
+          />
+        </svg>
+        <span>{{ STEP_LABEL[item.kind] }}</span>
+      </button>
+    </div>
+
+    <div class="zoom" @pointerdown.stop>
+      <button type="button" aria-label="放大" @click="zoomBy(0.1)">+</button>
+      <button type="button" aria-label="缩小" @click="zoomBy(-0.1)">−</button>
+      <button type="button" aria-label="缩放到合适" @click="fit()">
+        <svg
+          width="13"
+          height="13"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" />
+        </svg>
+      </button>
+    </div>
   </div>
 </template>
 
 <style scoped>
-.container {
-  width: 100%;
-  height: 100%;
+.flow-editor {
   position: relative;
-}
-
-.drag-node-preview {
-  position: fixed;
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-  z-index: 9999;
-  padding: 8px 18px;
-  color: white;
-  font-size: 14px;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  opacity: 0.55;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-  white-space: nowrap;
-  border: 2px dashed rgba(255, 255, 255, 0.6);
+  width: 100%;
+  overflow: hidden;
+  background-color: v-bind("theme.cardColor");
+  background-image: radial-gradient(v-bind("dotColor") 1px, transparent 1px);
+  background-size: 16px 16px;
+  cursor: grab;
+  touch-action: none;
   user-select: none;
 }
 
-.preview-icon {
-  font-size: 16px;
+.flow-editor.panning {
+  cursor: grabbing;
 }
 
-.drag-preview-enter-active,
-.drag-preview-leave-active {
-  transition: opacity 0.1s ease;
+.stage {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform-origin: 0 0;
 }
-.drag-preview-enter-from,
-.drag-preview-leave-to {
-  opacity: 0;
+
+.chart {
+  display: block;
+  font-family: inherit;
+  font-size: 14px;
+  overflow: visible;
+}
+
+.branch-label {
+  font-size: 13px;
+  fill: v-bind("theme.textColor2");
+}
+
+.node.editable {
+  cursor: pointer;
+}
+
+.node:not(.editable) {
+  cursor: default;
+}
+
+.node.editable:hover > rect,
+.node.editable:hover > polygon {
+  stroke-width: 2.4;
+}
+
+.node.selected > rect,
+.node.selected > polygon {
+  stroke: #18a058;
+  stroke-width: 2.6;
+}
+
+.placeholder {
+  opacity: 0.5;
+}
+
+.slot {
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  margin: -9px 0 0 -9px;
+  padding: 0;
+  border: 1.2px solid v-bind("theme.borderColor");
+  border-radius: 50%;
+  background: v-bind("theme.cardColor");
+  color: v-bind("theme.textColor3");
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.slot:hover,
+.slot:focus-visible,
+.slot.lone {
+  border-color: #18a058;
+  color: #18a058;
+}
+
+.slot.lone {
+  width: 24px;
+  height: 24px;
+  margin: -12px 0 0 -12px;
+}
+
+.slot.active {
+  border-color: #18a058;
+  background: #18a058;
+  color: #fff;
+}
+
+.text-input {
+  position: absolute;
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  font: inherit;
+  font-size: 14px;
+  text-align: center;
+  color: v-bind("theme.textColor1");
+  user-select: text;
+}
+
+.text-input::placeholder {
+  color: v-bind("theme.textColor3");
+}
+
+/* 浮在框的右上方：放右边会盖住判断的「否」，放正上方会盖住进来的那个 + */
+.node-bar {
+  position: absolute;
+  transform: translateY(-100%);
+  display: flex;
+  padding: 3px;
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: 6px;
+  background: v-bind("theme.cardColor");
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.remove {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 28px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  font: inherit;
+  font-size: 13px;
+  white-space: nowrap;
+  color: v-bind("theme.errorColor");
+  cursor: pointer;
+}
+
+.remove:hover {
+  background: rgba(208, 48, 80, 0.08);
+}
+
+.insert-menu {
+  position: absolute;
+  box-sizing: border-box;
+  display: flex;
+  gap: 2px;
+  padding: 4px;
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: 6px;
+  background: v-bind("theme.cardColor");
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+  cursor: default;
+}
+
+.insert-item {
+  flex: 1;
+  height: 52px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  font: inherit;
+  font-size: 13px;
+  color: v-bind("theme.textColor1");
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  cursor: pointer;
+}
+
+.insert-item:hover,
+.insert-item:focus-visible {
+  background: rgba(24, 160, 88, 0.1);
+}
+
+.zoom {
+  position: absolute;
+  left: 12px;
+  bottom: 12px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: 4px;
+  background: v-bind("theme.cardColor");
+  overflow: hidden;
+  cursor: default;
+}
+
+.zoom button {
+  width: 30px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  font-size: 16px;
+  color: v-bind("theme.textColor2");
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.zoom button + button {
+  border-top: 1px solid v-bind("theme.dividerColor");
+}
+
+.zoom button:hover {
+  color: #18a058;
 }
 </style>
diff --git a/apps/web/src/shared/components/FlowchartEditor/layout.ts b/apps/web/src/shared/components/FlowchartEditor/layout.ts
new file mode 100644
index 0000000..874cf49
--- /dev/null
+++ b/apps/web/src/shared/components/FlowchartEditor/layout.ts
@@ -0,0 +1,294 @@
+import type { Branch, FlowDoc, FlowStep, Slot, StepKind } from "./model"
+
+/**
+ * 结构树 → 坐标。纯函数，每次改动整张重排（13 个框的图不到一毫秒）。
+ *
+ * 排法照教科书上的流程图：主线竖着往下；判断的「是」往左、「否」往右，从菱形的两个角
+ * 横着出去再往下，两路走完合回中线；循环的条件成立往下走循环体，走完从左边绕回菱形，
+ * 不成立从右边出去绕到下面。每一段竖线上留一个 +（插一步的地方）。
+ *
+ * 画布稿（画布「画流程图重设计」页 FlowEdB）是用同一套排法的 Python 版画的，两边的
+ * 常量对得上。
+ */
+
+export type NodeKind = StepKind | "start" | "end"
+
+export interface LaidNode {
+  id: string
+  kind: NodeKind
+  text: string
+  /** 左上角 */
+  x: number
+  y: number
+  w: number
+  h: number
+}
+
+export interface LaidSlot {
+  key: string
+  slot: Slot
+  x: number
+  y: number
+}
+
+export interface LaidLabel {
+  x: number
+  y: number
+  text: string
+  anchor: "start" | "end"
+}
+
+export interface Layout {
+  nodes: LaidNode[]
+  /** 带箭头的线、不带箭头的线（合流那几段） */
+  arrows: string[]
+  lines: string[]
+  dots: { x: number; y: number }[]
+  labels: LaidLabel[]
+  slots: LaidSlot[]
+  width: number
+  height: number
+}
+
+const H = 32
+const DH = 40
+/** 两步之间的竖线长度，中间放 + */
+const G = 30
+/** 判断左右两支之间至少空这么多 */
+const HG = 32
+const PAD = 28
+
+export const PLACEHOLDER: Record<StepKind, string> = {
+  input: "输入什么",
+  output: "输出什么",
+  process: "做什么",
+  if: "条件",
+  while: "条件",
+}
+
+type Measure = (text: string) => number
+
+type Item = FlowStep | { kind: "start" | "end"; id: string; text: string }
+
+interface Extent {
+  L: number
+  R: number
+  h: number
+}
+
+export function layoutDoc(doc: FlowDoc, measure: Measure): Layout {
+  const shown = (step: Item) =>
+    step.text.trim() || (step.kind in PLACEHOLDER ? PLACEHOLDER[step.kind as StepKind] : "")
+
+  const nodeW = (step: Item) => {
+    const t = measure(shown(step))
+    if (step.kind === "if" || step.kind === "while") return Math.max(t + 64, 104)
+    if (step.kind === "input" || step.kind === "output") return Math.max(t + 44, 100)
+    if (step.kind === "start" || step.kind === "end") return Math.max(t + 40, 80)
+    return Math.max(t + 32, 92)
+  }
+
+  const extentCache = new Map<Item, Extent>()
+
+  const measureBlock = (items: Item[]): Extent => {
+    let L = 0
+    let R = 0
+    let h = 0
+    items.forEach((item, i) => {
+      const e = measureItem(item)
+      L = Math.max(L, e.L)
+      R = Math.max(R, e.R)
+      h += e.h + (i ? G : 0)
+    })
+    return { L, R, h }
+  }
+
+  const ifGeom = (step: Extract<FlowStep, { kind: "if" }>) => {
+    const dw = nodeW(step)
+    const yes = measureBlock(step.yes)
+    const no = measureBlock(step.no)
+    const lx = step.yes.length ? Math.min(-dw / 2 - 16, -HG / 2 - yes.R) : -dw / 2 - 16
+    const rx = step.no.length ? Math.max(dw / 2 + 16, HG / 2 + no.L) : dw / 2 + 16
+    const bh = Math.max(yes.h, no.h, 24)
+    return { dw, yes, no, lx, rx, bh }
+  }
+
+  const measureItem = (item: Item): Extent => {
+    const cached = extentCache.get(item)
+    if (cached) return cached
+    let e: Extent
+    if (item.kind === "if") {
+      const { dw, yes, no, lx, rx, bh } = ifGeom(item)
+      e = {
+        L: Math.max(dw / 2, -lx + yes.L),
+        R: Math.max(dw / 2, rx + no.R),
+        h: DH + 24 + bh + 22,
+      }
+    } else if (item.kind === "while") {
+      const dw = nodeW(item)
+      const body = measureBlock(item.body)
+      e = {
+        L: Math.max(dw / 2, body.L) + 28,
+        R: Math.max(dw / 2, body.R) + 28,
+        h: DH + G + Math.max(body.h, 8) + 20 + 20,
+      }
+    } else {
+      const w = nodeW(item)
+      e = { L: w / 2, R: w / 2, h: H }
+    }
+    extentCache.set(item, e)
+    return e
+  }
+
+  const out: Layout = {
+    nodes: [],
+    arrows: [],
+    lines: [],
+    dots: [],
+    labels: [],
+    slots: [],
+    width: 0,
+    height: 0,
+  }
+  const pathOf = (pts: [number, number][]) =>
+    "M" + pts.map(([x, y]) => `${x.toFixed(1)} ${y.toFixed(1)}`).join(" L")
+  const arrow = (pts: [number, number][]) => out.arrows.push(pathOf(pts))
+  const line = (pts: [number, number][]) => out.lines.push(pathOf(pts))
+  const slot = (parent: string | null, branch: Branch, index: number, x: number, y: number) =>
+    out.slots.push({
+      key: `${parent ?? "main"}:${branch}:${index}`,
+      slot: { parent, branch, index },
+      x,
+      y,
+    })
+
+  const place = (item: Item, cx: number, y: number) => {
+    const w = nodeW(item)
+    const h = item.kind === "if" || item.kind === "while" ? DH : H
+    out.nodes.push({ id: item.id, kind: item.kind, text: item.text, x: cx - w / 2, y, w, h })
+  }
+
+  /**
+   * 竖着排一串。main：两头是开始 / 结束，第 j 个缝对应 steps 的第 j-1 个位置；
+   * 分支：第 i 个缝就是第 i 个位置（头尾的 + 由判断 / 循环自己放）
+   */
+  const drawBlock = (
+    items: Item[],
+    cx: number,
+    y: number,
+    parent: string | null,
+    branch: Branch,
+  ): number => {
+    const offset = branch === "main" ? -1 : 0
+    items.forEach((item, i) => {
+      if (i) {
+        arrow([
+          [cx, y - G],
+          [cx, y - 1],
+        ])
+        slot(parent, branch, i + offset, cx, y - G + 11)
+      }
+      drawItem(item, cx, y)
+      y += measureItem(item).h + (i < items.length - 1 ? G : 0)
+    })
+    return y
+  }
+
+  const drawItem = (item: Item, cx: number, y: number) => {
+    if (item.kind === "if") {
+      const { dw, lx, rx, bh } = ifGeom(item)
+      place(item, cx, y)
+      const my = y + DH / 2
+      const top = y + DH + 24
+      const merge = top + bh + 22
+      const sides = [
+        { label: "是", bx: cx + lx, steps: item.yes, branch: "yes" as const, corner: cx - dw / 2 },
+        { label: "否", bx: cx + rx, steps: item.no, branch: "no" as const, corner: cx + dw / 2 },
+      ]
+      for (const side of sides) {
+        if (side.steps.length) {
+          arrow([
+            [side.corner, my],
+            [side.bx, my],
+            [side.bx, top - 1],
+          ])
+          slot(item.id, side.branch, 0, side.bx, my + 22)
+          const end = drawBlock(side.steps, side.bx, top, item.id, side.branch)
+          slot(item.id, side.branch, side.steps.length, side.bx, end + 11)
+          line([
+            [side.bx, end],
+            [side.bx, merge],
+            [cx, merge],
+          ])
+        } else {
+          line([
+            [side.corner, my],
+            [side.bx, my],
+            [side.bx, merge],
+            [cx, merge],
+          ])
+          slot(item.id, side.branch, 0, side.bx, (my + merge) / 2)
+        }
+        out.labels.push({
+          x: side.label === "是" ? side.corner - 6 : side.corner + 6,
+          y: my - 7,
+          text: side.label,
+          anchor: side.label === "是" ? "end" : "start",
+        })
+      }
+      out.dots.push({ x: cx, y: merge })
+      return
+    }
+    if (item.kind === "while") {
+      const dw = nodeW(item)
+      const body = measureBlock(item.body)
+      place(item, cx, y)
+      const my = y + DH / 2
+      const top = y + DH + G
+      ;(item.body.length ? arrow : line)([
+        [cx, y + DH],
+        [cx, item.body.length ? top - 1 : top + 8],
+      ])
+      out.labels.push({ x: cx + 16, y: y + DH + 15, text: "是", anchor: "start" })
+      slot(item.id, "body", 0, cx, y + DH + 12)
+      let end = top + 8
+      if (item.body.length) {
+        end = drawBlock(item.body, cx, top, item.id, "body")
+        slot(item.id, "body", item.body.length, cx, end + 10)
+      }
+      const L = Math.max(dw / 2, body.L) + 28
+      const R = Math.max(dw / 2, body.R) + 28
+      const back = end + 20
+      arrow([
+        [cx, end],
+        [cx, back],
+        [cx - L, back],
+        [cx - L, my],
+        [cx - dw / 2 - 1, my],
+      ])
+      const exit = back + 20
+      line([
+        [cx + dw / 2, my],
+        [cx + R, my],
+        [cx + R, exit],
+        [cx, exit],
+      ])
+      out.labels.push({ x: cx + dw / 2 + 6, y: my - 7, text: "否", anchor: "start" })
+      return
+    }
+    place(item, cx, y)
+  }
+
+  const items: Item[] = [
+    { kind: "start", id: "__start", text: "开始" },
+    ...doc.steps,
+    { kind: "end", id: "__end", text: "结束" },
+  ]
+  const ext = measureBlock(items)
+  // 竖线和 + 的位置跟着 doc.steps 走：空图时开始和结束之间也要有一个 +
+  const cx = PAD + ext.L
+  drawBlock(items, cx, PAD, null, "main")
+  out.width = ext.L + ext.R + PAD * 2
+  out.height = ext.h + PAD * 2
+  return out
+}
diff --git a/apps/web/src/shared/components/FlowchartEditor/model.ts b/apps/web/src/shared/components/FlowchartEditor/model.ts
new file mode 100644
index 0000000..8ade6ac
--- /dev/null
+++ b/apps/web/src/shared/components/FlowchartEditor/model.ts
@@ -0,0 +1,248 @@
+/**
+ * 流程图的数据：一棵结构树，不是「一堆框 + 一堆线」。
+ *
+ * 原来的编辑器（vue-flow）存的是自由摆放的节点和学生手拉的连线，能画出断线、孤立的框、
+ * 一个「是」连出去三根线 —— 学生大半时间花在拖框、对连接点、理线上。现在只有三种结构：
+ * 顺序、判断（是 / 否两路，走完合回来）、循环（当型，条件成立就走一遍循环体再回来判断），
+ * 「开始」「结束」固定在两头不进数据。画不出来的只有乱跳的线，中职教的三种结构都画得出。
+ *
+ * 存进数据库（flowchart_submission.flowchart_data，压缩过）和本地草稿的都是 FlowDoc。
+ * 2026-10 之前的提交存的是 vue-flow 的 nodes / edges，parseDoc 认不出来就是 null ——
+ * 那些只能看 Mermaid 渲染出来的图，载不回画布。
+ */
+
+export type BoxKind = "input" | "output" | "process"
+export type StepKind = BoxKind | "if" | "while"
+
+interface StepBase {
+  id: string
+  text: string
+}
+export type BoxStep = StepBase & { kind: BoxKind }
+export type IfStep = StepBase & { kind: "if"; yes: FlowStep[]; no: FlowStep[] }
+export type WhileStep = StepBase & { kind: "while"; body: FlowStep[] }
+export type FlowStep = BoxStep | IfStep | WhileStep
+
+export interface FlowDoc {
+  version: 2
+  steps: FlowStep[]
+}
+
+/** 一个步骤列表在树里的位置：主线，或者某个判断 / 循环的哪一支 */
+export type Branch = "main" | "yes" | "no" | "body"
+/** 可以插一步的地方：某个列表的第 index 个位置之前（index = 长度就是末尾） */
+export interface Slot {
+  parent: string | null
+  branch: Branch
+  index: number
+}
+
+export const STEP_LABEL: Record<StepKind, string> = {
+  input: "输入",
+  output: "输出",
+  process: "处理",
+  if: "判断",
+  while: "循环",
+}
+
+export function emptyDoc(): FlowDoc {
+  return { version: 2, steps: [] }
+}
+
+let seq = 0
+function newId() {
+  seq = (seq + 1) % 1_000_000
+  return `s${Date.now().toString(36)}${seq.toString(36)}`
+}
+
+export function newStep(kind: StepKind): FlowStep {
+  const base = { id: newId(), text: "" }
+  if (kind === "if") return { ...base, kind, yes: [], no: [] }
+  if (kind === "while") return { ...base, kind, body: [] }
+  return { ...base, kind }
+}
+
+export function cloneDoc(doc: FlowDoc): FlowDoc {
+  return JSON.parse(JSON.stringify(doc)) as FlowDoc
+}
+
+/** 按 id 找一步，顺带带出它所在的列表 */
+export function findStep(
+  steps: FlowStep[],
+  id: string,
+): { step: FlowStep; list: FlowStep[]; index: number } | null {
+  for (let index = 0; index < steps.length; index++) {
+    const step = steps[index]!
+    if (step.id === id) return { step, list: steps, index }
+    for (const child of children(step)) {
+      const found = findStep(child, id)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+function children(step: FlowStep): FlowStep[][] {
+  if (step.kind === "if") return [step.yes, step.no]
+  if (step.kind === "while") return [step.body]
+  return []
+}
+
+function listAt(doc: FlowDoc, parent: string | null, branch: Branch): FlowStep[] | null {
+  if (parent === null) return branch === "main" ? doc.steps : null
+  const found = findStep(doc.steps, parent)
+  if (!found) return null
+  const step = found.step
+  if (step.kind === "if" && (branch === "yes" || branch === "no")) return step[branch]
+  if (step.kind === "while" && branch === "body") return step.body
+  return null
+}
+
+/** 在 slot 处插一步，原地改 doc，返回新那一步 */
+export function insertStep(doc: FlowDoc, slot: Slot, kind: StepKind): FlowStep | null {
+  const list = listAt(doc, slot.parent, slot.branch)
+  if (!list) return null
+  const step = newStep(kind)
+  list.splice(Math.max(0, Math.min(slot.index, list.length)), 0, step)
+  return step
+}
+
+/** 删一步（判断 / 循环连同里面的一起删），返回一共删掉几个框 */
+export function removeStep(doc: FlowDoc, id: string): number {
+  const found = findStep(doc.steps, id)
+  if (!found) return 0
+  found.list.splice(found.index, 1)
+  return countSteps([found.step])
+}
+
+export function countSteps(steps: FlowStep[]): number {
+  return steps.reduce(
+    (sum, step) => sum + 1 + children(step).reduce((n, c) => n + countSteps(c), 0),
+    0,
+  )
+}
+
+/** 还没写字的框有几个 */
+export function countBlank(steps: FlowStep[]): number {
+  return steps.reduce(
+    (sum, step) =>
+      sum + (step.text.trim() ? 0 : 1) + children(step).reduce((n, c) => n + countBlank(c), 0),
+    0,
+  )
+}
+
+/**
+ * 一张图「长什么样」，不带 id：载回旧版、和交过的那一版比，只看结构和字。
+ */
+export function signature(doc: FlowDoc): string {
+  const strip = (steps: FlowStep[]): unknown[] =>
+    steps.map((step) => [step.kind, step.text.trim(), ...children(step).map(strip)])
+  return JSON.stringify(strip(doc.steps))
+}
+
+// ==================== 读回来的数据 ====================
+
+const KINDS = new Set<string>(["input", "output", "process", "if", "while"])
+
+function parseSteps(raw: unknown): FlowStep[] | null {
+  if (!Array.isArray(raw)) return null
+  const out: FlowStep[] = []
+  for (const item of raw) {
+    if (!item || typeof item !== "object") return null
+    const step = item as Record<string, unknown>
+    const kind = step.kind
+    if (typeof kind !== "string" || !KINDS.has(kind)) return null
+    const id = typeof step.id === "string" && step.id ? step.id : newId()
+    const text = typeof step.text === "string" ? step.text : ""
+    if (kind === "if") {
+      const yes = parseSteps(step.yes ?? [])
+      const no = parseSteps(step.no ?? [])
+      if (!yes || !no) return null
+      out.push({ id, text, kind, yes, no })
+    } else if (kind === "while") {
+      const body = parseSteps(step.body ?? [])
+      if (!body) return null
+      out.push({ id, text, kind, body })
+    } else {
+      out.push({ id, text, kind: kind as BoxKind })
+    }
+  }
+  return out
+}
+
+/** 本地草稿、交过的某一版：是新格式就读出来，旧的 vue-flow 格式或者坏数据给 null */
+export function parseDoc(raw: unknown): FlowDoc | null {
+  if (!raw || typeof raw !== "object") return null
+  const data = raw as Record<string, unknown>
+  if (data.version !== 2) return null
+  const steps = parseSteps(data.steps)
+  return steps ? { version: 2, steps } : null
+}
+
+// ==================== Mermaid ====================
+
+/**
+ * 交给 AI 的、结果页签和提交列表里渲染缩略图的，都是这份 Mermaid。
+ *
+ * 形状照国标流程图：起止是圆角跑道、输入输出是平行四边形、处理是矩形、判断是菱形。
+ * 原来起止画成圆、输入输出和画布上的样子对不上，AI 还会说「输出框应该用矩形」。
+ * class 行留着给 useMermaid 上色；classDef 不写了 —— 颜色是渲染那边的事，写进来
+ * AI 会把「用了颜色样式」也当成优点打分。
+ *
+ * 学生敲的字直接塞进 "..."，一个双引号就会把语法撑破：坏掉的代码还会原样送去打分，
+ * 学生不知道扣分是因为一个引号。`#` 必须先转，否则本来就有的 `#quot;` 会被当成实体。
+ */
+function escapeLabel(raw: string) {
+  return raw.replace(/#/g, "#35;").replace(/"/g, "#quot;").replace(/\r?\n/g, "<br/>")
+}
+
+export function toMermaid(doc: FlowDoc): string {
+  const lines: string[] = ["flowchart TD"]
+  const classes: string[] = []
+  let n = 0
+  const node = (shape: (label: string) => string, text: string, cls: string) => {
+    const id = `n${n++}`
+    lines.push(`    ${id}${shape(escapeLabel(text.trim() || " "))}`)
+    classes.push(`    class ${id} ${cls}`)
+    return id
+  }
+  /** 还没接上下一步的出口：从哪个框出来、线上写什么 */
+  type Exit = { from: string; label?: string }
+  const link = (exits: Exit[], to: string) => {
+    for (const exit of exits) {
+      lines.push(
+        exit.label ? `    ${exit.from} -->|"${exit.label}"| ${to}` : `    ${exit.from} --> ${to}`,
+      )
+    }
+  }
+  const walk = (steps: FlowStep[], entries: Exit[]): Exit[] => {
+    let exits = entries
+    for (const step of steps) {
+      if (step.kind === "if") {
+        const id = node((l) => `{"${l}"}`, step.text, "decision")
+        link(exits, id)
+        exits = [
+          ...walk(step.yes, [{ from: id, label: "是" }]),
+          ...walk(step.no, [{ from: id, label: "否" }]),
+        ]
+      } else if (step.kind === "while") {
+        const id = node((l) => `{"${l}"}`, step.text, "decision")
+        link(exits, id)
+        link(walk(step.body, [{ from: id, label: "是" }]), id)
+        exits = [{ from: id, label: "否" }]
+      } else {
+        const shape =
+          step.kind === "process" ? (l: string) => `["${l}"]` : (l: string) => `[/"${l}"/]`
+        const id = node(shape, step.text, step.kind)
+        link(exits, id)
+        exits = [{ from: id }]
+      }
+    }
+    return exits
+  }
+  const start = node((l) => `(["${l}"])`, "开始", "startNode")
+  const exits = walk(doc.steps, [{ from: start }])
+  const end = node((l) => `(["${l}"])`, "结束", "endNode")
+  link(exits, end)
+  return [...lines, "", ...classes].join("\n")
+}
diff --git a/apps/web/src/shared/components/FlowchartEditor/serialize.ts b/apps/web/src/shared/components/FlowchartEditor/serialize.ts
deleted file mode 100644
index e9bb63b..0000000
--- a/apps/web/src/shared/components/FlowchartEditor/serialize.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import type { Edge, Node } from "@vue-flow/core"
-
-/**
- * 把画布上的节点/连线裁成「可持久化」的形状。
- *
- * 画布里的 node 是 vue-flow 的 GraphNode：除了我们自己塞进去的字段，它还挂着
- * `dimensions` / `computedPosition` / `handleBounds` / `selected` / `dragging` /
- * `resizing` / `initialized` / `isParent` / `events` 一堆运行时内部状态（见
- * vue-flow 的 parseNode）。这些东西会跟着一起：
- *
- *   - 写进 localStorage（每次改动都写一次）
- *   - 进 20 份历史快照，每份都要 JSON 深拷贝一遍
- *   - 压缩后提交进数据库，长期存着
- *
- * 实测一个两节点的图就能撑到 600+ 字节，其中大半是 handleBounds。而重新挂载时
- * 这些字段全都会被重新计算，存下来没有任何意义 —— 还会把存档格式和 vue-flow
- * 的内部实现绑死，将来升级或迁移数据都要跟着动。
- *
- * `style` 保留：它是建节点时按类型算好的（见 useNodeStyles），丢了会让恢复出来
- * 的图变样。
- */
-export function toPortableNodes(nodes: Node[]) {
-  return nodes.map((node) => ({
-    id: node.id,
-    type: node.type,
-    position: {
-      x: node.position?.x ?? 0,
-      y: node.position?.y ?? 0,
-    },
-    data: node.data,
-    style: node.style,
-  })) as Node[]
-}
-
-export function toPortableEdges(edges: Edge[]) {
-  return edges.map((edge) => ({
-    id: edge.id,
-    source: edge.source,
-    target: edge.target,
-    sourceHandle: edge.sourceHandle ?? null,
-    targetHandle: edge.targetHandle ?? null,
-    type: edge.type,
-    label: edge.label,
-  })) as Edge[]
-}
diff --git a/apps/web/src/shared/components/FlowchartEditor/useCache.ts b/apps/web/src/shared/components/FlowchartEditor/useCache.ts
deleted file mode 100644
index 0b6c538..0000000
--- a/apps/web/src/shared/components/FlowchartEditor/useCache.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import { ref, toValue, watch, type Ref, type MaybeRefOrGetter } from "vue"
-import { useStorage, useDebounceFn } from "@vueuse/core"
-import type { Node, Edge } from "@vue-flow/core"
-import { toPortableEdges, toPortableNodes } from "./serialize"
-
-/**
- * 缓存管理 - 使用 @vueuse 的 useStorage
- */
-export function useCache(
-  nodes: Ref<Node[]>,
-  edges: Ref<Edge[]>,
-  storageKey: MaybeRefOrGetter<string> = "flowchart-editor-data",
-  onReloaded?: () => void,
-) {
-  const isSaving = ref(false)
-  const lastSaved = ref<Date | null>(null)
-  const hasUnsavedChanges = ref(false)
-
-  // 使用 useStorage 管理数据存储，支持响应式 key（题目 ID 异步加载时自动切换）
-  const storedData = useStorage<{
-    nodes: Node[]
-    edges: Edge[]
-    timestamp: string
-  }>(storageKey, {
-    nodes: [],
-    edges: [],
-    timestamp: "",
-  })
-
-  // 防抖保存：isSaving 在 watch 中置 true，保存完成后置 false，使 UI 能感知保存中状态
-  const debouncedSave = useDebounceFn(() => {
-    storedData.value.nodes = toPortableNodes(nodes.value)
-    storedData.value.edges = toPortableEdges(edges.value)
-    storedData.value.timestamp = new Date().toISOString()
-    lastSaved.value = new Date()
-    hasUnsavedChanges.value = false
-    isSaving.value = false
-  }, 500)
-
-  // 立即保存
-  const saveToCache = () => {
-    isSaving.value = true
-    storedData.value.nodes = toPortableNodes(nodes.value)
-    storedData.value.edges = toPortableEdges(edges.value)
-    storedData.value.timestamp = new Date().toISOString()
-    lastSaved.value = new Date()
-    hasUnsavedChanges.value = false
-    isSaving.value = false
-  }
-
-  // 从缓存加载数据
-  const loadFromCache = () => {
-    if (storedData.value.nodes?.length || storedData.value.edges?.length) {
-      nodes.value = storedData.value.nodes
-      edges.value = storedData.value.edges
-      lastSaved.value = storedData.value.timestamp ? new Date(storedData.value.timestamp) : null
-      hasUnsavedChanges.value = false
-      return true
-    }
-    return false
-  }
-
-  // 清除缓存数据
-  const clearCache = () => {
-    storedData.value = { nodes: [], edges: [], timestamp: "" }
-    lastSaved.value = null
-    hasUnsavedChanges.value = false
-  }
-
-  // 题目 ID 异步加载完成、或直接切到下一题时 storageKey 会变。
-  // useStorage 只把新 key 的内容读进 storedData，不会回填 nodes/edges：
-  // 不处理的话画布会继续显示上一题的图，学生一动就把上一题的内容写进这一题的
-  // key，把这道题原本存着的草稿覆盖掉。
-  // 这里依赖 useStorage 内部对 key 的 watch 先于本 watch 执行（两者都是 pre
-  // flush，且 useStorage 在上方先创建，pre 队列按创建顺序跑），
-  // 因此此刻 storedData 已经是新 key 的数据。
-  watch(
-    () => toValue(storageKey),
-    () => {
-      if (!loadFromCache()) {
-        nodes.value = []
-        edges.value = []
-        lastSaved.value = null
-        hasUnsavedChanges.value = false
-      }
-      onReloaded?.()
-    },
-  )
-
-  // 监听节点和边的变化，isSaving 在此置 true 以覆盖防抖等待窗口
-  watch(
-    [nodes, edges],
-    () => {
-      hasUnsavedChanges.value = true
-      isSaving.value = true
-      debouncedSave()
-    },
-    { deep: true },
-  )
-
-  return {
-    isSaving,
-    lastSaved,
-    hasUnsavedChanges,
-    saveToCache,
-    loadFromCache,
-    clearCache,
-  }
-}
diff --git a/apps/web/src/shared/components/FlowchartEditor/useDnD.ts b/apps/web/src/shared/components/FlowchartEditor/useDnD.ts
deleted file mode 100644
index fa2894c..0000000
--- a/apps/web/src/shared/components/FlowchartEditor/useDnD.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import { ref } from "vue"
-import { useVueFlow } from "@vue-flow/core"
-import { getNodeTypeConfig, createNodeStyle, getNodeDimensions } from "./useNodeStyles"
-import { getRandomId } from "utils/functions"
-
-// 模块级共享：当前拖拽的节点类型（Toolbar 写入，canvas 读取）
-export const currentDragNodeType = ref<string | null>(null)
-
-/**
- * 简化的拖拽处理
- */
-export function useDnD() {
-  const { addNodes, screenToFlowCoordinate } = useVueFlow()
-  const isDragOver = ref(false)
-  const screenDragPos = ref<{ x: number; y: number } | null>(null)
-
-  // 拖拽悬停处理
-  const onDragOver = (event: DragEvent) => {
-    event.preventDefault()
-    isDragOver.value = true
-    screenDragPos.value = { x: event.clientX, y: event.clientY }
-  }
-
-  // 拖拽离开处理
-  const onDragLeave = () => {
-    isDragOver.value = false
-    screenDragPos.value = null
-  }
-
-  // 拖拽放置处理
-  const onDrop = (event: DragEvent) => {
-    event.preventDefault()
-    isDragOver.value = false
-    screenDragPos.value = null
-    currentDragNodeType.value = null
-
-    const type = event.dataTransfer?.getData("application/vueflow")
-    if (!type) return
-
-    // 获取鼠标在画布中的坐标
-    const position = screenToFlowCoordinate({
-      x: event.clientX,
-      y: event.clientY,
-    })
-
-    // 根据节点类型获取实际尺寸
-    const dimensions = getNodeDimensions(type)
-
-    // 调整位置，使节点中心点对齐到鼠标位置
-    const adjustedPosition = {
-      x: position.x - dimensions.width / 2,
-      y: position.y - dimensions.height / 2,
-    }
-
-    const nodeId = `node-${getRandomId()}`
-    const config = getNodeTypeConfig(type)
-    const newNode = {
-      id: nodeId,
-      type: "custom",
-      position: adjustedPosition,
-      data: {
-        label: config.label,
-        color: config.color,
-        originalType: type,
-      },
-      style: createNodeStyle(type),
-    }
-
-    addNodes([newNode])
-    return newNode
-  }
-
-  return {
-    isDragOver,
-    screenDragPos,
-    onDragOver,
-    onDragLeave,
-    onDrop,
-  }
-}
diff --git a/apps/web/src/shared/components/FlowchartEditor/useFlowOperations.ts b/apps/web/src/shared/components/FlowchartEditor/useFlowOperations.ts
deleted file mode 100644
index d6c5992..0000000
--- a/apps/web/src/shared/components/FlowchartEditor/useFlowOperations.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-import { nextTick } from "vue"
-import type { Ref } from "vue"
-import type { Node, Edge, Connection } from "@vue-flow/core"
-import { useVueFlow } from "@vue-flow/core"
-import { getRandomId } from "utils/functions"
-
-export function useFlowOperations(
-  nodes: Ref<Node[]>,
-  edges: Ref<Edge[]>,
-  addEdges: (edges: Edge[]) => void,
-  removeNodes: (nodeIds: string[]) => void,
-  removeEdges: (edgeIds: string[]) => void,
-  saveState: (nodes: Node[], edges: Edge[]) => void,
-) {
-  const { findNode, getSelectedNodes, getSelectedEdges } = useVueFlow()
-  const getAutoLabel = (
-    sourceNode: Node | undefined,
-    targetNode: Node | undefined,
-    sourceHandle: string | null | undefined,
-    targetHandle: string | null | undefined,
-  ) => {
-    const sourceType = sourceNode?.data?.originalType || sourceNode?.type
-    const targetType = targetNode?.data?.originalType || targetNode?.type
-
-    // 如果是判断节点
-    if (sourceType === "decision") {
-      // 根据handle ID推断标签
-      if (sourceHandle === "yes") {
-        return "是"
-      } else if (sourceHandle === "no") {
-        return "否"
-      }
-    }
-
-    // 如果是循环节点
-    if (sourceType === "loop") {
-      // 根据handle ID推断标签
-      if (sourceHandle === "continue") {
-        return "继续"
-      } else if (sourceHandle === "exit") {
-        return "退出"
-      }
-    }
-
-    // 如果是循环体回到循环节点
-    if (targetType === "loop") {
-      if (targetHandle === "return") {
-        return "返回"
-      }
-    }
-    // 默认情况
-    return ""
-  }
-
-  const handleConnect = async (params: Connection) => {
-    const sourceNode = nodes.value.find((node) => node.id === params.source)
-    const targetNode = nodes.value.find((node) => node.id === params.target)
-
-    // 自动推断标签
-    const autoLabel = getAutoLabel(sourceNode, targetNode, params.sourceHandle, params.targetHandle)
-
-    const newEdge: Edge = {
-      id: `edge-${getRandomId()}`,
-      source: params.source,
-      target: params.target,
-      sourceHandle: params.sourceHandle,
-      targetHandle: params.targetHandle,
-      type: "default",
-      label: autoLabel,
-    }
-
-    addEdges([newEdge])
-    // vue-flow 的 store → v-model 回写走的是 watch（pre flush，异步），
-    // 紧接着读 nodes/edges 拿到的还是改动前的数组，存进历史就会错开一步。
-    // 画布上 handleDrop 早就这么等了，这几处一直漏了。
-    await nextTick()
-    saveState(nodes.value, edges.value)
-  }
-
-  const handleEdgeClick = async ({ edge }: { edge: Edge }) => {
-    removeEdges([edge.id])
-    await nextTick()
-    saveState(nodes.value, edges.value)
-  }
-
-  // 节点删除。removeNodes 的 removeConnectedEdges 默认就是 true，
-  // 相连的边不用自己再删一遍
-  const handleNodeDelete = async (nodeId: string) => {
-    removeNodes([nodeId])
-    await nextTick()
-    saveState(nodes.value, edges.value)
-  }
-
-  // 节点更新，空标签时清除自定义标签（恢复默认类型名称）
-  const handleNodeUpdate = (nodeId: string, newLabel: string) => {
-    const node = findNode(nodeId)
-    if (node) {
-      if (newLabel) {
-        node.data = { ...node.data, customLabel: newLabel }
-      } else {
-        const { customLabel: _, ...rest } = node.data
-        node.data = rest
-      }
-      saveState(nodes.value, edges.value)
-    }
-  }
-
-  // 清空画布
-  const clearCanvas = () => {
-    nodes.value = []
-    edges.value = []
-    saveState(nodes.value, edges.value)
-  }
-
-  // 删除选中的节点和边
-  const deleteSelected = async () => {
-    const selectedNodes = getSelectedNodes.value
-    const selectedEdges = getSelectedEdges.value
-    if (selectedNodes.length === 0 && selectedEdges.length === 0) return
-
-    if (selectedNodes.length > 0) {
-      removeNodes(selectedNodes.map((node) => node.id))
-    }
-    if (selectedEdges.length > 0) {
-      removeEdges(selectedEdges.map((edge) => edge.id))
-    }
-    await nextTick()
-    saveState(nodes.value, edges.value)
-  }
-
-  return {
-    handleConnect,
-    handleEdgeClick,
-    handleNodeDelete,
-    handleNodeUpdate,
-    clearCanvas,
-    deleteSelected,
-  }
-}
diff --git a/apps/web/src/shared/components/FlowchartEditor/useHistory.ts b/apps/web/src/shared/components/FlowchartEditor/useHistory.ts
deleted file mode 100644
index 81b32b5..0000000
--- a/apps/web/src/shared/components/FlowchartEditor/useHistory.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { shallowRef, computed } from "vue"
-import type { Node, Edge } from "@vue-flow/core"
-import { toPortableEdges, toPortableNodes } from "./serialize"
-
-/**
- * 简化的历史记录管理
- */
-export function useHistory() {
-  const history = shallowRef<{ nodes: Node[]; edges: Edge[] }[]>([])
-  const historyIndex = ref(-1)
-
-  // 是否可以撤销
-  const canUndo = computed(() => historyIndex.value > 0)
-
-  // 是否可以重做
-  const canRedo = computed(() => historyIndex.value < history.value.length - 1)
-
-  const deepCopyState = (nodes: Node[], edges: Edge[]): { nodes: Node[]; edges: Edge[] } =>
-    // 先裁掉 vue-flow 的运行时内部字段再深拷贝：20 份快照 × 每个节点几百字节的
-    // handleBounds/dimensions，纯属白拷
-    JSON.parse(
-      JSON.stringify({
-        nodes: toPortableNodes(nodes),
-        edges: toPortableEdges(edges),
-      }),
-    ) as {
-      nodes: Node[]
-      edges: Edge[]
-    }
-
-  // 保存状态到历史记录
-  const saveState = (nodes: Node[], edges: Edge[]) => {
-    const currentState = deepCopyState(nodes, edges)
-
-    // 如果当前不在历史记录的末尾，删除后面的记录
-    if (historyIndex.value < history.value.length - 1) {
-      history.value = history.value.slice(0, historyIndex.value + 1)
-    }
-
-    history.value = [...history.value, currentState]
-    historyIndex.value = history.value.length - 1
-
-    // 限制历史记录数量
-    if (history.value.length > 20) {
-      history.value = history.value.slice(1)
-      historyIndex.value--
-    }
-  }
-
-  // 用当前画布重建历史。挂载时和换题后都要调一次：
-  // 不播下这个初始快照的话 historyIndex 会从 -1 开始，canUndo 要求 index > 0，
-  // 第一步操作永远撤销不了；换题后不重建则一次撤销会把上一题的图还原到这一题里。
-  const resetHistory = (nodes: Node[], edges: Edge[]) => {
-    history.value = [deepCopyState(nodes, edges)]
-    historyIndex.value = 0
-  }
-
-  // 撤销
-  const undo = () => {
-    if (canUndo.value) {
-      historyIndex.value--
-      const state = history.value[historyIndex.value]
-      return deepCopyState(state.nodes, state.edges)
-    }
-    return null
-  }
-
-  // 重做
-  const redo = () => {
-    if (canRedo.value) {
-      historyIndex.value++
-      const state = history.value[historyIndex.value]
-      return deepCopyState(state.nodes, state.edges)
-    }
-    return null
-  }
-
-  return {
-    canUndo,
-    canRedo,
-    resetHistory,
-    saveState,
-    undo,
-    redo,
-  }
-}
diff --git a/apps/web/src/shared/components/FlowchartEditor/useNodeStyles.ts b/apps/web/src/shared/components/FlowchartEditor/useNodeStyles.ts
deleted file mode 100644
index 45e2114..0000000
--- a/apps/web/src/shared/components/FlowchartEditor/useNodeStyles.ts
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * 节点样式管理
- */
-
-/**
- * 获取节点类型配置
- */
-export function getNodeTypeConfig(type: string) {
-  const configs: Record<
-    string,
-    { label: string; color: string; icon: string; description: string }
-  > = {
-    start: {
-      label: "开始",
-      color: "#10b981",
-      icon: "▶",
-      description: "流程开始",
-    },
-    input: {
-      label: "输入",
-      color: "#06b6d4",
-      icon: "📥",
-      description: "数据输入",
-    },
-    default: {
-      label: "赋值",
-      color: "#3b82f6",
-      icon: "⚙",
-      description: "赋值语句",
-    },
-    decision: {
-      label: "判断",
-      color: "#f59e0b",
-      icon: "❓",
-      description: "条件语句",
-    },
-    loop: {
-      label: "循环",
-      color: "#8b5cf6",
-      icon: "🔄",
-      description: "循环语句",
-    },
-    output: {
-      label: "输出",
-      color: "#84cc16",
-      icon: "📤",
-      description: "数据输出",
-    },
-    end: {
-      label: "结束",
-      color: "#ef4444",
-      icon: "⏹",
-      description: "流程结束",
-    },
-  }
-  return (
-    configs[type] || {
-      label: "节点",
-      color: "#6b7280",
-      icon: "⚪",
-      description: "未知节点",
-    }
-  )
-}
-
-/**
- * 获取节点样式
- */
-export function getNodeStyle(type: string, color: string) {
-  const baseStyle = {
-    background: color,
-    color: "white",
-    border: `2px solid ${color}`,
-    borderRadius: "10px",
-    fontSize: "16px",
-    fontWeight: "500",
-    width: "auto", // 自动宽度
-    height: "auto", // 自动高度
-    minWidth: "100px",
-    minHeight: "40px",
-    maxWidth: "400px",
-    maxHeight: "160px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
-  }
-
-  // 根据节点类型调整样式
-  switch (type) {
-    case "start":
-    case "end":
-      return {
-        ...baseStyle,
-      }
-    case "decision":
-      return {
-        ...baseStyle,
-        borderRadius: "8px",
-        minWidth: "140px",
-        minHeight: "50px",
-      }
-    case "loop":
-      return {
-        ...baseStyle,
-        borderRadius: "8px",
-        minWidth: "140px",
-        minHeight: "50px",
-      }
-    default:
-      return baseStyle
-  }
-}
-
-/**
- * 创建节点样式
- */
-export function createNodeStyle(type: string) {
-  const config = getNodeTypeConfig(type)
-  return getNodeStyle(type, config.color)
-}
-
-/**
- * 获取节点尺寸
- */
-export function getNodeDimensions(type: string) {
-  switch (type) {
-    case "start":
-    case "end":
-      return { width: 100, height: 40 }
-    case "decision":
-    case "loop":
-      return { width: 140, height: 50 }
-    default:
-      return { width: 120, height: 40 }
-  }
-}
diff --git a/apps/web/src/shared/composables/useMermaid.ts b/apps/web/src/shared/composables/useMermaid.ts
index ee83c43..d105b38 100644
--- a/apps/web/src/shared/composables/useMermaid.ts
+++ b/apps/web/src/shared/composables/useMermaid.ts
@@ -58,8 +58,8 @@ const mermaidDisplayStyle = `
 .oj-mermaid-flowchart g.node.startEnd ellipse,
 .oj-mermaid-flowchart g.node.startEnd circle,
 .oj-mermaid-flowchart g.node.startEnd path {
-  fill: #dcfce7 !important;
-  stroke: #16a34a !important;
+  fill: #eef8f2 !important;
+  stroke: #18a058 !important;
 }
 
 .oj-mermaid-flowchart g.node.endNode rect,
@@ -67,8 +67,8 @@ const mermaidDisplayStyle = `
 .oj-mermaid-flowchart g.node.endNode ellipse,
 .oj-mermaid-flowchart g.node.endNode circle,
 .oj-mermaid-flowchart g.node.endNode path {
-  fill: #fee2e2 !important;
-  stroke: #dc2626 !important;
+  fill: #eef8f2 !important;
+  stroke: #18a058 !important;
 }
 
 .oj-mermaid-flowchart g.node.input rect,
@@ -76,8 +76,8 @@ const mermaidDisplayStyle = `
 .oj-mermaid-flowchart g.node.input ellipse,
 .oj-mermaid-flowchart g.node.input circle,
 .oj-mermaid-flowchart g.node.input path {
-  fill: #dbeafe !important;
-  stroke: #2563eb !important;
+  fill: #eef4fd !important;
+  stroke: #2f6bc4 !important;
 }
 
 .oj-mermaid-flowchart g.node.output rect,
@@ -85,8 +85,8 @@ const mermaidDisplayStyle = `
 .oj-mermaid-flowchart g.node.output ellipse,
 .oj-mermaid-flowchart g.node.output circle,
 .oj-mermaid-flowchart g.node.output path {
-  fill: #ede9fe !important;
-  stroke: #7c3aed !important;
+  fill: #eef4fd !important;
+  stroke: #2f6bc4 !important;
 }
 
 .oj-mermaid-flowchart g.node.process rect,
@@ -94,8 +94,8 @@ const mermaidDisplayStyle = `
 .oj-mermaid-flowchart g.node.process ellipse,
 .oj-mermaid-flowchart g.node.process circle,
 .oj-mermaid-flowchart g.node.process path {
-  fill: #f0f9ff !important;
-  stroke: #0284c7 !important;
+  fill: #ffffff !important;
+  stroke: #7d828a !important;
 }
 
 .oj-mermaid-flowchart g.node.decision rect,
@@ -103,8 +103,8 @@ const mermaidDisplayStyle = `
 .oj-mermaid-flowchart g.node.decision ellipse,
 .oj-mermaid-flowchart g.node.decision circle,
 .oj-mermaid-flowchart g.node.decision path {
-  fill: #fef3c7 !important;
-  stroke: #d97706 !important;
+  fill: #fdf5e6 !important;
+  stroke: #d08a1c !important;
 }
 
 .oj-mermaid-flowchart g.node.loop rect,
@@ -112,8 +112,8 @@ const mermaidDisplayStyle = `
 .oj-mermaid-flowchart g.node.loop ellipse,
 .oj-mermaid-flowchart g.node.loop circle,
 .oj-mermaid-flowchart g.node.loop path {
-  fill: #fae8ff !important;
-  stroke: #c026d3 !important;
+  fill: #fdf5e6 !important;
+  stroke: #d08a1c !important;
 }
 
 .oj-mermaid-flowchart g.node.oj-node-palette-0 rect,
diff --git a/bun.lock b/bun.lock
index 30b3045..e2328c4 100644
--- a/bun.lock
+++ b/bun.lock
@@ -51,9 +51,6 @@
         "@codemirror/view": "^6.43.14",
         "@lezer/highlight": "^1.2.5",
         "@oj2/contract": "workspace:*",
-        "@vue-flow/background": "^1.3.2",
-        "@vue-flow/controls": "^1.1.3",
-        "@vue-flow/core": "^1.48.2",
         "@vueuse/core": "^15.0.0",
         "@vueuse/router": "^15.0.0",
         "@wangeditor-next/editor": "^6.5.0",
@@ -819,12 +816,6 @@
 
     "@volar/typescript": ["@volar/typescript@2.4.28", "https://registry.npmjs.com/@volar/typescript/-/typescript-2.4.28.tgz", { "dependencies": { "@volar/language-core": "2.4.28", "path-browserify": "^1.0.1", "vscode-uri": "^3.0.8" } }, "sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw=="],
 
-    "@vue-flow/background": ["@vue-flow/background@1.3.2", "https://registry.npmjs.com/@vue-flow/background/-/background-1.3.2.tgz", { "peerDependencies": { "@vue-flow/core": "^1.23.0", "vue": "^3.3.0" } }, "sha512-eJPhDcLj1wEo45bBoqTXw1uhl0yK2RaQGnEINqvvBsAFKh/camHJd5NPmOdS1w+M9lggc9igUewxaEd3iCQX2w=="],
-
-    "@vue-flow/controls": ["@vue-flow/controls@1.1.3", "https://registry.npmjs.com/@vue-flow/controls/-/controls-1.1.3.tgz", { "peerDependencies": { "@vue-flow/core": "^1.23.0", "vue": "^3.3.0" } }, "sha512-XCf+G+jCvaWURdFlZmOjifZGw3XMhN5hHlfMGkWh9xot+9nH9gdTZtn+ldIJKtarg3B21iyHU8JjKDhYcB6JMw=="],
-
-    "@vue-flow/core": ["@vue-flow/core@1.48.2", "https://registry.npmjs.com/@vue-flow/core/-/core-1.48.2.tgz", { "dependencies": { "@vueuse/core": "^10.5.0", "d3-drag": "^3.0.0", "d3-interpolate": "^3.0.1", "d3-selection": "^3.0.0", "d3-zoom": "^3.0.0" }, "peerDependencies": { "vue": "^3.3.0" } }, "sha512-raxhgKWE+G/mcEvXJjGFUDYW9rAI3GOtiHR3ZkNpwBWuIaCC1EYiBmKGwJOoNzVFgwO7COgErnK7i08i287AFA=="],
-
     "@vue-macros/common": ["@vue-macros/common@3.1.4", "https://registry.npmjs.com/@vue-macros/common/-/common-3.1.4.tgz", { "dependencies": { "@vue/compiler-sfc": "^3.5.22", "ast-kit": "^2.1.2", "local-pkg": "^1.1.2", "magic-string-ast": "^1.0.2", "unplugin-utils": "^0.3.0" }, "peerDependencies": { "vue": "^2.7.0 || ^3.2.25" }, "optionalPeers": ["vue"] }, "sha512-/5Fv+6DgIcM9ajY05ZmKBv+LMX1M9A0X+IUwDRVdt67ciw8OV9bvG2r34p3RiEadlsQybjhKPRKNXDC8Bp23cw=="],
 
     "@vue/compiler-core": ["@vue/compiler-core@3.5.43", "https://registry.npmjs.com/@vue/compiler-core/-/compiler-core-3.5.43.tgz", { "dependencies": { "@babel/parser": "^7.29.8", "@vue/shared": "3.5.43", "entities": "^7.0.1", "estree-walker": "^2.0.2", "source-map-js": "^1.2.1" } }, "sha512-zdiLhnbe1QQqgDT8xZMpNmyqZ3qlI+/Q/FHQco57Kwl/b05HhCzN6eVGN9QU9rbga4CrS0H5SYY8VGHZCt/1Hg=="],
@@ -1049,7 +1040,7 @@
 
     "d3-delaunay": ["d3-delaunay@6.0.4", "https://registry.npmjs.com/d3-delaunay/-/d3-delaunay-6.0.4.tgz", { "dependencies": { "delaunator": "5" } }, "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A=="],
 
-    "d3-dispatch": ["d3-dispatch@3.0.1", "https://registry.npmjs.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz", {}, "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="],
+    "d3-dispatch": ["d3-dispatch@1.0.6", "https://registry.npmjs.com/d3-dispatch/-/d3-dispatch-1.0.6.tgz", {}, "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA=="],
 
     "d3-drag": ["d3-drag@3.0.0", "https://registry.npmjs.com/d3-drag/-/d3-drag-3.0.0.tgz", { "dependencies": { "d3-dispatch": "1 - 3", "d3-selection": "3" } }, "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg=="],
 
@@ -1565,8 +1556,6 @@
 
     "vue-chartjs": ["vue-chartjs@5.3.4", "https://registry.npmjs.com/vue-chartjs/-/vue-chartjs-5.3.4.tgz", { "peerDependencies": { "chart.js": "^4.1.1", "vue": "^3.0.0-0 || ^2.7.0" } }, "sha512-x3Fqob8RQvrTdssfi9ecsCzEkFOd8JPmNwSkSQzdfKj/uBsRJs/Y88cZcZIEcPsTVfMGwMo4MOoihoDG2DoE/g=="],
 
-    "vue-demi": ["vue-demi@0.14.10", "https://registry.npmjs.com/vue-demi/-/vue-demi-0.14.10.tgz", { "peerDependencies": { "@vue/composition-api": "^1.0.0-rc.1", "vue": "^3.0.0-0 || ^2.6.0" }, "optionalPeers": ["@vue/composition-api"], "bin": { "vue-demi-fix": "bin/vue-demi-fix.js", "vue-demi-switch": "bin/vue-demi-switch.js" } }, "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg=="],
-
     "vue-router": ["vue-router@5.4.0", "https://registry.npmjs.com/vue-router/-/vue-router-5.4.0.tgz", { "dependencies": { "@vue-macros/common": "^3.1.3", "@vue/devtools-api": "^8.1.5", "ast-walker-scope": "^0.10.0", "chokidar": "^5.0.0", "confbox": "^0.3.1", "local-pkg": "^1.2.1", "magic-string": "^1.4.3", "mlly": "^1.8.2", "muggle-string": "^0.4.1", "nostics": "^1.3.0", "pathe": "^2.0.3", "picomatch": "^4.0.7", "scule": "^1.3.0", "tinyglobby": "^0.2.17", "unplugin": "^3.4.0", "unplugin-utils": "^0.3.2" }, "peerDependencies": { "@pinia/colada": ">=0.21.2", "@vue/compiler-sfc": "^3.5.34 || ^4.0.0", "pinia": "^3.0.4 || ^4.0.2", "vite": "^7.3.0 || ^8.0.0", "vue": "^3.5.34 || ^4.0.0" }, "optionalPeers": ["@pinia/colada", "@vue/compiler-sfc", "pinia", "vite"] }, "sha512-pFvcYcxinDHjZUlf7AzFBrT8r8Xqvv4uMHoJnjc+EqPawXQvHTkF8S4tfSmQLpriVHUGfkaKlI7Et0KRjTMTdw=="],
 
     "vue-tsc": ["vue-tsc@3.3.13", "https://registry.npmjs.com/vue-tsc/-/vue-tsc-3.3.13.tgz", { "dependencies": { "@volar/typescript": "2.4.28", "@vue/language-core": "3.3.13" }, "peerDependencies": { "typescript": ">=5.0.0" }, "bin": { "vue-tsc": "bin/vue-tsc.js" } }, "sha512-jE4/bXdOMSHVxEGgQCqNllJy+9N3Gx6tfSAsg0yhFK/MAN6eXqISihupnDEKSCt12VVnjN2gI3AqLYcqoh5x/A=="],
@@ -1625,8 +1614,6 @@
 
     "@vitest/snapshot/magic-string": ["magic-string@1.4.2", "https://registry.npmjs.com/magic-string/-/magic-string-1.4.2.tgz", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.6.0" } }, "sha512-vG+rjFRj1PqdIBozIxAGMjPlOhaVe+GXpbttY/iSK7rGcJRMlwNJO7dcUwmUqkymsFLJiNGI06t4D7Fr7yRC9g=="],
 
-    "@vue-flow/core/@vueuse/core": ["@vueuse/core@10.11.1", "https://registry.npmjs.com/@vueuse/core/-/core-10.11.1.tgz", { "dependencies": { "@types/web-bluetooth": "^0.0.20", "@vueuse/metadata": "10.11.1", "@vueuse/shared": "10.11.1", "vue-demi": ">=0.14.8" } }, "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww=="],
-
     "@vue-macros/common/@vue/compiler-sfc": ["@vue/compiler-sfc@3.5.41", "https://registry.npmjs.com/@vue/compiler-sfc/-/compiler-sfc-3.5.41.tgz", { "dependencies": { "@babel/parser": "^7.29.8", "@vue/compiler-core": "3.5.41", "@vue/compiler-dom": "3.5.41", "@vue/compiler-ssr": "3.5.41", "@vue/shared": "3.5.41", "estree-walker": "^2.0.2", "magic-string": "^0.30.21", "postcss": "^8.5.19", "source-map-js": "^1.2.1" } }, "sha512-XJhip7R2wy6vX3knCxdZN4KracFaZUef58s1KYewqluedHIJaPIVfXoYT7MF1F8nCvv6k8bWWxDC8opMkg1VTQ=="],
 
     "@vue/compiler-core/entities": ["entities@7.0.1", "https://registry.npmjs.com/entities/-/entities-7.0.1.tgz", {}, "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA=="],
@@ -1661,14 +1648,24 @@
 
     "cytoscape-fcose/cose-base": ["cose-base@2.2.0", "https://registry.npmjs.com/cose-base/-/cose-base-2.2.0.tgz", { "dependencies": { "layout-base": "^2.0.0" } }, "sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g=="],
 
-    "d3-cloud/d3-dispatch": ["d3-dispatch@1.0.6", "https://registry.npmjs.com/d3-dispatch/-/d3-dispatch-1.0.6.tgz", {}, "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA=="],
+    "d3/d3-dispatch": ["d3-dispatch@3.0.1", "https://registry.npmjs.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz", {}, "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="],
+
+    "d3-brush/d3-dispatch": ["d3-dispatch@3.0.1", "https://registry.npmjs.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz", {}, "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="],
+
+    "d3-drag/d3-dispatch": ["d3-dispatch@3.0.1", "https://registry.npmjs.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz", {}, "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="],
 
     "d3-dsv/commander": ["commander@7.2.0", "https://registry.npmjs.com/commander/-/commander-7.2.0.tgz", {}, "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="],
 
+    "d3-force/d3-dispatch": ["d3-dispatch@3.0.1", "https://registry.npmjs.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz", {}, "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="],
+
     "d3-sankey/d3-array": ["d3-array@2.12.1", "https://registry.npmjs.com/d3-array/-/d3-array-2.12.1.tgz", { "dependencies": { "internmap": "^1.0.0" } }, "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ=="],
 
     "d3-sankey/d3-shape": ["d3-shape@1.3.7", "https://registry.npmjs.com/d3-shape/-/d3-shape-1.3.7.tgz", { "dependencies": { "d3-path": "1" } }, "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw=="],
 
+    "d3-transition/d3-dispatch": ["d3-dispatch@3.0.1", "https://registry.npmjs.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz", {}, "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="],
+
+    "d3-zoom/d3-dispatch": ["d3-dispatch@3.0.1", "https://registry.npmjs.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz", {}, "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="],
+
     "katex/commander": ["commander@8.3.0", "https://registry.npmjs.com/commander/-/commander-8.3.0.tgz", {}, "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="],
 
     "magic-string-ast/magic-string": ["magic-string@0.30.21", "https://registry.npmjs.com/magic-string/-/magic-string-0.30.21.tgz", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
@@ -1755,12 +1752,6 @@
 
     "@vitest/snapshot/magic-string/@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.6.0", "https://registry.npmjs.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.6.0.tgz", {}, "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw=="],
 
-    "@vue-flow/core/@vueuse/core/@types/web-bluetooth": ["@types/web-bluetooth@0.0.20", "https://registry.npmjs.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz", {}, "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="],
-
-    "@vue-flow/core/@vueuse/core/@vueuse/metadata": ["@vueuse/metadata@10.11.1", "https://registry.npmjs.com/@vueuse/metadata/-/metadata-10.11.1.tgz", {}, "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw=="],
-
-    "@vue-flow/core/@vueuse/core/@vueuse/shared": ["@vueuse/shared@10.11.1", "https://registry.npmjs.com/@vueuse/shared/-/shared-10.11.1.tgz", { "dependencies": { "vue-demi": ">=0.14.8" } }, "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA=="],
-
     "@vue-macros/common/@vue/compiler-sfc/@vue/compiler-core": ["@vue/compiler-core@3.5.41", "https://registry.npmjs.com/@vue/compiler-core/-/compiler-core-3.5.41.tgz", { "dependencies": { "@babel/parser": "^7.29.8", "@vue/shared": "3.5.41", "entities": "^7.0.1", "estree-walker": "^2.0.2", "source-map-js": "^1.2.1" } }, "sha512-q0Xtv/F9w2YO/7htQhtiL+Ev2WCJbe5N2hc+XfgyKkEKqWpSxknmT8QOuGdEKNdjPq0c3F7rNpFkTo3Kfrm7pg=="],
 
     "@vue-macros/common/@vue/compiler-sfc/@vue/compiler-dom": ["@vue/compiler-dom@3.5.41", "https://registry.npmjs.com/@vue/compiler-dom/-/compiler-dom-3.5.41.tgz", { "dependencies": { "@vue/compiler-core": "3.5.41", "@vue/shared": "3.5.41" } }, "sha512-oKacVfNglLvGjnS6BXOlGL7EyG2h8X03pqXCjzotRZUaXGjbrTJUnVAQjrCqUnS+lyu31nwQjZY/d817GmCnfw=="],