Agent Skills
返回列表
Mindchart 信息图表生成工具

Mindchart 信息图表生成工具

设计多媒体 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中:

请根据 https://skillhub.cn/install/skillhub.md,安装 @user_52f01050/mindchart。

技能介绍

解决的核心问题:从代码到可视化配置的鸿沟

在技术文档、数据分析报告或产品演示中,工程师和作者常需要将复杂的信息关系(如流程、对比、层级)转化为直观的图表。传统方式要么需要手写 SVG 或 Canvas 代码,要么依赖通用图表工具(如 ECharts)的 JSON 配置,两者都存在学习曲线陡峭或对信息结构表达不够灵活的问题。Mindchart 旨在解决这一痛点:它提供了一种专为信息图表设计的声明式 DSL(领域特定语言),让 AI 或开发者能通过简练的文本直接生成渲染配置,从而快速产出符合技术规范的视觉化成果。

工作方式:基于 AntV 语法的信息图表生成流水线

该技能的核心是 AntV Infographic 语法,它是一种用缩进表示结构、专为 AI 流式输出优化的配置语言。其工作流程严格遵循几个关键步骤:

  1. 理解需求与模板匹配:首先分析用户意图,从预定义模板库(如 sequence-*, compare-binary-*, hierarchy-mindmap-*)中选择最合适的结构。模板决定了信息的骨架。
  2. 生成语法文件:根据所选模板的语法规则,填充 data(包含标题 title、描述 desc 和主体数据)与 theme(定义调色板 palette、字体等)。语法有严格规则,例如第一行必须是 infographic,调色板颜色值使用无引号的裸值。
  3. 自检与输出:在生成代码块前,进行关键项检查:是否只有一个匹配模板的主体数据字段?children 下的每一项是否都包含 label?确保输出是纯净的、可渲染的代码块,无任何额外解释。

最终,生成的语法文件(.md)会通过内置流水线被渲染为 SVG,并进一步转换为 PNG 格式供直接使用。

适用边界与注意点

Mindchart 的价值在于快速、规范地生成静态信息图表,尤其擅长表达流程、对比、层级和简单统计趋势。但它有明确的适用边界:

  • 定位是信息图表:它不适合制作高度定制化的交互式仪表板或动态数据流图表。其强项是表达 信息结构与逻辑关系,而非实时数据分析。
  • 语法有严格约束:例如,compare-binary-* 模板要求只能有两个根节点;palette 的颜色值格式必须严格遵守。这意味着它更适合结构化、模式化的输出,而非完全自由的创意绘图。
  • 依赖模板与规则:生成的质量高度依赖于对模板选择指南的遵循和语法的正确使用。对于超出模板范围的特殊需求,可能需要退而使用更通用的 items 作为后备方案。

使用场景

  • 技术文档作者需要将系统服务间的复杂交互流程,快速生成一个清晰的泳道对比图(`sequence-interaction-*`),用于团队内部架构评审。
  • 数据分析师在准备季度报告时,需要将两种市场策略的关键指标并排对比(`compare-binary-*`),以向管理层直观展示各自的优劣。
  • 产品经理在规划产品路线图时,需要将功能演进的时间线与阶段目标可视化(`sequence-*`),以便在规划会议上同步给研发团队。
  • 技术博主撰写长文时,需要将零散的知识点组织成树状结构思维导图(`hierarchy-mindmap-*`),作为文章的核心知识框架图插入。

适合人员

  • 负责编写系统设计或架构文档的工程师,需要快速将设计方案转化为标准、可维护的图表。
  • 从事市场或运营分析的研究员,经常需要制作结构化的数据对比图来支撑报告结论。
  • 需要向非技术同事或高层清晰传达产品规划、功能演进逻辑的产品经理或项目经理。
  • 撰写技术教程、知识梳理类文章的创作者,需要将抽象概念系统地视觉化。