强大的Claude4.0+SVG绘制框架图，逻辑图和知识卡片-新实践案例参考

# SVG绘图风格指南 - 大咨询公司标准
## 核心设计原则
### 绘图大小要求
   SVG绘图面板采用横向矩形布局，长宽比为16：9，支持自动缩放。
### 绘图底色要求
   SVG绘图面板的背景底色采用白色
### 色彩体系
**主色调：**
- 主色1：深蓝色 `#1f4e79` (专业、稳重)
- 主色2：橙色 `#d86613` (活力、突出)
**辅助色系：**
- 浅蓝色：`#5b9bd5` (次要元素)
- 浅橙色：`#f4b183` (背景、填充)
- 中性灰：`#7f7f7f` (文字、边框)
- 浅灰色：`#f2f2f2` (背景)
- 白色：`#ffffff` (背景、对比)
- 深灰色：`#404040` (主要文字)
### 字体规范
- **标准字体：** 微软雅黑 (Microsoft YaHei)
- **标题字号：** 14-16px
- **正文字号：** 11-12px
- **注释字号：** 9-10px
## 连线样式规范
### 箭头设计
- **箭头大小：** 小型箭头，长度6-8px，宽度4-5px
- **实线箭头：** 用于确定的流程关系
- **虚线箭头：** 用于可选流程、依赖关系
### 连线类型及使用场景
#### 1. 直线连接
- **使用场景：** 简单的上下级关系、直接流程
- **样式：** 实线，线宽1.5-2px
#### 2. 折线连接
- **使用场景：** 复杂布局中的连接，避免交叉
- **样式：** 直角转折，保持水平/垂直对齐
#### 3. 曲线连接
- **使用场景：** 表示柔性关系、反馈循环
- **样式：** 贝塞尔曲线，圆滑过渡
#### 4. 斜线连接
- **使用场景：** 矩阵关系、交叉引用
- **样式：** 45度或自然角度
#### 5. 虚线样式
- **短虚线：** `stroke-dasharray="3,3"` - 表示可选、建议
- **长虚线：** `stroke-dasharray="8,4"` - 表示未来规划、潜在关系
## 图表类型绘制规范
### 1. 流程图 (Process Flow)
**约束要求：**
- 起始/结束：圆角矩形，填充主色1
- 处理步骤：矩形，填充浅蓝色，边框主色1
- 判断节点：菱形，填充浅橙色，边框主色2
- 连接线：实线箭头，判断分支用虚线
- 布局：从上到下或从左到右，保持对齐
### 2. 组织架构图 (Organization Chart)
**约束要求：**
- 高层级：较大矩形，填充主色1，白色文字
- 中层级：中等矩形，填充浅蓝色，深色文字
- 基层级：小矩形，填充浅灰色，深色文字
- 连接：实线，体现层级关系
- 间距：水平间距≥30px，垂直间距≥40px
### 3. 分类图 (Classification Diagram)
**约束要求：**
- 主分类：大圆形或矩形，主色1填充
- 子分类：小圆形或矩形，辅助色填充
- 标签：清晰可读，避免重叠
- 分组：用虚线框或背景色区分
### 4. 集成关系图 (Integration Diagram)
**约束要求：**
- 系统节点：矩形，不同系统用不同辅助色
- 接口连接：实线表示已实现，虚线表示计划中
- 数据流：带箭头的线，标注数据类型
- 协议标注：在连线上标注HTTP、API等
### 5. 阶段图 (Phase Diagram)
**约束要求：**
- 阶段块：矩形或圆角矩形，按时间顺序排列
- 里程碑：菱形或三角形，突出显示
- 时间轴：水平线，标注时间点
- 依赖关系：虚线连接相关阶段
### 6. 逻辑关系图 (Logic Diagram)
**约束要求：**
- 实体：矩形，主要实体用主色填充
- 关系：连线，不同关系类型用不同线型
- 属性：小矩形或椭圆，附着在实体上
- 约束：用文字标注在连线旁
## 通用绘制标准
### 间距规范
- 元素间最小间距：15px
- 文字与边框间距：8-10px
- 连线与文字间距：5px
### 对齐原则
- 严格水平/垂直对齐
- 相同类型元素大小一致
- 保持视觉平衡
### 标注规范
- 重要信息用主色2突出
- 说明文字用中性灰
- 避免文字重叠和过密
## SVG代码模板示例
```svg
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      .title-text { font-family: 'Microsoft YaHei'; font-size: 14px; font-weight: bold; }
      .normal-text { font-family: 'Microsoft YaHei'; font-size: 11px; }
      .primary-box { fill: #1f4e79; stroke: #1f4e79; stroke-width: 2; }
      .secondary-box { fill: #5b9bd5; stroke: #1f4e79; stroke-width: 1.5; }
      .accent-box { fill: #f4b183; stroke: #d86613; stroke-width: 1.5; }
      .flow-line { stroke: #1f4e79; stroke-width: 2; fill: none; }
      .dash-line { stroke: #7f7f7f; stroke-width: 1.5; stroke-dasharray: 5,3; fill: none; }
    </style>
    <marker id="arrowhead" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
      <polygon points="0 0, 8 3, 0 6" fill="#1f4e79" />
    </marker>
  </defs>
  <!-- 示例元素 -->
  <rect x="50" y="50" width="120" height="60" class="primary-box" rx="5"/>
  <text x="110" y="85" class="title-text" fill="white" text-anchor="middle">主要流程</text>
  <line x1="170" y1="80" x2="230" y2="80" class="flow-line" marker-end="url(#arrowhead)"/>
  <rect x="250" y="50" width="120" height="60" class="secondary-box" rx="5"/>
  <text x="310" y="85" class="normal-text" fill="#404040" text-anchor="middle">次要步骤</text>
</svg>
```
## 质量检查清单
- [ ] 色彩搭配符合主色调体系
- [ ] 字体统一使用微软雅黑
- [ ] 箭头大小适中，不突兀
- [ ] 连线类型使用恰当
- [ ] 元素对齐整齐
- [ ] 间距符合规范
- [ ] 文字清晰可读
- [ ] 整体视觉平衡
---
*本指南遵循国际主流咨询公司的视觉设计标准，确保图表的专业性和可读性。*

