From 74f0d8e78ad8a72b48b1b1ce11526f1a09525f60 Mon Sep 17 00:00:00 2001
From: oliver <zhoutianjun127@126.com>
Date: Sat, 12 Sep 2026 22:35:53 +0800
Subject: [PATCH] feat: add topology view mode with router icons and link-style
 edges

Canvas-global nodeViewMode (bubble/card/topology) can be set at create or via prefs; topology draws NE routers with straight blue center links and exposes router icon to agents.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/server/src/chat.ts                    |   7 +-
 apps/server/src/create-server.ts           |  12 +-
 apps/server/src/tools.ts                   |  53 +++--
 apps/web/public/topo/ne-router.png         | Bin 0 -> 7302 bytes
 apps/web/src/App.tsx                       |  23 +-
 apps/web/src/TopologyCanvas.tsx            | 246 ++++++++++++++++-----
 apps/web/src/canvas-ui-text.ts             |   6 +
 apps/web/src/node-geometry.ts              |  16 +-
 apps/web/src/node-props/NodePropEditor.tsx |   1 +
 packages/dsh-plugin/lib/tools.js           |   9 +-
 packages/graph-core/src/index.ts           |   2 +
 packages/graph-store/src/index.ts          |   8 +-
 packages/layout-engine/src/index.ts        |  25 ++-
 packages/shared/src/ops.ts                 |  12 +-
 packages/shared/src/types.ts               |   5 +-
 15 files changed, 322 insertions(+), 103 deletions(-)
 create mode 100644 apps/web/public/topo/ne-router.png

diff --git a/apps/server/src/chat.ts b/apps/server/src/chat.ts
index 2a685a5..4c25f96 100644
--- a/apps/server/src/chat.ts
+++ b/apps/server/src/chat.ts
@@ -64,9 +64,10 @@ export function createChatHandler(ctx: ToolContext) {
 8. 固定坐标用 set_pinned 或 create_node 带 pos；不确定时 mindmap_get_schema。
 9. 节点属性：标题用 update_text；描述/多标签/多链接/图片URL/时间用 update_node_meta（patch）；边用 update_edge_meta 或 set_edge_label。
 10. 节点类型 stylePreset：default|card|title|decision|risk|note|muted（title 仅画布锚点，勿新建；card=新闻快照卡片，配图用 imageUrl、摘要用 note、来源用 links）。
-11. 同级排序用 reorder：优先 {"type":"reorder","nodeId":"...","order":10}；也可用 afterSiblingId（null=置顶）。
-12. 折叠 set_collapsed 会隐藏该节点主父链下的全部子孙并重新布局；展开后恢复。
-13. 问图：用 mindmap_query（neighbors|path|stats|orphans|missing_meta）；答完可用 mindmap_highlight 高亮路径；细节用 mindmap_get_node / mindmap_get_edge。禁止编造图中没有的事实。
+11. 节点图标 icon（create_node / update_node_meta.patch）：server|database|cloud|person|folder|doc|link|warning|check|star|gear|globe|router。拓扑排障图：建画布时可用 mindmap_create_canvas({ title, nodeViewMode:"topology" })，节点 icon:"router"；nodeViewMode 是画布全局偏好，也可事后 set_prefs 修改。
+12. 同级排序用 reorder：优先 {"type":"reorder","nodeId":"...","order":10}；也可用 afterSiblingId（null=置顶）。
+13. 折叠 set_collapsed 会隐藏该节点主父链下的全部子孙并重新布局；展开后恢复。
+14. 问图：用 mindmap_query（neighbors|path|stats|orphans|missing_meta）；答完可用 mindmap_highlight 高亮路径；细节用 mindmap_get_node / mindmap_get_edge。禁止编造图中没有的事实。
 
 当前空间上下文（摘要）：
 ${JSON.stringify(spatial, null, 0).slice(0, 6000)}
diff --git a/apps/server/src/create-server.ts b/apps/server/src/create-server.ts
index 1e2919f..78d9395 100644
--- a/apps/server/src/create-server.ts
+++ b/apps/server/src/create-server.ts
@@ -8,7 +8,7 @@ import { fileURLToPath } from "node:url";
 import type { Server } from "node:http";
 import { WebSocketServer, type WebSocket } from "ws";
 import { SqliteGraphStore } from "@mind-map/graph-store";
-import { coerceOpInput, OpSchema, type Op } from "@mind-map/shared";
+import { coerceOpInput, OpSchema, NodeViewModeSchema, type Op } from "@mind-map/shared";
 import { listSkins } from "@mind-map/dream-skin";
 import { GraphError } from "@mind-map/graph-core";
 import { z } from "zod";
@@ -163,8 +163,16 @@ export function startMindMapServer(
     const body = (await c.req.json().catch(() => ({}))) as {
       title?: string;
       rootText?: string;
+      nodeViewMode?: string;
+      prefs?: { nodeViewMode?: string };
     };
-    const g = store.createCanvas(body.title, body.rootText);
+    const viewRaw = body.nodeViewMode ?? body.prefs?.nodeViewMode;
+    const parsed = NodeViewModeSchema.safeParse(viewRaw);
+    const g = store.createCanvas(
+      body.title,
+      body.rootText,
+      parsed.success ? { nodeViewMode: parsed.data } : undefined,
+    );
     broadcast({ type: "canvas/created", canvasId: g.canvas.id });
     return c.json(clientCanvasPayload(store, g.canvas.id));
   });
