diagram-design cathrynlavery

29 editorial diagram types for Claude Code. Self-contained HTML + SVG. No shadows, no Mermaid-slop.

主要语言
HTML
Stars
14,766
Forks
887

标签

  • Claude技能
  • 模板/脚手架
  • 可视化
  • 前端
  • 提示词工程

摘要

该项目是一个可安装到 Claude Code、Codex、Pi 的 Agent 技能包，内置 27 种编辑级视觉类型（架构图、流程图、时序图、泳道图、甘特图等），用于生成设计师认可的高质量技术图表。所有图表均为自包含 HTML+SVG，无构建步骤、无 JS、无外部依赖，可直接在浏览器打开，并支持按指定格式、尺寸与细节级别重绘 draw.io 或 Mermaid 源图。语义化模式将行为与布局分离，还能读取网站自动匹配品牌风格，适合写作者、文档团队在技术写作与汇报中快速产出统一风格的插图。

README

# Diagram Design **编辑级图表，你的设计师看了也不会嫌弃。** ![Content site architecture](docs/screenshots/architecture.png) ![The self-improving loop](docs/screenshots/loop.png) *2.0 新增——循环图（Loop）：以共享内存中枢为核心的飞轮。虚线表示写回（write-back）。* *2.3 新增：语义系统模式和可选的无障碍动画，静态输出仍是默认。* 27 种视觉类型。一个适用于 Claude Code、Codex 和 Pi 的 Agent 技能。语义…

查看完整页面