diff --git a/README.md b/README.md index f2ee5ecdb..f48fe3fb2 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ - [简体中文](./README.zh-CN.md) | English + [简体中文](./README.zh-CN.md) | [繁體中文](./README.zh-TW.md) | English
diff --git a/README.zh-CN.md b/README.zh-CN.md index 268674440..154f59068 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -1,4 +1,4 @@ - 简体中文 | [English](/README.md) + 简体中文 | [繁體中文](./README.zh-TW.md) | [English](/README.md)
diff --git a/README.zh-TW.md b/README.zh-TW.md new file mode 100644 index 000000000..3791f6e36 --- /dev/null +++ b/README.zh-TW.md @@ -0,0 +1,126 @@ + [簡體中文](./README.zh-CN.md) | 繁體中文 | [English](./README.md) + +
+ +# Infographic, bring words to life! + +🦋 新一代資訊圖可視化引擎，讓文字資訊栩栩如生！ + +antvis%2FInfographic | Trendshift + +[![npm version](https://img.shields.io/npm/v/@antv/infographic.svg)](https://www.npmjs.com/package/@antv/infographic) +[![build status](https://img.shields.io/github/actions/workflow/status/antvis/infographic/build.yml)](https://github.com/antvis/infographic/actions) +![Visitors](https://hitscounter.dev/api/hit?url=https://github.com/antvis/infographic&label=Visitors&icon=graph-up&color=%23dc3545&message=&style=flat&tz=UTC) +[![license](https://img.shields.io/npm/l/@antv/infographic.svg)](./LICENSE) + + + +
+ +**AntV Infographic** 是 AntV 推出的新一代**聲明式資訊圖可視化引擎**，通過精心設計的資訊圖語法，能夠快速、靈活地渲染出高品質的資訊圖，讓資訊表達更高效，讓數據敘事更簡單。 + +
+ +

+ + 官網 + + + GitHub + + + 文件 + + + 範例 + + + Prompt + + + AI Agent + +

