technical-svg-diagrams

生成干净、极简、风格一致的技术 SVG diagrams，整体接近 Cloudflare 风格。

候选svg

technical-svg-diagrams 预览

technical-svg-diagrams

为什么收录

这个 skill 的价值在于：它用一套小而稳定的视觉系统约束 SVG diagrams，包括网格背景、monospace 字体、简单 box/circle、语义化强调色和清晰的 arrow patterns。对于需要保持 plain SVG 可编辑性的文档 diagram，很顺手。

适合场景

嵌入文档或博客的轻量技术 diagrams。
组件数量不多的 architecture overview。
component internals 和简单 request flows。

评估笔记

优点：产物很小，无 runtime dependency，容易 diff，也容易后处理。
短板：没有 validator，也没有 auto-layout；视觉风格对精细产品文档来说可能偏窄。
待确认：上游 license 未声明，暂时不要把上游 skill 内容复制进本仓库。

产物

示例：examples/system-overview.svg
预览：screenshots/system-overview-preview.png
可编辑预览源文件：screenshots/system-overview-preview.svg

维护

最近检查：2026-04-26
下一步：确认上游 license，再决定是否 vendor 原始 SKILL.md 和 reference patterns。

产物

名称	类型	说明
system-overview.svg	svg	基于观察到的风格规则自制的 SVG 示例。
system-overview-preview.png	png	从矢量预览生成的 PNG 截图。
system-overview-preview.svg	svg	可编辑的矢量预览源文件。

示例

technical-svg-diagrams 示例效果图

system-overview.svg

svg

提示词

为一个 diagram skill 目录生成一张极简技术 SVG 总览图。

使用浅色网格背景、等宽字体标签，以及“来源节点 -> 收录整理 -> 产物资产”这样的清晰结构。

结果保持为纯 SVG，可直接编辑，整体气质接近克制的 Cloudflare 风格。

生成环境

运行环境: Codex desktop
模型: GPT-5 系列（Codex 默认；当前任务环境未暴露精确 alias）
上下文: 主线程会话
生成时间: 2026-04-26
备注: 示例由 DrawIn 自制，用于体现这个 skill 的代表性设计效果。