feat: update Smart Infographic to v1.4.0 with static image output support

README.md

@@ -7,7 +7,7 @@ A collection of enhancements, plugins, and prompts for [OpenWebUI](https://githu
 <!-- STATS_START -->
 ## 📊 Community Stats
 
-> 🕐 Auto-updated: 2026-01-06 21:19
+> 🕐 Auto-updated: 2026-01-06 22:09
 
 | 👤 Author | 👥 Followers | ⭐ Points | 🏆 Contributions |
 |:---:|:---:|:---:|:---:|
@@ -15,17 +15,17 @@ A collection of enhancements, plugins, and prompts for [OpenWebUI](https://githu
 
 | 📝 Posts | ⬇️ Downloads | 👁️ Views | 👍 Upvotes | 💾 Saves |
 |:---:|:---:|:---:|:---:|:---:|
-| **11** | **794** | **8481** | **54** | **48** |
+| **11** | **797** | **8536** | **54** | **48** |
 
 ### 🔥 Top 5 Popular Plugins
 
 | Rank | Plugin | Downloads | Views |
 |:---:|------|:---:|:---:|
-| 🥇 | [Turn Any Text into Beautiful Mind Maps](https://openwebui.com/posts/turn_any_text_into_beautiful_mind_maps_3094c59a) | 240 | 2133 |
+| 🥇 | [Turn Any Text into Beautiful Mind Maps](https://openwebui.com/posts/turn_any_text_into_beautiful_mind_maps_3094c59a) | 242 | 2157 |
 | 🥈 | [Export to Excel](https://openwebui.com/posts/export_mulit_table_to_excel_244b8f9d) | 171 | 459 |
-| 🥉 | [Async Context Compression](https://openwebui.com/posts/async_context_compression_b1655bc8) | 112 | 1236 |
+| 🥉 | [Async Context Compression](https://openwebui.com/posts/async_context_compression_b1655bc8) | 112 | 1237 |
-| 4️⃣ | [Flash Card ](https://openwebui.com/posts/flash_card_65a2ea8f) | 76 | 1421 |
+| 4️⃣ | [Flash Card ](https://openwebui.com/posts/flash_card_65a2ea8f) | 76 | 1429 |
-| 5️⃣ | [Smart Infographic](https://openwebui.com/posts/smart_infographic_ad6f0c7f) | 65 | 909 |
+| 5️⃣ | [Smart Infographic](https://openwebui.com/posts/smart_infographic_ad6f0c7f) | 65 | 917 |
 
 *See full stats in [Community Stats Report](./docs/community-stats.md)*
 <!-- STATS_END -->

README_CN.md

@@ -7,7 +7,7 @@ OpenWebUI 增强功能集合。包含个人开发与收集的插件、提示词
 <!-- STATS_START -->
 ## 📊 社区统计
 
-> 🕐 自动更新于 2026-01-06 21:19
+> 🕐 自动更新于 2026-01-06 22:09
 
 | 👤 作者 | 👥 粉丝 | ⭐ 积分 | 🏆 贡献 |
 |:---:|:---:|:---:|:---:|
@@ -15,17 +15,17 @@ OpenWebUI 增强功能集合。包含个人开发与收集的插件、提示词
 
 | 📝 发布 | ⬇️ 下载 | 👁️ 浏览 | 👍 点赞 | 💾 收藏 |
 |:---:|:---:|:---:|:---:|:---:|
-| **11** | **794** | **8481** | **54** | **48** |
+| **11** | **797** | **8536** | **54** | **48** |
 
 ### 🔥 热门插件 Top 5
 
 | 排名 | 插件 | 下载 | 浏览 |
 |:---:|------|:---:|:---:|
-| 🥇 | [Turn Any Text into Beautiful Mind Maps](https://openwebui.com/posts/turn_any_text_into_beautiful_mind_maps_3094c59a) | 240 | 2133 |
+| 🥇 | [Turn Any Text into Beautiful Mind Maps](https://openwebui.com/posts/turn_any_text_into_beautiful_mind_maps_3094c59a) | 242 | 2157 |
 | 🥈 | [Export to Excel](https://openwebui.com/posts/export_mulit_table_to_excel_244b8f9d) | 171 | 459 |
-| 🥉 | [Async Context Compression](https://openwebui.com/posts/async_context_compression_b1655bc8) | 112 | 1236 |
+| 🥉 | [Async Context Compression](https://openwebui.com/posts/async_context_compression_b1655bc8) | 112 | 1237 |
-| 4️⃣ | [Flash Card ](https://openwebui.com/posts/flash_card_65a2ea8f) | 76 | 1421 |
+| 4️⃣ | [Flash Card ](https://openwebui.com/posts/flash_card_65a2ea8f) | 76 | 1429 |
-| 5️⃣ | [Smart Infographic](https://openwebui.com/posts/smart_infographic_ad6f0c7f) | 65 | 909 |
+| 5️⃣ | [Smart Infographic](https://openwebui.com/posts/smart_infographic_ad6f0c7f) | 65 | 917 |
 
 *完整统计请查看 [社区统计报告](./docs/community-stats.md)*
 <!-- STATS_END -->

docs/community-stats.en.md

@@ -1,14 +1,14 @@
 # 📊 OpenWebUI Community Stats Report
 
-> 📅 Updated: 2026-01-06 21:19
+> 📅 Updated: 2026-01-06 22:09
 
 ## 📈 Overview
 
 | Metric | Value |
 |------|------|
 | 📝 Total Posts | 11 |
-| ⬇️ Total Downloads | 794 |
+| ⬇️ Total Downloads | 797 |
-| 👁️ Total Views | 8481 |
+| 👁️ Total Views | 8536 |
 | 👍 Total Upvotes | 54 |
 | 💾 Total Saves | 48 |
 | 💬 Total Comments | 13 |
@@ -22,14 +22,14 @@
 
 | Rank | Title | Type | Version | Downloads | Views | Upvotes | Saves | Updated |
 |:---:|------|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
-| 1 | [Turn Any Text into Beautiful Mind Maps](https://openwebui.com/posts/turn_any_text_into_beautiful_mind_maps_3094c59a) | action | 0.8.2 | 240 | 2133 | 10 | 15 | 2026-01-03 |
+| 1 | [Turn Any Text into Beautiful Mind Maps](https://openwebui.com/posts/turn_any_text_into_beautiful_mind_maps_3094c59a) | action | 0.9.1 | 242 | 2157 | 10 | 15 | 2026-01-06 |
 | 2 | [Export to Excel](https://openwebui.com/posts/export_mulit_table_to_excel_244b8f9d) | action | 0.3.6 | 171 | 459 | 3 | 3 | 2026-01-03 |
-| 3 | [Async Context Compression](https://openwebui.com/posts/async_context_compression_b1655bc8) | filter | 1.1.0 | 112 | 1236 | 5 | 9 | 2025-12-31 |
+| 3 | [Async Context Compression](https://openwebui.com/posts/async_context_compression_b1655bc8) | filter | 1.1.0 | 112 | 1237 | 5 | 9 | 2025-12-31 |
-| 4 | [Flash Card ](https://openwebui.com/posts/flash_card_65a2ea8f) | action | 0.2.4 | 76 | 1421 | 8 | 5 | 2026-01-03 |
+| 4 | [Flash Card ](https://openwebui.com/posts/flash_card_65a2ea8f) | action | 0.2.4 | 76 | 1429 | 8 | 5 | 2026-01-03 |
-| 5 | [Smart Infographic](https://openwebui.com/posts/smart_infographic_ad6f0c7f) | action | 1.3.2 | 65 | 909 | 6 | 8 | 2026-01-03 |
+| 5 | [Smart Infographic](https://openwebui.com/posts/smart_infographic_ad6f0c7f) | action | 1.3.2 | 65 | 917 | 6 | 8 | 2026-01-03 |
-| 6 | [Export to Word (Enhanced Formatting)](https://openwebui.com/posts/export_to_word_enhanced_formatting_fca6a315) | action | 0.4.0 | 51 | 504 | 5 | 4 | 2026-01-05 |
+| 6 | [Export to Word (Enhanced Formatting)](https://openwebui.com/posts/export_to_word_enhanced_formatting_fca6a315) | action | 0.4.0 | 51 | 508 | 5 | 4 | 2026-01-05 |
-| 7 | [智能信息图](https://openwebui.com/posts/智能信息图_e04a48ff) | action | 1.3.1 | 33 | 398 | 3 | 0 | 2025-12-29 |
+| 7 | [智能信息图](https://openwebui.com/posts/智能信息图_e04a48ff) | action | 1.3.1 | 33 | 402 | 3 | 0 | 2025-12-29 |
-| 8 | [导出为 Word-支持公式、流程图、表格和代码块](https://openwebui.com/posts/导出为_word_支持公式流程图表格和代码块_8a6306c0) | action | 0.4.1 | 15 | 752 | 7 | 1 | 2026-01-05 |
+| 8 | [导出为 Word-支持公式、流程图、表格和代码块](https://openwebui.com/posts/导出为_word_支持公式流程图表格和代码块_8a6306c0) | action | 0.4.1 | 16 | 756 | 7 | 1 | 2026-01-05 |
 | 9 | [智能生成交互式思维导图,帮助用户可视化知识](https://openwebui.com/posts/智能生成交互式思维导图帮助用户可视化知识_8d4b097b) | action | 0.8.0 | 14 | 249 | 2 | 1 | 2025-12-31 |
-| 10 | [闪记卡生成插件](https://openwebui.com/posts/闪记卡生成插件_4a31eac3) | action | 0.2.2 | 12 | 309 | 3 | 1 | 2025-12-31 |
+| 10 | [闪记卡生成插件](https://openwebui.com/posts/闪记卡生成插件_4a31eac3) | action | 0.2.2 | 12 | 310 | 3 | 1 | 2025-12-31 |
-| 11 | [异步上下文压缩](https://openwebui.com/posts/异步上下文压缩_5c0617cb) | filter | 1.1.0 | 5 | 111 | 2 | 1 | 2025-12-31 |
+| 11 | [异步上下文压缩](https://openwebui.com/posts/异步上下文压缩_5c0617cb) | filter | 1.1.0 | 5 | 112 | 2 | 1 | 2025-12-31 |

docs/community-stats.json

@@ -1,7 +1,7 @@
 {
   "total_posts": 11,
-  "total_downloads": 794,
+  "total_downloads": 797,
-  "total_views": 8481,
+  "total_views": 8536,
   "total_upvotes": 54,
   "total_downvotes": 1,
   "total_saves": 48,
@@ -15,16 +15,16 @@
       "title": "Turn Any Text into Beautiful Mind Maps",
       "slug": "turn_any_text_into_beautiful_mind_maps_3094c59a",
       "type": "action",
-      "version": "0.8.2",
+      "version": "0.9.1",
       "author": "Fu-Jie",
       "description": "Intelligently analyzes text content and generates interactive mind maps to help users structure and visualize knowledge.",
-      "downloads": 240,
+      "downloads": 242,
-      "views": 2133,
+      "views": 2157,
       "upvotes": 10,
       "saves": 15,
       "comments": 8,
       "created_at": "2025-12-30",
-      "updated_at": "2026-01-03",
+      "updated_at": "2026-01-06",
       "url": "https://openwebui.com/posts/turn_any_text_into_beautiful_mind_maps_3094c59a"
     },
     {
@@ -51,7 +51,7 @@
       "author": "Fu-Jie",
       "description": "This filter automatically compresses long conversation contexts by intelligently summarizing and removing intermediate messages while preserving critical information, thereby significantly reducing token consumption.",
       "downloads": 112,
-      "views": 1236,
+      "views": 1237,
       "upvotes": 5,
       "saves": 9,
       "comments": 0,
@@ -67,7 +67,7 @@
       "author": "Fu-Jie",
       "description": "Quickly generates beautiful flashcards from text, extracting key points and categories.",
       "downloads": 76,
-      "views": 1421,
+      "views": 1429,
       "upvotes": 8,
       "saves": 5,
       "comments": 2,
@@ -83,7 +83,7 @@
       "author": "jeff",
       "description": "AI-powered infographic generator based on AntV Infographic. Supports professional templates, auto-icon matching, and SVG/PNG downloads.",
       "downloads": 65,
-      "views": 909,
+      "views": 917,
       "upvotes": 6,
       "saves": 8,
       "comments": 2,
@@ -99,7 +99,7 @@
       "author": "Fu-Jie",
       "description": "Export the current conversation to a formatted Word doc with syntax highlighting, AI-generated titles, and perfect Markdown rendering (tables, quotes, lists).",
       "downloads": 51,
-      "views": 504,
+      "views": 508,
       "upvotes": 5,
       "saves": 4,
       "comments": 0,
@@ -115,7 +115,7 @@
       "author": "jeff",
       "description": "基于 AntV Infographic 的智能信息图生成插件。支持多种专业模板，自动图标匹配，并提供 SVG/PNG 下载功能。",
       "downloads": 33,
-      "views": 398,
+      "views": 402,
       "upvotes": 3,
       "saves": 0,
       "comments": 0,
@@ -130,8 +130,8 @@
       "version": "0.4.1",
       "author": "Fu-Jie",
       "description": "将当前对话内容从 Markdown 转换并导出为 Word (.docx) 文件，支持中英文无乱码。",
-      "downloads": 15,
+      "downloads": 16,
-      "views": 752,
+      "views": 756,
       "upvotes": 7,
       "saves": 1,
       "comments": 1,
@@ -163,7 +163,7 @@
       "author": "Fu-Jie",
       "description": "快速将文本提炼为精美的学习记忆卡片，支持核心要点提取与分类。",
       "downloads": 12,
-      "views": 309,
+      "views": 310,
       "upvotes": 3,
       "saves": 1,
       "comments": 0,
@@ -179,7 +179,7 @@
       "author": "Fu-Jie",
       "description": "在 LLM 响应完成后进行上下文摘要和压缩",
       "downloads": 5,
-      "views": 111,
+      "views": 112,
       "upvotes": 2,
       "saves": 1,
       "comments": 0,

docs/community-stats.md

@@ -1,14 +1,14 @@
 # 📊 OpenWebUI 社区统计报告
 
-> 📅 更新时间: 2026-01-06 21:19
+> 📅 更新时间: 2026-01-06 22:09
 
 ## 📈 总览
 
 | 指标 | 数值 |
 |------|------|
 | 📝 发布数量 | 11 |
-| ⬇️ 总下载量 | 794 |
+| ⬇️ 总下载量 | 797 |
-| 👁️ 总浏览量 | 8481 |
+| 👁️ 总浏览量 | 8536 |
 | 👍 总点赞数 | 54 |
 | 💾 总收藏数 | 48 |
 | 💬 总评论数 | 13 |
@@ -22,14 +22,14 @@
 
 | 排名 | 标题 | 类型 | 版本 | 下载 | 浏览 | 点赞 | 收藏 | 更新日期 |
 |:---:|------|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
-| 1 | [Turn Any Text into Beautiful Mind Maps](https://openwebui.com/posts/turn_any_text_into_beautiful_mind_maps_3094c59a) | action | 0.8.2 | 240 | 2133 | 10 | 15 | 2026-01-03 |
+| 1 | [Turn Any Text into Beautiful Mind Maps](https://openwebui.com/posts/turn_any_text_into_beautiful_mind_maps_3094c59a) | action | 0.9.1 | 242 | 2157 | 10 | 15 | 2026-01-06 |
 | 2 | [Export to Excel](https://openwebui.com/posts/export_mulit_table_to_excel_244b8f9d) | action | 0.3.6 | 171 | 459 | 3 | 3 | 2026-01-03 |
-| 3 | [Async Context Compression](https://openwebui.com/posts/async_context_compression_b1655bc8) | filter | 1.1.0 | 112 | 1236 | 5 | 9 | 2025-12-31 |
+| 3 | [Async Context Compression](https://openwebui.com/posts/async_context_compression_b1655bc8) | filter | 1.1.0 | 112 | 1237 | 5 | 9 | 2025-12-31 |
-| 4 | [Flash Card ](https://openwebui.com/posts/flash_card_65a2ea8f) | action | 0.2.4 | 76 | 1421 | 8 | 5 | 2026-01-03 |
+| 4 | [Flash Card ](https://openwebui.com/posts/flash_card_65a2ea8f) | action | 0.2.4 | 76 | 1429 | 8 | 5 | 2026-01-03 |
-| 5 | [Smart Infographic](https://openwebui.com/posts/smart_infographic_ad6f0c7f) | action | 1.3.2 | 65 | 909 | 6 | 8 | 2026-01-03 |
+| 5 | [Smart Infographic](https://openwebui.com/posts/smart_infographic_ad6f0c7f) | action | 1.3.2 | 65 | 917 | 6 | 8 | 2026-01-03 |
-| 6 | [Export to Word (Enhanced Formatting)](https://openwebui.com/posts/export_to_word_enhanced_formatting_fca6a315) | action | 0.4.0 | 51 | 504 | 5 | 4 | 2026-01-05 |
+| 6 | [Export to Word (Enhanced Formatting)](https://openwebui.com/posts/export_to_word_enhanced_formatting_fca6a315) | action | 0.4.0 | 51 | 508 | 5 | 4 | 2026-01-05 |
-| 7 | [智能信息图](https://openwebui.com/posts/智能信息图_e04a48ff) | action | 1.3.1 | 33 | 398 | 3 | 0 | 2025-12-29 |
+| 7 | [智能信息图](https://openwebui.com/posts/智能信息图_e04a48ff) | action | 1.3.1 | 33 | 402 | 3 | 0 | 2025-12-29 |
-| 8 | [导出为 Word-支持公式、流程图、表格和代码块](https://openwebui.com/posts/导出为_word_支持公式流程图表格和代码块_8a6306c0) | action | 0.4.1 | 15 | 752 | 7 | 1 | 2026-01-05 |
+| 8 | [导出为 Word-支持公式、流程图、表格和代码块](https://openwebui.com/posts/导出为_word_支持公式流程图表格和代码块_8a6306c0) | action | 0.4.1 | 16 | 756 | 7 | 1 | 2026-01-05 |
 | 9 | [智能生成交互式思维导图,帮助用户可视化知识](https://openwebui.com/posts/智能生成交互式思维导图帮助用户可视化知识_8d4b097b) | action | 0.8.0 | 14 | 249 | 2 | 1 | 2025-12-31 |
-| 10 | [闪记卡生成插件](https://openwebui.com/posts/闪记卡生成插件_4a31eac3) | action | 0.2.2 | 12 | 309 | 3 | 1 | 2025-12-31 |
+| 10 | [闪记卡生成插件](https://openwebui.com/posts/闪记卡生成插件_4a31eac3) | action | 0.2.2 | 12 | 310 | 3 | 1 | 2025-12-31 |
-| 11 | [异步上下文压缩](https://openwebui.com/posts/异步上下文压缩_5c0617cb) | filter | 1.1.0 | 5 | 111 | 2 | 1 | 2025-12-31 |
+| 11 | [异步上下文压缩](https://openwebui.com/posts/异步上下文压缩_5c0617cb) | filter | 1.1.0 | 5 | 112 | 2 | 1 | 2025-12-31 |

docs/plugins/actions/index.md

@@ -33,7 +33,7 @@ Actions are interactive plugins that:
 
     Transform text into professional infographics using AntV visualization engine with various templates.
 
-    **Version:** 1.3.0
+    **Version:** 1.4.0
 
     [:octicons-arrow-right-24: Documentation](smart-infographic.md)
 

docs/plugins/actions/index.zh.md

@@ -33,7 +33,7 @@ Actions 是交互式插件，能够：
 
     使用 AntV 可视化引擎，将文本转成专业的信息图。
 
-    **版本：** 1.3.0
+    **版本：** 1.4.0
 
     [:octicons-arrow-right-24: 查看文档](smart-infographic.md)
 

docs/plugins/actions/smart-infographic.md

@@ -1,7 +1,7 @@
 # Smart Infographic
 
 <span class="category-badge action">Action</span>
-<span class="version-badge">v1.3.0</span>
+<span class="version-badge">v1.4.0</span>
 
 An AntV Infographic engine powered plugin that transforms long text into professional, beautiful infographics with a single click.
 
@@ -19,6 +19,8 @@ The Smart Infographic plugin uses AI to analyze text content and generate profes
 - :material-download: **Multi-Format Export**: Download your infographics as **SVG**, **PNG**, or **Standalone HTML** file
 - :material-theme-light-dark: **Theme Support**: Supports Dark/Light modes, auto-adapts theme colors
 - :material-cellphone-link: **Responsive Design**: Generated charts look great on both desktop and mobile devices
+- :material-image: **Image Embedding**: Option to embed charts as static images for better compatibility
+- :material-monitor-screenshot: **Adaptive Sizing**: Images automatically adapt to the chat container width
 
 ---
 
@@ -60,6 +62,7 @@ The Smart Infographic plugin uses AI to analyze text content and generate profes
 | `MIN_TEXT_LENGTH` | integer | `100` | Minimum characters required to trigger analysis |
 | `CLEAR_PREVIOUS_HTML` | boolean | `false` | Whether to clear previous charts |
 | `MESSAGE_COUNT` | integer | `1` | Number of recent messages to use for analysis |
+| `OUTPUT_MODE` | string | `html` | `html` for interactive chart (default), `image` for static image embedding |
 
 ---
 

docs/plugins/actions/smart-infographic.zh.md

@@ -1,7 +1,7 @@
 # Smart Infographic（智能信息图）
 
 <span class="category-badge action">Action</span>
-<span class="version-badge">v1.0.0</span>
+<span class="version-badge">v1.4.0</span>
 
 基于 AntV 信息图引擎，将长文本一键转成专业、美观的信息图。
 
@@ -19,6 +19,8 @@ Smart Infographic 使用 AI 分析文本，并基于 AntV 可视化引擎生成
 - :material-download: **多格式导出**：支持下载 **SVG**、**PNG**、**独立 HTML**
 - :material-theme-light-dark: **主题支持**：适配深色/浅色模式
 - :material-cellphone-link: **响应式**：桌面与移动端都能良好展示
+- :material-image: **图片嵌入**：支持将图表作为静态图片嵌入，兼容性更好
+- :material-monitor-screenshot: **自适应尺寸**：图片模式下自动适应聊天容器宽度
 
 ---
 
@@ -60,6 +62,7 @@ Smart Infographic 使用 AI 分析文本，并基于 AntV 可视化引擎生成
 | `MIN_TEXT_LENGTH` | integer | `100` | 触发分析的最小字符数 |
 | `CLEAR_PREVIOUS_HTML` | boolean | `false` | 是否清空之前生成的图表 |
 | `MESSAGE_COUNT` | integer | `1` | 参与分析的最近消息条数 |
+| `OUTPUT_MODE` | string | `html` | `html` 为交互式图表（默认），`image` 为静态图片嵌入 |
 
 ---
 

plugins/actions/infographic/README.md

@@ -38,6 +38,7 @@ You can adjust the following parameters in the plugin settings to optimize the g
 | **Min Text Length (MIN_TEXT_LENGTH)** | `100` | Minimum characters required to trigger analysis, preventing accidental triggers on short text. |
 | **Clear Previous (CLEAR_PREVIOUS_HTML)** | `False` | Whether to clear previous charts. If `False`, new charts will be appended below. |
 | **Message Count (MESSAGE_COUNT)** | `1` | Number of recent messages to use for analysis. Increase this for more context. |
+| **Output Mode (OUTPUT_MODE)** | `html` | `html` for interactive chart (default), `image` for static image embedding (useful for mobile/non-html clients). |
 
 ## 📝 Syntax Example (For Advanced Users)
 
@@ -66,6 +67,12 @@ MIT License
 
 ## Changelog
 
+### v1.4.0
+
+- ✨ Added **Image Output Mode**: Support embedding infographics as static images (SVG) for better compatibility.
+- 📱 Added **Responsive Sizing**: Images now auto-adapt to the chat container width.
+- 🔧 Added `OUTPUT_MODE` valve configuration.
+
 ### v1.3.2
 
 - Removed debug messages from output

plugins/actions/infographic/README_CN.md

@@ -38,6 +38,7 @@
 | **最小文本长度 (MIN_TEXT_LENGTH)** | `100` | 触发分析所需的最小字符数，防止对过短的对话误操作。 |
 | **清除旧结果 (CLEAR_PREVIOUS_HTML)** | `False` | 每次生成是否清除之前的图表。若为 `False`，新图表将追加在下方。 |
 | **上下文消息数 (MESSAGE_COUNT)** | `1` | 用于分析的最近消息条数。增加此值可让 AI 参考更多对话背景。 |
+| **输出模式 (OUTPUT_MODE)** | `html` | `html` 为交互式图表（默认），`image` 为静态图片嵌入（适合移动端或不支持 HTML 的客户端）。 |
 
 ## 📝 语法示例 (高级用户)
 
@@ -66,6 +67,12 @@ MIT License
 
 ## 更新日志
 
+### v1.4.0
+
+- ✨ 新增 **图片输出模式**：支持将信息图作为静态图片 (SVG) 嵌入，兼容性更好。
+- 📱 新增 **响应式尺寸**：图片模式下自动适应聊天容器宽度。
+- 🔧 新增 `OUTPUT_MODE` 配置项。
+
 ### v1.3.2
 
 - 移除输出中的调试信息

plugins/actions/infographic/infographic.py

@@ -3,12 +3,12 @@ title: 📊 Smart Infographic (AntV)
 author: jeff
 author_url: https://github.com/Fu-Jie/awesome-openwebui
 icon_url: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxsaW5lIHgxPSIxMiIgeTE9IjIwIiB4Mj0iMTIiIHkyPSIxMCIgLz4KICA8bGluZSB4MT0iMTgiIHkxPSIyMCIgeDI9IjE4IiB5Mj0iNCIgLz4KICA8bGluZSB4MT0iNiIgeTE9IjIwIiB4Mj0iNiIgeTI9IjE2IiAvPgo8L3N2Zz4=
-version: 1.3.2
+version: 1.4.0
 description: AI-powered infographic generator based on AntV Infographic. Supports professional templates, auto-icon matching, and SVG/PNG downloads.
 """
 
 from pydantic import BaseModel, Field
-from typing import Optional, Dict, Any
+from typing import Optional, Dict, Any, Callable, Awaitable
 import logging
 import time
 import re
@@ -821,10 +821,54 @@ class Action:
             default=1,
             description="Number of recent messages to use for generation. Set to 1 for just the last message, or higher for more context.",
         )
+        OUTPUT_MODE: str = Field(
+            default="html",
+            description="Output mode: 'html' for interactive HTML (default), or 'image' to embed as Markdown image.",
+        )
 
     def __init__(self):
         self.valves = self.Valves()
 
+    def _extract_chat_id(self, body: dict, metadata: Optional[dict]) -> str:
+        """Extract chat_id from body or metadata"""
+        if isinstance(body, dict):
+            chat_id = body.get("chat_id")
+            if isinstance(chat_id, str) and chat_id.strip():
+                return chat_id.strip()
+
+            body_metadata = body.get("metadata", {})
+            if isinstance(body_metadata, dict):
+                chat_id = body_metadata.get("chat_id")
+                if isinstance(chat_id, str) and chat_id.strip():
+                    return chat_id.strip()
+
+        if isinstance(metadata, dict):
+            chat_id = metadata.get("chat_id")
+            if isinstance(chat_id, str) and chat_id.strip():
+                return chat_id.strip()
+
+        return ""
+
+    def _extract_message_id(self, body: dict, metadata: Optional[dict]) -> str:
+        """Extract message_id from body or metadata"""
+        if isinstance(body, dict):
+            message_id = body.get("id")
+            if isinstance(message_id, str) and message_id.strip():
+                return message_id.strip()
+
+            body_metadata = body.get("metadata", {})
+            if isinstance(body_metadata, dict):
+                message_id = body_metadata.get("message_id")
+                if isinstance(message_id, str) and message_id.strip():
+                    return message_id.strip()
+
+        if isinstance(metadata, dict):
+            message_id = metadata.get("message_id")
+            if isinstance(message_id, str) and message_id.strip():
+                return message_id.strip()
+
+        return ""
+
     def _extract_infographic_syntax(self, llm_output: str) -> str:
         """Extract infographic syntax from LLM output"""
         match = re.search(r"```infographic\s*(.*?)\s*```", llm_output, re.DOTALL)
@@ -912,14 +956,332 @@ class Action:
 
         return base_html.strip()
 
+    def _generate_image_js_code(
+        self,
+        unique_id: str,
+        chat_id: str,
+        message_id: str,
+        infographic_syntax: str,
+    ) -> str:
+        """Generate JavaScript code for frontend SVG rendering and image embedding"""
+
+        # Escape the syntax for JS embedding
+        syntax_escaped = (
+            infographic_syntax.replace("\\", "\\\\")
+            .replace("`", "\\`")
+            .replace("${", "\\${")
+            .replace("</script>", "<\\/script>")
+        )
+
+        return f"""
+(async function() {{
+    const uniqueId = "{unique_id}";
+    const chatId = "{chat_id}";
+    const messageId = "{message_id}";
+    const defaultWidth = 1200;
+    const defaultHeight = 800;
+    
+    // Auto-detect chat container width for responsive sizing
+    let svgWidth = defaultWidth;
+    let svgHeight = defaultHeight;
+    const chatContainer = document.getElementById('chat-container');
+    if (chatContainer) {{
+        const containerWidth = chatContainer.clientWidth;
+        if (containerWidth > 100) {{
+            // Use container width with some padding (90% of container)
+            svgWidth = Math.floor(containerWidth * 0.9);
+            // Maintain aspect ratio based on default dimensions
+            svgHeight = Math.floor(svgWidth * (defaultHeight / defaultWidth));
+            console.log("[Infographic Image] Auto-detected container width:", containerWidth, "-> SVG:", svgWidth, "x", svgHeight);
+        }}
+    }}
+    
+    console.log("[Infographic Image] Starting render...");
+    console.log("[Infographic Image] chatId:", chatId, "messageId:", messageId);
+    
+    try {{
+        // Load AntV Infographic if not loaded
+        if (typeof AntVInfographic === 'undefined') {{
+            console.log("[Infographic Image] Loading AntV Infographic...");
+            await new Promise((resolve, reject) => {{
+                const script = document.createElement('script');
+                script.src = 'https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js';
+                script.onload = resolve;
+                script.onerror = reject;
+                document.head.appendChild(script);
+            }});
+        }}
+        
+        const {{ Infographic }} = AntVInfographic;
+        
+        // Get syntax content
+        let syntaxContent = `{syntax_escaped}`;
+        console.log("[Infographic Image] Syntax length:", syntaxContent.length);
+        
+        // Clean up syntax: remove code block markers
+        const backtick = String.fromCharCode(96);
+        const prefix = backtick + backtick + backtick + 'infographic';
+        const simplePrefix = backtick + backtick + backtick;
+        
+        if (syntaxContent.toLowerCase().startsWith(prefix)) {{
+            syntaxContent = syntaxContent.substring(prefix.length).trim();
+        }} else if (syntaxContent.startsWith(simplePrefix)) {{
+            syntaxContent = syntaxContent.substring(simplePrefix.length).trim();
+        }}
+        
+        if (syntaxContent.endsWith(simplePrefix)) {{
+            syntaxContent = syntaxContent.substring(0, syntaxContent.length - simplePrefix.length).trim();
+        }}
+        
+        // Fix syntax: remove colons after keywords
+        syntaxContent = syntaxContent.replace(/^(data|items|children|theme|config):/gm, '$1');
+        syntaxContent = syntaxContent.replace(/(\\s)(children|items):/g, '$1$2');
+        
+        // Ensure infographic prefix
+        if (!syntaxContent.trim().toLowerCase().startsWith('infographic')) {{
+            const firstWord = syntaxContent.trim().split(/\\s+/)[0].toLowerCase();
+            if (!['data', 'theme', 'design', 'items'].includes(firstWord)) {{
+                syntaxContent = 'infographic ' + syntaxContent;
+            }}
+        }}
+        
+        // Template mapping
+        const TEMPLATE_MAPPING = {{
+            'list-grid': 'list-grid-compact-card',
+            'list-vertical': 'list-column-simple-vertical-arrow',
+            'tree-vertical': 'hierarchy-tree-tech-style-capsule-item',
+            'tree-horizontal': 'hierarchy-tree-lr-tech-style-capsule-item',
+            'mindmap': 'hierarchy-mindmap-branch-gradient-capsule-item',
+            'sequence-roadmap': 'sequence-roadmap-vertical-simple',
+            'sequence-zigzag': 'sequence-horizontal-zigzag-simple',
+            'sequence-horizontal': 'sequence-horizontal-zigzag-simple',
+            'relation-sankey': 'relation-sankey-simple',
+            'relation-circle': 'relation-circle-icon-badge',
+            'compare-binary': 'compare-binary-horizontal-simple-vs',
+            'compare-swot': 'compare-swot',
+            'quadrant-quarter': 'quadrant-quarter-simple-card',
+            'statistic-card': 'list-grid-compact-card',
+            'chart-bar': 'chart-bar-plain-text',
+            'chart-column': 'chart-column-simple',
+            'chart-line': 'chart-line-plain-text',
+            'chart-area': 'chart-area-simple',
+            'chart-pie': 'chart-pie-plain-text',
+            'chart-doughnut': 'chart-pie-donut-plain-text'
+        }};
+        
+        for (const [key, value] of Object.entries(TEMPLATE_MAPPING)) {{
+            const regex = new RegExp(`infographic\\\\s+${{key}}(?=\\\\s|$)`, 'i');
+            if (regex.test(syntaxContent)) {{
+                syntaxContent = syntaxContent.replace(regex, `infographic ${{value}}`);
+                break;
+            }}
+        }}
+        
+        // Create offscreen container
+        const container = document.createElement('div');
+        container.id = 'infographic-offscreen-' + uniqueId;
+        container.style.cssText = 'position:absolute;left:-9999px;top:-9999px;width:' + svgWidth + 'px;height:' + svgHeight + 'px;background:#ffffff;';
+        document.body.appendChild(container);
+        
+        // Create infographic instance
+        const instance = new Infographic({{
+            container: '#' + container.id,
+            width: svgWidth,
+            height: svgHeight,
+            padding: 24,
+        }});
+        
+        console.log("[Infographic Image] Rendering infographic...");
+        instance.render(syntaxContent);
+        
+        // Wait for render to complete
+        await new Promise(resolve => setTimeout(resolve, 2000));
+        
+        // Get SVG element
+        const svgEl = container.querySelector('svg');
+        if (!svgEl) {{
+            throw new Error('SVG element not found after rendering');
+        }}
+        
+        // Get actual dimensions
+        const bbox = svgEl.getBoundingClientRect();
+        const width = bbox.width || svgWidth;
+        const height = bbox.height || svgHeight;
+        
+        // Clone and prepare SVG for export
+        const clonedSvg = svgEl.cloneNode(true);
+        clonedSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+        clonedSvg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
+        clonedSvg.setAttribute('width', width);
+        clonedSvg.setAttribute('height', height);
+        
+        // Add background rect
+        const bgRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        bgRect.setAttribute('width', '100%');
+        bgRect.setAttribute('height', '100%');
+        bgRect.setAttribute('fill', '#ffffff');
+        clonedSvg.insertBefore(bgRect, clonedSvg.firstChild);
+        
+        // Serialize SVG to string
+        const svgData = new XMLSerializer().serializeToString(clonedSvg);
+        
+        // Cleanup container
+        document.body.removeChild(container);
+        
+        // Convert SVG string to Blob
+        const blob = new Blob([svgData], {{ type: 'image/svg+xml' }});
+        const file = new File([blob], `infographic-${{uniqueId}}.svg`, {{ type: 'image/svg+xml' }});
+        
+        // Upload file to OpenWebUI API
+        console.log("[Infographic Image] Uploading SVG file...");
+        const token = localStorage.getItem("token");
+        const formData = new FormData();
+        formData.append('file', file);
+        
+        const uploadResponse = await fetch('/api/v1/files/', {{
+            method: 'POST',
+            headers: {{
+                'Authorization': `Bearer ${{token}}`
+            }},
+            body: formData
+        }});
+        
+        if (!uploadResponse.ok) {{
+            throw new Error(`Upload failed: ${{uploadResponse.statusText}}`);
+        }}
+        
+        const fileData = await uploadResponse.json();
+        const fileId = fileData.id;
+        const imageUrl = `/api/v1/files/${{fileId}}/content`;
+        
+        console.log("[Infographic Image] File uploaded, ID:", fileId);
+        
+        // Generate markdown image with file URL
+        const markdownImage = `![📊 Infographic](${{imageUrl}})`;
+        
+        // Update message via API
+        if (chatId && messageId) {{
+            
+            // Helper function with retry logic
+            const fetchWithRetry = async (url, options, retries = 3) => {{
+                for (let i = 0; i < retries; i++) {{
+                    try {{
+                        const response = await fetch(url, options);
+                        if (response.ok) return response;
+                        if (i < retries - 1) {{
+                            console.log(`[Infographic Image] Retry ${{i + 1}}/${{retries}} for ${{url}}`);
+                            await new Promise(r => setTimeout(r, 1000 * (i + 1)));
+                        }}
+                    }} catch (e) {{
+                        if (i === retries - 1) throw e;
+                        await new Promise(r => setTimeout(r, 1000 * (i + 1)));
+                    }}
+                }}
+                return null;
+            }};
+            
+            // Get current chat data
+            const getResponse = await fetch(`/api/v1/chats/${{chatId}}`, {{
+                method: "GET",
+                headers: {{ "Authorization": `Bearer ${{token}}` }}
+            }});
+            
+            if (!getResponse.ok) {{
+                throw new Error("Failed to get chat data: " + getResponse.status);
+            }}
+            
+            const chatData = await getResponse.json();
+            let updatedMessages = [];
+            let newContent = "";
+            
+            if (chatData.chat && chatData.chat.messages) {{
+                updatedMessages = chatData.chat.messages.map(m => {{
+                    if (m.id === messageId) {{
+                        const originalContent = m.content || "";
+                        // Remove existing infographic images
+                        const infographicPattern = /\\n*!\\[📊[^\\]]*\\]\\((?:data:image\\/[^)]+|(?:\\/api\\/v1\\/files\\/[^)]+))\\)/g;
+                        let cleanedContent = originalContent.replace(infographicPattern, "");
+                        cleanedContent = cleanedContent.replace(/\\n{{3,}}/g, "\\n\\n").trim();
+                        // Append new image
+                        newContent = cleanedContent + "\\n\\n" + markdownImage;
+                        
+                        // Update history object as well
+                        if (chatData.chat.history && chatData.chat.history.messages) {{
+                            if (chatData.chat.history.messages[messageId]) {{
+                                chatData.chat.history.messages[messageId].content = newContent;
+                            }}
+                        }}
+                        
+                        return {{ ...m, content: newContent }};
+                    }}
+                    return m;
+                }});
+            }}
+            
+            if (!newContent) {{
+                console.warn("[Infographic Image] Could not find message to update");
+                return;
+            }}
+            
+            // Try to update frontend display via event API
+            try {{
+                await fetch(`/api/v1/chats/${{chatId}}/messages/${{messageId}}/event`, {{
+                    method: "POST",
+                    headers: {{
+                        "Content-Type": "application/json",
+                        "Authorization": `Bearer ${{token}}`
+                    }},
+                    body: JSON.stringify({{
+                        type: "chat:message",
+                        data: {{ content: newContent }}
+                    }})
+                }});
+            }} catch (eventErr) {{
+                console.log("[Infographic Image] Event API not available, continuing...");
+            }}
+            
+            // Persist to database
+            const updatePayload = {{
+                chat: {{
+                    ...chatData.chat,
+                    messages: updatedMessages
+                }}
+            }};
+            
+            const persistResponse = await fetchWithRetry(`/api/v1/chats/${{chatId}}`, {{
+                method: "POST",
+                headers: {{
+                    "Content-Type": "application/json",
+                    "Authorization": `Bearer ${{token}}`
+                }},
+                body: JSON.stringify(updatePayload)
+            }});
+            
+            if (persistResponse && persistResponse.ok) {{
+                console.log("[Infographic Image] ✅ Message persisted successfully!");
+            }} else {{
+                console.error("[Infographic Image] ❌ Failed to persist message after retries");
+            }}
+        }} else {{
+            console.warn("[Infographic Image] ⚠️ Missing chatId or messageId, cannot persist");
+        }}
+        
+    }} catch (error) {{
+        console.error("[Infographic Image] Error:", error);
+    }}
+}})();
+"""
+
     async def action(
         self,
         body: dict,
         __user__: Optional[Dict[str, Any]] = None,
         __event_emitter__: Optional[Any] = None,
+        __event_call__: Optional[Callable[[Any], Awaitable[None]]] = None,
+        __metadata__: Optional[dict] = None,
         __request__: Optional[Request] = None,
     ) -> Optional[dict]:
-        logger.info("Action: Infographic started (v1.0.0)")
+        logger.info("Action: Infographic started (v1.4.0)")
 
         # Get user information
         if isinstance(__user__, (list, tuple)):
@@ -1114,6 +1476,45 @@ class Action:
                         user_language,
                     )
 
+            # Check output mode
+            if self.valves.OUTPUT_MODE == "image":
+                # Image mode: use JavaScript to render and embed as Markdown image
+                chat_id = self._extract_chat_id(body, body.get("metadata"))
+                message_id = self._extract_message_id(body, body.get("metadata"))
+
+                await self._emit_status(
+                    __event_emitter__,
+                    "📊 Infographic: Rendering image...",
+                    False,
+                )
+
+                if __event_call__:
+                    js_code = self._generate_image_js_code(
+                        unique_id=unique_id,
+                        chat_id=chat_id,
+                        message_id=message_id,
+                        infographic_syntax=infographic_syntax,
+                    )
+
+                    await __event_call__(
+                        {
+                            "type": "execute",
+                            "data": {"code": js_code},
+                        }
+                    )
+
+                await self._emit_status(
+                    __event_emitter__, "✅ Infographic: Image generated!", True
+                )
+                await self._emit_notification(
+                    __event_emitter__,
+                    f"📊 Infographic image generated, {user_name}!",
+                    "success",
+                )
+                logger.info("Infographic generation completed in image mode")
+                return body
+
+            # HTML mode (default): embed as HTML block
             html_embed_tag = f"```html\n{final_html}\n```"
             body["messages"][-1]["content"] = f"{original_content}\n\n{html_embed_tag}"
 

plugins/actions/infographic/infographic_cn.py

@@ -3,12 +3,12 @@ title: 📊 智能信息图 (AntV Infographic)
 author: jeff
 author_url: https://github.com/Fu-Jie/awesome-openwebui
 icon_url: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxsaW5lIHgxPSIxMiIgeTE9IjIwIiB4Mj0iMTIiIHkyPSIxMCIgLz4KICA8bGluZSB4MT0iMTgiIHkxPSIyMCIgeDI9IjE4IiB5Mj0iNCIgLz4KICA8bGluZSB4MT0iNiIgeTE9IjIwIiB4Mj0iNiIgeTI9IjE2IiAvPgo8L3N2Zz4=
-version: 1.3.2
+version: 1.4.0
 description: 基于 AntV Infographic 的智能信息图生成插件。支持多种专业模板，自动图标匹配，并提供 SVG/PNG 下载功能。
 """
 
 from pydantic import BaseModel, Field
-from typing import Optional, Dict, Any
+from typing import Optional, Dict, Any, Callable, Awaitable
 import logging
 import time
 import re
@@ -849,6 +849,10 @@ class Action:
             default=1,
             description="用于生成的最近消息数量。设置为1仅使用最后一条消息，更大值可包含更多上下文。",
         )
+        OUTPUT_MODE: str = Field(
+            default="html",
+            description="输出模式：'html' 为交互式HTML（默认），'image' 将嵌入为Markdown图片。",
+        )
 
     def __init__(self):
         self.valves = self.Valves()
@@ -862,6 +866,46 @@ class Action:
             "Sunday": "星期日",
         }
 
+    def _extract_chat_id(self, body: dict, metadata: Optional[dict]) -> str:
+        """从 body 或 metadata 中提取 chat_id"""
+        if isinstance(body, dict):
+            chat_id = body.get("chat_id")
+            if isinstance(chat_id, str) and chat_id.strip():
+                return chat_id.strip()
+
+            body_metadata = body.get("metadata", {})
+            if isinstance(body_metadata, dict):
+                chat_id = body_metadata.get("chat_id")
+                if isinstance(chat_id, str) and chat_id.strip():
+                    return chat_id.strip()
+
+        if isinstance(metadata, dict):
+            chat_id = metadata.get("chat_id")
+            if isinstance(chat_id, str) and chat_id.strip():
+                return chat_id.strip()
+
+        return ""
+
+    def _extract_message_id(self, body: dict, metadata: Optional[dict]) -> str:
+        """从 body 或 metadata 中提取 message_id"""
+        if isinstance(body, dict):
+            message_id = body.get("id")
+            if isinstance(message_id, str) and message_id.strip():
+                return message_id.strip()
+
+            body_metadata = body.get("metadata", {})
+            if isinstance(body_metadata, dict):
+                message_id = body_metadata.get("message_id")
+                if isinstance(message_id, str) and message_id.strip():
+                    return message_id.strip()
+
+        if isinstance(metadata, dict):
+            message_id = metadata.get("message_id")
+            if isinstance(message_id, str) and message_id.strip():
+                return message_id.strip()
+
+        return ""
+
     def _extract_infographic_syntax(self, llm_output: str) -> str:
         """提取LLM输出中的infographic语法"""
         # 1. 优先匹配 ```infographic
@@ -973,14 +1017,332 @@ class Action:
 
         return base_html.strip()
 
+    def _generate_image_js_code(
+        self,
+        unique_id: str,
+        chat_id: str,
+        message_id: str,
+        infographic_syntax: str,
+    ) -> str:
+        """生成前端 SVG 渲染和图片嵌入的 JavaScript 代码"""
+
+        # 转义语法以便在 JS 中嵌入
+        syntax_escaped = (
+            infographic_syntax.replace("\\", "\\\\")
+            .replace("`", "\\`")
+            .replace("${", "\\${")
+            .replace("</script>", "<\\/script>")
+        )
+
+        return f"""
+(async function() {{
+    const uniqueId = "{unique_id}";
+    const chatId = "{chat_id}";
+    const messageId = "{message_id}";
+    const defaultWidth = 1200;
+    const defaultHeight = 800;
+    
+    // 自动检测聊天容器宽度以实现响应式尺寸
+    let svgWidth = defaultWidth;
+    let svgHeight = defaultHeight;
+    const chatContainer = document.getElementById('chat-container');
+    if (chatContainer) {{
+        const containerWidth = chatContainer.clientWidth;
+        if (containerWidth > 100) {{
+            // 使用容器宽度的 90%
+            svgWidth = Math.floor(containerWidth * 0.9);
+            // 根据默认尺寸保持宽高比
+            svgHeight = Math.floor(svgWidth * (defaultHeight / defaultWidth));
+            console.log("[Infographic Image] 自动检测容器宽度:", containerWidth, "-> SVG:", svgWidth, "x", svgHeight);
+        }}
+    }}
+    
+    console.log("[Infographic Image] 开始渲染...");
+    console.log("[Infographic Image] chatId:", chatId, "messageId:", messageId);
+    
+    try {{
+        // 加载 AntV Infographic（如果未加载）
+        if (typeof AntVInfographic === 'undefined') {{
+            console.log("[Infographic Image] 加载 AntV Infographic...");
+            await new Promise((resolve, reject) => {{
+                const script = document.createElement('script');
+                script.src = 'https://registry.npmmirror.com/@antv/infographic/0.2.1/files/dist/infographic.min.js';
+                script.onload = resolve;
+                script.onerror = reject;
+                document.head.appendChild(script);
+            }});
+        }}
+        
+        const {{ Infographic }} = AntVInfographic;
+        
+        // 获取语法内容
+        let syntaxContent = `{syntax_escaped}`;
+        console.log("[Infographic Image] 语法长度:", syntaxContent.length);
+        
+        // 清理语法：移除代码块标记
+        const backtick = String.fromCharCode(96);
+        const prefix = backtick + backtick + backtick + 'infographic';
+        const simplePrefix = backtick + backtick + backtick;
+        
+        if (syntaxContent.toLowerCase().startsWith(prefix)) {{
+            syntaxContent = syntaxContent.substring(prefix.length).trim();
+        }} else if (syntaxContent.startsWith(simplePrefix)) {{
+            syntaxContent = syntaxContent.substring(simplePrefix.length).trim();
+        }}
+        
+        if (syntaxContent.endsWith(simplePrefix)) {{
+            syntaxContent = syntaxContent.substring(0, syntaxContent.length - simplePrefix.length).trim();
+        }}
+        
+        // 修复语法：移除关键字后的冒号
+        syntaxContent = syntaxContent.replace(/^(data|items|children|theme|config):/gm, '$1');
+        syntaxContent = syntaxContent.replace(/(\\s)(children|items):/g, '$1$2');
+        
+        // 确保 infographic 前缀
+        if (!syntaxContent.trim().toLowerCase().startsWith('infographic')) {{
+            const firstWord = syntaxContent.trim().split(/\\s+/)[0].toLowerCase();
+            if (!['data', 'theme', 'design', 'items'].includes(firstWord)) {{
+                syntaxContent = 'infographic ' + syntaxContent;
+            }}
+        }}
+        
+        // 模板映射
+        const TEMPLATE_MAPPING = {{
+            'list-grid': 'list-grid-compact-card',
+            'list-vertical': 'list-column-simple-vertical-arrow',
+            'tree-vertical': 'hierarchy-tree-tech-style-capsule-item',
+            'tree-horizontal': 'hierarchy-tree-lr-tech-style-capsule-item',
+            'mindmap': 'hierarchy-mindmap-branch-gradient-capsule-item',
+            'sequence-roadmap': 'sequence-roadmap-vertical-simple',
+            'sequence-zigzag': 'sequence-horizontal-zigzag-simple',
+            'sequence-horizontal': 'sequence-horizontal-zigzag-simple',
+            'relation-sankey': 'relation-sankey-simple',
+            'relation-circle': 'relation-circle-icon-badge',
+            'compare-binary': 'compare-binary-horizontal-simple-vs',
+            'compare-swot': 'compare-swot',
+            'quadrant-quarter': 'quadrant-quarter-simple-card',
+            'statistic-card': 'list-grid-compact-card',
+            'chart-bar': 'chart-bar-plain-text',
+            'chart-column': 'chart-column-simple',
+            'chart-line': 'chart-line-plain-text',
+            'chart-area': 'chart-area-simple',
+            'chart-pie': 'chart-pie-plain-text',
+            'chart-doughnut': 'chart-pie-donut-plain-text'
+        }};
+        
+        for (const [key, value] of Object.entries(TEMPLATE_MAPPING)) {{
+            const regex = new RegExp(`infographic\\\\s+${{key}}(?=\\\\s|$)`, 'i');
+            if (regex.test(syntaxContent)) {{
+                syntaxContent = syntaxContent.replace(regex, `infographic ${{value}}`);
+                break;
+            }}
+        }}
+        
+        // 创建离屏容器
+        const container = document.createElement('div');
+        container.id = 'infographic-offscreen-' + uniqueId;
+        container.style.cssText = 'position:absolute;left:-9999px;top:-9999px;width:' + svgWidth + 'px;height:' + svgHeight + 'px;background:#ffffff;';
+        document.body.appendChild(container);
+        
+        // 创建信息图实例
+        const instance = new Infographic({{
+            container: '#' + container.id,
+            width: svgWidth,
+            height: svgHeight,
+            padding: 24,
+        }});
+        
+        console.log("[Infographic Image] 渲染信息图...");
+        instance.render(syntaxContent);
+        
+        // 等待渲染完成
+        await new Promise(resolve => setTimeout(resolve, 2000));
+        
+        // 获取 SVG 元素
+        const svgEl = container.querySelector('svg');
+        if (!svgEl) {{
+            throw new Error('渲染后未找到 SVG 元素');
+        }}
+        
+        // 获取实际尺寸
+        const bbox = svgEl.getBoundingClientRect();
+        const width = bbox.width || svgWidth;
+        const height = bbox.height || svgHeight;
+        
+        // 克隆并准备导出的 SVG
+        const clonedSvg = svgEl.cloneNode(true);
+        clonedSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+        clonedSvg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
+        clonedSvg.setAttribute('width', width);
+        clonedSvg.setAttribute('height', height);
+        
+        // 添加背景矩形
+        const bgRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        bgRect.setAttribute('width', '100%');
+        bgRect.setAttribute('height', '100%');
+        bgRect.setAttribute('fill', '#ffffff');
+        clonedSvg.insertBefore(bgRect, clonedSvg.firstChild);
+        
+        // 序列化 SVG 为字符串
+        const svgData = new XMLSerializer().serializeToString(clonedSvg);
+        
+        // 清理容器
+        document.body.removeChild(container);
+        
+        // 将 SVG 字符串转换为 Blob
+        const blob = new Blob([svgData], {{ type: 'image/svg+xml' }});
+        const file = new File([blob], `infographic-${{uniqueId}}.svg`, {{ type: 'image/svg+xml' }});
+        
+        // 上传文件到 OpenWebUI API
+        console.log("[Infographic Image] 上传 SVG 文件...");
+        const token = localStorage.getItem("token");
+        const formData = new FormData();
+        formData.append('file', file);
+        
+        const uploadResponse = await fetch('/api/v1/files/', {{
+            method: 'POST',
+            headers: {{
+                'Authorization': `Bearer ${{token}}`
+            }},
+            body: formData
+        }});
+        
+        if (!uploadResponse.ok) {{
+            throw new Error(`上传失败: ${{uploadResponse.statusText}}`);
+        }}
+        
+        const fileData = await uploadResponse.json();
+        const fileId = fileData.id;
+        const imageUrl = `/api/v1/files/${{fileId}}/content`;
+        
+        console.log("[Infographic Image] 文件已上传, ID:", fileId);
+        
+        // 生成带文件 URL 的 markdown 图片
+        const markdownImage = `![📊 信息图](${{imageUrl}})`;
+        
+        // 通过 API 更新消息
+        if (chatId && messageId) {{
+            
+            // 带重试逻辑的辅助函数
+            const fetchWithRetry = async (url, options, retries = 3) => {{
+                for (let i = 0; i < retries; i++) {{
+                    try {{
+                        const response = await fetch(url, options);
+                        if (response.ok) return response;
+                        if (i < retries - 1) {{
+                            console.log(`[Infographic Image] 重试 ${{i + 1}}/${{retries}} for ${{url}}`);
+                            await new Promise(r => setTimeout(r, 1000 * (i + 1)));
+                        }}
+                    }} catch (e) {{
+                        if (i === retries - 1) throw e;
+                        await new Promise(r => setTimeout(r, 1000 * (i + 1)));
+                    }}
+                }}
+                return null;
+            }};
+            
+            // 获取当前聊天数据
+            const getResponse = await fetch(`/api/v1/chats/${{chatId}}`, {{
+                method: "GET",
+                headers: {{ "Authorization": `Bearer ${{token}}` }}
+            }});
+            
+            if (!getResponse.ok) {{
+                throw new Error("获取聊天数据失败: " + getResponse.status);
+            }}
+            
+            const chatData = await getResponse.json();
+            let updatedMessages = [];
+            let newContent = "";
+            
+            if (chatData.chat && chatData.chat.messages) {{
+                updatedMessages = chatData.chat.messages.map(m => {{
+                    if (m.id === messageId) {{
+                        const originalContent = m.content || "";
+                        // 移除已有的信息图图片
+                        const infographicPattern = /\\n*!\\[📊[^\\]]*\\]\\((?:data:image\\/[^)]+|(?:\\/api\\/v1\\/files\\/[^)]+))\\)/g;
+                        let cleanedContent = originalContent.replace(infographicPattern, "");
+                        cleanedContent = cleanedContent.replace(/\\n{{3,}}/g, "\\n\\n").trim();
+                        // 追加新图片
+                        newContent = cleanedContent + "\\n\\n" + markdownImage;
+                        
+                        // 同时更新 history 对象
+                        if (chatData.chat.history && chatData.chat.history.messages) {{
+                            if (chatData.chat.history.messages[messageId]) {{
+                                chatData.chat.history.messages[messageId].content = newContent;
+                            }}
+                        }}
+                        
+                        return {{ ...m, content: newContent }};
+                    }}
+                    return m;
+                }});
+            }}
+            
+            if (!newContent) {{
+                console.warn("[Infographic Image] 找不到要更新的消息");
+                return;
+            }}
+            
+            // 尝试通过事件 API 更新前端显示
+            try {{
+                await fetch(`/api/v1/chats/${{chatId}}/messages/${{messageId}}/event`, {{
+                    method: "POST",
+                    headers: {{
+                        "Content-Type": "application/json",
+                        "Authorization": `Bearer ${{token}}`
+                    }},
+                    body: JSON.stringify({{
+                        type: "chat:message",
+                        data: {{ content: newContent }}
+                    }})
+                }});
+            }} catch (eventErr) {{
+                console.log("[Infographic Image] 事件 API 不可用，继续...");
+            }}
+            
+            // 持久化到数据库
+            const updatePayload = {{
+                chat: {{
+                    ...chatData.chat,
+                    messages: updatedMessages
+                }}
+            }};
+            
+            const persistResponse = await fetchWithRetry(`/api/v1/chats/${{chatId}}`, {{
+                method: "POST",
+                headers: {{
+                    "Content-Type": "application/json",
+                    "Authorization": `Bearer ${{token}}`
+                }},
+                body: JSON.stringify(updatePayload)
+            }});
+            
+            if (persistResponse && persistResponse.ok) {{
+                console.log("[Infographic Image] ✅ 消息持久化成功!");
+            }} else {{
+                console.error("[Infographic Image] ❌ 重试后消息持久化失败");
+            }}
+        }} else {{
+            console.warn("[Infographic Image] ⚠️ 缺少 chatId 或 messageId，无法持久化");
+        }}
+        
+    }} catch (error) {{
+        console.error("[Infographic Image] 错误:", error);
+    }}
+}})();
+"""
+
     async def action(
         self,
         body: dict,
         __user__: Optional[Dict[str, Any]] = None,
         __event_emitter__: Optional[Any] = None,
+        __event_call__: Optional[Callable[[Any], Awaitable[None]]] = None,
+        __metadata__: Optional[dict] = None,
         __request__: Optional[Request] = None,
     ) -> Optional[dict]:
-        logger.info("Action: 信息图启动 (v1.0.0)")
+        logger.info("Action: 信息图启动 (v1.4.0)")
 
         # 获取用户信息
         if isinstance(__user__, (list, tuple)):
@@ -1169,6 +1531,45 @@ class Action:
                         user_language,
                     )
 
+            # 检查输出模式
+            if self.valves.OUTPUT_MODE == "image":
+                # 图片模式：使用 JavaScript 渲染并嵌入为 Markdown 图片
+                chat_id = self._extract_chat_id(body, body.get("metadata"))
+                message_id = self._extract_message_id(body, body.get("metadata"))
+
+                await self._emit_status(
+                    __event_emitter__,
+                    "📊 信息图: 正在渲染图片...",
+                    False,
+                )
+
+                if __event_call__:
+                    js_code = self._generate_image_js_code(
+                        unique_id=unique_id,
+                        chat_id=chat_id,
+                        message_id=message_id,
+                        infographic_syntax=infographic_syntax,
+                    )
+
+                    await __event_call__(
+                        {
+                            "type": "execute",
+                            "data": {"code": js_code},
+                        }
+                    )
+
+                await self._emit_status(
+                    __event_emitter__, "✅ 信息图: 图片生成完成!", True
+                )
+                await self._emit_notification(
+                    __event_emitter__,
+                    f"📊 信息图图片已生成，{user_name}！",
+                    "success",
+                )
+                logger.info("信息图生成完成（图片模式）")
+                return body
+
+            # HTML 模式（默认）：嵌入为 HTML 块
             html_embed_tag = f"```html\n{final_html}\n```"
             body["messages"][-1]["content"] = f"{original_content}\n\n{html_embed_tag}"
 

plugins/actions/smart-mind-map/README.md

@@ -8,6 +8,25 @@ Smart Mind Map is a powerful OpenWebUI action plugin that intelligently analyzes
 
 ---
 
+## 🔥 What's New in v0.9.1
+
+**New Feature: Image Output Mode**
+
+- **Static Image Support**: Added `OUTPUT_MODE` configuration parameter.
+  - `html` (default): Interactive HTML mind map.
+  - `image`: Static SVG image embedded directly in Markdown (**No HTML code output**, cleaner chat history).
+- **Efficient Storage**: Image mode uploads SVG to `/api/v1/files`, avoiding huge base64 strings in chat history.
+- **Smart Features**: Auto-responsive width and automatic theme detection (light/dark) for generated images.
+
+| Feature | HTML Mode (Default) | Image Mode |
+| :--- | :--- | :--- |
+| **Output Format** | Interactive HTML Block | Static Markdown Image |
+| **Interactivity** | Zoom, Pan, Expand/Collapse | None (Static Image) |
+| **Chat History** | Contains HTML Code | Clean (Image URL only) |
+| **Storage** | Browser Rendering | `/api/v1/files` Upload |
+
+---
+
 ## Core Features
 
 - ✅ **Intelligent Text Analysis**: Automatically identifies core themes, key concepts, and hierarchical structures
@@ -20,7 +39,7 @@ Smart Mind Map is a powerful OpenWebUI action plugin that intelligently analyzes
 - ✅ **Real-time Rendering**: Renders mind maps directly in the chat interface without navigation
 - ✅ **Export Capabilities**: Supports PNG, SVG code, and Markdown source export
 - ✅ **Customizable Configuration**: Configurable LLM model, minimum text length, and other parameters
-- ✅ **Image Output Mode**: Generate static SVG images embedded directly in Markdown (no interactive HTML)
+- ✅ **Image Output Mode**: Generate static SVG images embedded directly in Markdown (**No HTML code output**, cleaner chat history)
 
 ---
 

plugins/actions/smart-mind-map/README_CN.md

@@ -8,6 +8,25 @@
 
 ---
 
+## 🔥 v0.9.1 更新亮点
+
+**新功能：图片输出模式**
+
+- **静态图片支持**：新增 `OUTPUT_MODE` 配置参数。
+  - `html`（默认）：交互式 HTML 思维导图。
+  - `image`：静态 SVG 图片直接嵌入 Markdown（**不输出 HTML 代码**，聊天记录更简洁）。
+- **高效存储**：图片模式将 SVG 上传至 `/api/v1/files`，避免聊天记录中出现超长 Base64 字符串。
+- **智能特性**：生成的图片支持自动响应式宽度和自动主题检测（亮色/暗色）。
+
+| 特性 | HTML 模式 (默认) | 图片模式 |
+| :--- | :--- | :--- |
+| **输出格式** | 交互式 HTML 代码块 | 静态 Markdown 图片 |
+| **交互性** | 缩放、拖拽、展开/折叠 | 无 (静态图片) |
+| **聊天记录** | 包含 HTML 代码 | 简洁 (仅图片链接) |
+| **存储方式** | 浏览器实时渲染 | `/api/v1/files` 上传 |
+
+---
+
 ## 核心特性
 
 - ✅ **智能文本分析**：自动识别文本的核心主题、关键概念和层次结构
@@ -20,7 +39,7 @@
 - ✅ **实时渲染**：在聊天界面中直接渲染思维导图，无需跳转
 - ✅ **导出功能**：支持 PNG、SVG 代码和 Markdown 源码导出
 - ✅ **自定义配置**：可配置 LLM 模型、最小文本长度等参数
-- ✅ **图片输出模式**：生成静态 SVG 图片直接嵌入 Markdown（无交互式 HTML）
+- ✅ **图片输出模式**：生成静态 SVG 图片直接嵌入 Markdown（**不输出 HTML 代码**，聊天记录更简洁）
 
 ---