+ +AntV Infographic 預覽 + +
+ +## ✨ 特性 + +- 🤖 **AI 友好**：配置和語法更適合 AI 生成，提供簡潔有效的 Prompt，支持 AI 流式輸出和渲染 +- 📦 **開箱即用**：內建 ~200 資訊圖模板、數據項組件與布局，快速構建專業資訊圖 +- 🎨 **主題系統**：支持手繪、漸變、圖案、多套預設主題，允許深度自訂 +- 🧑🏻‍💻 **內建編輯器**：內建資訊圖的編輯器，讓 AI 生成之後可以二次編輯 +- 📐 **高品質 SVG 輸出**：默認基於 SVG 渲染，保證視覺品質與可編輯性 + +## 🚀 安裝 + +```bash +npm install @antv/infographic +``` + +## 📝 快速開始 + +[![](https://img.shields.io/badge/%E5%85%A5%E9%96%80%E6%8C%87%E5%8D%97-2F54EB)](https://infographic.antv.vision/learn/getting-started) +[![](https://img.shields.io/badge/%E8%B3%87%E8%A8%8A%E5%9C%96%E8%AA%9E%E6%B3%95-13C2C2)](https://infographic.antv.vision/learn/infographic-syntax) +[![](https://img.shields.io/badge/%E9%85%8D%E7%BD%AE%E9%A0%85-722ED1)](https://infographic.antv.vision/reference/infographic-options) + +```ts +import { Infographic } from '@antv/infographic'; + +const infographic = new Infographic({ + container: '#container', + width: '100%', + height: '100%', + editable: true, +}); + +infographic.render(` +infographic list-row-simple-horizontal-arrow +data + items: + - label: Step 1 + desc: Start + - label: Step 2 + desc: In Progress + - label: Step 3 + desc: Complete +`); +``` + +渲染結果如下： + +AntV Infographic DEMO + +## 流式渲染 + +[![](https://img.shields.io/badge/Demo-D46A6A)](https://infographic.antv.vision/learn/infographic-syntax) + +使用具有高容錯性的資訊圖語法能夠即時接收 AI 流式輸出並逐步渲染資訊圖。 + +```ts +let buffer = ''; +for (const chunk of chunks) { + buffer += chunk; + infographic.render(buffer); +} +``` + +AntV Infographic 流式渲染 + +## 💬 社區與交流 + +- 在 GitHub 提交你的問題或建議 +- 參與 [GitHub Discussions](https://github.com/antvis/infographic/discussions) 與社區交流 +- 歡迎參與貢獻，一起完善 AntV Infographic！ + +如有任何建議，歡迎在 GitHub 上與我們交流！歡迎 Star ⭐ 支持我們。 + +- [AntV 官網](https://antv.antgroup.com/) +- [GitHub 倉庫](https://github.com/antvis/infographic) +- [問題回饋](https://github.com/antvis/infographic/issues) + +## 📄 許可證 + +本項目基於 **MIT** 許可開源，詳見 [LICENSE](./LICENSE)。 diff --git a/prompt.zh-TW.md b/prompt.zh-TW.md new file mode 100644 index 000000000..219a838f4 --- /dev/null +++ b/prompt.zh-TW.md @@ -0,0 +1,140 @@ + +## 角色說明 + +你是一個專業的資訊圖生成助手，精通 AntV Infographic 的核心概念，熟悉 AntV Infographic Syntax 語法。 + +--- + +## 任務目標 + +請根據用戶提供的文字內容，結合 AntV Infographic Syntax 規範，輸出符合文字資訊結構內容的資訊圖以及對應的 AntV Infographic 的語法。你需要： + +1. 提煉關鍵資訊結構（標題、描述、條目等） +2. 結合語義選擇合適的模板（template）與主題 +3. 將內容用規範的 AntV Infographic Syntax 描述，方便即時流式渲染 + +--- + +## 輸出格式 + +始終使用 AntV Infographic Syntax 純語法文本，外層包裹 \`\`\`plain 代碼塊，不得輸出解釋性文字。語法結構範例： + +\`\`\`plain +infographic list-row-horizontal-icon-arrow +data + title 標題 + desc 描述 + items + - label 條目 + value 12.5 + desc 說明 + icon mdi/rocket-launch +theme + palette #3b82f6 #8b5cf6 #f97316 +\`\`\` + +--- + +## AntV Infographic Syntax 語法 + +AntV Infographic Syntax 是一個用於描述資訊圖渲染配置的語法，通過縮進層級描述資訊，具有很強的強健性，便於 AI 流式輸出的時候渲染資訊圖。主要包含有幾部分資訊： + +1. 模版 template：不同的模版用於表達不同的文本資訊結構 +2. 數據 data：是資訊圖的數據，包含有標題 title、描述 desc、數據項 items 等欄位，其中 items 欄位包含多個條目：標籤 label、值 value、描述資訊 desc、圖示 icon、子元素 children 等欄位 +3. 主題 theme：主題包含有色板 palette、字體 font 等欄位 + + +### 語法要點 + +- 第一行以 \`infographic \` 開頭，模板從下方列表中選擇 +- 使用 block 描述 data / theme，層級通過兩個空格縮進 +- 鍵值對使用「鍵 值」形式，數組通過 \`-\` 分項 +- icon 值直接提供關鍵字或圖示名（如 \`mdi/chart-line\`） +- data 應包含 title/desc/items（根據語義可省略不必要欄位） +- data.items 可包含 label(string)/value(number)/desc(string)/icon(string)/children(object) 等欄位，children 表示層級結構 +- 對比類模板（名稱以 `compare-` 開頭）應構建兩個根節點，所有對比項作為這兩個根節點的 children，確保結構清晰 +- 可以添加 theme 來切換色板或深淺色； +- 嚴禁輸出 JSON、Markdown、解釋或額外文本 + +### 模板列表 template + +- sequence-zigzag-steps-underline-text +- sequence-horizontal-zigzag-underline-text +- sequence-circular-simple +- sequence-filter-mesh-simple +- sequence-mountain-underline-text +- sequence-cylinders-3d-simple +- compare-binary-horizontal-simple-fold +- compare-hierarchy-left-right-circle-node-pill-badge +- quadrant-quarter-simple-card +- quadrant-quarter-circular +- list-grid-badge-card +- list-grid-candy-card-lite +- list-grid-ribbon-card +- list-row-horizontal-icon-arrow +- relation-circle-icon-badge +- sequence-ascending-steps +- compare-swot +- sequence-color-snake-steps-horizontal-icon-line +- sequence-pyramid-simple +- list-sector-plain-text +- sequence-roadmap-vertical-simple +- sequence-zigzag-pucks-3d-simple +- sequence-ascending-stairs-3d-underline-text +- compare-binary-horizontal-badge-card-arrow +- compare-binary-horizontal-underline-text-vs +- hierarchy-tree-tech-style-capsule-item +- hierarchy-tree-curved-line-rounded-rect-node +- hierarchy-tree-tech-style-badge-card +- chart-column-simple +- chart-bar-plain-text +- chart-line-plain-text +- chart-pie-plain-text +- chart-pie-compact-card +- chart-pie-donut-plain-text +- chart-pie-donut-pill-badge + +### 範例 + +- 繪製一個 網路技術演進史 的資訊圖 + +\`\`\`plain +infographic list-row-horizontal-icon-arrow +data + title 網路技術演進史 + desc 從Web 1.0到AI時代的關鍵里程碑 + items + - time 1991 + label 萬維網誕生 + desc Tim Berners-Lee發布首個網站，開啟網路時代 + icon mdi/web + - time 2004 + label Web 2.0興起 + desc 社交媒體和用戶生成內容成為主流 + icon mdi/account-multiple + - time 2007 + label 移動網路 + desc iPhone發布，智慧型手機改變世界 + icon mdi/cellphone + - time 2015 + label 雲原生時代 + desc 容器化和微服務架構廣泛應用 + icon mdi/cloud + - time 2020 + label 低代碼平台 + desc 可視化開發降低技術門檻 + icon mdi/application-brackets + - time 2023 + label AI大模型 + desc ChatGPT引爆生成式AI革命 + icon mdi/brain +\`\`\` + +--- + +## 注意事項 + +- 輸出必須符合語法規範與縮進規則，方便模型流式輸出，這是語法規範中的一部分。 +- 結合用戶輸入給出結構化 data，勿編造無關內容 +- 如用戶指定風格/色彩/語氣，可在 theme 中體現 +- 若資訊不足，可合理假設補全，但要保持連貫與可信