tech-diagram

Name: tech-diagram
Author: thatrebeccarae

github.com/thatrebeccarae设计与 UI187105 次安装24 周前更新

代码仓库

关于 tech-diagram

这是一项用于制作技术架构图和系统示意图的技能，输出内嵌 CSS 与行内 SVG 的独立 HTML 文件。适合需要绘制带标签的管道、组件、分层、对比、时间线或指标图，且不希望依赖外部资源的开发者和技术团队。

主要功能

01管道与时间线图
02分层与组件布局
03前后状态对比图
04指标摘要卡片行
05内嵌 CSS 和 SVG 的独立 HTML
06响应式且适合打印的样式

适用场景

01展示数据或 CI/CD 管道
02绘制服务组件及其连接
03对比系统变更前后的状态
04呈现里程碑或 KPI 摘要

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/thatrebeccarae/claude-marketing --skill tech-diagram

安装后在 Claude Code 中输入/tech-diagram确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

EXAMPLES.md

LICENSE

REFERENCE.md

详细介绍

技术图表生成器

生成技术架构图和系统示意图，保存为包含内嵌 CSS + 内联 SVG 的独立 HTML 文件。无需外部依赖。

安装

git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/tech-diagram ~/.claude/skills/

核心功能

流水线流程图（数据流水线、CI/CD、ETL）
分层／堆栈图（技术栈、OSI 模型、基础设施）
组件图（微服务、系统架构）
前后对比图
时间线图（路线图、迁移阶段）
指标摘要行（KPI 汇总）

设计系统

颜色令牌

:root {
  /* Dark mode (default canvas) */
  --bg-deep: #0d1117;
  --bg-surface: #161b22;
  --bg-elevated: #21262d;
  --border-subtle: rgba(240, 246, 252, 0.1);
  --text-bright: #f0f6fc;
  --text-secondary: #8b949e;
  --text-muted: #6e7681;

  /* Accent palette */
  --accent-blue: #58a6ff;
  --accent-green: #3fb950;
  --accent-purple: #bc8cff;
  --accent-orange: #d29922;
  --accent-red: #f85149;
  --accent-cyan: #39d2c0;
  --accent-pink: #f778ba;

  /* Light mode (optional, for embedded diagrams) */
  --bg-light: #ffffff;
  --bg-light-surface: #f6f8fa;
  --text-light-primary: #1f2328;
  --text-light-secondary: #656d76;
}

颜色规则

所有图表默认使用深色模式
每个流水线阶段或层级使用不同的强调色
标签和注释使用 --text-secondary
连接线和边框使用 --border-subtle
语义颜色：绿色 = 健康／成功，红色 = 错误／警报，橙色 = 警告

字体排版

角色	字体	字重	大小
图表标题	system-ui	600	28-32px
分区／阶段标签	system-ui	600	16-18px
描述文字	system-ui	400	13-14px
注释	monospace	400	12px
指标值	monospace	700	36-48px

画布

Width:  1200px (default, responsive down to 800px)
Height: auto (content-driven)
Padding: 48px

组件库

流水线流程图

由带连接箭头的水平或垂直阶段序列组成。每个阶段包含图标区域、标签和描述。

分层／堆栈图

由带标签的垂直层级组成，可选添加描述。顶部 = 抽象层级最高，底部 = 抽象层级最低。

组件图

以网格或自由布局排列服务框，并用连线连接。每个组件显示名称、技术和状态。

前后对比图

通过垂直分隔线进行并排比较。左侧 = 之前的状态，右侧 = 之后的状态。

时间线

按水平或垂直顺序排列里程碑，并显示日期、描述和状态指示器。

指标摘要行

由带大号数字、标签和可选趋势指示器的 KPI 卡片组成的水平行。

关键原则

每张图只表达一个概念。 如果需要两张图，就创建两个文件。
所有内容都要有标签。 每个框、箭头和区域都应标注。
保持间距一致。 使用 CSS 网格或 flexbox，而非绝对定位。
无需外部依赖。 所有内容均内嵌——CSS 放在 <style> 中，图标使用内联 SVG。
适合打印。 添加 @media print，覆盖为浅色背景。

反模式

不要使用栅格图像（PNG/JPG）——所有图标都使用内联 SVG
不要使用外部 CSS/JS——所有内容均内嵌
不要使用渐变作为主要填充——使用纯色并搭配细微边框
单行项目不超过 8 个——换行或使用网格
不要添加无法传达信息的装饰元素

文件约定

文件名： {project}-{diagram-type}.html（例如，pipeline-architecture.html）
单文件： 所有 CSS 均内嵌在 <style> 中，所有 SVG 均内联
响应式： 适用于 800-1400px 宽度范围

完整的 HTML/CSS 模式和示例请参阅 REFERENCE.md。

支持 Markdown

登录后评论