121 lines
4.2 KiB
Markdown
121 lines
4.2 KiB
Markdown
|
# Infographic to Markdown
|
||
|
|
|
||
|
|
> **Version:** 1.0.0 | **Author:** Fu-Jie
|
||
|
|
|
||
|
|
AI-powered infographic generator that renders SVG on the frontend and embeds it directly into Markdown as a Data URL image.
|
||
|
|
|
||
|
|
## Overview
|
||
|
|
|
||
|
|
This plugin combines the power of AI text analysis with AntV Infographic visualization to create beautiful infographics that are embedded directly into chat messages as Markdown images.
|
||
|
|
|
||
|
|
### Key Features
|
||
|
|
|
||
|
|
- :robot: **AI-Powered**: Automatically analyzes text and selects the best infographic template
|
||
|
|
- :bar_chart: **Multiple Templates**: Supports 18+ infographic templates (lists, charts, comparisons, etc.)
|
||
|
|
- :framed_picture: **Self-Contained**: SVG/PNG embedded as Data URL, no external dependencies
|
||
|
|
- :memo: **Markdown Native**: Results are pure Markdown images, compatible everywhere
|
||
|
|
- :arrows_counterclockwise: **API Writeback**: Updates message content via REST API for persistence
|
||
|
|
|
||
|
|
### How It Works
|
||
|
|
|
||
|
|
```mermaid
|
||
|
|
graph TD
|
||
|
|
A[User triggers action] --> B[Python extracts message content]
|
||
|
|
B --> C[LLM generates Infographic syntax]
|
||
|
|
C --> D[Frontend JS loads AntV library]
|
||
|
|
D --> E[Render SVG offscreen]
|
||
|
|
E --> F[Export to Data URL]
|
||
|
|
F --> G[Update message via API]
|
||
|
|
G --> H[Display as Markdown image]
|
||
|
|
```
|
||
|
|
|
||
|
|
## Installation
|
||
|
|
|
||
|
|
1. Download `infographic_markdown.py` (English) or `infographic_markdown_cn.py` (Chinese)
|
||
|
|
2. Navigate to **Admin Panel** → **Settings** → **Functions**
|
||
|
|
3. Upload the file and configure settings
|
||
|
|
4. Use the action button in chat messages
|
||
|
|
|
||
|
|
## Configuration
|
||
|
|
|
||
|
|
| Parameter | Type | Default | Description |
|
||
|
|
|-----------|------|---------|-------------|
|
||
|
|
| `SHOW_STATUS` | bool | `true` | Show operation status updates |
|
||
|
|
| `MODEL_ID` | string | `""` | LLM model ID (empty = use current model) |
|
||
|
|
| `MIN_TEXT_LENGTH` | int | `50` | Minimum text length required |
|
||
|
|
| `MESSAGE_COUNT` | int | `1` | Number of recent messages to use |
|
||
|
|
| `SVG_WIDTH` | int | `800` | Width of generated SVG (pixels) |
|
||
|
|
| `EXPORT_FORMAT` | string | `"svg"` | Export format: `svg` or `png` |
|
||
|
|
|
||
|
|
## Supported Templates
|
||
|
|
|
||
|
|
| Category | Template | Description |
|
||
|
|
|----------|----------|-------------|
|
||
|
|
| List | `list-grid` | Grid cards |
|
||
|
|
| List | `list-vertical` | Vertical list |
|
||
|
|
| Tree | `tree-vertical` | Vertical tree |
|
||
|
|
| Tree | `tree-horizontal` | Horizontal tree |
|
||
|
|
| Mind Map | `mindmap` | Mind map |
|
||
|
|
| Process | `sequence-roadmap` | Roadmap |
|
||
|
|
| Process | `sequence-zigzag` | Zigzag process |
|
||
|
|
| Relation | `relation-sankey` | Sankey diagram |
|
||
|
|
| Relation | `relation-circle` | Circular relation |
|
||
|
|
| Compare | `compare-binary` | Binary comparison |
|
||
|
|
| Analysis | `compare-swot` | SWOT analysis |
|
||
|
|
| Quadrant | `quadrant-quarter` | Quadrant chart |
|
||
|
|
| Chart | `chart-bar` | Bar chart |
|
||
|
|
| Chart | `chart-column` | Column chart |
|
||
|
|
| Chart | `chart-line` | Line chart |
|
||
|
|
| Chart | `chart-pie` | Pie chart |
|
||
|
|
| Chart | `chart-doughnut` | Doughnut chart |
|
||
|
|
| Chart | `chart-area` | Area chart |
|
||
|
|
|
||
|
|
## Usage Example
|
||
|
|
|
||
|
|
1. Generate some text content in the chat (or have the AI generate it)
|
||
|
|
2. Click the **📊 Infographic to Markdown** action button
|
||
|
|
3. Wait for AI analysis and SVG rendering
|
||
|
|
4. The infographic will be embedded as a Markdown image
|
||
|
|
|
||
|
|
## Technical Details
|
||
|
|
|
||
|
|
### Data URL Embedding
|
||
|
|
|
||
|
|
The plugin converts SVG graphics to Base64-encoded Data URLs:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
const svgData = new XMLSerializer().serializeToString(svg);
|
||
|
|
const base64 = btoa(unescape(encodeURIComponent(svgData)));
|
||
|
|
const dataUri = "data:image/svg+xml;base64," + base64;
|
||
|
|
const markdownImage = ``;
|
||
|
|
```
|
||
|
|
|
||
|
|
### AntV toDataURL API
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
// Export as SVG (recommended)
|
||
|
|
const svgUrl = await instance.toDataURL({
|
||
|
|
type: 'svg',
|
||
|
|
embedResources: true
|
||
|
|
});
|
||
|
|
|
||
|
|
// Export as PNG
|
||
|
|
const pngUrl = await instance.toDataURL({
|
||
|
|
type: 'png',
|
||
|
|
dpr: 2
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
## Notes
|
||
|
|
|
||
|
|
1. **Browser Compatibility**: Requires modern browsers with ES6+ and Fetch API support
|
||
|
|
2. **Network Dependency**: First use requires loading AntV library from CDN
|
||
|
|
3. **Data URL Size**: Base64 encoding increases size by ~33%
|
||
|
|
4. **Chinese Fonts**: SVG export embeds fonts for correct display
|
||
|
|
|
||
|
|
## Related Resources
|
||
|
|
|
||
|
|
- [AntV Infographic Documentation](https://infographic.antv.vision/)
|
||
|
|
- [Infographic API Reference](https://infographic.antv.vision/reference/infographic-api)
|
||
|
|
- [Infographic Syntax Guide](https://infographic.antv.vision/learn/infographic-syntax)
|