feat(流程图): 画流程图不用再拖框连线——点箭头上的 + 加一步，判断自动分出是 / 否，排版全自动

原来要从节点库拖框、对准连接点拉线、自己摆位置，还能画出断线和孤立的框；
画布上全是彩色圆角块，交上去的却是平行四边形和菱形。现在照画布稿 FlowEdB：
- 图存成一棵结构树（顺序 / 判断 / 循环），开始、结束固定在两头，排版是纯函数
- 每根箭头上一个 +，点了选输入 / 输出 / 处理 / 判断 / 循环；点框直接改字，右上角「删除」
- 形状照国标流程图，画布、缩略图、交给 AI 的 Mermaid 是同一套；缩略图配色跟着画布改
- 已保存时间、撤销、重做挪到工具栏，「清空画布」收进「⋯」；空框交不上去
- 去掉 vue-flow 三个包（编辑器打包后 16 KB），删掉没人进的 /flowchart 页

2026-10 之前交的图是 vue-flow 格式，只能看缩略图、载不回画布；旧草稿键名不同，不去碰。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

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,