用途：Diagram 是一个根据当前对话上下文生成可视化图表或 HTML 预览，并借助 Snip 渲染的技能。
主要能力：支持两类输出。Mermaid 适合架构图、时序图、流程图、ER 图、类图、状态图、甘特图、Git 图、思维导图、时间线等结构化、关系型或流程型可视化；HTML 适合 UI 原型、组件预览、落地页、仪表盘、样式化卡片、数据表格等以视觉设计为重点的内容。
使用方式：先分析上下文并选择格式；Mermaid 需选择合适图表类型（如请求响应用 sequenceDiagram、决策流程用 flowchart TD 或 flowchart LR、数据库用 erDiagram、代码结构用 classDiagram、状态用 stateDiagram-v2、系统组件用带 subgraphs 的 flowchart TD、时间线用 gantt、占比用 pie、概念关系用 mindmap）。用 Write 工具（而非 Bash）写入文件，路径为 ~/.snip/tmp/，Mermaid 写为 .mmd 文件，HTML 写为 .html 文件。随后用 Bash 渲染：Mermaid 执行 snip render --format mermaid < ~/.snip/tmp/architecture.mmd；HTML 执行 snip render --format html < ~/.snip/tmp/preview.html。渲染返回 JSON，包含 status、edited、path 等字段。若 status 为 approved 且 edited 为 false，表示用户接受；若 edited 为 true，用 Read 查看 path 处图片，更新源文件后重新渲染；若 status 为 changes_requested，读取 text 字段的反馈，更新源文件后重新渲染。
注意事项：大型图表可用 subgraphs 组织节点，节点标签宜简洁，细节用注释；HTML 使用内联 style 标签（外部样式表不会加载），且被沙箱化，script 或 canvas 的 JS 不会执行；固定尺寸的 HTML 设计需显式设置 body 尺寸，如 body { width: 800px; height: 600px; }。