feat(diagram): 流程图竖排改造（横→竖）——布局单源坐标转置+名单2行换行+边几何/箭头/标签翻转，golden 用例改写并新增 6 出口用例

src/main/java/com/yunhai/flowcenter/service/DiagramImageService.java

@@ -29,9 +29,10 @@ import java.util.Map;
  * 而 img 标签带不了 app-sign 请求头，因此《流程中心流程图查看方案.md》§二"不做服务端出图"的
  * 边界对外场景作废——本类在服务端把布局 JSON 画成 PNG；前端手绘 SVG 方案仅流程中心自有页面继续用。
  * <p>
- * 布局（2026-09-17 重构，与前端 flowLayout 同口径）：自左向右拓扑分层（最长路径），并行分支组以
- * SPLIT 中心线为轴垂直居中（SPLIT↔JOIN 配对按各出边可达集求交、取 BFS 序最早的 JOIN），忽略设计器
- * 画布坐标（那是全屏编辑器坐标系，直接缩放会失真）；连线为正交折线（右中→中线→左中）。
+ * 布局（2026-09-17 重构，与前端 flowLayout 同口径；2026-10-09 竖排）：自上向下拓扑分层（最长路径），
+ * 并行分支组以 SPLIT 竖直中线为轴左右居中（SPLIT↔JOIN 配对按各出边可达集求交、取 BFS 序最早的 JOIN），
+ * 忽略设计器画布坐标（那是全屏编辑器坐标系，直接缩放会失真）；连线为正交折线（底中→中线→顶中）。
+ * 名单（subLabel）按盒宽换行 ≤2 行，放不下以"…等 N 人"收尾（与前端 SVG 同口径）。
  * 配色与前端示意图一致（蓝审批卡/绿开始/灰结束/橙菱形），节点颜色按运行时状态
  * done/active/rejected/pending 上色，图例仅 instance 口径绘制。
  * 防御出图：环/孤儿节点/缺失端点均降级为"必出图"，不抛渲染异常（外部 img 场景无错误页可跳）。