# 学术研究中的图表类型及SVG绘制提示语模板
## 一、主流学术图表类型总结
### 1. 算法图表类
- **算法流程图**: 展示算法执行步骤和决策分支
- **伪代码图**: 结合文字和流程的算法描述
- **时间复杂度图**: 展示算法性能分析
- **状态转换图**: 显示系统状态变化过程
- **决策树图**: 展示决策逻辑和分支
### 2. 神经网络与深度学习图表
- **网络架构图**: CNN、RNN、Transformer等网络结构
- **注意力机制图**: 自注意力、多头注意力可视化
- **梯度流图**: 反向传播和梯度传递
- **损失函数图**: 训练过程中的损失变化
- **激活函数图**: 各种激活函数的数学表示
### 3. 系统架构图表
- **系统整体架构图**: 展示系统各模块关系
- **数据流图**: 数据在系统中的流动路径
- **组件交互图**: 系统组件间的交互关系
- **部署架构图**: 系统部署和基础设施
- **微服务架构图**: 分布式系统架构
### 4. 实验与评估图表
- **实验流程图**: 实验设计和执行步骤
- **性能对比图**: 不同方法的性能比较
- **消融研究图**: 各组件对性能的影响
- **ROC曲线图**: 分类模型性能评估
- **混淆矩阵图**: 分类结果的详细分析
### 5. 数据处理与分析图表
- **数据预处理流程图**: 数据清洗和转换步骤
- **特征工程图**: 特征提取和选择过程
- **数据增强图**: 数据扩充策略展示
- **降维可视化图**: PCA、t-SNE等降维结果
- **聚类分析图**: 数据聚类结果展示
## 二、SVG绘制提示语模板
### 模板1：算法流程图
请绘制一个SVG格式的算法流程图，要求：
- **图表标题**：[算法名称]算法流程图
- **包含以下元素**：
  * 开始/结束节点（椭圆形，填充色：#e1f5fe）
  * 处理步骤（矩形，填充色：#f3e5f5）
  * 判断节点（菱形，填充色：#fff3e0）
  * 连接线（箭头，颜色：#424242）
- **流程步骤**：[具体步骤描述]
- **整体风格**：现代简洁，使用柔和配色
- **图表尺寸**：800x600px
- **添加适当的文字标签和说明**
### 模板2：神经网络架构图
请绘制一个SVG格式的神经网络架构图，要求：
- **网络类型**：[CNN/RNN/Transformer等]
- **包含层次**：
  * 输入层（矩形，填充色：#e8f5e8）
  * 隐藏层（矩形，填充色：#fff8e1）
  * 输出层（矩形，填充色：#fce4ec）
- **连接线展示数据流向**
- **在每层旁边标注**：
  * 层类型和参数
  * 输入/输出维度
- **使用渐变色和阴影效果**
- **整体布局**：水平或垂直排列
- **图表尺寸**：1000x400px
### 模板3：系统架构图
请绘制一个SVG格式的系统架构图，要求：
- **系统名称**：[系统名称]
- **包含组件**：
  * 前端模块（矩形，填充色：#e3f2fd）
  * 后端服务（矩形，填充色：#f1f8e9）
  * 数据库（圆柱形，填充色：#fff3e0）
  * 外部API（六边形，填充色：#f3e5f5）
- **连接关系**：用不同颜色的箭头表示不同类型的连接
- **添加图例说明各组件类型**
- **使用分层布局，清晰展示系统层次**
- **图表尺寸**：1200x800px
- **包含标题和简要说明**
### 模板4：实验流程图
请绘制一个SVG格式的实验流程图，要求：
- **实验主题**：[实验主题]
- **包含阶段**：
  * 数据准备（矩形，填充色：#e8eaf6）
  * 模型训练（矩形，填充色：#e0f2f1）
  * 模型评估（矩形，填充色：#fff8e1）
  * 结果分析（矩形，填充色：#fce4ec）
