用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt;运行前请先检查来源。
npx skills add https://github.com/docevilOck/agent-skills-hook --skill ddev-diagram命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地?可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| name | ddev-diagram |
| description | 用户需要绘制架构图、流程图、数据流图、对比图时使用。AI 直接按规范手写 ASCII 图到 .md,不经过 PlantUML。 |
所有图文档共用的画图方法。业务 skill 只负责说"画什么",这里负责说"怎么画"。
如果上游来自 ddev-spec,默认就是把已写出的实现架构文档细化成图,不重新讨论架构本身。
如果上游来自 ddev-plan,默认就是把已确认的计划画成支持执行的图,不反过来改计划目标。
.md 文件,ASCII 图直接写在 fenced code block 里.puml 中间文件YY-MM-DD_name.md用户表达以下任一意图时,直接在 .md 中操作:
执行顺序:
.md更新 .md 时先判断类型:
默认目标:图跟着改动变,正文保持稳定。
在架构阶段,优先把"架构规划 + 接入点 + 主流程 + 前后对比"这四类图补齐。
❌ ASCII 拼接:
+----+----+
| A | B |
+----+----+
✅ Unicode 制表符:
┌────┬────┐
│ A │ B │
└────┴────┘
| 字符 | 作用 | 字符 | 作用 |
|---|---|---|---|
┌ ┐ └ ┘ | 四角 | ├ ┤ ┬ ┴ ┼ | T 型 / 十字 |
│ | 竖线 | ─ | 横线 |
► ▼ ▲ ◄ | 实心箭头 | ▷ ▽ △ ◁ | 空心箭头 |
同一列所有框宽度必须一致。先扫内容取最长标签,加边距后统一使用。
列宽 = max(框内最长行宽度) + 2 // 左右各留白一格
只用横线 ─ + 竖线 │,转弯用 └ ┌ ┘ ┐。
✅ 正交:
A ──> B
│
v
C
❌ 斜线:
A ──> B
╲
C
──> 右箭头 <── 左箭头
v 下箭头 ^ 上箭头
跨行箭头先竖线延伸到目标行再转弯:
A ─────────┐
v
B <────────┘
框内文字不超过 2 行。详细说明用框外标注或脚注补充。
框图 fenced code block 内的所有标签使用英文。 不在框内写中文。
原因:CJK 字符在等宽字体中的实际像素宽度 ≠ 2× ASCII 宽度(由字体渲染引擎决定,无法通过列宽计算弥补)。在框图中混用中英文会导致视觉错位("犬牙交错"),且此问题无法通过列宽算法解决。
✅ 英文标签:
┌────────────────┐
│ flash_test/ │
│ (new module) │
└────────────────┘
❌ 中文标签(对齐不可靠):
┌────────────────┐
│ 闪存测试/ │
│ (新增模块) │
└────────────────┘
规则:
_ 或 camelCase 保留代码标识符风格OK、FAIL、count=0)图外中文说明是对图中逻辑、流程或关系的中文解读,帮助读者理解"发生了什么";它不是图中英文术语的中英对照表。
✅ 正确 — 解释图意:
> 上电后 bootloader 先校验 flash_test 模块的签名,验签通过才跳转。
> 如果签名无效,回退到 recovery 分区。
❌ 错误 — 翻译术语表:
| 图中英文 | 中文 |
|----------------|---------|
| bootloader | 引导程序 |
| flash_test | 闪存测试 |
| recovery | 恢复分区 |
规则:
一张图只回答一个问题。开始拥挤就拆多张。
一张图 = 一个视角(边界 / 状态 / 数据布局 / 流程)
│ ─ v ──> 等连线图文档按此顺序:
每次写完或更新含图 .md 后,必须执行以下核对。不通过不得视为完成。
.md 文件全文AI 画完框图后,必须对每个 fenced code block 内的 ASCII 图执行以下 Python 脚本进行宽度校验:
python3 -c "
import sys
block = sys.stdin.read()
for i, line in enumerate(block.split('\n'), 1):
# 跳过空行
if not line.strip():
continue
# ┌─┐ └─┘ ─ 等制表符都是单字符宽,len() 按 Unicode 字符计数是正确的
w = len(line)
# 检测右边框位置差异:所有含 │ 的行宽度应一致
if '│' in line:
print(f'L{i:3d} w={w:3d} {line}')
elif line.lstrip().startswith(('┌','└','├','┐','┘','┤')):
print(f'L{i:3d} w={w:3d} {line}')
"
用法:将框图中整个 fenced code block 的内容复制后 pipe 到该脚本。输出会列出每行的 Unicode 字符宽度 w 和行内容。检查要点:
│ 的行 w 值必须相同 → 否则右边框不齐┌─...─┐ 与 └─...─┘ 的 w 值必须相同 → 否则上下框线不等宽w 与内容行 w 的差值 = 2(左右边框各占 1 列),即 w(border) == w(content) 且 w(border) - w(content_with_pipe) == 0(因为 │ 就是边框本身,不额外占用边距)| # | 检查项 | 方法 | 不通过时 |
|---|---|---|---|
| A | 右边框对齐 | 先跑「宽度自动校验」:所有含 │ 的行 w 值必须相等(即同一列);不满足时补/削空格 | 补空格或削空格,重写该行 |
| B | 上下框线等宽 | 先跑「宽度自动校验」:┌─...─┐ 与 └─...─┘ 的 w 值必须相同 | 调整横线数量 |
| C | T型/十字接合完整 | ├ ┤ ┬ ┴ ┼ 上下左右邻接位是否有对应连线 | 补连或改T型字符 |
| D | 无斜线 | grep ╲ ╱ ╳ ╱ — 必须零命中 | 改用正交转折 |
| E | 无断线 | 竖线 │ 贯穿多行时,每行同一列都有 │ 或合法转角 | 补竖线 |
写入的图(错误 — 第 3 行右边框偏右):
┌──────────────────────┐
│ AGENTS.md (global) │
│ session end hook │ ← 右边框比第 1 行右移了 2 列
└──────────────────────┘
自检发现 → 修正为:
┌──────────────────────┐
│ AGENTS.md (global) │
│ session end hook │
└──────────────────────┘
.md 中的 ASCII 图是否按绘制规范执行基于 SOC 职业分类