diff --git a/apps/server/src/tools.ts b/apps/server/src/tools.ts
index d3c5b21..a233a3e 100644
--- a/apps/server/src/tools.ts
+++ b/apps/server/src/tools.ts
@@ -17,6 +17,8 @@ import {
   nodeFunction,
   OP_SCHEMA_DOC,
   OP_TYPES,
+  NodeIconSchema,
+  NodeViewModeSchema,
 } from "@mind-map/shared";
 import { hierarchyFingerprint, layout } from "@mind-map/layout-engine";
 
@@ -481,8 +483,10 @@ function estimateOverlaps(
   nodeViewMode: string,
   anchorId: string | null,
 ) {
-  const w = nodeViewMode === "card" ? 180 : 120;
-  const h = nodeViewMode === "card" ? 72 : 36;
+  const w =
+    nodeViewMode === "card" ? 180 : nodeViewMode === "topology" ? 88 : 120;
+  const h =
+    nodeViewMode === "card" ? 72 : nodeViewMode === "topology" ? 64 : 36;
   const ids = nodes
     .filter((n) => !n.deletedAt && n.id !== anchorId && positions[n.id])
     .map((n) => n.id);
@@ -770,11 +774,30 @@ export async function runTool(
         rawArgs.rootText != null && String(rawArgs.rootText).trim()
           ? String(rawArgs.rootText)
           : undefined;
-      const g = ctx.store.createCanvas(title, rootText);
+      const prefsArg =
+        rawArgs.prefs && typeof rawArgs.prefs === "object"
+          ? (rawArgs.prefs as Record<string, unknown>)
+          : undefined;
+      const viewParsed = NodeViewModeSchema.safeParse(
+        rawArgs.nodeViewMode ?? prefsArg?.nodeViewMode,
+      );
+      const g = ctx.store.createCanvas(
+        title,
+        rootText,
+        viewParsed.success ? { nodeViewMode: viewParsed.data } : undefined,
+      );
       return {
         ok: true,
-        canvas: { id: g.canvas.id, title: g.canvas.title, rev: g.canvas.rev },
-        hint: "Canvas is empty visually. Create top-level nodes with {type:'create_node', text:'...'} (omit parentId). Use parentId only when nesting under an existing visible node.",
+        canvas: {
+          id: g.canvas.id,
+          title: g.canvas.title,
+          rev: g.canvas.rev,
+          prefs: { nodeViewMode: g.canvas.prefs.nodeViewMode },
+        },
+        hint:
+          g.canvas.prefs.nodeViewMode === "topology"
+            ? "Topology canvas: create NE nodes with icon:'router'. Omit parentId for top-level. Prefer straight hierarchy/relation links."
+            : "Canvas is empty visually. Create top-level nodes with {type:'create_node', text:'...'} (omit parentId). Use parentId only when nesting under an existing visible node.",
       };
     }
 
@@ -1506,20 +1529,12 @@ export async function runTool(
           "edge_note",
           "all",
         ],
-        nodeIcons: [
-          "server",
-          "database",
-          "cloud",
-          "person",
-          "folder",
-          "doc",
-          "link",
-          "warning",
-          "check",
-          "star",
-          "gear",
-          "globe",
-        ],
+        nodeIcons: NodeIconSchema.options,
+        nodeViewModes: NodeViewModeSchema.options,
+        createCanvas: {
+          nodeViewMode:
+            "Optional on mindmap_create_canvas (canvas-global). Also changeable later via set_prefs.",
+        },
         edgeLineStyles: ["solid", "dashed", "dotted"],
         edgeDirections: ["forward", "both", "none"],
         getSubgraph: {
diff --git a/apps/web/public/topo/ne-router.png b/apps/web/public/topo/ne-router.png
new file mode 100644
index 0000000000000000000000000000000000000000..9d5ed53441d8a8de21ad75da823e7f69effede35
GIT binary patch
literal 7302
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

literal 0
HcmV?d00001

diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 1ff0455..7131e50 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -238,14 +238,23 @@ export function App() {
         </button>
         <button
           type="button"
-          onClick={() =>
-            void setPrefs({
-              nodeViewMode:
-                canvas?.prefs.nodeViewMode !== "bubble" ? "bubble" : "card",
-            })
-          }
+          onClick={() => {
+            const cur = canvas?.prefs.nodeViewMode ?? "card";
+            const next =
+              cur === "bubble"
+                ? "card"
+                : cur === "card"
+                  ? "topology"
+                  : "bubble";
+            void setPrefs({ nodeViewMode: next });
+          }}
         >
-          模式: {canvas?.prefs.nodeViewMode !== "bubble" ? "卡片" : "气泡"}
+          模式:{" "}
+          {canvas?.prefs.nodeViewMode === "bubble"
+            ? "气泡"
+            : canvas?.prefs.nodeViewMode === "topology"
+              ? "拓扑"
+              : "卡片"}
         </button>
         <button
           type="button"
diff --git a/apps/web/src/TopologyCanvas.tsx b/apps/web/src/TopologyCanvas.tsx
index fed9af9..2d024e7 100644
--- a/apps/web/src/TopologyCanvas.tsx
+++ b/apps/web/src/TopologyCanvas.tsx
@@ -21,6 +21,8 @@ import {
   drawNodeShape,
   nodeBadges,
   nodeBoxSize,
+  ROUTER_ICON_URL,
+  TOPO_ICON_PX,
   wrapTextLines,
 } from "./node-geometry";
 import { drawPropSheet, NodePropOverlay } from "./node-props";
@@ -179,13 +181,26 @@ export function TopologyCanvas() {
     return () => mq.removeEventListener?.("change", onScheme);
   }, []);
   const dens = canvas?.prefs.density === "compact";
-  const cardView = canvas?.prefs.nodeViewMode !== "bubble";
+  const viewMode = canvas?.prefs.nodeViewMode ?? "card";
+  const cardView = viewMode === "card";
+  const topoView = viewMode === "topology";
   const boxOf = useCallback(
-    (n: (typeof nodes)[number]) => nodeBoxSize(n, dens, { asCard: cardView }),
-    [dens, cardView],
+    (n: (typeof nodes)[number]) =>
+      nodeBoxSize(n, dens, { asCard: cardView, asTopology: topoView }),
+    [dens, cardView, topoView],
   );
   const nw = dens ? 160 : NODE_W;
 
+  const withRouterIcon = useCallback(
+    <T extends { type: string; icon?: string | null }>(op: T): T => {
+      if (!topoView) return op;
+      if (op.type !== "create_node") return op;
+      if (op.icon != null) return op;
+      return { ...op, icon: "router" };
+    },
+    [topoView],
+  );
+
   const branchColoring = canvas?.prefs.branchColoring !== false;
   const branchColor = useMemo(() => {
     const map = new Map<string, string>();
@@ -372,16 +387,38 @@ export function TopologyCanvas() {
       const toN = nodes.find((n) => n.id === e.to);
       const aw = fromN ? boxOf(fromN).w : nw;
       const bw = toN ? boxOf(toN).w : nw;
+      const ah = fromN ? boxOf(fromN).h : 40;
+      const bh = toN ? boxOf(toN).h : 40;
       ctx.beginPath();
-      const x1 = a.x + (b.x >= a.x ? aw / 2 : -aw / 2);
-      const y1 = a.y;
-      const x2 = b.x + (b.x >= a.x ? -bw / 2 : bw / 2);
-      const y2 = b.y;
-      const cx = (x1 + x2) / 2;
-      ctx.moveTo(x1, y1);
-      ctx.bezierCurveTo(cx, y1, cx, y2, x2, y2);
+      let x1: number;
+      let y1: number;
+      let x2: number;
+      let y2: number;
+      let cx: number;
+      if (topoView) {
+        // Straight links into router icon centers (edges draw under nodes)
+        const icon = dens ? TOPO_ICON_PX.compact : TOPO_ICON_PX.comfortable;
+        const pad = dens ? 4 : 6;
+        x1 = a.x;
+        y1 = a.y - ah / 2 + pad + icon / 2;
+        x2 = b.x;
+        y2 = b.y - bh / 2 + pad + icon / 2;
+        cx = (x1 + x2) / 2;
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x2, y2);
+      } else {
+        x1 = a.x + (b.x >= a.x ? aw / 2 : -aw / 2);
+        y1 = a.y;
+        x2 = b.x + (b.x >= a.x ? -bw / 2 : bw / 2);
+        y2 = b.y;
+        cx = (x1 + x2) / 2;
+        ctx.moveTo(x1, y1);
+        ctx.bezierCurveTo(cx, y1, cx, y2, x2, y2);
+      }
       const weight = Math.max(1, Math.min(5, e.weight ?? 1));
-      const style = e.lineStyle ?? (e.kind === "relation" ? "dashed" : "solid");
+      const style = topoView
+        ? (e.lineStyle ?? "solid")
+        : (e.lineStyle ?? (e.kind === "relation" ? "dashed" : "solid"));
       if (style === "dotted") {
         ctx.setLineDash([2 / viewport.zoom, 4 / viewport.zoom]);
       } else if (style === "dashed") {
@@ -392,30 +429,35 @@ export function TopologyCanvas() {
       const isEdgeFlash = highlightEdgeIds.includes(e.id);
       const flashEdgeColor = highlightStyle?.edgeColor ?? theme.brand;
       const flashEdgeWidth = highlightStyle?.edgeWidth ?? 3.6;
-      ctx.strokeStyle = isEdgeFlash
+      // Topology: uniform link blue (ignore branch palette)
+      const topoLinkColor = "#2563eb";
+      const edgeColor = isEdgeFlash
         ? flashEdgeColor
-        : e.kind === "relation"
-          ? theme.labelSecondary
-          : branchColor.get(e.to) ?? theme.brand;
+        : topoView
+          ? topoLinkColor
+          : e.kind === "relation"
+            ? theme.labelSecondary
+            : branchColor.get(e.to) ?? theme.brand;
+      ctx.strokeStyle = edgeColor;
       ctx.lineWidth =
         (isEdgeFlash
           ? flashEdgeWidth
-          : 1.2 + (weight - 1) * 0.7) / viewport.zoom;
+          : topoView
+            ? 1.8 + (weight - 1) * 0.5
+            : 1.2 + (weight - 1) * 0.7) / viewport.zoom;
       ctx.stroke();
       ctx.setLineDash([]);
       // Arrowheads: direction forward|both|none (relation default forward)
       const dir =
-        e.direction ?? (e.kind === "relation" ? "forward" : "none");
+        e.direction ??
+        (topoView ? "none" : e.kind === "relation" ? "forward" : "none");
       if (dir === "forward" || dir === "both") {
-        const arrowAng = Math.atan2(0, x2 - cx || (x2 >= a.x ? 1 : -1));
+        const arrowAng = topoView
+          ? Math.atan2(y2 - y1, x2 - x1)
+          : Math.atan2(0, x2 - cx || (x2 >= a.x ? 1 : -1));
         const size = 8 / viewport.zoom;
-        const fill = isEdgeFlash
-          ? flashEdgeColor
-          : e.kind === "relation"
-            ? theme.labelSecondary
-            : branchColor.get(e.to) ?? theme.brand;
         ctx.beginPath();
-        ctx.fillStyle = fill;
+        ctx.fillStyle = edgeColor;
         ctx.moveTo(x2, y2);
         ctx.lineTo(
           x2 - size * Math.cos(arrowAng - 0.45),
@@ -429,15 +471,12 @@ export function TopologyCanvas() {
         ctx.fill();
       }
       if (dir === "both") {
-        const arrowAng = Math.atan2(0, x1 - cx || (a.x >= b.x ? 1 : -1));
+        const arrowAng = topoView
+          ? Math.atan2(y1 - y2, x1 - x2)
+          : Math.atan2(0, x1 - cx || (a.x >= b.x ? 1 : -1));
         const size = 8 / viewport.zoom;
-        const fill = isEdgeFlash
-          ? flashEdgeColor
-          : e.kind === "relation"
-            ? theme.labelSecondary
-            : branchColor.get(e.to) ?? theme.brand;
         ctx.beginPath();
-        ctx.fillStyle = fill;
+        ctx.fillStyle = edgeColor;
         ctx.moveTo(x1, y1);
         ctx.lineTo(
           x1 - size * Math.cos(arrowAng - 0.45),
@@ -460,10 +499,19 @@ export function TopologyCanvas() {
     if (linkPreview) {
       const a = posOf(linkPreview.fromId);
       if (a) {
+        const fromN = nodes.find((n) => n.id === linkPreview.fromId);
+        const ah = fromN ? boxOf(fromN).h : 40;
+        let sx = a.x;
+        let sy = a.y;
+        if (topoView) {
+          const icon = dens ? TOPO_ICON_PX.compact : TOPO_ICON_PX.comfortable;
+          const pad = dens ? 4 : 6;
+          sy = a.y - ah / 2 + pad + icon / 2;
+        }
         ctx.beginPath();
         ctx.setLineDash([4 / viewport.zoom, 4 / viewport.zoom]);
-        ctx.strokeStyle = theme.brand;
-        ctx.moveTo(a.x, a.y);
+        ctx.strokeStyle = topoView ? "#2563eb" : theme.brand;
+        ctx.moveTo(sx, sy);
         ctx.lineTo(linkPreview.x, linkPreview.y);
         ctx.stroke();
         ctx.setLineDash([]);
@@ -489,6 +537,71 @@ export function TopologyCanvas() {
       const isForbidden = dropForbidden && isDrop;
 
       if (inGhost) ctx.globalAlpha = 0.7;
+
+      if (topoView) {
+        const icon = dens ? TOPO_ICON_PX.compact : TOPO_ICON_PX.comfortable;
+        const pad = dens ? 4 : 6;
+        const iconX = x + (boxW - icon) / 2;
+        const iconY = y + pad;
+        if (isFlash && highlightStyle?.nodeGlow !== false) {
+          ctx.shadowColor = flashNodeColor;
+          ctx.shadowBlur = 14 / viewport.zoom;
+        } else if (isSel || isHover) {
+          ctx.shadowColor = fill;
+          ctx.shadowBlur = 10 / viewport.zoom;
+        }
+        const img = getCachedImage(ROUTER_ICON_URL, () =>
+          setImageTick((t) => t + 1),
+        );
+        if (img && img.naturalWidth > 0) {
+          ctx.drawImage(img, iconX, iconY, icon, icon);
+        } else {
+          ctx.fillStyle = fill;
+          ctx.beginPath();
+          ctx.roundRect?.(iconX, iconY, icon, icon, 6);
+          if (!ctx.roundRect) {
+            ctx.rect(iconX, iconY, icon, icon);
+          }
+          ctx.fill();
+        }
+        clearShadow(ctx);
+        // Soft accent tint plate behind icon when selected/hover
+        if (isSel || isHover || isDrop || isFlash) {
+          ctx.strokeStyle = isForbidden
+            ? theme.warn
+            : isDrop || isFlash
+              ? theme.brand
+              : fill;
+          ctx.lineWidth = 1.6 / viewport.zoom;
+          ctx.beginPath();
+          const rr = 6;
+          ctx.moveTo(iconX + rr, iconY);
+          ctx.arcTo(iconX + icon, iconY, iconX + icon, iconY + icon, rr);
+          ctx.arcTo(iconX + icon, iconY + icon, iconX, iconY + icon, rr);
+          ctx.arcTo(iconX, iconY + icon, iconX, iconY, rr);
+          ctx.arcTo(iconX, iconY, iconX + icon, iconY, rr);
+          ctx.closePath();
+          ctx.stroke();
+        }
+        ctx.fillStyle = theme.labelPrimary;
+        ctx.font = canvasFont(dens ? 11 : 12, 600);
+        ctx.textAlign = "center";
+        ctx.textBaseline = "top";
+        const captionY = iconY + icon + 4;
+        const lines = wrapTextLines(
+          ctx,
+          n.text || U.unnamed,
+          boxW - 4,
+          dens ? 1 : 2,
+        );
+        lines.forEach((line, i) => {
+          ctx.fillText(line, x + boxW / 2, captionY + i * (dens ? 13 : 14));
+        });
+        ctx.textAlign = "left";
+        ctx.globalAlpha = inGhost ? 0.7 : 1;
+        continue;
+      }
+
       if (isFlash && highlightStyle?.nodeGlow !== false) {
         ctx.shadowColor = flashNodeColor;
         ctx.shadowBlur = 14 / viewport.zoom;
@@ -725,6 +838,7 @@ export function TopologyCanvas() {
     nw,
     dens,
     cardView,
+    topoView,
     boxOf,
     canvas?.prefs.showRelationEdges,
     canvas?.prefs.nodeBadges,
@@ -869,31 +983,33 @@ export function TopologyCanvas() {
         e.preventDefault();
         const parent = selectedIds[0];
         void applyOps([
-          parent
-            ? { type: "create_node", text: U.newNode, parentId: parent }
-            : { type: "create_node", text: U.newNode },
+          withRouterIcon(
+            parent
+              ? { type: "create_node", text: U.newNode, parentId: parent }
+              : { type: "create_node", text: U.newNode },
+          ),
         ]);
       }
       if (e.key === "ArrowLeft" && selectedIds[0] && !editing) {
         e.preventDefault();
         void applyOps([
-          {
+          withRouterIcon({
             type: "create_node",
             text: U.leftChild,
             parentId: selectedIds[0],
             sidePref: -1,
-          },
+          }),
         ]);
       }
       if (e.key === "ArrowRight" && selectedIds[0] && !editing) {
         e.preventDefault();
         void applyOps([
-          {
+          withRouterIcon({
             type: "create_node",
             text: U.rightChild,
             parentId: selectedIds[0],
             sidePref: 1,
-          },
+          }),
         ]);
       }
       if ((e.key === "Delete" || e.key === "Backspace") && !editing) {
@@ -912,13 +1028,15 @@ export function TopologyCanvas() {
               x.to === selectedIds[0],
           )?.from ?? null;
         void applyOps([
-          parentOfSel
-            ? {
-                type: "create_node",
-                text: U.sibling,
-                parentId: parentOfSel,
-              }
-            : { type: "create_node", text: U.newNode },
+          withRouterIcon(
+            parentOfSel
+              ? {
+                  type: "create_node",
+                  text: U.sibling,
+                  parentId: parentOfSel,
+                }
+              : { type: "create_node", text: U.newNode },
+          ),
         ]);
       }
     };
@@ -943,6 +1061,7 @@ export function TopologyCanvas() {
     setZoomAroundCenter,
     viewport.zoom,
     U,
+    withRouterIcon,
   ]);
 
   const cursor =
@@ -1219,12 +1338,12 @@ export function TopologyCanvas() {
           });
         } else if (toolMode === "select") {
           void applyOps([
-            {
+            withRouterIcon({
               type: "create_node",
               text: U.newNode,
               ...(selectedIds[0] ? { parentId: selectedIds[0] } : {}),
               sidePref: world.x < 0 ? -1 : 1,
-            },
+            }),
           ]);
         }
       }}
@@ -1297,12 +1416,12 @@ export function TopologyCanvas() {
         <div className="canvas-toolbar__group">
           <button
             type="button"
-            className={`canvas-tool-btn${cardView ? "" : " is-active"}`}
+            className={`canvas-tool-btn${viewMode === "bubble" ? " is-active" : ""}`}
             title={U.bubbleTitle}
-            aria-pressed={!cardView}
+            aria-pressed={viewMode === "bubble"}
             disabled={locked}
             onClick={() => {
-              if (!cardView) return;
+              if (viewMode === "bubble") return;
               void setPrefs({ nodeViewMode: "bubble" });
             }}
           >
@@ -1310,17 +1429,30 @@ export function TopologyCanvas() {
           </button>
           <button
             type="button"
-            className={`canvas-tool-btn${cardView ? " is-active" : ""}`}
+            className={`canvas-tool-btn${viewMode === "card" ? " is-active" : ""}`}
             title={U.cardTitle}
-            aria-pressed={cardView}
+            aria-pressed={viewMode === "card"}
             disabled={locked}
             onClick={() => {
-              if (cardView) return;
+              if (viewMode === "card") return;
               void setPrefs({ nodeViewMode: "card" });
             }}
           >
             {U.card}
           </button>
+          <button
+            type="button"
+            className={`canvas-tool-btn${viewMode === "topology" ? " is-active" : ""}`}
+            title={U.topologyTitle}
+            aria-pressed={viewMode === "topology"}
+            disabled={locked}
+            onClick={() => {
+              if (viewMode === "topology") return;
+              void setPrefs({ nodeViewMode: "topology" });
+            }}
+          >
+            {U.topology}
+          </button>
           <button
             type="button"
             className="canvas-tool-btn"
@@ -1472,7 +1604,7 @@ export function TopologyCanvas() {
             const text = side < 0 ? U.leftChild : U.rightChild;
             const childW = dens ? 160 : 200;
             void applyOps([
-              {
+              withRouterIcon({
                 type: "create_node",
                 text,
                 parentId: id,
@@ -1481,7 +1613,7 @@ export function TopologyCanvas() {
                   x: p.x + side * (boxW / 2 + childW / 2 + edgeGap),
                   y: p.y,
                 },
-              },
+              }),
             ]);
           };
           return (
diff --git a/apps/web/src/canvas-ui-text.ts b/apps/web/src/canvas-ui-text.ts
index cdc2c2f..8df257f 100644
--- a/apps/web/src/canvas-ui-text.ts
+++ b/apps/web/src/canvas-ui-text.ts
@@ -25,8 +25,10 @@ export type CanvasUi = {
   dragBranchTitle: string;
   bubble: string;
   card: string;
+  topology: string;
   bubbleTitle: string;
   cardTitle: string;
+  topologyTitle: string;
   unpin: string;
   unpinTitle: string;
   undo: string;
@@ -69,8 +71,10 @@ const zh: CanvasUi = {
   dragBranchTitle: "整枝拖拽：节点与子孙一起移动 (B)",
   bubble: "气泡",
   card: "卡片",
+  topology: "拓扑",
   bubbleTitle: "气泡视图：精简标题",
   cardTitle: "卡片视图：展开属性面板",
+  topologyTitle: "拓扑视图：路由器图标 + 链路",
   unpin: "解钉",
   unpinTitle: "取消钉住：让选中节点重新参与自动布局",
   undo: "撤销",
@@ -113,8 +117,10 @@ const en: CanvasUi = {
   dragBranchTitle: "Move node with descendants (B)",
   bubble: "Bubble",
   card: "Card",
+  topology: "Topology",
   bubbleTitle: "Bubble view: title only",
   cardTitle: "Card view: property sheet",
+  topologyTitle: "Topology view: router icons + links",
   unpin: "Unpin",
   unpinTitle: "Unpin selected node for auto layout",
   undo: "Undo",
diff --git a/apps/web/src/node-geometry.ts b/apps/web/src/node-geometry.ts
index 504cb7c..96c6fa7 100644
--- a/apps/web/src/node-geometry.ts
+++ b/apps/web/src/node-geometry.ts
@@ -1,12 +1,25 @@
 import type { MindNode, StylePreset } from "@mind-map/shared";
 import { estimateCardSize } from "./node-props/sizing";
 
+export const TOPO_ICON_PX = { comfortable: 36, compact: 30 } as const;
+export const ROUTER_ICON_URL = "/topo/ne-router.png";
+
 /** Keep roughly in sync with layout-engine nodeLayoutSize (comfortable / compact). */
 export function nodeBoxSize(
   n: MindNode,
   dens: boolean,
-  opts?: { asCard?: boolean },
+  opts?: { asCard?: boolean; asTopology?: boolean },
 ): { w: number; h: number } {
+  if (opts?.asTopology) {
+    const icon = dens ? TOPO_ICON_PX.compact : TOPO_ICON_PX.comfortable;
+    const caption = dens ? 18 : 20;
+    const gap = 6;
+    const pad = dens ? 6 : 8;
+    return {
+      w: Math.max(dens ? 72 : 88, icon + pad * 2),
+      h: icon + gap + caption + pad,
+    };
+  }
   if (opts?.asCard || n.stylePreset === "card") {
     return estimateCardSize(n, dens);
   }
@@ -177,4 +190,5 @@ const ICON_GLYPH: Record<string, string> = {
   star: "[★]",
   gear: "[设]",
   globe: "[球]",
+  router: "[路]",
 };
diff --git a/apps/web/src/node-props/NodePropEditor.tsx b/apps/web/src/node-props/NodePropEditor.tsx
index 7e32e0c..6fbce70 100644
--- a/apps/web/src/node-props/NodePropEditor.tsx
+++ b/apps/web/src/node-props/NodePropEditor.tsx
@@ -261,6 +261,7 @@ export function NodePropEditor({
                   }}
                 >
                   <option value="">无</option>
+                  <option value="router">路由器</option>
                   <option value="server">🖥 服务器</option>
                   <option value="database">🗄 数据库</option>
                   <option value="cloud">☁ 云</option>
diff --git a/packages/dsh-plugin/lib/tools.js b/packages/dsh-plugin/lib/tools.js
index 8020260..6ce5353 100644
--- a/packages/dsh-plugin/lib/tools.js
+++ b/packages/dsh-plugin/lib/tools.js
@@ -139,7 +139,7 @@ export function mindmapToolDefinitions(getBase, getCanvasIdForSession, setActive
     {
       name: 'mindmap_create_canvas',
       description:
-        'Create a brand-new mind-map canvas (new id; does NOT overwrite existing canvases), bind it to this chat session, and open it in the 思维导图 tab. Canvas starts visually empty. Top-level nodes: omit parentId.',
+        'Create a brand-new mind-map canvas (new id; does NOT overwrite existing canvases), bind it to this chat session, and open it in the 思维导图 tab. Canvas starts visually empty. Top-level nodes: omit parentId. Optional nodeViewMode (bubble|card|topology) is a canvas-global preference (can also be changed later via set_prefs).',
       parameters: {
         type: 'object',
         additionalProperties: false,
@@ -150,6 +150,12 @@ export function mindmapToolDefinitions(getBase, getCanvasIdForSession, setActive
             description:
               'Optional internal label / title sync only — there is no visible root node. Prefer title alone.',
           },
+          nodeViewMode: {
+            type: 'string',
+            enum: ['bubble', 'card', 'topology'],
+            description:
+              'Canvas-global chrome (bubble|card|topology). Prefer setting when creating a topology map; default card. topology = router icons + straight blue links.',
+          },
         },
       },
       output: { schema: OBJECT, render: (_a, v) => jsonText(v) },
@@ -636,6 +642,7 @@ There is NO visible root node. Canvas title is metadata only. Internally top-lev
 
 When the user asks to build a map (e.g. 「输出红楼梦人物关系图」):
 1. mindmap_create_canvas({ title: "红楼梦人物关系" }) — ALWAYS creates a NEW canvas id (never overwrites an old one). Opens the right tab on that new canvas.
+   Topology diagrams: mindmap_create_canvas({ title: "…拓扑", nodeViewMode: "topology" }) then nodes with icon:"router".
 2. mindmap_get_spatial_context — orient on the NEW empty canvas
 3. mindmap_apply_direct({ ops: [ {type:"batch_create", nodes:[...]}, {type:"auto_fit"} ] })
 4. Keep adding in small batches; never dump a full tree JSON overwrite
diff --git a/packages/graph-core/src/index.ts b/packages/graph-core/src/index.ts
index 66e0db3..9e11989 100644
--- a/packages/graph-core/src/index.ts
+++ b/packages/graph-core/src/index.ts
@@ -123,6 +123,7 @@ function promoteChildrenOnDelete(g: MutableGraph, nodeId: string): Op[] {
 export function createEmptyGraph(
   title = "未命名画布",
   rootText?: string,
+  prefsOverride?: Partial<CanvasPrefs>,
 ): MutableGraph {
   const canvasId = newId("c");
   const nodeId = newId("n");
@@ -137,6 +138,7 @@ export function createEmptyGraph(
     showHoverCard: true,
     inspectorMode: "selection",
     nodeViewMode: "card",
+    ...prefsOverride,
   };
   const canvas: CanvasMeta = {
     id: canvasId,
diff --git a/packages/graph-store/src/index.ts b/packages/graph-store/src/index.ts
index 8fc8360..8f0f962 100644
--- a/packages/graph-store/src/index.ts
+++ b/packages/graph-store/src/index.ts
@@ -276,8 +276,12 @@ CREATE INDEX IF NOT EXISTS idx_snapshots_canvas ON snapshots(canvas_id);
     };
   }
 
-  createCanvas(title?: string, rootText?: string): MutableGraph {
-    const g = createEmptyGraph(title ?? "未命名画布", rootText);
+  createCanvas(
+    title?: string,
+    rootText?: string,
+    prefsOverride?: Partial<CanvasMeta["prefs"]>,
+  ): MutableGraph {
+    const g = createEmptyGraph(title ?? "未命名画布", rootText, prefsOverride);
     this.persistGraph(g, true);
     this.cache.set(g.canvas.id, g);
     return g;
diff --git a/packages/layout-engine/src/index.ts b/packages/layout-engine/src/index.ts
index 9b5a612..a7ff86b 100644
--- a/packages/layout-engine/src/index.ts
+++ b/packages/layout-engine/src/index.ts
@@ -12,7 +12,7 @@ export type LayoutInput = {
   edges: MindEdge[];
   focusNodeId: string;
   density?: Density;
-  /** Canvas-wide bubble vs card chrome (affects box sizes). */
+  /** Canvas-wide bubble vs card vs topology chrome (affects box sizes). */
   nodeViewMode?: NodeViewMode;
   /** Previous frame positions — reused when hierarchy structure is unchanged. */
   prevPositions?: PositionMap;
@@ -52,8 +52,18 @@ export function nodeLayoutSize(
     | "pinned"
   >,
   dens: Dens,
-  opts?: { asCard?: boolean },
+  opts?: { asCard?: boolean; asTopology?: boolean },
 ): { w: number; h: number } {
+  if (opts?.asTopology) {
+    const icon = dens.nodeW >= 200 ? 36 : 30;
+    const caption = dens.nodeW >= 200 ? 20 : 18;
+    const gap = 6;
+    const pad = dens.nodeW >= 200 ? 8 : 6;
+    return {
+      w: Math.max(dens.nodeW >= 200 ? 88 : 72, icon + pad * 2),
+      h: icon + gap + caption + pad,
+    };
+  }
   let w = dens.nodeW;
   let h = dens.nodeH;
   // meta strip (badges / tags / due)
@@ -248,7 +258,7 @@ function buildSubtree(
   children: Map<string, string[]>,
   dens: Dens,
   path: Set<string>,
-  asCard: boolean,
+  sizeOpts: { asCard?: boolean; asTopology?: boolean },
   childFilter?: (childId: string) => boolean,
 ): FlexDatum | null {
   if (path.has(id)) return null;
@@ -266,12 +276,12 @@ function buildSubtree(
         children,
         dens,
         nextPath,
-        asCard,
+        sizeOpts,
       );
       if (child) kids.push(child);
     }
   }
-  const box = nodeLayoutSize(node, dens, { asCard });
+  const box = nodeLayoutSize(node, dens, sizeOpts);
   return {
     id,
     // flextree size = full box + gutters (claim real space, not a rigid grid cell)
@@ -397,6 +407,7 @@ export function hierarchyFingerprint(edges: MindEdge[]): string {
 export function layout(input: LayoutInput): PositionMap {
   const dens = DENSITY[input.density ?? "comfortable"];
   const asCard = input.nodeViewMode === "card";
+  const asTopology = input.nodeViewMode === "topology";
   const nodesById = new Map(input.nodes.map((n) => [n.id, n]));
   if (!nodesById.has(input.focusNodeId)) return {};
 
@@ -407,7 +418,7 @@ export function layout(input: LayoutInput): PositionMap {
   const sizes = new Map<string, { w: number; h: number }>();
   for (const n of input.nodes) {
     if (n.deletedAt || hidden.has(n.id)) continue;
-    sizes.set(n.id, nodeLayoutSize(n, dens, { asCard }));
+    sizes.set(n.id, nodeLayoutSize(n, dens, { asCard, asTopology }));
   }
 
   const prev = input.prevPositions;
@@ -501,7 +512,7 @@ export function layout(input: LayoutInput): PositionMap {
       children,
       dens,
       new Set(),
-      asCard,
+      { asCard, asTopology },
       (childId) => sideOf.get(childId) === side,
     );
     if (!tree?.children?.length) continue;
diff --git a/packages/shared/src/ops.ts b/packages/shared/src/ops.ts
index f5ac4ad..12fea79 100644
--- a/packages/shared/src/ops.ts
+++ b/packages/shared/src/ops.ts
@@ -342,6 +342,12 @@ export const OP_SCHEMA_DOC = {
       ],
       _comment: "Bulk relation/hierarchy links (max 100). Prefer after nodes exist.",
     },
+    {
+      type: "create_node",
+      text: "核心交换机",
+      alias: "core_sw",
+      icon: "router",
+    },
     {
       type: "create_node",
       text: "AIOps诊断",
@@ -494,9 +500,11 @@ export const OP_SCHEMA_DOC = {
     restore_node:
       "Soft-deleted nodes keep their id. Pass that id (or deleted @alias / unique title). Restores compatible incident edges; children already promoted stay under the new parent.",
     create_node:
-      "Omit parentId for top-level. Optional pos pins immediately. Optional alias. Optional relations[] for outgoing graph edges (not URL links). Optional description object.",
+      "Omit parentId for top-level. Optional pos pins immediately. Optional alias. Optional icon (server|database|cloud|person|folder|doc|link|warning|check|star|gear|globe|router). Optional relations[] for outgoing graph edges (not URL links). Optional description object.",
     update_node_meta:
-      "Patch note/description/tags/links/imageUrl/dueAt/startAt/accentColor/icon/alias. description is a JSON object (knowledge fields). Null clears scalar fields. links = URL bookmarks.",
+      "Patch note/description/tags/links/imageUrl/dueAt/startAt/accentColor/icon/alias. icon enum same as create_node. description is a JSON object (knowledge fields). Null clears scalar fields. links = URL bookmarks.",
+    set_prefs:
+      "Partial canvas prefs: density, branchColoring, nodeViewMode (bubble|card|topology; canvas-global), showHoverCard, nodeBadges, showRelationEdges, riskProfile, themeId, inspectorMode.",
     update_edge_meta:
       "Patch label/tags/note/weight(1-5)/lineStyle(solid|dashed|dotted)/direction(forward|both|none) on an edge.",
     set_edge_label: "Need edgeId from spatial_context.edges or get_subgraph.",
diff --git a/packages/shared/src/types.ts b/packages/shared/src/types.ts
index 1c8b71a..14c827f 100644
--- a/packages/shared/src/types.ts
+++ b/packages/shared/src/types.ts
@@ -29,8 +29,8 @@ export type NodeBadges = z.infer<typeof NodeBadgesSchema>;
 export const InspectorModeSchema = z.enum(["selection", "always"]);
 export type InspectorMode = z.infer<typeof InspectorModeSchema>;
 
-/** Whole-canvas node chrome: bubble titles vs property cards. */
-export const NodeViewModeSchema = z.enum(["bubble", "card"]);
+/** Whole-canvas node chrome: bubble titles vs property cards vs topology icons. */
+export const NodeViewModeSchema = z.enum(["bubble", "card", "topology"]);
 export type NodeViewMode = z.infer<typeof NodeViewModeSchema>;
 
 /** Controlled node icon set (agent/UI). */
@@ -47,6 +47,7 @@ export const NodeIconSchema = z.enum([
   "star",
   "gear",
   "globe",
+  "router",
 ]);
 export type NodeIcon = z.infer<typeof NodeIconSchema>;