# Industry Chain Chart

> 产业链图谱生成技能。输入任意产业名称或公司名称，自动生成结构化产业链 JSON 数据， 渲染为高质量可视化图谱 HTML，并通过 Playwright 截图输出高清 PNG 图片。 适用于产业分析、投资研究、招商引资等场景。

- Skill: `liusai0820/industry-chain-chart` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add liusai0820/industry-chain-chart`
- Raw SKILL.md: https://api.skillmd.com/api/skills/liusai0820/industry-chain-chart/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: liusai0820 (https://skillmd.com/u/liusai0820)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/liusai0820/industry-chain-chart

---


# 产业链图谱生成技能 (Industry Chain Chart)

## 核心能力

将一句话输入（如"半导体产业链"、"宁德时代"、"新能源汽车"）转化为专业的产业链全景图谱高清 PNG 图片。

## 工作流程总览

```
用户输入 Query
      │
      ▼
[STEP 1] 解析输入，确定产业链名称
      │
      ▼
[STEP 2] 生成产业链 JSON 数据（你自己生成，不调外部 API）
      │
      ▼
[STEP 3] 写入独立 HTML 文件（按 visual-spec 渲染）
      │
      ▼
[STEP 4] Playwright 高清截图（3x 分辨率），输出 PNG
      │
      ▼
返回图片路径给用户
```

---

## STEP 1: 解析输入

分析用户输入，判断类型：

- **产业链名称**（如"半导体产业链"、"新能源汽车"）→ 直接使用
- **公司名称**（如"宁德时代"、"NVIDIA"）→ 先用 WebSearch 搜索公司主营业务，再映射到对应产业链名称
- **产品/技术名称**（如"问界M9"、"ChatGPT"）→ 转换为标准产业链名称

**输出**：一个标准的产业链名称，必须以"产业链"三字结尾。

同时生成英文副标题（全大写），例如：
- "人工智能产业链" → "ARTIFICIAL INTELLIGENCE INDUSTRY CHAIN"
- "半导体产业链" → "SEMICONDUCTOR INDUSTRY CHAIN"

---

## STEP 2: 生成产业链 JSON 数据

**这是核心步骤。** 你需要按照 `references/prompt-template.md` 中定义的规范，直接生成符合以下 Schema 的 JSON 数据。

### JSON Schema（必须严格遵守）

```json
{
  "产业链": "string（产业链名称，以'产业链'结尾）",
  "环节": [
    {
      "环节名称": "上游：xxx",
      "layer": "upstream",
      "环节概述": "string（50-80字）",
      "子环节": [
        {
          "子环节名称": "string",
          "环节概述": "string（50-80字）",
          "子-子环节": [
            {
              "子-子环节名称": "string",
              "环节概述": "string（50-80字）",
              "代表公司": ["公司A", "公司B", "...（10-12家）"]
            }
          ]
        }
      ]
    }
  ]
}
```

### 结构要求（硬性指标）

| 层级 | 数量要求 |
|------|----------|
| 主要环节 | 3个（上游、中游、下游） |
| 每个主要环节的子环节 | 3-5个 |
| 每个子环节的子-子环节 | 3-8个 |
| 每个子-子环节的代表公司 | 10-12家 |

### 公司命名规则

详见 `references/prompt-template.md` 的第六步。核心原则：
- 中国公司用中文：宁德时代、比亚迪
- 有通用中文译名的国际公司用中文：英伟达、三星
- 中文译名不常用的用英文：ASML、Synopsys
- 禁止股票代码、交易所信息

**CRITICAL**: 生成前请 `file_read` 加载 `references/prompt-template.md` 获取完整的分析师角色设定和提示词。

---

## STEP 3: 渲染 HTML

将 JSON 数据渲染为一个**完全独立的 HTML 文件**（无外部依赖）。

**CRITICAL**: 生成前请 `file_read` 加载 `references/visual-spec.md` 获取完整的 HTML/CSS 规范。

### 渲染要点

1. **写入路径**：`~/Desktop/{产业链名称}全景图谱.html`
2. **固定宽度**：1400px（为截图优化）
3. **三段式结构**：上游（靛蓝渐变）、中游（青色渐变）、下游（琥珀渐变）
4. **流向指示**：环节之间用 ▼ 符号连接
5. **公司标签**：按环节配色，用 · 分隔
6. **标题**：`{产业链名称}全景图谱` + 英文副标题（全大写）
7. **品牌水印**：右上角"Created by lius" + 底部 `github.com/liusai0820`
8. **背景色**：`#f8f7f4`（米白色，高级感）

---

## STEP 4: Playwright 高清截图

使用 Playwright 将 HTML 截图为高清 PNG（3x 分辨率）。

### 截图命令

```bash
# 确保 playwright 已安装
npx playwright install chromium 2>/dev/null

# 使用 Node.js 脚本截图（3x 高清）
node -e "
const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage({ deviceScaleFactor: 3 });
  await page.setViewportSize({ width: 1500, height: 800 });
  await page.goto('file://${HTML_PATH}');

  // 等待内容渲染完成
  await page.waitForTimeout(1000);

  // 获取实际内容高度并截取全页
  const bodyHeight = await page.evaluate(() => document.body.scrollHeight);
  await page.setViewportSize({ width: 1500, height: bodyHeight + 100 });
  await page.waitForTimeout(500);

  await page.screenshot({
    path: '${PNG_PATH}',
    fullPage: true,
    type: 'png'
  });

  await browser.close();
  console.log('截图完成: ${PNG_PATH}');
})();
"
```

### 路径变量

- `${HTML_PATH}`：替换为 STEP 3 写入的 HTML 文件绝对路径
- `${PNG_PATH}`：替换为 `~/Desktop/{产业链名称}全景图谱.png`

### 关键参数

- **deviceScaleFactor: 3** — 3倍分辨率，确保图片清晰（最终 PNG 约 2-3MB）
- **fullPage: true** — 截取完整页面

### 截图备选方案

如果 Playwright 不可用，尝试以下顺序：

1. **puppeteer**：`npx puppeteer screenshot file:///xxx.html /xxx.png --full-page`
2. **wkhtmltoimage**：`wkhtmltoimage --width 1500 /xxx.html /xxx.png`
3. **告知用户**：直接提供 HTML 文件路径，让用户在浏览器中打开

---

## 输出规范

任务完成后，向用户报告：

1. **图片路径**：PNG 文件的绝对路径（在 Desktop）
2. **HTML 路径**：HTML 源文件路径（方便二次编辑）
3. **简要说明**：图谱包含的环节数和公司数

---

## 错误处理

| 场景 | 处理方式 |
|------|----------|
| 无法识别输入 | 用 AskUserQuestion 询问用户想分析什么产业 |
| 公司名映射失败 | 使用 WebSearch 搜索后重试 |
| Playwright 未安装 | 先运行 `npx playwright install chromium` |
| 截图失败 | 提供 HTML 文件路径作为 fallback |

---

## 使用示例

**用户输入**：`/industry-chain-chart 半导体`

**执行过程**：
1. 识别为产业名称 → "半导体产业链"，副标题 → "SEMICONDUCTOR INDUSTRY CHAIN"
2. 生成包含上中下游的完整 JSON
3. 渲染为 1400px 宽的 HTML（靛蓝/青色/琥珀三段渐变配色）
4. Playwright 3x 高清截图

**输出**：
```
产业链图谱已生成：
- 图片：~/Desktop/半导体产业链全景图谱.png
- HTML：~/Desktop/半导体产业链全景图谱.html
- 包含 3 个主要环节、12 个子环节、45 个细分领域、约 500 家企业
```