https://blog.eastseven.cn/tags/claude-skill/Recent content in Claude-Skill on D7 的知识库Hugozh-cnWed, 15 Apr 2026 00:00:00 +0000https://blog.eastseven.cn/posts/03-ai/architecture-diagram-generator---claude%E6%9E%B6%E6%9E%84%E5%9B%BE%E7%94%9F%E6%88%90skill/Wed, 15 Apr 2026 00:00:00 +0000https://blog.eastseven.cn/posts/03-ai/architecture-diagram-generator---claude%E6%9E%B6%E6%9E%84%E5%9B%BE%E7%94%9F%E6%88%90skill/<h2 id="简介">简介</h2> <p>Architecture Diagram Generator 是一个 Claude AI Skill，能用自然语言描述生成专业深色主题的系统架构图，输出为独立的 HTML/SVG 文件，无需任何依赖。</p> <h2 id="核心特性">核心特性</h2> <ul> <li><strong>自然语言驱动</strong>：用纯文本描述系统架构，自动生成可视化图表</li> <li><strong>深色主题</strong>：Slate-950 背景 + 40px 网格，专业美观</li> <li><strong>语义色彩编码</strong>：Frontend（青色）、Backend（绿色）、Database（紫色）、Cloud（琥珀色）、Security（玫瑰色）、External（灰色）</li> <li><strong>独立输出</strong>：单 HTML 文件，内嵌 CSS + SVG，任何浏览器直接打开</li> <li><strong>多种安装方式</strong>：claude.ai Skills、Claude Code CLI（<code>~/.claude/skills/</code>）、Projects Knowledge</li> </ul> <h2 id="使用方式">使用方式</h2> <ol> <li>安装 Skill（下载 zip 上传到 claude.ai Settings → Skills）</li> <li>描述架构（让 AI 分析代码库、手写描述、或让 Claude 生成典型架构）</li> <li>生成图表，支持迭代修改组件、布局</li> </ol> <p>适用于 Claude Pro/Max/Team/Enterprise 计划。</p>