用开源 AI 工具生成项目架构图

✍ AlphaSignal AI🕐 2026-04-17📦 6.6 KB 🟢 已读 𝕏 文章列表

文章介绍了一款名为 Architecture Diagram Generator 的开源 Claude 技能，它允许开发者通过简单的英文提示词自动生成深色主题的精美系统架构图。文章详细讲解了如何从 GitHub 下载并安装该技能到 Claude Code，以及如何通过聊天界面快速生成、迭代和导出独立的 HTML/SVG 架构图。该工具不仅支持本地项目，还能解析 GitHub 公共仓库，是文档编写和项目交接的得力助手。

Claude Agent 架构图开源 DevOps 工具与效率

# Create Beautiful Architecture Diagram of Any Project with this Open Source AI Tool **作者**: AlphaSignal AI **日期**: 2026-04-16T14:54:34.000Z **来源**: [https://x.com/AlphaSignalAI/status/2044791564757766569](https://x.com/AlphaSignalAI/status/2044791564757766569) --- ![Image](/doc/626/image/img_36e710e22653.jpg) For developers, one of the first few things you need to come up with before handing over a project to another dev or team is an architecture diagram. It serves as a visual blueprint that turns complex code, services, and infrastructure into a clear high-level map. It helps other developers understand the project faster and makes it easier for teams and stakeholders to see how everything works together. But creating one manually can be a hassle, especially if the project is large or complex. So here’s a new AI tool that automates that process for you. It’s called Architecture Diagram Generator, an open-source Claude skill that can generate clean, beautiful architecture diagrams from a plain English prompt. At the time of writing, it has already racked up around 2.5k stars on GitHub. ## What is Architecture Diagram Generator? It’s a Claude Code skill that lets you generate beautiful, dark-themed system architecture diagrams as standalone HTML or SVG files. - No design skills needed: just describe your architecture in plain English - Iterate quickly: ask Claude to add components, change layouts, or update styles - Share easily: output is a single HTML file, no special software required ## Setting up the skill Get the Claude Skill by downloading the architecture-diagram.zip file from this GitHub repo: Cocoon-AI/architecture-diagram-generator ![Image](/doc/626/image/img_3a1c6493b5e3.jpg) The ZIP file should contain the Skill.md file, which includes all the necessary instructions for generating the diagrams. ![Image](/doc/626/image/img_ea0fd24f34e8.jpg) To add the skill to Claude, go to the Customize settings page and, under the Skills tab, click the + icon and select Upload a skill. ![Image](/doc/626/image/img_1c8bd825fc83.jpg) Select the ZIP file you downloaded earlier. If everything goes well, you should see the new skill added to the Personal skills section. ![Image](/doc/626/image/img_b3c90ca39e50.jpg) Make sure the skill is enabled by toggling the enable/disable switch beside the share button. ![Image](/doc/626/image/img_e61d5a20261f.jpg) That’s it. The skill is now ready to use. ## How to create diagrams To create diagrams, open Claude Code and start a chat. Import a sample project from your local disk and use the text below as a prompt template: You can edit the system description based on your own project. If you are not fully sure about the architecture, you can load the project folder into ChatGPT or Claude and ask it to scan the codebase and extract the system architecture for you. Here’s a sample prompt you can use. Once the prompt is ready, I recommend setting the model to Claude 4.6 Opus for a more accurate result. This will trigger the skill and generate the architecture diagram in HTML format. ![Image](/doc/626/image/img_35f95afa0fa8.jpg) This is what the final result looks like: ![Image](/doc/626/image/img_5f500258889f.jpg) Awesome. The diagram already looks clean, although there are still a few slightly awkward arrow placements. Still, I really like the dark theme, the color choices, and the overall layout. To clean it up, you can simply follow up with Claude and ask it to fix the issues. In my example, I just said: “Fix the overlapping arrows. Use curved arrows if needed.” Here’s the updated diagram: ![Image](/doc/626/image/img_16c5694c7882.jpg) Awesome. I love how clean and sleek it looks now. Since the output is in HTML format, I can also continue editing the file manually if needed. I’ve tried a couple of diagram generators before, but this one is by far the most elegant-looking. ## It works with GitHub repos too Another cool trick is that you can point it to any public GitHub repository, and the tool can generate a nice architecture diagram for that as well. For example, I took the recently viral GBrain: Opinionated OpenClaw/Hermes Agent Brain by @garrytan and asked Claude to create a diagram using the custom skill. The original architecture diagram in the repo looks like this: ![Image](/doc/626/image/img_a24a516ceb46.jpg) This is what Claude created: ![Image](/doc/626/image/img_a649133e897c.jpg) Just look at the visual difference between the two. The new diagram looks much more sleek and professional. The layout is cleaner, the spacing feels more intentional, and the overall presentation is much easier on the eyes. It looks like something you could immediately drop into documentation, a presentation, or a project handoff without needing much extra cleanup. Overall, this is a really useful skill for developers and teams who want a faster way to create clean, professional-looking architecture diagrams without doing everything manually. It’s great for documentation, handoffs, and onboarding, and now that the skill is built into Hermes agent, it’s even easier to make it part of your workflow. Follow @AlphaSignalAI for more content like this. Check out AlphaSignal.ai to get a daily summary of top models, repos, and papers in AI. Read by 280,000+ devs. ## 相关链接 - [AlphaSignal AI](https://x.com/AlphaSignalAI) - [@AlphaSignalAI](https://x.com/AlphaSignalAI) - [18K](https://x.com/AlphaSignalAI/status/2044791564757766569/analytics) - [Architecture Diagram Generator](https://github.com/Cocoon-AI/architecture-diagram-generator) - [architecture-diagram.zip](https://architecture-diagram.zip/) - [Cocoon-AI](https://github.com/Cocoon-AI) - [architecture-diagram-generator](https://github.com/Cocoon-AI/architecture-diagram-generator) - [GBrain: Opinionated OpenClaw/Hermes Agent Brain](https://github.com/garrytan/gbrain) - [@garrytan](https://x.com/@garrytan) - [Hermes agent](https://github.com/nousresearch/hermes-agent) - [@AlphaSignalAI](https://x.com/@AlphaSignalAI) - [AlphaSignal.ai](http://alphasignal.ai/) - [Upgrade to Premium](https://x.com/i/premium_sign_up) - [10:54 PM · Apr 16, 2026](https://x.com/AlphaSignalAI/status/2044791564757766569) - [18.2K Views](https://x.com/AlphaSignalAI/status/2044791564757766569/analytics) --- *导出时间: 2026/4/17 13:47:00*

🔗 相关文档