tt-a1i/archify

Registry

Summary

Archify is a Claude Skill that generates beautiful architecture diagrams with dark/light theme toggle and supports PNG, JPEG, WebP, and SVG export formats.

Key features

• Dark/light theme toggle for diagrams
• Export to PNG, JPEG, WebP, and SVG
• Diagram-as-code approach for system design
• HTML-based diagram generation
• Mermaid alternative for architecture visualization

Use cases

• Create system architecture diagrams for documentation
• Design cloud infrastructure visualizations
• Generate diagrams for developer presentations
• Produce exportable architecture diagrams for reports

README excerpt

 # Archify **聊两句就画出好看的架构图、技术流程图、调用时序图、数据流图和生命周期图。深色 / 浅色一键切。导出 4× 清晰 PNG / JPEG / WebP / SVG，或直接复制到剪贴板。** Archify 是一个 [Claude Skill](https://support.claude.com/en/articles/12512180-using-skills-in-claude)：你用大白话描述自己的系统或流程，它就把你的描述变成一张做工精细的技术图 —— 一个单文件 HTML，在浏览器里打开就能切主题、复制到剪贴板、导出成各种图片格式。 - **不需要会画图** —— 把组件和连接关系说给 Claude 就行 - **支持 workflow / sequence / data flow / lifecycle** —— 技术流程、审批链、工具调用、CI/CD、请求调用链、数据管线、PII 边界、状态机都可以画 - **内置主题切换** —— 深色 / 浅色一键切，浏览器记住偏好 - **一键复制到剪贴板** —— 直接贴到 Slack、飞书、微信、Notion、GitHub issue - **导出图片超清晰** —— PNG / JPEG / WebP 全部由浏览器在 4× 源分辨率下**原生光栅化**（不是位图放大，没有糊），或导出 SVG 做真矢量 - **SVG 自动跟系统深浅色** —— 导出的 SVG 内嵌两套变量 + `@media (prefers-color-scheme)`，贴到 GitHub README 里，读者切深浅色图跟着切（不用两张 PNG + `<picture>` 包起来） - **单文件 HTML** —— 零依赖，发一个文件就能分享 - **聊天迭代** —— "把 Redis 挪到左边"、"鉴权服务换成玫红"、"加个 Kafka"    <p align="right"><a href="./README_EN.md">English</a></p> ## 预览 同一张图，两套主题，一键切换： | 深色 | 浅色 | |---|---| |  |  | Export 菜单 —— 复制到剪贴板 + 四种格式下载：  想亲自玩一下：克隆仓库后打开 [`examples/web-app.html`](examples/web-app.html)，按 <kbd>T</kbd> 切主题，<kbd>E</kbd> 打开导出菜单。给 URL 加上 `?theme=light` 或 `?openExport=1` 可以强制初始状态。 ## 图表类型 Archify 现在有五种主要输出： | 类型 | 适合画什么 | 怎么用 | |---|---|---| | **Architecture** | 系统组件、云资源、数据库、缓存、服务边界、安全组 | 直接描述系统结构 | | **Workflow** | 请求生命周期、审批流程、工具调用、CI/CD、运维 runbook、事故响应 | 说明参与方、步骤顺序、关键分支 | | **Sequence** | API 调用链、请求生命周期、缓存回源、鉴权、异步 trace、服务交互 | 说明谁调用谁、

Topics