前言¶
DeepSeek Harness（DSH）在对话中输出大量结构化信息时，常规 Markdown 往往只能以纯文本呈现。对于流程、层级、对比等内容，缺少直观的图形表达；对于需要练习的场景，只能靠模型逐题生成，无法实时判分。
dsh-chat-figure 插件在 DSH Web 对话中直接渲染三种代码块：%%figure 图解、%%tree 树形结构、%%quiz 选择题。图形是真实 HTML，可选中、可缩放，颜色跟随明暗主题，选择题在本地判分，不依赖模型推理。
插件定位¶
- 名称：dsh-chat-figure
- 维护者：Wh1stle05
- 平台：DSH Web
- 版本：0.2.0
- 许可证：MIT
插件通过在代码块第一行指定哨兵（%%figure / %%tree / %%quiz），将对应内容渲染为交互式组件，零依赖、离线运行。
核心功能¶
| 块类型 | 用途 | 产出 |
| — | — |
| %%figure | 流程、结构、对比 | 盒子、箭头、注释、标签、图注 |
| %%tree | 进程树、目录树、调用层级 | 缩进即层级，父节点加粗、叶子变淡 |
| %%quiz | 随堂测验 | 单选、提交判分、解析、进度、成绩页 |
图解块 %%figure¶
支持标题、副标题、箭头、多行并列盒子、注释、胶囊标签和图注。色板为 gray、blue、green、amber、plain，颜色从 currentColor 派生，跟随主题变化。
示例：
```figure
%%figure
title: fork() 之后：一分为二
sub: 父子各有独立 PID，内存先共享同一批物理页
arrow: fork()
row
box gray: 父进程 Bash | PID 1000 · fork() 返回 1001
box blue: 子进程 Bash（副本） | PID 1001 · fork() 返回 0
note: 返回值不同，同一份代码因此走向不同分支
pills: Copy-on-Write, PID, 地址空间
foot: 复制的是“进程状态”，不是磁盘上的程序。
字段说明：
- `title:` / `sub:`：居中标题 / 灰色副标题
- `arrow: 标签` 或 `arrow`：竖向箭头，标签可省略
- `row`：开始一行并列盒子，后续 `box` 归入该行
- `box [gray\|blue\|green\|amber\|plain] [wide]: 标题 \| 副标题`：盒子；`wide` 强制整行
- `note:` / `pills:` / `foot:` / `gap`：居中注释 / 胶囊标签 / 底部图注 / 空隙
## 树形块 `%%tree`
通过缩进表示层级，节点格式为 `标题 | 备注`，备注以灰色小字显示。
示例：
```markdown
```tree
%%tree
systemd (PID 1)
uvicorn.service | PID 1000
Worker 1 | PID 1001
Worker 2 | PID 1002
## 测验块 `%%quiz`
支持标签、问题、选项、答案、解析。单题模式下逐题提交判分，最后一题显示成绩页，可逐题回顾、重做或复制结果。
示例：
```markdown
```quiz
%%quiz
tag: Linux 小测验
q: Linux 中，kill -9 发送的是什么信号？
A. SIGTERM (15)
B. SIGKILL (9)
C. SIGSTOP (19)
D. SIGINT (2)
answer: B
why: -9 就是 SIGKILL，内核直接终止，既不能捕获也不能忽略。
字段说明：
- `q:` / `问题:`：开始一道新题
- `A.` ~ `H.`：选项
- `answer:` / `答案:`：正确项
- `why:` / `解析:`：判分后展示的解释
- `tag:` / `title:`：卡片顶部标签 / 标题
加 `mode: list` 可改为一次显示整卷。
# 安装与启用
插件通过 profile 的 patch 层加载，无需额外命令。
1. 链接 profile
```bash
ln -s /path/to/dsh-chat-figure ~/.dsh/profiles/web/node_modules/dsh-chat-figure
- 在 profile 的 patch 层追加配置
cat >> ~/.dsh/profiles/web/cordis.patch.yml <<'YAML'
- insert:
- id: chat-figure
name: 'dsh-chat-figure'
YAML
刷新页面即生效，无需重启 dsh web。
适用场景与注意¶
适合需要结构化图示和练习的对话场景，例如教学、调试说明、面试准备。
注意：
- 仅支持 DSH Web，需要浏览器支持
color-mix()（Chrome 111+ / Safari 16.2+ / Firefox 113+） - 渲染后会隐藏原始代码块，只显示图形
- 不支持 Mermaid 语法
- 判分在浏览器本地完成，模型看不到作答；可用「复制结果」回传或说明错题
总结¶
dsh-chat-figure 在 DSH 聊天中直接渲染图解、树形结构与选择题，输出真实 HTML，可交互、可主题适配，适合需要直观表达和即时练习的场景。
插件目录页：https://www.skillhub.cn/plugins/Wh1stle05/dsh-chat-figure
GitHub：https://github.com/Wh1stle05/dsh-chat-figure
