用途：把技术图表、可视化与数据表生成为单个自包含 HTML 文件，并在浏览器中打开。加载该技能后，不应退回到 ASCII 艺术。
主要能力：支持架构/系统图、流程图与流水线、时序图、数据流图、ER/模式图、状态机、思维导图、数据表、时间线、仪表盘等。架构图可选 CSS Grid 卡片加箭头，或 Mermaid 自动布局；流程图、时序图、ER、状态机、思维导图等用 Mermaid；数据表用语义化 <table>；时间线用 CSS；仪表盘用 CSS Grid 加 Chart.js。Mermaid 建议 theme: 'base' 配自定义 themeVariables，复杂图可用 layout: 'elk'，并始终为 .mermaid-wrap 添加缩放控件。
主动渲染表格：当准备在终端用 ASCII 表格展示比较、审计、功能矩阵、状态报告等结构化行列时，若表格有 4 行以上或 3 列以上，应自动生成 HTML 页面并告知文件路径，聊天中可保留简短文字摘要。
使用方式：先确定受众、图表类型与美学方向，再读取对应模板（architecture.html、mermaid-flowchart.html、data-table.html）与参考文件（css-patterns.md、responsive-nav.md、libraries.md）。输出到 ~/.agent/diagrams/，用描述性文件名；macOS 用 open、Linux 用 xdg-open 打开。可选 gemini-imagegen 生成插图，不可用时跳过。
限制：资料未提供收费、价格、平台支持范围等细节；状态机标签解析严格，含冒号、括号等特殊字符时建议改用 flowchart。