图表 默认启用 v1.1.0

SVG 图表、Mermaid 图表和交互式可视化 — 在聊天界面中内联渲染。从架构概览到交互式数据仪表盘，此技能可将任何可视化请求转化为直接在对话中渲染的输出。

设计原则

此技能生成的每个图表都遵循四个核心原则：

• 扁平化 — 无渐变、阴影、模糊、光晕或装饰效果。仅使用干净的扁平表面。
• 紧凑 — 内联展示关键信息。其余内容在回复文本中说明。
• 适配主题 — 每种颜色在浅色和深色模式下都能正常显示。SVG 使用 CSS 类，canvas/JS 使用 window.__jawTokens。
• 文本在回复中，视觉在工具中 — 所有解释性文字放在图表外部。切勿在 SVG 或组件 HTML 中放置大段说明文字。

复杂度预算

对每个图表强制执行的硬性限制，以防止视觉噪音：

图表类型选择

此技能根据动词而非名词进行路由。同一主题可以根据用户的请求生成不同类型的图表。当某种类型可以直接映射到原生 Mermaid 语法时，优先使用 Mermaid 而非手动编写 SVG。

SVG 类型

Mermaid 类型

交互式 HTML 组件类型

Mermaid 注意事项

使用 Mermaid 图表类型时的重要注意事项：

其他注意事项：

• sankey-beta / xychart-beta 在窄聊天宽度下会出问题。建议使用 diagram-html + ECharts sankey 或 Chart.js 来绘制 XY 图表。
• radar-beta 需要 -beta 后缀（Mermaid v11.6+）。其他测试版类型：treemap-beta、block-beta、architecture-beta、packet-beta、kanban。
• 所有稳定版 Mermaid 类型会自动继承宿主的深色/浅色主题。请勿在 %%{init: ...}%% 中设置显式颜色，除非出于语义原因需要覆盖。

输出格式

1. 内联 SVG（静态图表）

直接在回复中输出原始 <svg> 标记。聊天界面会内联渲染。

<svg viewBox="0 0 680 {height}" xmlns="http://www.w3.org/2000/svg"
  role="img" aria-labelledby="title-id desc-id">
  <title id="title-id">Diagram Title</title>
  <desc id="desc-id">Brief description for screen readers</desc>
  <!-- shapes, text, paths -->
</svg>

内联 SVG 规则

• viewBox 宽度必须为 680（匹配容器宽度 — 切勿更改）
• 高度根据内容变化：最后一个元素底部 + 40px 内边距
• 每个 SVG 必须包含 role="img" + <title> + <desc>
• 使用设计系统中的 CSS 类（.node、.connector、.label、.label-start）
• .label 强制 text-anchor: middle（仅居中）；左对齐文本请使用 .label-start
• 颜色：使用 CSS 类，而非内联 fill/stroke
• 字体族继承自宿主 — 请勿设置显式字体

2. Mermaid（结构化图表）

标准 ```mermaid 代码块。现有渲染器会自动处理。

```mermaid
sequenceDiagram
    participant A as Client
    participant B as Server
    A->>B: GET /api/data
    B-->>A: 200 OK (JSON)
```

3. 交互式 HTML 组件（图表、控件、模拟）

封装在 ```diagram-html 代码块中。在宿主创建的沙盒 iframe 内渲染。

```diagram-html
<div id="chart-wrapper" style="position: relative; width: 100%; height: 300px;">
  <canvas id="myChart" role="img" aria-label="Chart description">
    Fallback text
  </canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"
  onerror="document.body.innerHTML='<p>Chart library failed to load.</p>'">
</script>
<script>
  const isDark = window.__jawTheme?.isDark ?? true;
  // ... Chart.js code
</script>
```

交付机制

所有三种格式 — 内联 SVG、```mermaid、```diagram-html — 都在聊天回复中内联渲染。jaw 前端解析回复文本并自动挂载它们。diagram-html 会被放入宿主创建的沙盒 <iframe> 中；此技能不会创建 iframe。

SVG 设计系统

设计禁止列表

对所有 SVG 输出强制执行的质量规则（与下面的安全限制分开）：

• 无渐变、投影、模糊、光晕或霓虹效果
• 无表情符号 — 使用 CSS 形状或 SVG 路径
• 无装饰性步骤编号或超大标题
• 流程图方框内无图标或插图 — 仅限文字
• 无旋转文字
• 外部容器无深色/彩色背景（仅限透明 — 宿主提供背景）
• 描边宽度：边框和边缘为 0.5px（不是 1px 或 2px）
• 字重：仅 400（常规）和 500（粗体）— 绝不使用 600 或 700
• 字号：仅 14px（节点标签）和 12px（副标题/箭头标签）
• 句首大写 始终如此 — 绝不使用首字母大写或全大写

安全限制（内联 SVG）

以下元素和属性会被 DOMPurify 剥离。切勿在内联 <svg> 中使用：

颜色渐变组（9 种语义颜色）

每组渐变有 3 种色调：填充（背景）、描边（边框）和文字（标签）。始终使用 CSS 类名，而非内联颜色。

布局模式

主题集成

CSS 变量映射

cli-jaw 宿主为图表主题化公开以下 CSS 变量：

按格式检测主题

参考模块

图表技能会为特定图表类型加载额外的参考文件。这些文件提供详细的模式、库集成指南和模板：

使用示例

快速参考

选择正确输出格式的决策树：