金字塔图 (Pyramid)

Content 约束

层级 3-6 个，从底到顶宽度递减
每层一个短标签（如关键词或短语）
长文案外置到金字塔旁边，图形内仅保留核心短文案

Layout 选型

vertical frame + 每层宽度递减。gap 4px 保持紧密。

Layout 规则

外层 frame 使用 layout: "vertical" + alignItems: "center"
所有层必须使用脚本计算宽度，以保证绝对完美的等斜率（直线边缘）。切勿手写拍脑袋的宽度！
children 数组中第一个元素是顶层（最窄），最后一个是底层（最宽）。
顶层通常用 triangle（topWidth: 0），中间和底层用 trapezoid。
gap 通常设为 4px 保持紧密的金字塔感。

严格的斜率算法（必须在脚本中实现）：要让金字塔的侧边形成一条完美的直线，宽度的增量必须与高度和 gap 严格挂钩。

设定整体宽度扩张系数 angleK（建议值 1.5 到 2.5，表示高度每增加1px，总宽度增加的像素数）。

当前层的底宽公式：width = topWidth + (height * angleK)

下一层的顶宽公式（必须考虑 gap 带来的额外外扩）：nextTopWidth = width + (gap * angleK)

脚本构建模板

必须使用 node 运行脚本生成 JSON。

const fs = require('fs');

// 1. 配置基础参数
const GAP = 4;
const ANGLE_K = 2; // 斜率系数：高度每增加1px，宽度增加2px
const LAYER_HEIGHT = 80;

const data = [
  { text: "顶层核心", fillColor: "#1F2329", textColor: "#FFFFFF" },
  { text: "中间层 B", fillColor: "#DFF5E5", textColor: "#1F2329" },
  { text: "中间层 A", fillColor: "#EAE2FE", textColor: "#1F2329" },
  { text: "最底层基础", fillColor: "#F0F4FC", textColor: "#1F2329" }
];

let currentTopWidth = 0; // 顶层如果是尖角，初始为 0
const children = data.map((layer, index) => {
  // 2. 根据公式计算当前层的底宽
  const currentBottomWidth = currentTopWidth + (LAYER_HEIGHT * ANGLE_K);
  
  const node = {
    type: currentTopWidth === 0 ? "triangle" : "trapezoid",
    width: currentBottomWidth,
    topWidth: currentTopWidth,
    height: LAYER_HEIGHT,
    text: layer.text,
    textAlign: "center",
    fillColor: layer.fillColor,
    borderColor: layer.fillColor,
    borderWidth: 2,
    fontSize: 16,
    textColor: layer.textColor
  };

  // 3. 关键：计算下一层的顶宽。必须把 gap 的延伸也算进去！
  currentTopWidth = currentBottomWidth + (GAP * ANGLE_K);
  
  return node;
});

const output = {
  version: 2,
  nodes: [
    {
      type: "frame",
      layout: "vertical",
      alignItems: "center",
      gap: GAP,
      padding: 40,
      children: children
    }
  ]
};

fs.writeFileSync('diagram.json', JSON.stringify(output, null, 2));

陷阱

不要手写随意递增的宽度：这会导致金字塔侧边变成折线，不直。必须严格使用上述 angleK 公式计算。
忘记计算 gap 带来的扩展：如果下一层的 topWidth 只是简单等于上一层的 width，在有 gap 的情况下，衔接处会产生锯齿折角。必须加上 gap * angleK。
从上到下排列错误：children 数组第一个是顶层（最窄），最后一个是底层（最宽），宽度依次递增。
文字溢出顶层三角形：顶层三角形内部可用空间极小。短文案用 \n 手动换行；长文案外置到金字塔旁边（外层套 horizontal frame，金字塔左侧，说明文字右侧）
倒金字塔误用：如果用户要求"倒金字塔"、"漏斗图"或"自上而下递减的结构"，不要使用本文件，切换到 scenes/funnel.md

扩展

辅助说明：需要在旁边添加文字说明时，在最外层套一个 layout: "horizontal" 的 frame，金字塔放左侧，说明文字（vertical 排列的 text 节点）放右侧
配色：各层颜色应从色板中选取不同颜色以示区分（如蓝→紫→绿→黄递进）

3.9 KiB Raw Blame History Unescape Escape

金字塔图 (Pyramid)

Content 约束

Layout 选型

Layout 规则

脚本构建模板

陷阱

扩展

3.9 KiB

Raw Blame History