- **每个阶段包含具体步骤**（小矩形）
- **使用时间线布局，从左到右展示**
- **添加里程碑标记点**
- **使用图标增强视觉效果**
- **图表尺寸**：1000x600px
### 模板5：性能对比图
请绘制一个SVG格式的性能对比图，要求：
- **对比方法**：[方法A, 方法B, 方法C]
- **评估指标**：[准确率, 召回率, F1分数等]
- **图表类型**：柱状图或雷达图
- **配色方案**：使用区分度高的颜色
- **包含数据标签和数值**
- **添加图例和坐标轴标签**
- **使用网格线增强可读性**
- **图表尺寸**：800x500px
- **标题和说明文字**
### 模板6：数据流图
请绘制一个SVG格式的数据流图，要求：
- **数据源**：[数据源类型]
- **处理步骤**：[预处理→特征提取→模型训练→预测输出]
- **节点样式**：
  * 数据节点（圆形，填充色：#e1f5fe）
  * 处理节点（矩形，填充色：#f3e5f5）
  * 输出节点（六边形，填充色：#e8f5e8）
- **流向箭头**：使用不同粗细表示数据量
- **添加数据格式和大小标注**
- **使用分支和合并展示复杂数据流**
- **图表尺寸**：1000x600px
### 模板7：MoE网络结构图
请绘制一个SVG格式的MoE（Mixture of Experts）网络结构图，要求：
- **图表标题**：MoE (Mixture of Experts) 网络结构图
- **包含组件**：
  * 输入层（矩形，填充色：#e8f5e8）
  * Gating Network/Router（菱形或小型网络图，填充色：#e3f2fd, 用于决策路由）
  * 多个Expert Networks（例如4个并排的矩形或小型网络图，代表专家子网络，填充色：#f1f8e9）
  * 聚合层（圆形或矩形，用于加权合并专家输出，填充色：#fce4ec）
  * 输出层（矩形，填充色：#fff8e1）
- **连接关系**：
  * 从输入层到Gating Network的连接线。
  * 从输入层到所有Expert Networks的连接线。
  * 从Gating Network到聚合层的连接线，表示权重或路由决策。
  * 从每个Expert Network到聚合层的连接线。
  * 从聚合层到输出层的连接线。
- **标注**：清晰标注"Gating Network", "Expert 1", "Expert 2", ..., "Weighted Sum"等关键部分。
- **整体布局**：清晰展示数据流和控制流，专家网络可以水平排列。
- **图表尺寸**：1200x800px
- **风格**：现代、简洁，与文档中其他图表风格保持一致。
## 三、通用提示语增强要素
### 视觉设计要素
- **颜色搭配**: 使用学术风格的柔和配色，避免过于鲜艳
- **字体选择**: 使用清晰易读的无衬线字体
- **布局规范**: 保持元素间距均匀，对齐整齐
- **图形规范**: 使用标准的流程图符号和图形
### 技术规范
- **SVG版本**: 指定使用SVG 1.1标准
- **尺寸规范**: 根据用途指定合适的画布尺寸
- **响应式**: 考虑不同显示设备的适配
- **可访问性**: 添加alt文本和描述信息
### 内容完整性
- **标题**: 清晰的图表标题
- **图例**: 必要的符号说明
- **标注**: 关键节点和连接的文字说明
- **来源**: 如需要，添加数据来源信息
## 四、使用建议
1. **选择合适的图表类型**: 根据要表达的内容选择最合适的图表形式
2. **保持简洁明了**: 避免信息过载，突出重点内容
3. **统一视觉风格**: 在同一文档中保持图表风格一致
4. **考虑读者需求**: 根据目标读者的专业背景调整复杂度
5. **注重可读性**: 确保文字清晰，颜色对比度适当
---
*这些模板可以根据具体需求进行调整和组合使用。*

### 1. 流程图 (Process Flow)
**约束要求：**
- 起始/结束：不需要绘制流程图的开始和结束节点
- 处理步骤：矩形，填充色为白色，边框为深蓝色，字体为黑色
- 判断节点：菱形，填充浅橙色，边框主色2
- 连接线：实线箭头，判断分支用虚线
- 布局：
   1) 四个节点内：单行布局，从左到右进行布局
   2）5到7个节点：分两行布局，两行之间活动连接线用直角折线进行连接
   3）8到12个节点：从左到右布局，分为四列，每列从上到下绘制3个活动节点，跨列的时候通用采用直角折线布局。
- 活动节点方框中我需要左边显示要给矢量图标代表该节点含义，右边是活动节点内容文字。做多8个汉字，每行最多4个汉字。超过4个汉字文字分两行，整体矩形框左边图标占据40%空间，文字占据60%空间。右边文字上下左右都居中布局。左边矢量图标我希望色彩填充丰富点，同时矢量图标不需要边框，左边也不需要底色，矢量图最好选择正方形的矢量图。而且在左边区域居中布局，矢量图在左边部分填充占比在80%左右。为了整体平衡，我希望你活动节点矩形的长宽比为5：2。