@the-forge-flow/visual-explainer-pi
生成美观的图表、架构与数据可视化HTML
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：@the-forge-flow/visual-explainer-pi。 它的用途是：生成美观的图表、架构与数据可视化HTML 完整的 Skill 内容见：https://321skill.com/skills/the-forge-flow-visual-explainer-pi/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请使用visual-explainer为我的电商平台后端生成一个微服务架构图，包含用户服务、订单服务、商品服务和支付服务。”，它会调用该Skill，分析你的描述，并生成一个包含这些服务及其依赖关系的、美观的HTML架构图，你可以将其保存为HTML文件或复制代码嵌入文档。
介绍
该Skill旨在解决开发者、架构师和技术文档撰写者在沟通和展示复杂技术概念时，难以快速生成直观、美观的可视化图表的问题。它作为一个PI扩展，能够根据用户的描述或数据，自动生成高质量的HTML格式的可视化内容，如系统架构图、流程图和数据关系图。
用户只需在支持的AI平台（如Claude、Cursor等）中安装此Skill，在对话中描述想要可视化的内容（例如“请为我生成一个微服务架构图”），该Skill便会调用其能力，生成并返回一个包含交互式或静态图表的HTML代码片段或文件。
它非常适合需要频繁进行技术演示、编写设计文档、进行代码评审或数据分析的软件工程师、解决方案架构师、技术布道师以及教育工作者。
使用建议：为获得最佳效果，建议在描述可视化需求时尽可能清晰、结构化。生成的HTML可以嵌入到网页、Markdown文档或演示文稿中。请注意，其输出质量依赖于输入描述的准确性和详细程度。
核心特点
专注于生成可直接嵌入网页或文档的、美观的HTML格式可视化内容，而非简单的ASCII图或需要特定渲染器的格式；作为PI扩展，能深度集成到AI对话工作流中，实现描述即生成。
注意事项
不适合需要高度定制化图形样式或复杂交互逻辑的专业级数据可视化场景。
常见问题
这个Skill能生成哪些类型的图表？
可以生成系统架构图、流程图、序列图、类图以及基础的数据图表（如关系图）。
生成的HTML可以直接在浏览器中打开吗？
是的，生成的HTML文件或代码片段通常包含完整的样式和脚本，可以直接在主流浏览器中打开和查看。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/the-forge-flow-visual-explainer-pi/raw/index.md 读取 @the-forge-flow/visual-explainer-pi 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/the-forge-flow-visual-explainer-pi/raw/index.md（查看排版版本）