agent-diagram

Technical diagrams your README won't embarrass you for.
技术文档配图，不该让 README 难堪。

Stop shipping Mermaid boxes. One Agent Skill → self-contained HTML/SVG you open in any browser.
别再往 README / PR 里贴通用 Mermaid 方块。一个 Agent Skill → 自包含 HTML/SVG，浏览器直接打开。

Built for DeepSeek Harness · works in Claude Code & Cursor.
优先支持 DeepSeek Harness，兼容 Claude Code 与 Cursor。

English · 中文

Left / 左：typical agent Mermaid · Right / 右：agent-diagram

---

Why I built it / 为什么做这个

Every coding agent answers "draw the architecture" with the same generic Mermaid block. It looks the same in every README, and it never matches the rest of the docs.

每次让 Agent「画个架构图」，得到的都是同一套圆角方块。放进任何仓库都长一个样，也配不上其余文档。

I wanted diagrams for software engineering — plugin trees, sequences, layer stacks, before/after refactors — without opening Figma. So I packaged the workflow as one Skill, with DeepSeek Harness as the first-class install path.

我想要的是 软件工程文档 用的图：插件树、时序、分层、重构前后对比——不用打开 Figma。所以把工作流打成一个 Skill，DeepSeek Harness 一键安装 放在最前面。

Not 27 marketing diagram types. 8 engineering types. Open the .html in a browser. No build step.
不做 27 种内容站图。8 种开发者高频图。 打开 .html 即可，无构建。

---

Install / 安装

DeepSeek Harness (one command / 一条命令):

curl -fsSL https://raw.githubusercontent.com/nanjingya/agent-diagram/main/install.sh | bash

Installs to ~/.dsh/skills/agent-diagram. Then dsh web and ask for a plugin architecture diagram.
安装到 ~/.dsh/skills/agent-diagram。然后执行 dsh web，让 Agent 画一张插件架构图。

# clone instead / 克隆后安装
git clone https://github.com/nanjingya/agent-diagram.git && cd agent-diagram && ./install.sh

# this repo only / 仅当前仓库
./install.sh --project

Claude Code / Cursor:

cp -R skills/agent-diagram .agents/skills/
# or user-wide / 用户级：
cp -R skills/agent-diagram ~/.cursor/skills/

---

Try it / 试一下

Copy into a DeepSeek Harness / Claude / Cursor session.
复制到会话里：

Load skill agent-diagram and draw a plugin-composition diagram for the DeepSeek Harness web profile. Save to docs/diagrams/.

More prompts / 更多提示词：

Draw a sequence diagram for an agent turn: user message → LLM → tool execute → reply

Before/after diagram: monolithic handler vs capability seams (provider, consumer, tool)

Expected output: a self-contained .html file. Open it in any browser.
预期产出：一份自包含 .html，任意浏览器可打开。

---

8 diagram types for engineers / 八种工程图

Type	Use when / 用途
architecture	Modules, services, data flows / 模块、服务、数据流
sequence	API / agent call order / API 或 Agent 调用时序
flowchart	Branching logic / 分支逻辑
layer-stack	Presentation → domain → infra / 分层架构
plugin-composition	Cordis plugin tree, dsh profile / bundle / Cordis 插件树、dsh 配置层
before-after	Refactor snapshots / 重构前后对比
comparison-table	Option matrix / 方案对比表
state-machine	Lifecycle states / 状态流转

Live example / 可打开示例：plugin-composition web profile

---

Gallery / 图集

Architecture — modules, groups, and data flows / 架构图：模块、分组与数据流

Plugin composition — DeepSeek Harness web profile (dsh-base + dsh-web-app) / 插件构图：web 配置层

This is not a clone of diagram-design. That skill targets editorial / content diagrams (27 types). agent-diagram targets README, PR, and engineering docs, with DeepSeek Harness as the first-class install.

这不是 diagram-design 的复刻。对方偏内容站 / 品牌 editorial（27 种图）。本仓库偏 README、PR、工程文档，并以 DeepSeek Harness 为首发安装路径。

---

Works with / 兼容

• DeepSeek Harness — dsh web, headless, ACP
• Claude Code — .agents/skills/
• Cursor — .cursor/skills/ or .agents/skills/

How Harness discovers skills / Skill 如何被发现：docs/subsystems/skills.md

---

License / 许可

MIT — see LICENSE.

For developers / 开发者

node scripts/verify-skill-metadata.mjs

From a DeepSeek Harness checkout / 在 Harness 仓库中验证发现：

node --import tsx/esm ../agent-diagram/scripts/verify-dsh-discovery.mjs "$(pwd)"