作品展示

展示素材来自上游仓库，转存并保留署名。 cathrynlavery/diagram-design

Editorial diagram set© cathrynlavery · diagram-design (MIT)

如何使用

1
复制安装提示
登录后点击右侧黑色按钮，一键复制。
2
粘贴给你的 agent
在 Claude Code、Codex、Cursor 等工具里粘贴发送，它会自己装好。
3
用一句话调用
像下面这样说出你要做的东西，agent 会按这个 Skill 的流程来做。

你：/diagram-design 帮我做：文档、博客、PPT 里要用的干净图表

示例对话，仅演示调用方式，不代表实际产出。

你会得到

每种图都有浅色、深色和完整杂志版三种
无需构建、不依赖 JS 和外部图片，浏览器直接打开
自动读取网站的品牌色和字体

适合

文档、博客、PPT 里要用的干净图表
受够了 Mermaid 默认样式的人

不适合

之后还要在 draw.io 或 Figma 里反复编辑的图

许可证: MIT
作者: @cathrynlavery
来源: cathrynlavery/diagram-design/skills/diagram-design · ★ 43,679

支持:Claude CodeCodexGitHub CopilotFactory DroidPi

上游描述

Create branded architecture, architecture delta, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, polar chart (polar/radial lollipop), loop/flywheel, nested, tree, org chart, layer stack, exploded axonometric, axonometric plan, Venn, pyramid/funnel, treemap and marimekko, heatmap, bar and dumbbell, waterfall, line (slopegraph,…

其他安装方式

更喜欢自己动手？下面的命令和上方按钮效果相同。

安装提示词（粘贴给你的 Agent）

Read https://skilloop.dev/skills/diagram-design/install.md and follow the instructions to install the skill.

一行命令安装 · Claude Code

npx skills add https://github.com/cathrynlavery/diagram-design/tree/main/skills/diagram-design -g -a claude-code

一行命令安装 · Codex / Cursor

npx skills add https://github.com/cathrynlavery/diagram-design/tree/main/skills/diagram-design -g -a codex

手动安装（git） · Claude Code

git clone --depth 1 https://github.com/cathrynlavery/diagram-design.git /tmp/diagram-design
mkdir -p ~/.claude/skills && cp -r /tmp/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design

作品版权归原作者所有，依其许可证分发；本站仅做链接与介绍。

数据报告页

把 CSV / Excel / JSON 数据变成带图表和结论的精美报告页。

作者: nexu-ionexu-io/html-anything · Apache-2.0

免费

文档179.8k

Skill 创建器

创建、修改并评测你自己的 Agent Skill，含评测与描述优化以提升触发准确率。

作者: anthropicsanthropics/skills · Apache-2.0

免费

文档295.7k

动手前头脑风暴

让编码 agent 在写代码前先和你澄清意图、需求和设计。

作者: obraobra/superpowers · MIT

免费