arch-flows-visualizer
从JSON数据生成交互式系统架构与流程可视化HTML文件
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：arch-flows-visualizer。 它的用途是：从JSON数据生成交互式系统架构与流程可视化HTML文件 完整的 Skill 内容见：https://321skill.com/skills/arch-flows-visualizer/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请帮我将这份微服务架构描述转换成Arch Flows Visualizer所需的JSON格式。”，它会引导你梳理组件、连接和关键流程，并生成符合Schema的JSON文件。然后你可以运行生成脚本，得到一个可交互的HTML架构图，用于团队评审或客户演示。
介绍
Arch Flows Visualizer 解决了系统架构文档静态、难以理解和维护的痛点。它接受结构化的JSON数据，自动生成一个自包含的HTML文件，无需任何运行时依赖或构建步骤，即可在浏览器中呈现清晰、美观的架构图。
使用方式非常直接：用户按照提供的JSON Schema定义好架构组件、连接和流程步骤，然后运行一个Python脚本，即可生成最终的HTML可视化文件。整个过程支持快速迭代，修改JSON后重新运行脚本即可刷新视图。
这个技能非常适合需要向团队、客户或非技术人员讲解复杂系统设计的工程师、架构师和项目经理。它让技术架构变得可交互、可探索，而不仅仅是静态图片。
建议在使用前仔细阅读示例数据文件，确保JSON格式正确。虽然工具本身不限制架构复杂度，但过于庞大的架构可能影响浏览器渲染性能，建议按模块或层级进行拆分展示。
核心特点
核心区别在于其生成的HTML是真正自包含、无需服务器和外部依赖的交互式可视化，支持点击高亮特定数据流路径，并能与详细的步骤说明面板联动，将静态架构图升级为可探索的动态文档。
注意事项
不适合需要实时数据更新或与生产系统动态联动的监控场景，主要用于静态架构文档的生成和展示。
常见问题
这个工具需要安装什么依赖吗？
生成可视化只需要Python环境，运行生成的HTML文件则只需要现代浏览器，无需安装任何额外库或服务。
生成的图表可以导出为图片或PDF吗？
工具本身不直接支持导出，但你可以使用浏览器的打印或截图功能来保存可视化结果。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/arch-flows-visualizer/raw/index.md 读取 arch-flows-visualizer 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/arch-flows-visualizer/raw/index.md（查看排版版本）