Archify Diagrams
tt-a1i/archify
Creates interactive architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone HTML with inline SVG, themes and image or video export.
创建专业、支持深色/浅色双主题切换的系统架构图，输出为独立的 HTML 文件（内含 SVG 图形）。当用户需要系统架构图、基础设施拓扑图、云架构可视化、安全架构图、网络拓扑图，或任何展示系统组件及其关系的技术图表时使用此技能。支持中文标注和说明，内置主题切换按钮。
Install Space Architecture Diagram
$ npx skills add SpaceZephyr/design-buddy --skill space-architecture-diagram -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install SpaceZephyr/design-buddy space-architecture-diagram --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/SpaceZephyr/design-buddy.git skills-src && mkdir -p .claude/skills && cp -r skills-src/space-architecture-diagram .claude/skills/space-architecture-diagram && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "space-architecture-diagram" agent skill from https://github.com/SpaceZephyr/design-buddy/tree/main/space-architecture-diagram into .claude/skills/space-architecture-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "space-architecture-diagram", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/SpaceZephyr/design-buddy/tree/main/space-architecture-diagramType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add SpaceZephyr/design-buddy --skill space-architecture-diagram -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install SpaceZephyr/design-buddy space-architecture-diagram --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/SpaceZephyr/design-buddy.git skills-src && mkdir -p .agents/skills && cp -r skills-src/space-architecture-diagram .agents/skills/space-architecture-diagram && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "space-architecture-diagram" agent skill from https://github.com/SpaceZephyr/design-buddy/tree/main/space-architecture-diagram into .agents/skills/space-architecture-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "space-architecture-diagram", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add SpaceZephyr/design-buddy --skill space-architecture-diagram -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install SpaceZephyr/design-buddy space-architecture-diagram --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/SpaceZephyr/design-buddy.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/space-architecture-diagram .cursor/skills/space-architecture-diagram && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "space-architecture-diagram" agent skill from https://github.com/SpaceZephyr/design-buddy/tree/main/space-architecture-diagram into .cursor/skills/space-architecture-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "space-architecture-diagram", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/SpaceZephyr/design-buddy.git --path space-architecture-diagram--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add SpaceZephyr/design-buddy --skill space-architecture-diagram -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install SpaceZephyr/design-buddy space-architecture-diagram --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/SpaceZephyr/design-buddy.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/space-architecture-diagram .gemini/skills/space-architecture-diagram && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "space-architecture-diagram" agent skill from https://github.com/SpaceZephyr/design-buddy/tree/main/space-architecture-diagram into .gemini/skills/space-architecture-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "space-architecture-diagram", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install SpaceZephyr/design-buddy space-architecture-diagramInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add SpaceZephyr/design-buddy --skill space-architecture-diagram -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/SpaceZephyr/design-buddy.git skills-src && mkdir -p .github/skills && cp -r skills-src/space-architecture-diagram .github/skills/space-architecture-diagram && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "space-architecture-diagram" agent skill from https://github.com/SpaceZephyr/design-buddy/tree/main/space-architecture-diagram into .github/skills/space-architecture-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "space-architecture-diagram", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add SpaceZephyr/design-buddy --skill space-architecture-diagram -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install SpaceZephyr/design-buddy space-architecture-diagram --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/SpaceZephyr/design-buddy.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/space-architecture-diagram .opencode/skills/space-architecture-diagram && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "space-architecture-diagram" agent skill from https://github.com/SpaceZephyr/design-buddy/tree/main/space-architecture-diagram into .opencode/skills/space-architecture-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "space-architecture-diagram", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
space-architecture-diagram- GitHub stars
- 176
- Token cost
- ~1.7k tokens
- SKILL.md length
- 487 words
- Files
- 3 (incl. assets)
- Skills in repo
- 16
- Repo updated
- First seen
- Licence
- MIT
At a glance
创建专业、支持深色/浅色双主题切换的系统架构图，输出为独立的 HTML 文件（内含 SVG 图形）。当用户需要系统架构图、基础设施拓扑图、云架构可视化、安全架构图、网络拓扑图，或任何展示系统组件及其关系的技术图表时使用此技能。支持中文标注和说明，内置主题切换按钮。
- Works in 4 steps: 页眉 - 项目标题（带脉冲指示灯动画）、副标题 → 主 SVG 架构图 - 包含在圆角边框卡片中 → 信息摘要卡片 - 图表下方的 3 张卡片网格，展示关键架构细节 → …
- Tasks that involve Diagrams
- SKILL.md covers 触发条件, 工作流程, 设计系统 and 中文适配规则, plus 3 more sections
- Reaches fonts.googleapis.com
What it does
Space Architecture Diagram is an agent skill from SpaceZephyr/design-buddy. 创建专业、支持深色/浅色双主题切换的系统架构图，输出为独立的 HTML 文件（内含 SVG 图形）。当用户需要系统架构图、基础设施拓扑图、云架构可视化、安全架构图、网络拓扑图，或任何展示系统组件及其关系的技术图表时使用此技能。支持中文标注和说明，内置主题切换按钮。
Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including assets.
It sits in Development, covering Diagrams. The repository describes itself as: Design Buddy: visual production Agent Skills for brand design systems, GPT-image-2 images, diagrams, infographics, logos, slide decks, WeChat layouts and social images. The licence is MIT.
When your agent uses it
- Tasks that involve Diagrams
Example prompts
- “/space-architecture-diagram”
Workflow steps
4 steps, taken from the first numbered list in SKILL.md.
- 页眉 - 项目标题（带脉冲指示灯动画）、副标题
- 主 SVG 架构图 - 包含在圆角边框卡片中
- 信息摘要卡片 - 图表下方的 3 张卡片网格，展示关键架构细节
- 页脚 - 最小化元数据行
What it can do on your machine
Read from SKILL.md and the folder at commit f1d835f. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are svg and html).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
fonts.googleapis.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Space Architecture Diagram loads about 1.7k tokens when it runs. Until then it costs about 40 tokens; SKILL.md has 487 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from SpaceZephyr/design-buddy at commit f1d835f, republished under its MIT licence (© SpaceZephyr). 487 words, ~1,738 tokens.
Download SKILL.mdSave it as
.claude/skills/space-architecture-diagram/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.- name
- space-architecture-diagram
- description
- 创建专业、支持深色/浅色双主题切换的系统架构图，输出为独立的 HTML 文件（内含 SVG 图形）。当用户需要系统架构图、基础设施拓扑图、云架构可视化、安全架构图、网络拓扑图，或任何展示系统组件及其关系的技术图表时使用此技能。支持中文标注和说明，内置主题切换按钮。
- license
- MIT
- metadata.version
- 2.1
- metadata.author
- Architecture Diagram Skill (中文版)
架构图生成技能
创建专业的技术架构图，输出为独立的 HTML 文件，包含内联 SVG 图形和 CSS 样式。
触发条件
当用户提到以下任何场景时，主动使用此技能：
- "画一个架构图" / "生成架构图" / "画个图"
- "系统架构" / "部署架构" / "技术架构"
- "画一个流程图" / "组件关系图" / "拓扑图"
- "infrastructure diagram" / "architecture diagram"
- 用户粘贴了代码并要求分析架构
- 用户描述了系统组件和它们之间的关系
工作流程
第一步：收集信息
如果用户没有提供完整的架构描述，主动询问以下信息：
- 系统包含哪些主要组件/服务？
- 组件之间的连接关系和数据流？
- 使用了哪些技术栈和云服务？
- 是否有安全组、网络分区等边界？
如果用户提供了代码库或项目文件，自行分析提取架构信息。
第二步：生成架构图
根据收集到的信息，使用本技能的设计规范和模板生成 HTML 文件。
第三步：输出结果
输出一个完整的、可直接在浏览器中打开的 .html 文件。
设计系统
主题系统
架构图支持 深色（Dark） 和 浅色（Light） 两种主题，通过页眉右侧的切换按钮一键切换。用户选择会保存到 localStorage，下次打开自动恢复。
实现方式： CSS 自定义属性 + data-theme 属性切换。SVG 元素通过 CSS class（text-primary、text-secondary、mask-bg、grid-line、arrowhead-color）适配主题。
关键原则：
- 组件描边色（青/绿/紫/琥珀/玫红/橙）在两种主题下保持不变，确保视觉一致性
- 仅切换背景、文字、网格、边框等基础色
- 使用 CSS
transition实现平滑切换动画
深色主题（默认）
融合 Cursor 暖色深底 + Claude 暖白文字。温暖不冰冷，告别冷蓝色 slate。
| 元素 | 颜色 |
|---|---|
| 页面背景 | #141413 (温暖近黑) |
| 卡片背景 | rgba(20, 20, 19, 0.5) |
| 遮罩背景 | #1a1a18 (暖深色) |
| 边框 | rgba(38, 37, 30, 0.2) (oklab 暖边框) |
| 主文字 | #faf9f5 (Ivory 暖白) |
| 副文字 | #b0aea5 (暖银) |
| 网格线 | rgba(38, 37, 30, 0.12) |
| 箭头头 | rgba(38, 37, 30, 0.45) |
浅色主题
融合 Claude 羊皮纸 #f5f4ed + Airtable 深海军蓝文字。
| 元素 | 颜色 |
|---|---|
| 页面背景 | #f5f4ed (羊皮纸) |
| 卡片背景 | rgba(250, 249, 245, 0.85) |
| 遮罩背景 | #faf9f5 (Ivory) |
| 边框 | #f0eee6 (暖奶油) |
| 主文字 | #141413 (暖近黑) |
| 副文字 | #5e5d59 (橄榄灰) |
| 网格线 | #f0eee6 (暖奶油) |
| 箭头头 | #87867f (石灰) |
组件配色方案
按组件类型使用语义化颜色：
| 组件类型 | 填充色 (rgba) | 描边色 | 典型用途 |
|---|---|---|---|
| 前端 | rgba(20, 50, 62, 0.4) | #22d3ee (青色) | 客户端应用、UI、浏览器 |
| 后端 | rgba(18, 72, 55, 0.4) | #34d399 (翡翠绿) | 服务器、API、微服务 |
| 数据库 | rgba(72, 30, 100, 0.4) | #a78bfa (紫色) | 数据库、存储、缓存 |
| 云服务 | rgba(110, 50, 18, 0.35) | #fbbf24 (琥珀色) | AWS/阿里云/腾讯云服务 |
| 安全组件 | rgba(130, 25, 50, 0.4) | #fb7185 (玫红色) | 认证、安全组、加密 |
| 消息队列 | rgba(251, 146, 60, 0.3) | #fb923c (橙色) | Kafka、RabbitMQ、事件总线 |
| 外部/通用 | rgba(38, 37, 30, 0.35) | #94a3b8 (石板灰) | 外部系统、第三方服务 |
| AI/智能 | rgba(80, 30, 120, 0.4) | #c084fc (亮紫) | AI 服务、LLM、模型 |
字体规范
所有文字使用 JetBrains Mono 等宽字体（技术风格）：
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">排版规范（参考 Cursor 紧凑间距 + Claude 宽松行高）：
- 标题：
letter-spacing: -0.02em,line-height: 1.6 - 副标题：
letter-spacing: 0.04em - 字体大小：12px 组件名称，9px 子标签，8px 注释文字，7px 极小标签
视觉元素
背景： 深色模式 #141413 (温暖近黑) / 浅色模式 #f5f4ed (羊皮纸)，带微妙网格纹理：
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" class="grid-line" stroke-width="0.5"/>
</pattern>组件方框： 圆角矩形（rx="8"），1.5px 描边，半透明填充。
阴影系统（Claude ring shadow + Cursor ambient）：
- 深色模式：
rgba(0,0,0,0.14) 0px 4px 16px, rgba(38,37,30,0.1) 0px 0px 0px 1px - 浅色模式：
rgba(0,0,0,0.05) 0px 4px 24px, rgba(38,37,30,0.08) 0px 0px 0px 1px
圆角体系：
- 组件方框：
8px（Cursor 标准） - 卡片/图表容器：
12px（Airtable 按钮 / Claude 舒适圆角） - 标签徽章：
6px（Webflow 紧凑）
安全组： 虚线描边（stroke-dasharray="4,4"），透明填充，玫红色。
区域边界： 大虚线描边（stroke-dasharray="8,4"），琥珀色，rx="12"。
箭头： 使用 SVG marker 定义箭头头部：
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" class="arrowhead-color" />
</marker>箭头层级（Z-order）： 连接箭头要在 SVG 中较早绘制（背景网格之后），这样它们会渲染在组件方框之下。SVG 元素按文档顺序绘制。
透明填充遮罩技巧： 组件方框使用半透明填充，箭头在后面会透出来。为了完全遮住箭头，在半透明样式矩形之前绘制一个不透明背景矩形。使用 class="mask-bg" 以适配主题：
<!-- 不透明背景遮盖箭头（自动适配主题） -->
<rect x="X" y="Y" width="W" height="H" rx="6" class="mask-bg"/>
<!-- 半透明样式组件叠加在上面 -->
<rect x="X" y="Y" width="W" height="H" rx="6" fill="rgba(76, 29, 149, 0.4)" stroke="#a78bfa" stroke-width="1.5"/>认证/安全流： 玫红色虚线（#fb7185）。
消息队列/事件总线： 组件间的小型连接元素，橙色（#fb923c 描边，rgba(251, 146, 60, 0.3) 填充）：
<rect x="X" y="Y" width="120" height="20" rx="4" fill="rgba(251, 146, 60, 0.3)" stroke="#fb923c" stroke-width="1"/>
<text x="CENTER_X" y="Y+14" fill="#fb923c" font-size="7" text-anchor="middle">Kafka / RabbitMQ</text>Show full SKILL.md (181 more words)Show less
间距规则
关键： 垂直堆叠组件时确保间距正确，避免重叠：
- 标准组件高度： 服务 60px，较大组件 80-120px
- 组件间最小垂直间距： 40px
- 内联连接器（消息队列）： 放在组件间的间隙中，不要重叠
示例布局：
组件 A: y=70, height=60 → 结束于 y=130
间隙: y=130 到 y=170 → 40px 间隙，消息队列放 y=140 (20px 高)
组件 B: y=170, height=60 → 结束于 y=230图例放置
关键： 图例必须放在所有边界框（区域边界、集群边界、安全组）之外。
- 计算所有边界结束的位置（y 坐标 + 高度）
- 图例至少放在最低边界下方 20px 处
- 如需要则扩展 SVG viewBox 高度
页面布局结构
- 页眉 - 项目标题（带脉冲指示灯动画）、副标题
- 主 SVG 架构图 - 包含在圆角边框卡片中
- 信息摘要卡片 - 图表下方的 3 张卡片网格，展示关键架构细节
- 页脚 - 最小化元数据行
组件方框模板
<!-- 带主题适配的完整组件方框 -->
<rect x="X" y="Y" width="W" height="H" rx="6" class="mask-bg"/>
<rect x="X" y="Y" width="W" height="H" rx="6" fill="FILL_COLOR" stroke="STROKE_COLOR" stroke-width="1.5"/>
<text x="CENTER_X" y="Y+20" class="text-primary" font-size="11" font-weight="600" text-anchor="middle">组件名称</text>
<text x="CENTER_X" y="Y+36" class="text-secondary" font-size="9" text-anchor="middle">技术说明</text>关键： 使用 CSS class 而非硬编码颜色值，以支持主题切换：
class="mask-bg"- 不透明遮罩背景（深色:#1a1a18，浅色:#faf9f5）class="text-primary"- 主文字（深色:#faf9f5，浅色:#141413）class="text-secondary"- 副文字（深色:#b0aea5，浅色:#5e5d59）class="grid-line"- 网格线描边class="arrowhead-color"- 箭头头部填充- 组件描边色和彩色标签（如
fill="#22d3ee"）不使用 class，在两种主题下保持不变
信息摘要卡片模板
<div class="card">
<div class="card-header">
<div class="card-dot COLOR"></div>
<h3>卡片标题</h3>
</div>
<ul>
<li>- 要点一</li>
<li>- 要点二</li>
</ul>
</div>中文适配规则
文本排版
- 所有组件标签、注释、卡片内容使用中文
- 技术专有名词保留英文（如 PostgreSQL、Kubernetes、OAuth 2.0）
- 混合排版时，中文字符之间无空格，中英文之间加空格
文字宽度
- 中文字符宽度约为英文的 2 倍，组件方框宽度需相应增加
- 标准中文标签组件宽度建议：140-180px（英文为 110-140px）
- 使用
text-anchor="middle"居中对齐
图表标题
- 页眉标题格式："【项目名】系统架构" 或 "【项目名】部署架构"
- 副标题简要说明系统类型和关键特征
信息卡片
- 三张卡片分别展示：
- 技术栈概要（核心技术选型）
- 关键设计决策（架构特点）
- 安全与运维要点（安全、监控等）
使用模板
复制并自定义 assets/template.html 模板。关键自定义点：
- 更新
<title>和页眉文字 - 根据需要调整 SVG viewBox 尺寸（默认：
1000 x 680） - 添加/删除/重新定位组件方框
- 绘制组件间的连接箭头
- 更新三张摘要卡片
- 更新页脚元数据
输出要求
始终生成一个独立的 .html 文件，包含：
- 内嵌 CSS（除 Google Fonts 外无外部样式表）
- CSS 自定义属性定义双主题（深色/浅色）
- 内联 SVG（无外部图片），SVG 文字使用 CSS class 适配主题
- 少量 JavaScript 用于主题切换和 localStorage 持久化
- 页眉右侧包含太阳/月亮图标切换按钮
- 文件可直接在任何现代浏览器中打开
常见架构类型参考
Web 应用架构
前端框架 + 后端 API + 数据库 + 缓存 + 认证
微服务架构
API 网关 + 多个微服务 + 消息队列 + 服务注册发现 + 分布式数据库
云原生架构
CDN + 负载均衡 + 容器编排 + 云数据库 + 对象存储 + 监控
Serverless 架构
API 网关 + 函数计算 + 云数据库 + 对象存储 + 消息队列
数据流架构
数据源 + 数据采集 + 流处理 + 数据仓库 + 可视化
© SpaceZephyr, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 2 other files (assets) in space-architecture-diagram of SpaceZephyr/design-buddy.
- SKILL.md
- assets/template.html
- test-ai-customer-service.html
Open the folder on GitHubat commit f1d835f
Compare with similar skills
Space Architecture Diagram next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Space Architecture Diagram this skillSpaceZephyr/design-buddy | 176 | — | ~1.7k | Automated safety check: Pass | MIT | |
| Archify Diagramstt-a1i/archify | 82k | — | ~2.9k | Automated safety check: Pass | MIT | |
| JSON Canvasheyitsnoah/claudesidian | 2.6k | 18 repos | ~3.5k | Automated safety check: Pass | MIT | |
| Diagram Designcathrynlavery/diagram-design | 49k | 1 repos | ~7.6k | Automated safety check: Pass | MIT | |
| Fireworks Tech Graphtisfeng/Easydict | 15k | 1 repos | ~1.4k | Automated safety check: Pass | MIT | |
| Excalidraw Diagramcoleam00/excalidraw-diagram-skill | 5k | 2 repos | ~6.1k | Automated safety check: Pass | None |
Similar skills
JSON Canvas
heyitsnoah/claudesidian
Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections.
Diagram Design
cathrynlavery/diagram-design
Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.
Fireworks Tech Graph
tisfeng/Easydict
Create precise SVG technical diagrams, export PNG or offline HTML, and animate supported semantic SVGs to GIF.
Excalidraw Diagram
coleam00/excalidraw-diagram-skill
Create Excalidraw diagram JSON files that make visual arguments.
Draw.io Diagram Studio
Agents365-ai/drawio-skill
Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.
More from SpaceZephyr/design-buddy
All 16 skills in this repoSlide Deck Image Generator
SpaceZephyr/design-buddy
Turns written content into designed slide images from an outline, merges them into PPTX or PDF, and can borrow styles from a registry of brand design systems.
WeChat Article Layout
SpaceZephyr/design-buddy
Turns an article into WeChat Official Account HTML with a local preview, a choice of three visual styles and a button that copies the rich HTML.
Article Illustration Batch Generator
SpaceZephyr/design-buddy
Splits a Markdown article by heading, drafts an image prompt for each section, then generates diagrams with the Gemini API and embeds them in the note.
AI Chart Image Generator
SpaceZephyr/design-buddy
Generates a finished chart image directly with GPT-image-2 from a text description, across ten chart types such as flowcharts, architecture diagrams and SWOT grids in six visual styles.
Batch Image Skill Builder
SpaceZephyr/design-buddy
Walks a non-coder through structured questions about scene, style, color, text rules and consistency, then auto-generates a complete, ready-to-use batch image-generation skill.
Space Image Studio
SpaceZephyr/design-buddy
Generates PNG images for four common needs: Xiaohongshu covers, slide illustrations, charts and article logic diagrams, with twelve visual styles and automatic style suggestions.
Related
Categories
Questions about Space Architecture Diagram
What does Space Architecture Diagram do?
创建专业、支持深色/浅色双主题切换的系统架构图，输出为独立的 HTML 文件（内含 SVG 图形）。当用户需要系统架构图、基础设施拓扑图、云架构可视化、安全架构图、网络拓扑图，或任何展示系统组件及其关系的技术图表时使用此技能。支持中文标注和说明，内置主题切换按钮。. Space Architecture Diagram is an agent skill from SpaceZephyr/design-buddy.
When should I use Space Architecture Diagram?
Space Architecture Diagram fits situations like: tasks that involve Diagrams.
How do I install Space Architecture Diagram in Claude Code?
Run `npx skills add SpaceZephyr/design-buddy --skill space-architecture-diagram -a claude-code`. Or copy the skill folder (space-architecture-diagram in SpaceZephyr/design-buddy) into .claude/skills/space-architecture-diagram in your project. Claude Code loads it when a task matches its description.
How do I install Space Architecture Diagram in Codex?
Run `npx skills add SpaceZephyr/design-buddy --skill space-architecture-diagram -a codex`. Or copy the skill folder (space-architecture-diagram in SpaceZephyr/design-buddy) into .agents/skills/space-architecture-diagram in your project. Codex loads it when a task matches its description.
Can I use Space Architecture Diagram in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add SpaceZephyr/design-buddy --skill space-architecture-diagram -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/space-architecture-diagram, .gemini/skills/space-architecture-diagram, .github/skills/space-architecture-diagram and .opencode/skills/space-architecture-diagram in your project.
What does Space Architecture Diagram need to run?
SKILL.md names no scripts, command-line tools or credentials: Space Architecture Diagram is instructions for the agent only.
Does Space Architecture Diagram access the network?
SKILL.md names 1 domain. In commands or code: fonts.googleapis.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.
Is Space Architecture Diagram safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Space Architecture Diagram use?
Space Architecture Diagram is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Space Architecture Diagram use?
About 1.7k tokens (SKILL.md is roughly 7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Space Architecture Diagram?
Skills that share tags, products or a category with Space Architecture Diagram: Archify Diagrams (tt-a1i/archify, 82k stars), JSON Canvas (heyitsnoah/claudesidian, 2.6k stars), Diagram Design (cathrynlavery/diagram-design, 49k stars) and Fireworks Tech Graph (tisfeng/Easydict, 15k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Space Architecture Diagram?
SpaceZephyr (a GitHub user) maintains it in SpaceZephyr/design-buddy, which has 176 GitHub stars. The repository holds 16 skills in this directory. The repository was last updated on July 6, 2026.
Source: SpaceZephyr/design-buddy on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.