前言¶
彙報材料、調研紀要、帶表格的說明文檔，常見痛點是：讀者要通讀全文才能抓住結構，數據藏在段落和表格裏，改一個數字又要重新找圖。自己用圖表工具重畫一遍，和原文容易脫節。
下面介紹 SkillHub 社區 Skill「文檔轉圖表、圖片」（@user_70775cd1/docs2html，當前版本 v3.6.4）。它把用戶提供的內容渲染成可在線對照查看的網頁：左側大綱，右側分屏展示原版文字與圖表化解讀，並支持在線修改後重新生成圖表，以及導出 PPT、PDF 等。標籤標明 requires_api_key=false，無需單獨配置 API Key。
這是什麼¶
一句話定位：把文字類文檔提煉、可視化，輸出自包含 HTML 頁面，便於「少讀字、對照看圖」。
- 座標：
@user_70775cd1/docs2html - 來源：community（SkillHub 分類：data-analysis）
- 發佈者：user_70775cd1（頁面標註作者 Dillon）
- SkillHub 頁面：https://www.skillhub.cn/skills/user_70775cd1/docs2html
官方簡介強調：提煉文字、將表格數據渲染成圖表；展示爲左大綱 + 右分屏（原版文字 | 圖表化解讀），默認雙顯，可拖拽調寬，可切換「僅文字 / 僅圖表」。
核心功能¶
以下能力均來自 SkillHub 頁面與抓取資料，未單獨覈實的格式或接口不寫進正文。
對照瀏覽與佈局¶
- 生成可在線對比查看的網頁（自包含 HTML 形態）。
- 左側大綱導航，右側分屏：一側保留原版文字，一側爲圖表化解讀。
- 默認雙欄同時顯示；分欄寬度可拖拽調整。
- 可切換爲「僅文字」或「僅圖表」視圖。
圖表類型與風格¶
按內容類型自適應選型（生成前會確認風格，並要求全頁風格一致）：
| 內容類型 | 渲染方式 |
|---|---|
| 數據、表格 | ApexCharts |
| 流程、概念 | Mermaid |
| 對比類信息 | 矩陣 / 卡片 |
編輯與導出¶
- 支持在線修改文檔內容；修改後可實時重新生成圖表（官方文案中的「圖標」在此按圖表理解）。
- 支持修改文檔格式，並將圖表或文檔相關結果導出爲 PPT、PDF 等（與「文檔轉 PPT / 文檔轉 PDF」等核心能力描述一致）。
官方列出的能力關鍵詞還包括：文生圖、文檔轉圖表、自動生成圖表、文字轉圖片、文字轉 PDF / PPT 等，均圍繞「文字 → 可視化頁面 → 可導出」這一條鏈路。
安裝與啓用¶
SkillHub 提供兩種常見方式：用 CLI 安裝到當前 Agent 的 skills 目錄，或把安裝提示詞交給 AI 執行。
方式一：SkillHub CLI¶
先確認是否已安裝 CLI（完整步驟見 SkillHub 安裝說明）：
command -v skillhub && skillhub --version
未安裝時可執行官方推薦的一鍵安裝（需聯網）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
安裝本 Skill 時，必須用 --dir 指向當前 Agent 識別的 skills 目錄，否則默認落在 ./skills/ 可能不會被加載：
skillhub install @user_70775cd1/docs2html --dir <你的 skills 目錄>
常用客戶端 skills 路徑（摘自官方安裝文檔，按你實際環境選擇）：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或項目下的.agents/skills/
安裝或更新 Skill 後，按你所用客戶端的要求重啓或刷新 Agent，使 SKILL.md 生效。
方式二：提示詞交給 AI¶
在 SkillHub 技能頁可複製官方安裝提示，大意如下：
請根據 https://skillhub.cn/install/skillhub.md，安裝 `@user_70775cd1/docs2html`。
將上述內容發給 Cursor、Claude Code 等支持 Skill 的 Agent，由它按文檔完成 CLI 與目錄配置。
典型用法¶
官方頁面未給出逐步截圖教程，可復現的用法可從簡介反推：
- 在對話中附上需要可視化的文字或文檔內容（含表格數據時更適合走 ApexCharts 路徑）。
- 觸發本 Skill，說明希望「對照原文、以圖爲主」或需要導出 PPT/PDF。
- 在生成前確認圖表風格；生成後在頁面中拖拽分欄、切換僅文字 / 僅圖表，檢查大綱與分屏是否一致。
- 若需改數字或表格，在可編輯區域修改後讓 Skill 重新生成圖表，再按需導出。
當用戶已經有一份說明性文檔，希望讀者一眼看懂結構、少讀大段文字時，適合主動選用該 Skill。
適用場景與注意¶
適合誰
- 需要把紀要、方案、帶表數據說明做成「原文 + 圖解」對照頁的人。
- 要在彙報前快速出圖，並保留導出 PPT/PDF 通道的團隊。
使用注意
- 頁面統計（截至資料抓取）：SkillHub 評分 100000，下載約 3273 次；以 SkillHub 實時數據爲準。
- 分類爲 data-analysis，與「辦公效率」類標籤無直接對應，選型時以功能描述爲準。
- 圖表類型由內容推斷，複雜版式或極長文檔的實際效果需在本地試跑後評估。
- 導出與在線編輯依賴 Skill 生成的 HTML 環境，不同瀏覽器對拖拽、導出插件的支持可能略有差異。
結尾¶
「文檔轉圖表、圖片」把對照閱讀、自適應圖表和導出收進一個 Skill 流程裏，適合「有字有表、想讓人先看圖」的文檔處理。安裝與詳情見 SkillHub：
- 技能頁：https://www.skillhub.cn/skills/user_70775cd1/docs2html
- 安裝說明：https://skillhub.cn/install/skillhub.md