@@ -140,7 +141,7 @@ public class DiagramImageService {
         FontMetrics titleFm = g.getFontMetrics();
         g.drawString(title, (imgW - titleFm.stringWidth(title)) / 2f, MARGIN + titleFont.getSize() + 2);
 
-        // 连线（先画线后画节点，节点底色盖住线头）：正交折线 右中→中线→左中
+        // 连线（先画线后画节点，节点底色盖住线头）：正交折线 底中→竖直段→水平折→顶中
         Map<String, Map<String, String>> edgeNames = new HashMap<>();
         for (FlowModels.EdgeVo e : edges) {
             edgeNames.computeIfAbsent(e.getFrom(), k -> new HashMap<>()).put(e.getTo(), e.getName());
@@ -152,19 +153,20 @@ public class DiagramImageService {
             if (from == null || to == null) {
                 continue;
             }
-            int x1 = from[0] + from[2];
-            int y1 = from[1] + from[3] / 2;
-            int x2 = to[0];
-            int y2 = to[1] + to[3] / 2;
-            int mid = (x1 + x2) / 2;
+            int x1 = from[0] + from[2] / 2;
+            int y1 = from[1] + from[3];
+            int x2 = to[0] + to[2] / 2;
+            int y2 = to[1];
+            int mid = (y1 + y2) / 2;
             g.setColor(C_LINE);
-            g.drawLine(x1, y1, mid, y1);
-            g.drawLine(mid, y1, mid, y2);
-            g.drawLine(mid, y2, x2 - ARROW, y2);
-            drawArrowHead(g, x2 - ARROW, y2);
-            // 多出口分支文案：折线竖段中点白底小字（单出口连线不标，避免噪音）
+            g.drawLine(x1, y1, x1, mid);
+            g.drawLine(x1, mid, x2, mid);
+            g.drawLine(x2, mid, x2, y2 - ARROW);
+            drawArrowHead(g, x2, y2 - ARROW);
+            // 多出口分支文案：折线水平段中点白底小字（单出口连线不标，避免噪音）。
+            // 同源多出口共享下方竖直段，标签挂各自折线中点（(x1+x2)/2）才不会互相叠字。
             if (edgeNames.get(e.getFrom()).size() > 1 && e.getName() != null && !e.getName().isEmpty()) {
-                drawMidLabel(g, mid, (y1 + y2) / 2, e.getName(), smallFont);
+                drawMidLabel(g, (x1 + x2) / 2, mid, e.getName(), smallFont);
             }
         }
 
@@ -254,41 +256,43 @@ public class DiagramImageService {
             return;
         }
         if (FlowDefModel.TYPE_NOTIFY.equals(type)) {
-            // 抄送：圆角卡（青框白底，label + 单行 subLabel）——瞬时节点不占 active 红，
-            // 状态着色与审批一致（done 绿框表示本办件已抄送过）
+            // 抄送：圆角卡（青框白底）——瞬时节点不占 active 红，
+            // 状态着色与审批一致（done 绿框表示本办件已抄送过）；标题 + ≤2 行名单（仅标题取青色）
             g.setColor(C_NOTIFY_FILL);
             g.fillRoundRect(p[0], p[1], p[2], p[3], 12, 12);
             g.setColor(borderOf(n));
             g.setStroke(new BasicStroke("active".equals(n.getState()) ? 2.4f : 1.6f));
             g.drawRoundRect(p[0], p[1], p[2], p[3], 12, 12);
-            g.setFont(labelF);
-            g.setColor(C_NOTIFY_BORDER);
-            String label = truncate(g, n.getLabel(), p[2] - 20);
-            g.drawString(label, p[0] + (p[2] - g.getFontMetrics().stringWidth(label)) / 2f, p[1] + 26);
-            if (n.getSubLabel() != null && !n.getSubLabel().isEmpty()) {
-                g.setFont(subF);
-                g.setColor(C_SUB);
-                String sub = truncate(g, n.getSubLabel(), p[2] - 20);
-                g.drawString(sub, p[0] + (p[2] - g.getFontMetrics().stringWidth(sub)) / 2f, p[1] + 46);
-            }
+            drawNameCardText(g, n, p, labelF, subF, C_NOTIFY_BORDER);
             return;
         }
-        // 审批：圆角卡（默认蓝框；done 绿/active 红/pending 灰/rejected 红底），label + 单行 subLabel
+        // 审批：圆角卡（默认蓝框；done 绿/active 红/pending 灰/rejected 红底），标题 + ≤2 行名单
         g.setColor("rejected".equals(n.getState()) ? C_REJECT_FILL : Color.WHITE);
         g.fillRoundRect(p[0], p[1], p[2], p[3], 12, 12);
         boolean active = "active".equals(n.getState());
         g.setColor(borderOf(n));
         g.setStroke(new BasicStroke(active ? 2.4f : 1.6f));
         g.drawRoundRect(p[0], p[1], p[2], p[3], 12, 12);
+        drawNameCardText(g, n, p, labelF, subF, C_TEXT);
+    }
+
+    /**
+     * 名单卡文本（76 高盒竖排口径）：标题 1 行居中 + 名单 ≤2 行居中（换行规则见 {@link #wrapNameList}）；
+     * 名单 2 行时标题基线 25、名单基线 44/61，单行名单时 27/50（视觉居中微调，与前端 SVG 同口径）。
+     */
+    private void drawNameCardText(Graphics2D g, FlowModels.NodeVo n, int[] p, Font labelF, Font subF, Color labelColor) {
+        String[] lines = wrapNameList(g.getFontMetrics(subF), n.getSubLabel(), p[2] - 20);
         g.setFont(labelF);
-        g.setColor(C_TEXT);
+        g.setColor(labelColor);
         String label = truncate(g, n.getLabel(), p[2] - 20);
-        g.drawString(label, p[0] + (p[2] - g.getFontMetrics().stringWidth(label)) / 2f, p[1] + 26);
-        if (n.getSubLabel() != null && !n.getSubLabel().isEmpty()) {
-            g.setFont(subF);
-            g.setColor(C_SUB);
-            String sub = truncate(g, n.getSubLabel(), p[2] - 20);
-            g.drawString(sub, p[0] + (p[2] - g.getFontMetrics().stringWidth(sub)) / 2f, p[1] + 46);
+        g.drawString(label, p[0] + (p[2] - g.getFontMetrics().stringWidth(label)) / 2f,
+                p[1] + (lines.length >= 2 ? 25 : 27));
+        g.setFont(subF);
+        g.setColor(C_SUB);
+        int[] subBases = lines.length >= 2 ? new int[]{44, 61} : new int[]{50};
+        for (int i = 0; i < lines.length; i++) {
+            g.drawString(lines[i], p[0] + (p[2] - g.getFontMetrics().stringWidth(lines[i])) / 2f,
+                    p[1] + subBases[i]);
         }
     }
 
@@ -302,12 +306,12 @@ public class DiagramImageService {
         g.drawString(s, midX - sw / 2f, midY + fm.getAscent() / 2f - 1);
     }
 
-    /** 箭头指向 +x（分层自左向右，目标恒在右侧） */
+    /** 箭头指向 +y（分层自上向下，目标恒在下方） */
     private void drawArrowHead(Graphics2D g, int x, int y) {
         Path2D p = new Path2D.Float();
-        p.moveTo(x + ARROW, y);
-        p.lineTo(x, y - ARROW / 2.0 + 1);
-        p.lineTo(x, y + ARROW / 2.0 - 1);
+        p.moveTo(x, y + ARROW);
+        p.lineTo(x - ARROW / 2.0 + 1, y);
+        p.lineTo(x + ARROW / 2.0 - 1, y);
         p.closePath();
         g.setColor(C_LINE);
         g.fill(p);
@@ -420,10 +424,13 @@ public class DiagramImageService {
     }
 
     private static String truncate(Graphics2D g, String s, int width) {
+        return truncate(g.getFontMetrics(), s, width);
+    }
+
+    private static String truncate(FontMetrics fm, String s, int width) {
         if (s == null || s.isEmpty()) {
             return "";
         }
-        FontMetrics fm = g.getFontMetrics();
         if (fm.stringWidth(s) <= width) {
             return s;
         }
@@ -432,4 +439,69 @@ public class DiagramImageService {
         }
         return s + "…";
     }
+
+    /**
+     * 名单换行（≤2 行，竖排名单卡口径，与前端 FlowDiagram.vue 同规则）：按「、」整名装箱换行
+     * （「 · 」后缀语随最后一名同行，整名超宽时按字截断防御）；全量放得下原样分行；放不下时
+     * 两行装满后以「…等 N 人」收尾（N=未展示人数，第 2 行预留尾缀宽度）。
+     */
+    static String[] wrapNameList(FontMetrics fm, String s, int width) {
+        if (s == null || s.isEmpty()) {
+            return new String[0];
+        }
+        String[] people = s.split("、", -1);
+        // 全量贪心装箱（行数不限）：先判断是否真的放得下
+        List<String> packed = new ArrayList<>();
+        StringBuilder cur = new StringBuilder();
+        for (String raw : people) {
+            String p = fm.stringWidth(raw) > width ? truncate(fm, raw, width) : raw;
+            String cand = cur.length() == 0 ? p : cur + "、" + p;
+            if (fm.stringWidth(cand) <= width) {
+                cur.setLength(0);
+                cur.append(cand);
+            } else {
+                packed.add(cur.toString());
+                cur = new StringBuilder(p);
+            }
+        }
+        packed.add(cur.toString());
+        if (packed.size() <= 2) {
+            return packed.toArray(new String[0]);
+        }
+        // 放不下：两行装满 + 「…等 N 人」尾缀（第 2 行装箱时预留尾缀宽度）
+        int n = people.length;
+        StringBuilder l1 = new StringBuilder();
+        int shown = 0;
+        while (shown < n) {
+            String p = fm.stringWidth(people[shown]) > width ? truncate(fm, people[shown], width) : people[shown];
+            String cand = l1.length() == 0 ? p : l1 + "、" + p;
+            if (fm.stringWidth(cand) <= width) {
+                l1.setLength(0);
+                l1.append(cand);
+                shown++;
+            } else {
+                break;
+            }
+        }
+        StringBuilder l2 = new StringBuilder();
+        while (shown < n) {
+            int restAfter = n - shown - 1;
+            String tail = restAfter > 0 ? "…等 " + restAfter + " 人" : "";
+            String p = fm.stringWidth(people[shown]) > width ? truncate(fm, people[shown], width) : people[shown];
+            String cand = l2.length() == 0 ? p : l2 + "、" + p;
+            if (fm.stringWidth(cand) + (tail.isEmpty() ? 0 : fm.stringWidth(tail)) <= width) {
+                l2.setLength(0);
+                l2.append(cand);
+                shown++;
+            } else {
+                break;
+            }
+        }
+        int rest = n - shown;
+        if (l2.length() == 0) {
+            // 第 2 行连一名+尾缀都放不下：整行只展示尾缀（人数语义完整优先于名单）
+            return new String[]{l1.toString(), "…等 " + rest + " 人"};
+        }
+        return new String[]{l1.toString(), l2.append(rest > 0 ? "…等 " + rest + " 人" : "").toString()};
+    }
 }

src/main/java/com/yunhai/flowcenter/service/DiagramLayoutService.java

@@ -11,20 +11,22 @@ import java.util.List;
 import java.util.Map;
 
 /**
- * 流程图布局单源（2026-10-03 三视图统一）：自 DiagramImageService 原样搬移（算法与常量不变，
- * PNG 出图逐像素不变）。拓扑最长路径分层（层=列，自左向右），并行分支组以 SPLIT 中心线为轴
- * 垂直居中（SPLIT↔JOIN 配对按各出边可达集求交、取 BFS 序最早的 JOIN）；输出内容区坐标
- * （minX/minY 已归零），PNG 渲染与 DiagramVo.positions 共同消费——改布局只改这里。
+ * 流程图布局单源（2026-10-03 三视图统一；2026-10-09 竖排改造）：拓扑最长路径分层
+ * （层=行，自上向下），层内按定义顺序横排、整层块对竖直中线水平居中；并行分支组以
+ * SPLIT 竖直中线为轴左右对称展开（SPLIT↔JOIN 配对按各出边可达集求交、取 BFS 序最早的
+ * JOIN）；输出内容区坐标（minX/minY 已归零），PNG 渲染与 DiagramVo.positions 共同消费——
+ * 改布局只改这里。
  */
 @Service
 public class DiagramLayoutService {
 
-    /** 逻辑坐标常量（盒型在槽内居中；列间距留给正交折线走线） */
-    static final int SLOT_W = 210;   // 列槽宽（盒型在槽内水平居中）
-    static final int GAP_X = 84;     // 列间距（留给正交折线走线）
-    static final int ROW_H = 92;     // 行槽高（盒型在槽内垂直居中）
+    /** 逻辑坐标常量（盒型在槽内居中；层间距留给竖直走线与多出口文案，分支列间无需走线空间） */
+    static final int SLOT_H = 100;   // 层槽高（盒型在槽内垂直居中）
+    static final int GAP_Y = 56;     // 层间距（竖直段 + 多出口文案空间）
+    static final int SLOT_W = 280;   // 分支槽宽（盒型在槽内水平居中）
+    static final int GAP_X = 44;     // 分支列间距
 
-    /** 各类型盒型（w,h）：开始/结束胶囊、审批圆角卡、并行/条件菱形（取外接矩形） */
+    /** 各类型盒型（w,h）：开始/结束胶囊、审批圆角卡（名单 2 行）、并行/条件菱形（取外接矩形） */
     static int[] boxOf(String type) {
         switch (type == null ? "" : type) {
             case FlowDefModel.TYPE_START:
@@ -35,7 +37,7 @@ public class DiagramLayoutService {
             case FlowDefModel.TYPE_CONDITION:
                 return new int[]{132, 78};
             default:
-                return new int[]{200, 64};
+                return new int[]{264, 76};
         }
     }
 
@@ -56,7 +58,7 @@ public class DiagramLayoutService {
                 inDeg.merge(e.getTo(), 1, Integer::sum);
             }
         }
-        // 拓扑最长路径分层（层=列，自左向右）；环兜底：无入度的从层 0 起算，成环残留节点强制层 0（仍必出图）
+        // 拓扑最长路径分层（层=行，自上向下）；环兜底：无入度的从层 0 起算，成环残留节点强制层 0（仍必出图）
         Map<String, Integer> level = new HashMap<>();
         List<String> queue = new ArrayList<>();
         for (Map.Entry<String, Integer> en : inDeg.entrySet()) {
@@ -80,35 +82,33 @@ public class DiagramLayoutService {
             level.putIfAbsent(n.getId(), 0);
         }
 
-        // 初始网格：列 x 由层号决定，列内按定义顺序纵排、整列块以内容区中线居中
+        // 初始网格：行 y 由层号决定，层内按定义顺序横排、整层块以内容区竖直中线居中
         Map<Integer, List<FlowModels.NodeVo>> layers = new LinkedHashMap<>();
-        int maxLevel = 0;
-        int maxRows = 1;
+        int maxCols = 1;
         for (FlowModels.NodeVo n : nodes) {
             int l = level.get(n.getId());
-            maxLevel = Math.max(maxLevel, l);
             layers.computeIfAbsent(l, k -> new ArrayList<>()).add(n);
         }
         for (List<FlowModels.NodeVo> layer : layers.values()) {
-            maxRows = Math.max(maxRows, layer.size());
+            maxCols = Math.max(maxCols, layer.size());
         }
-        int axisH = maxRows * ROW_H;
+        int axisW = (maxCols - 1) * (SLOT_W + GAP_X) + SLOT_W;
         Map<String, int[]> box = new HashMap<>();
         for (Map.Entry<Integer, List<FlowModels.NodeVo>> en : layers.entrySet()) {
             List<FlowModels.NodeVo> layer = en.getValue();
-            int blockH = layer.size() * ROW_H;
-            int top0 = (axisH - blockH) / 2;
+            int blockW = (layer.size() - 1) * (SLOT_W + GAP_X) + SLOT_W;
+            int left0 = (axisW - blockW) / 2;
             for (int i = 0; i < layer.size(); i++) {
                 FlowModels.NodeVo n = layer.get(i);
                 int[] wh = boxOf(n.getType());
                 box.put(n.getId(), new int[]{
-                        en.getKey() * (SLOT_W + GAP_X) + (SLOT_W - wh[0]) / 2,
-                        top0 + i * ROW_H + (ROW_H - wh[1]) / 2,
+                        left0 + i * (SLOT_W + GAP_X) + (SLOT_W - wh[0]) / 2,
+                        en.getKey() * (SLOT_H + GAP_Y) + (SLOT_H - wh[1]) / 2,
                         wh[0], wh[1]});
             }
         }
 
-        // 并行分支组以 SPLIT 中心线为轴垂直居中（内层组先处理，最后整体抬回顶部 0）
+        // 并行分支组以 SPLIT 竖直中线为轴左右居中（内层组先处理，最后整体推回左边界 0）
         centerParallelGroups(nodes, out, box);
 
         // 归零（2026-10-03 三视图统一新增）：全体平移使 minX=minY=0，positions 消费端无需再算包围盒
@@ -130,10 +130,10 @@ public class DiagramLayoutService {
     }
 
     /**
-     * 并行分支组垂直居中：分支不再从 SPLIT 行向下堆叠，而是以 SPLIT 中心线为轴上下对称展开。
+     * 并行分支组水平居中：分支不再从 SPLIT 行向右堆叠，而是以 SPLIT 竖直中线为轴左右对称展开。
      * SPLIT↔JOIN 配对沿用编辑器口径（各出边可达集求交，取 BFS 序最早的 PARALLEL_JOIN）；
-     * 组员 = SPLIT 到 JOIN 之间可达的全部节点；JOIN 中线吸附回 SPLIT 中线。
-     * 内层组先于外层组处理（嵌套并行整体平移不破坏内层居中）；结束统一把最顶行抬回 0。
+     * 组员 = SPLIT 到 JOIN 之间可达的全部节点；JOIN 水平中点吸附回 SPLIT 中线。
+     * 内层组先于外层组处理（嵌套并行整体平移不破坏内层居中）；结束统一把最左列推回 0。
      */
     private void centerParallelGroups(List<FlowModels.NodeVo> nodes, Map<String, List<String>> out,
                                       Map<String, int[]> box) {
@@ -141,12 +141,12 @@ public class DiagramLayoutService {
             final String split;
             final String join;
             final List<String> members;
-            final int maxX;
-            Group(String split, String join, List<String> members, int maxX) {
+            final int maxY;
+            Group(String split, String join, List<String> members, int maxY) {
                 this.split = split;
                 this.join = join;
                 this.members = members;
-                this.maxX = maxX;
+                this.maxY = maxY;
             }
         }
         List<Group> groups = new ArrayList<>();
@@ -224,37 +224,37 @@ public class DiagramLayoutService {
             }
             int maxLevel = 0;
             for (String m : members) {
-                maxLevel = Math.max(maxLevel, box.get(m)[0]);
+                maxLevel = Math.max(maxLevel, box.get(m)[1]);
             }
             groups.add(new Group(sid, join, members, maxLevel));
         }
-        // maxX 降序 = 内层组先处理
-        groups.sort((a, b) -> Integer.compare(b.maxX, a.maxX));
+        // maxY 降序 = 内层组先处理
+        groups.sort((a, b) -> Integer.compare(b.maxY, a.maxY));
         for (Group gp : groups) {
             int[] s = box.get(gp.split);
-            int axisY = s[1] + s[3] / 2;
-            int top = Integer.MAX_VALUE;
-            int bottom = Integer.MIN_VALUE;
+            int axisX = s[0] + s[2] / 2;
+            int left = Integer.MAX_VALUE;
+            int right = Integer.MIN_VALUE;
             for (String m : gp.members) {
                 int[] b = box.get(m);
-                top = Math.min(top, b[1]);
-                bottom = Math.max(bottom, b[1] + b[3]);
+                left = Math.min(left, b[0]);
+                right = Math.max(right, b[0] + b[2]);
             }
-            int delta = axisY - (top + bottom) / 2;
+            int delta = axisX - (left + right) / 2;
             for (String m : gp.members) {
-                box.get(m)[1] += delta;
+                box.get(m)[0] += delta;
             }
             int[] j = box.get(gp.join);
-            j[1] += axisY - (j[1] + j[3] / 2);
+            j[0] += axisX - (j[0] + j[2] / 2);
         }
-        // 上移出界（y<0）的组把整图平移回 0（同 delta 平移不破坏各组居中）
-        int minY = Integer.MAX_VALUE;
+        // 左移出界（x<0）的组把整图平移回 0（同 delta 平移不破坏各组居中）
+        int minX = Integer.MAX_VALUE;
         for (int[] b : box.values()) {
-            minY = Math.min(minY, b[1]);
+            minX = Math.min(minX, b[0]);
         }
-        if (minY < 0) {
+        if (minX < 0) {
             for (int[] b : box.values()) {
-                b[1] -= minY;
+                b[0] -= minX;
             }
         }
     }