infographic-gen 1.0.3 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +132 -28
- package/README.zh-CN.md +171 -39
- package/dist/index.js +423 -75
- package/dist/index.js.map +1 -1
- package/package.json +4 -1
package/README.md
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
<img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> [简体中文](./README.zh-CN.md) | English
|
|
2
|
+
|
|
1
3
|
# infographic-gen
|
|
2
4
|
|
|
3
5
|
AI-powered CLI tool to generate [AntV Infographic](https://infographic.antv.vision/) SVGs from natural language prompts.
|
|
@@ -12,6 +14,10 @@ Transform your ideas into beautiful, data-driven infographics in seconds using t
|
|
|
12
14
|
- **AI-Powered Generation** — Uses OpenAI, DeepSeek, or other LLM providers via OpenAI SDK
|
|
13
15
|
- **Professional Templates** — 60+ pre-designed AntV Infographic templates (lists, sequences, hierarchies, comparisons, charts, relations, etc.)
|
|
14
16
|
- **Self-Correcting** — Automatically retries with error feedback if generation fails (up to 3 attempts)
|
|
17
|
+
- **File Context** — Read `.md`, `.docx`, `.pdf` files as context for AI-powered summarization and visualization
|
|
18
|
+
- **Direct DSL Rendering** — Render SVG directly from a saved DSL text file with `--from-dsl` (skip AI)
|
|
19
|
+
- **DSL Export** — Optional `--dsl` flag to save raw syntax for debugging and fine-tuning
|
|
20
|
+
- **Error Auto-Dump** — Automatically saves problematic DSL to `error-dump.txt` when rendering fails
|
|
15
21
|
- **Persistent Config** — Save API keys and settings locally for repeat use
|
|
16
22
|
- **Automated Sync** — Weekly checks for upstream Infographic updates via GitHub Actions
|
|
17
23
|
- **Fully Tested** — 131 comprehensive tests covering all features
|
|
@@ -47,12 +53,25 @@ npm start # Run built CLI
|
|
|
47
53
|
|
|
48
54
|
## 🚀 Quick Start
|
|
49
55
|
|
|
56
|
+
### Command Aliases
|
|
57
|
+
|
|
58
|
+
For convenience, the CLI supports multiple shortcuts:
|
|
59
|
+
|
|
60
|
+
```bash
|
|
61
|
+
infographic-gen # Full command
|
|
62
|
+
info-gen # Short alias
|
|
63
|
+
ig-gen # Shortest alias (recommended)
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
All examples below use `ig-gen` (can be replaced with any alias above).
|
|
67
|
+
|
|
50
68
|
### 1. Configure Your LLM Provider
|
|
51
69
|
|
|
52
70
|
```bash
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
71
|
+
ig-gen config set apiKey sk-xxxx123
|
|
72
|
+
ig-gen config set baseUrl https://api.openai.com/v1 # Optional
|
|
73
|
+
ig-gen config set modelName gpt-4o # Optional
|
|
74
|
+
ig-gen config set defaultOutputDir ~/my-infographics # Optional: default output directory
|
|
56
75
|
```
|
|
57
76
|
|
|
58
77
|
**Supported Providers:**
|
|
@@ -65,30 +84,96 @@ infographic-gen config set modelName gpt-4o # Optional
|
|
|
65
84
|
View your config:
|
|
66
85
|
|
|
67
86
|
```bash
|
|
68
|
-
|
|
69
|
-
|
|
87
|
+
ig-gen config list
|
|
88
|
+
ig-gen config path # Show config file location
|
|
70
89
|
```
|
|
71
90
|
|
|
72
91
|
### 2. Generate an Infographic
|
|
73
92
|
|
|
74
93
|
```bash
|
|
75
|
-
|
|
94
|
+
# generate is the default command, so these are equivalent:
|
|
95
|
+
ig-gen "A comparison of frontend frameworks"
|
|
96
|
+
ig-gen generate "A comparison of frontend frameworks"
|
|
97
|
+
ig-gen g "A comparison of frontend frameworks" # Using 'g' alias
|
|
76
98
|
```
|
|
77
99
|
|
|
78
|
-
Output: `infographic-output.svg` (in current directory)
|
|
100
|
+
Output: `infographic-output.svg` (in default output directory or current directory)
|
|
79
101
|
|
|
80
102
|
Specify output path:
|
|
81
103
|
|
|
82
104
|
```bash
|
|
83
|
-
|
|
105
|
+
ig-gen "Data visualization trends" --output my-chart.svg
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### 3. Save DSL Syntax (Optional)
|
|
109
|
+
|
|
110
|
+
The `--dsl` option allows you to save the raw DSL syntax generated by the AI to a text file. This is useful for:
|
|
111
|
+
|
|
112
|
+
- **Debugging** — Inspect what the LLM generated if rendering fails
|
|
113
|
+
- **Fine-tuning** — Manually edit the DSL to adjust the infographic
|
|
114
|
+
- **Learning** — Understand the DSL syntax for future manual creation
|
|
115
|
+
|
|
116
|
+
```bash
|
|
117
|
+
# Generate SVG and save DSL syntax
|
|
118
|
+
ig-gen "Compare React vs Vue" -o frameworks.svg --dsl frameworks.txt
|
|
119
|
+
|
|
120
|
+
# The command will create:
|
|
121
|
+
# - frameworks.svg (rendered infographic)
|
|
122
|
+
# - frameworks.txt (raw DSL syntax)
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
**Error Auto-Dump:**
|
|
126
|
+
If rendering fails after 3 self-correction attempts, the problematic DSL is automatically saved to `error-dump.txt` for debugging.
|
|
127
|
+
|
|
128
|
+
### 4. Use Local Files as Context
|
|
129
|
+
|
|
130
|
+
You can pass a local file (`.md`, `.docx`, `.pdf`) to the AI as reference material. The AI will read the file content and use it to generate an infographic:
|
|
131
|
+
|
|
132
|
+
```bash
|
|
133
|
+
# Summarize a Markdown report into a timeline infographic
|
|
134
|
+
ig-gen "把报告核心里程碑总结成时间轴" -f ./2024-report.md -o timeline.svg
|
|
135
|
+
|
|
136
|
+
# Visualize a Word document as a comparison chart
|
|
137
|
+
ig-gen "Extract key pros and cons" -f analysis.docx -o comparison.svg
|
|
138
|
+
|
|
139
|
+
# Generate infographic from PDF research paper
|
|
140
|
+
ig-gen "Summarize findings into a list infographic" -f paper.pdf -o findings.svg
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
**Supported file formats:**
|
|
144
|
+
|
|
145
|
+
| Format | Library | Notes |
|
|
146
|
+
| ------- | ------------- | ------------------------------------- |
|
|
147
|
+
| `.md` | Built-in `fs` | Also supports `.txt`, `.csv`, `.json` |
|
|
148
|
+
| `.docx` | `mammoth` | Extracts plain text |
|
|
149
|
+
| `.pdf` | `pdf-parse` | Extracts text content |
|
|
150
|
+
|
|
151
|
+
> **Note:** Very large files are automatically truncated to stay within the model's context window. You can configure the max character limit via `ig-gen config set maxFileChars 50000`.
|
|
152
|
+
|
|
153
|
+
### 5. Render from Saved DSL File
|
|
154
|
+
|
|
155
|
+
If you previously saved a DSL file (via `--dsl` or from `error-dump.txt`), you can render it directly without calling the AI:
|
|
156
|
+
|
|
157
|
+
```bash
|
|
158
|
+
# Render a previously saved DSL file
|
|
159
|
+
ig-gen --from-dsl frameworks.txt -o frameworks.svg
|
|
160
|
+
|
|
161
|
+
# Re-render after manually editing the error dump
|
|
162
|
+
ig-gen --from-dsl error-dump.txt -o fixed.svg
|
|
84
163
|
```
|
|
85
164
|
|
|
86
|
-
|
|
165
|
+
This is useful for:
|
|
166
|
+
|
|
167
|
+
- **Offline rendering** — No API key needed
|
|
168
|
+
- **Manual editing** — Fine-tune DSL syntax and re-render instantly
|
|
169
|
+
- **Debugging** — Fix problematic DSL from `error-dump.txt` and re-render
|
|
170
|
+
|
|
171
|
+
### 6. Get Help
|
|
87
172
|
|
|
88
173
|
```bash
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
174
|
+
ig-gen --help
|
|
175
|
+
ig-gen config --help
|
|
176
|
+
ig-gen --version
|
|
92
177
|
```
|
|
93
178
|
|
|
94
179
|
---
|
|
@@ -98,7 +183,7 @@ infographic-gen generate --help
|
|
|
98
183
|
### Example 1: Technology Timeline
|
|
99
184
|
|
|
100
185
|
```bash
|
|
101
|
-
|
|
186
|
+
ig-gen "A timeline showing the evolution of web technologies from HTTP/1.0 to HTTP/3"
|
|
102
187
|
```
|
|
103
188
|
|
|
104
189
|
Will generate a timeline with key milestones, automatically selecting an appropriate template.
|
|
@@ -106,7 +191,7 @@ Will generate a timeline with key milestones, automatically selecting an appropr
|
|
|
106
191
|
### Example 2: Comparison Matrix
|
|
107
192
|
|
|
108
193
|
```bash
|
|
109
|
-
|
|
194
|
+
ig-gen "Compare the pros and cons of monolithic vs microservices architecture"
|
|
110
195
|
```
|
|
111
196
|
|
|
112
197
|
Generates a comparison infographic with Strengths and Weaknesses categories.
|
|
@@ -114,11 +199,24 @@ Generates a comparison infographic with Strengths and Weaknesses categories.
|
|
|
114
199
|
### Example 3: Data Chart
|
|
115
200
|
|
|
116
201
|
```bash
|
|
117
|
-
|
|
202
|
+
ig-gen "Show the distribution of programming languages by usage: Python 35%, JavaScript 28%, Java 20%, C++ 12%, Other 5%"
|
|
118
203
|
```
|
|
119
204
|
|
|
120
205
|
Creates a pie/bar chart with the provided data.
|
|
121
206
|
|
|
207
|
+
### Example 4: Debug with DSL Export
|
|
208
|
+
|
|
209
|
+
```bash
|
|
210
|
+
ig-gen "Compare React, Vue, and Angular pros and cons" -o frameworks.svg --dsl frameworks-dsl.txt
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
This will generate:
|
|
214
|
+
|
|
215
|
+
- `frameworks.svg` — The rendered infographic
|
|
216
|
+
- `frameworks-dsl.txt` — The raw DSL syntax
|
|
217
|
+
|
|
218
|
+
You can then inspect or manually edit the DSL file to fine-tune the output. If rendering fails, check `error-dump.txt` for the problematic syntax.
|
|
219
|
+
|
|
122
220
|
---
|
|
123
221
|
|
|
124
222
|
## 🛠️ Development
|
|
@@ -152,7 +250,9 @@ infographic-gen/
|
|
|
152
250
|
│ ├── config/index.ts # Config store (conf library)
|
|
153
251
|
│ ├── utils/
|
|
154
252
|
│ │ ├── logger.ts # Colored output to stderr
|
|
155
|
-
│ │
|
|
253
|
+
│ │ ├── spinner.ts # Ora spinner wrapper
|
|
254
|
+
│ │ ├── i18n.ts # Internationalization (en/zh-CN)
|
|
255
|
+
│ │ └── file-reader.ts # File text extraction (md/docx/pdf)
|
|
156
256
|
│ └── core/
|
|
157
257
|
│ ├── prompts.ts # System prompts (60+ templates)
|
|
158
258
|
│ ├── ai.ts # OpenAI integration + self-correction
|
|
@@ -189,31 +289,35 @@ Config is stored in:
|
|
|
189
289
|
|
|
190
290
|
### Configurable Keys
|
|
191
291
|
|
|
192
|
-
| Key
|
|
193
|
-
|
|
|
194
|
-
| `apiKey`
|
|
195
|
-
| `baseUrl`
|
|
196
|
-
| `modelName`
|
|
197
|
-
| `
|
|
292
|
+
| Key | Type | Example | Notes |
|
|
293
|
+
| ------------------ | ------ | --------------------------- | ---------------------------------------------------- |
|
|
294
|
+
| `apiKey` | string | `sk-...` | Your LLM API key |
|
|
295
|
+
| `baseUrl` | string | `https://api.openai.com/v1` | LLM endpoint (optional) |
|
|
296
|
+
| `modelName` | string | `gpt-4o` | Model to use (optional, defaults to gpt-4o) |
|
|
297
|
+
| `defaultOutputDir` | string | `~/infographics` or `.` | Default output directory (optional, defaults to `.`) |
|
|
298
|
+
| `maxFileChars` | string | `30000` | Max characters to read from file context (optional) |
|
|
198
299
|
|
|
199
300
|
Manage config via CLI:
|
|
200
301
|
|
|
201
302
|
```bash
|
|
202
303
|
# Set
|
|
203
|
-
|
|
204
|
-
|
|
304
|
+
ig-gen config set apiKey sk-...
|
|
305
|
+
ig-gen config set baseUrl https://api.deepseek.com
|
|
306
|
+
ig-gen config set defaultOutputDir ~/my-infographics
|
|
205
307
|
|
|
206
308
|
# Get
|
|
207
|
-
|
|
309
|
+
ig-gen config get apiKey
|
|
310
|
+
ig-gen c get defaultOutputDir # Using 'c' alias
|
|
208
311
|
|
|
209
312
|
# List all
|
|
210
|
-
|
|
313
|
+
ig-gen config list
|
|
314
|
+
ig-gen c list # Using 'c' alias
|
|
211
315
|
|
|
212
316
|
# Delete
|
|
213
|
-
|
|
317
|
+
ig-gen config delete baseUrl
|
|
214
318
|
|
|
215
319
|
# Show config file path
|
|
216
|
-
|
|
320
|
+
ig-gen config path
|
|
217
321
|
```
|
|
218
322
|
|
|
219
323
|
---
|
package/README.zh-CN.md
CHANGED
|
@@ -12,6 +12,11 @@
|
|
|
12
12
|
- **AI 驱动生成** — 支持 OpenAI、DeepSeek 或其他兼容 OpenAI SDK 的 LLM 服务
|
|
13
13
|
- **专业模板库** — 60+ 预设设计的 AntV Infographic 模板(列表、流程、层级、对比、图表、关系等)
|
|
14
14
|
- **自动纠错** — 生成失败时自动重试并反馈错误信息(最多 3 次尝试)
|
|
15
|
+
- **文件上下文** — 读取 `.md`、`.docx`、`.pdf` 文件作为 AI 参考资料,实现一键总结可视化
|
|
16
|
+
- **DSL 直接渲染** — 通过 `--from-dsl` 从已保存的 DSL 文本文件直接渲染 SVG(跳过 AI)
|
|
17
|
+
- **DSL 导出** — 可选的 `--dsl` 参数保存原始语法,用于调试和微调
|
|
18
|
+
- **错误自动转储** — 渲染失败时自动保存有问题的 DSL 到 `error-dump.txt`
|
|
19
|
+
- **多语言支持** — CLI 输出支持英文/中文切换(默认英文)
|
|
15
20
|
- **本地配置存储** — API Key 和设置永久保存,无需重复输入
|
|
16
21
|
- **上游自动同步** — 每周自动检测 @antv/infographic 更新,通过 GitHub Actions 创建 PR
|
|
17
22
|
- **全面的测试覆盖** — 131 个综合测试,覆盖所有功能
|
|
@@ -47,44 +52,143 @@ npm start # 运行构建后的 CLI
|
|
|
47
52
|
|
|
48
53
|
## 🚀 快速开始
|
|
49
54
|
|
|
50
|
-
###
|
|
55
|
+
### 命令别名
|
|
56
|
+
|
|
57
|
+
为了方便使用,CLI 提供了多个快捷别名:
|
|
58
|
+
|
|
59
|
+
```bash
|
|
60
|
+
infographic-gen # 完整命令
|
|
61
|
+
info-gen # 短别名
|
|
62
|
+
ig-gen # 最短别名(推荐)
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
下面的所有示例均使用 `ig-gen`(可替换为任何上述别名)。
|
|
66
|
+
|
|
67
|
+
### 1. 配置 LLM 服务和语言
|
|
51
68
|
|
|
52
69
|
```bash
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
70
|
+
ig-gen config set apiKey sk-xxxx123
|
|
71
|
+
ig-gen config set baseUrl https://api.openai.com/v1 # 可选
|
|
72
|
+
ig-gen config set modelName gpt-4o # 可选
|
|
73
|
+
ig-gen config set defaultOutputDir ~/my-infographics # 可选
|
|
74
|
+
ig-gen config set locale zh-CN # 可选:切换界面语言为中文
|
|
56
75
|
```
|
|
57
76
|
|
|
58
77
|
**支持的服务提供商:**
|
|
78
|
+
|
|
59
79
|
- **OpenAI** ← 默认
|
|
60
80
|
- **DeepSeek** — 设置 `baseUrl` 为 `https://api.deepseek.com`
|
|
61
81
|
- **阿里云 DashScope** — 设置对应的端点
|
|
62
82
|
- 任何兼容 OpenAI API 的服务
|
|
63
83
|
|
|
64
84
|
查看配置:
|
|
85
|
+
|
|
65
86
|
```bash
|
|
66
|
-
|
|
67
|
-
|
|
87
|
+
ig-gen config list
|
|
88
|
+
ig-gen config path # 显示配置文件位置
|
|
68
89
|
```
|
|
69
90
|
|
|
70
91
|
### 2. 生成信息图
|
|
71
92
|
|
|
72
93
|
```bash
|
|
73
|
-
|
|
94
|
+
# generate 是默认命令,所以这些都是等效的:
|
|
95
|
+
ig-gen "对比前端框架的优缺点"
|
|
96
|
+
ig-gen generate "对比前端框架的优缺点"
|
|
97
|
+
ig-gen g "对比前端框架的优缺点" # 使用 g 别名
|
|
74
98
|
```
|
|
75
99
|
|
|
76
|
-
输出:`infographic-output.svg
|
|
100
|
+
输出:`infographic-output.svg`(在默认输出目录或当前目录)
|
|
77
101
|
|
|
78
102
|
指定输出路径:
|
|
103
|
+
|
|
104
|
+
```bash
|
|
105
|
+
ig-gen "数据可视化趋势分析" --output my-chart.svg
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### 3. 保存 DSL 语法(可选)
|
|
109
|
+
|
|
110
|
+
`--dsl` 选项允许你将 AI 生成的原始 DSL 语法保存到文本文件。适用于:
|
|
111
|
+
|
|
112
|
+
- **调试** — 检查 LLM 生成的内容,排查渲染失败原因
|
|
113
|
+
- **微调** — 手动编辑 DSL 以调整信息图细节
|
|
114
|
+
- **学习** — 了解 DSL 语法,为未来手动创建做准备
|
|
115
|
+
|
|
79
116
|
```bash
|
|
80
|
-
|
|
117
|
+
# 同时生成 SVG 和保存 DSL 语法
|
|
118
|
+
ig-gen "对比 React 和 Vue" -o frameworks.svg --dsl frameworks.txt
|
|
119
|
+
|
|
120
|
+
# 该命令会创建:
|
|
121
|
+
# - frameworks.svg (渲染后的信息图)
|
|
122
|
+
# - frameworks.txt (原始 DSL 语法)
|
|
81
123
|
```
|
|
82
124
|
|
|
83
|
-
|
|
125
|
+
**错误自动保存:**
|
|
126
|
+
如果经过 3 次自我修正后渲染仍然失败,有问题的 DSL 会自动保存到 `error-dump.txt` 以便调试。
|
|
127
|
+
|
|
128
|
+
### 4. 使用本地文件作为上下文
|
|
129
|
+
|
|
130
|
+
可以通过 `-f` 参数传入本地文件(`.md`、`.docx`、`.pdf`),AI 会读取文件内容并以此为参考资料生成信息图:
|
|
84
131
|
|
|
85
132
|
```bash
|
|
86
|
-
|
|
87
|
-
|
|
133
|
+
# 把 Markdown 报告总结成时间轴信息图
|
|
134
|
+
ig-gen "把报告核心里程碑总结成时间轴" -f ./2024-report.md -o timeline.svg
|
|
135
|
+
|
|
136
|
+
# 把 Word 文档可视化为对比图
|
|
137
|
+
ig-gen "提取主要优缺点" -f analysis.docx -o comparison.svg
|
|
138
|
+
|
|
139
|
+
# 从 PDF 研究报告生成信息图
|
|
140
|
+
ig-gen "将研究发现总结为列表信息图" -f paper.pdf -o findings.svg
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
**支持的文件格式:**
|
|
144
|
+
|
|
145
|
+
| 格式 | 依赖库 | 说明 |
|
|
146
|
+
| ------- | ----------- | -------------------------------- |
|
|
147
|
+
| `.md` | 内置 `fs` | 同时支持 `.txt`、`.csv`、`.json` |
|
|
148
|
+
| `.docx` | `mammoth` | 提取纯文本 |
|
|
149
|
+
| `.pdf` | `pdf-parse` | 提取文本内容 |
|
|
150
|
+
|
|
151
|
+
> **注意:** 超大文件会自动截断以适应模型的上下文窗口。可通过 `ig-gen config set maxFileChars 50000` 配置最大字符数。
|
|
152
|
+
|
|
153
|
+
### 5. 从 DSL 文件直接渲染
|
|
154
|
+
|
|
155
|
+
如果你之前通过 `--dsl` 保存过 DSL 文件(或从 `error-dump.txt` 获得),可以直接渲染而不需要调用 AI:
|
|
156
|
+
|
|
157
|
+
```bash
|
|
158
|
+
# 渲染之前保存的 DSL 文件
|
|
159
|
+
ig-gen --from-dsl frameworks.txt -o frameworks.svg
|
|
160
|
+
|
|
161
|
+
# 修改 error-dump.txt 后重新渲染
|
|
162
|
+
ig-gen --from-dsl error-dump.txt -o fixed.svg
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
适用于:
|
|
166
|
+
|
|
167
|
+
- **离线渲染** — 无需 API Key
|
|
168
|
+
- **手动编辑** — 微调 DSL 语法后立即重新渲染
|
|
169
|
+
- **调试** — 修正 `error-dump.txt` 中的问题语法并重新渲染
|
|
170
|
+
|
|
171
|
+
### 6. 切换界面语言
|
|
172
|
+
|
|
173
|
+
默认情况下,CLI 输出为英文。如需切换为中文:
|
|
174
|
+
|
|
175
|
+
```bash
|
|
176
|
+
# 切换为中文
|
|
177
|
+
ig-gen config set locale zh-CN
|
|
178
|
+
|
|
179
|
+
# 切换回英文
|
|
180
|
+
ig-gen config set locale en
|
|
181
|
+
|
|
182
|
+
# 查看当前语言设置
|
|
183
|
+
ig-gen config get locale
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
### 7. 获取帮助
|
|
187
|
+
|
|
188
|
+
```bash
|
|
189
|
+
ig-gen --help
|
|
190
|
+
ig-gen config --help
|
|
191
|
+
ig-gen --version
|
|
88
192
|
infographic-gen generate --help
|
|
89
193
|
infographic-gen gen -h # gen 是 generate 的别名
|
|
90
194
|
```
|
|
@@ -96,7 +200,7 @@ infographic-gen gen -h # gen 是 generate 的别名
|
|
|
96
200
|
### 示例 1:技术演进时间线
|
|
97
201
|
|
|
98
202
|
```bash
|
|
99
|
-
|
|
203
|
+
ig-gen "展示 Web 技术演进:从 HTTP/1.0 到 HTTP/3"
|
|
100
204
|
```
|
|
101
205
|
|
|
102
206
|
自动生成时间线,展示关键里程碑。
|
|
@@ -104,7 +208,7 @@ infographic-gen gen "展示 Web 技术演进:从 HTTP/1.0 到 HTTP/3"
|
|
|
104
208
|
### 示例 2:对比矩阵
|
|
105
209
|
|
|
106
210
|
```bash
|
|
107
|
-
|
|
211
|
+
ig-gen "对比单体架构和微服务架构的优缺点"
|
|
108
212
|
```
|
|
109
213
|
|
|
110
214
|
生成包含优势和劣势的对比信息图。
|
|
@@ -112,11 +216,24 @@ infographic-gen gen "对比单体架构和微服务架构的优缺点"
|
|
|
112
216
|
### 示例 3:数据图表
|
|
113
217
|
|
|
114
218
|
```bash
|
|
115
|
-
|
|
219
|
+
ig-gen "编程语言使用分布:Python 35%、JavaScript 28%、Java 20%、C++ 12%、其他 5%"
|
|
116
220
|
```
|
|
117
221
|
|
|
118
222
|
自动创建饼图或柱状图。
|
|
119
223
|
|
|
224
|
+
### 示例 4:导出 DSL 用于调试
|
|
225
|
+
|
|
226
|
+
```bash
|
|
227
|
+
ig-gen "对比 React、Vue 和 Angular 的优缺点" -o frameworks.svg --dsl frameworks-dsl.txt
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
该命令会生成:
|
|
231
|
+
|
|
232
|
+
- `frameworks.svg` — 渲染后的信息图
|
|
233
|
+
- `frameworks-dsl.txt` — 原始 DSL 语法
|
|
234
|
+
|
|
235
|
+
你可以检查或手动编辑 DSL 文件来微调输出结果。如果渲染失败,可以检查 `error-dump.txt` 中的问题语法。
|
|
236
|
+
|
|
120
237
|
---
|
|
121
238
|
|
|
122
239
|
## 🛠️ 开发
|
|
@@ -131,15 +248,15 @@ npm install
|
|
|
131
248
|
|
|
132
249
|
### 常用命令
|
|
133
250
|
|
|
134
|
-
| 命令
|
|
135
|
-
|
|
136
|
-
| `npm run build`
|
|
137
|
-
| `npm run dev`
|
|
138
|
-
| `npm start`
|
|
139
|
-
| `npm test`
|
|
140
|
-
| `npm run test:watch` | Watch 模式测试
|
|
141
|
-
| `npm run sync`
|
|
142
|
-
| `npm run sync:check` | 仅检测,不更新(干运行)
|
|
251
|
+
| 命令 | 说明 |
|
|
252
|
+
| -------------------- | -------------------------------- |
|
|
253
|
+
| `npm run build` | 构建 CLI 到 `dist/index.js` |
|
|
254
|
+
| `npm run dev` | Watch 模式(文件变化自动重建) |
|
|
255
|
+
| `npm start` | 运行已构建的 CLI |
|
|
256
|
+
| `npm test` | 运行全部测试 (vitest) |
|
|
257
|
+
| `npm run test:watch` | Watch 模式测试 |
|
|
258
|
+
| `npm run sync` | 检查并更新上游 @antv/infographic |
|
|
259
|
+
| `npm run sync:check` | 仅检测,不更新(干运行) |
|
|
143
260
|
|
|
144
261
|
### 项目结构
|
|
145
262
|
|
|
@@ -150,7 +267,9 @@ infographic-gen/
|
|
|
150
267
|
│ ├── config/index.ts # 配置存储(conf 库)
|
|
151
268
|
│ ├── utils/
|
|
152
269
|
│ │ ├── logger.ts # 彩色日志输出
|
|
153
|
-
│ │
|
|
270
|
+
│ │ ├── spinner.ts # 加载动画
|
|
271
|
+
│ │ ├── i18n.ts # 国际化(en/zh-CN)
|
|
272
|
+
│ │ └── file-reader.ts # 文件文本提取(md/docx/pdf)
|
|
154
273
|
│ └── core/
|
|
155
274
|
│ ├── prompts.ts # 系统提示词(60+ 模板)
|
|
156
275
|
│ ├── ai.ts # OpenAI 集成 + 自动纠错
|
|
@@ -177,36 +296,44 @@ infographic-gen/
|
|
|
177
296
|
## 📋 配置管理
|
|
178
297
|
|
|
179
298
|
配置文件存储位置:
|
|
299
|
+
|
|
180
300
|
- **macOS/Linux** — `~/.config/infographic-gen/config.json`
|
|
181
301
|
- **Windows** — `%APPDATA%\infographic-gen\config.json`
|
|
182
302
|
|
|
183
303
|
### 可配置的字段
|
|
184
304
|
|
|
185
|
-
| 字段
|
|
186
|
-
|
|
187
|
-
| `apiKey`
|
|
188
|
-
| `baseUrl`
|
|
189
|
-
| `modelName`
|
|
190
|
-
| `
|
|
305
|
+
| 字段 | 类型 | 示例 | 说明 |
|
|
306
|
+
| ------------------ | ------ | --------------------------- | ---------------------------------- |
|
|
307
|
+
| `apiKey` | string | `sk-...` | LLM API 密钥 |
|
|
308
|
+
| `baseUrl` | string | `https://api.openai.com/v1` | LLM 服务端点(可选) |
|
|
309
|
+
| `modelName` | string | `gpt-4o` | 使用的模型(可选,默认 gpt-4o) |
|
|
310
|
+
| `defaultOutputDir` | string | `~/infographics` 或 `.` | 默认输出目录(可选,默认当前目录) |
|
|
311
|
+
| `locale` | string | `en` 或 `zh-CN` | CLI 界面语言(可选,默认 `en`) |
|
|
312
|
+
| `maxFileChars` | string | `30000` | 文件上下文最大字符数(可选) |
|
|
191
313
|
|
|
192
314
|
### 通过 CLI 管理配置
|
|
193
315
|
|
|
194
316
|
```bash
|
|
195
317
|
# 设置
|
|
196
|
-
|
|
197
|
-
|
|
318
|
+
ig-gen config set apiKey sk-...
|
|
319
|
+
ig-gen config set baseUrl https://api.deepseek.com
|
|
320
|
+
ig-gen config set defaultOutputDir ~/my-infographics
|
|
321
|
+
ig-gen config set locale zh-CN # 切换界面语言为中文
|
|
198
322
|
|
|
199
323
|
# 读取
|
|
200
|
-
|
|
324
|
+
ig-gen config get apiKey
|
|
325
|
+
ig-gen config get locale # 查看当前语言设置
|
|
326
|
+
ig-gen c get defaultOutputDir # 使用 c 别名
|
|
201
327
|
|
|
202
328
|
# 列出所有配置
|
|
203
|
-
|
|
329
|
+
ig-gen config list
|
|
330
|
+
ig-gen c list # 使用 c 别名
|
|
204
331
|
|
|
205
332
|
# 删除
|
|
206
|
-
|
|
333
|
+
ig-gen config delete baseUrl
|
|
207
334
|
|
|
208
335
|
# 显示配置文件路径
|
|
209
|
-
|
|
336
|
+
ig-gen config path
|
|
210
337
|
```
|
|
211
338
|
|
|
212
339
|
---
|
|
@@ -247,6 +374,7 @@ npm run sync
|
|
|
247
374
|
推送 git tag 后,GitHub Actions 会自动发布到 npm:
|
|
248
375
|
|
|
249
376
|
1. **创建版本 tag**(遵循语义化版本):
|
|
377
|
+
|
|
250
378
|
```bash
|
|
251
379
|
npm version patch # 1.0.0 → 1.0.1 (bug 修复)
|
|
252
380
|
npm version minor # 1.0.0 → 1.1.0 (新功能)
|
|
@@ -296,6 +424,7 @@ npm publish # 需要先运行 npm login
|
|
|
296
424
|
```
|
|
297
425
|
|
|
298
426
|
发布时:
|
|
427
|
+
|
|
299
428
|
- 仅包含 `dist/` 文件夹(通过 `"files"` 字段)
|
|
300
429
|
- 创建全局 `infographic-gen` 命令
|
|
301
430
|
- 仅支持 ESM,需要 Node.js 18+
|
|
@@ -307,13 +436,15 @@ npm publish # 需要先运行 npm login
|
|
|
307
436
|
已配置两个自动化工作流:
|
|
308
437
|
|
|
309
438
|
### 1. `sync-upstream.yml` — 上游变更检测
|
|
439
|
+
|
|
310
440
|
- 每周运行(周一 08:00 UTC)
|
|
311
441
|
- 检测 `@antv/infographic` 版本更新
|
|
312
442
|
- 检查 SKILL.md 变更
|
|
313
443
|
- 有变更时自动创建 PR
|
|
314
444
|
|
|
315
445
|
### 2. `publish.yml` — 发布到 npm
|
|
316
|
-
|
|
446
|
+
|
|
447
|
+
- 当推送 git tag 时触发(格式:v*.*.\*)
|
|
317
448
|
- 自动构建和测试
|
|
318
449
|
- 发布到 npm
|
|
319
450
|
- 创建 GitHub Release
|
|
@@ -330,6 +461,7 @@ npm run test:watch # Watch 模式
|
|
|
330
461
|
```
|
|
331
462
|
|
|
332
463
|
测试覆盖:
|
|
464
|
+
|
|
333
465
|
- **131 个测试**分布在 7 个测试文件
|
|
334
466
|
- 配置管理(持久化存储)
|
|
335
467
|
- 日志和加载动画工具
|
|
@@ -413,7 +545,7 @@ LLM 可能建议了你的 @antv/infographic 版本中不存在的模板。尝试
|
|
|
413
545
|
---
|
|
414
546
|
|
|
415
547
|
更多信息请查看:
|
|
548
|
+
|
|
416
549
|
- [README.md](README.md) — 英文版本
|
|
417
550
|
- [PUBLISHING.md](PUBLISHING.md) — 详细发布指南
|
|
418
551
|
- [QUICK_START.md](QUICK_START.md) — 快速参考卡片
|
|
419
|
-
|