简易绘图

以多种格式创建简洁有效的图形和图表。

核心能力

1. SVG 绘图

生成内联 SVG 用于插画、图标、图表和示意图。

最佳实践:
- 使用 xmlns="http://www.w3.org/2000/svg"，设置合适的 viewBox
- 优先用 <path> 绘制复杂形状，用 <rect> <circle> <ellipse> 绘制基本形状
- 用 <g> 分组，用 transform 做平移/旋转/缩放
- 颜色用十六进制或语义化命名，支持透明通道
- 对于重复元素使用 <defs> + <use> 复用
- 文字用 <text>，支持 font-family font-size text-anchor 等属性
- 曲线用 <path d="M... C... S... Q... T... A... Z">
- 渐变用 <linearGradient> / <radialGradient>
- 动画用 <animate> / <animateTransform>
- 添加 role="img" 和 <title> 提升可访问性

常用模板:
- 图标: 24×24 或 48×48 viewBox，单色或双色
- 流程图: 节点用圆角矩形，箭头用 <marker>
- 数据图: 柱状图/折线图/饼图用 <rect> <polyline> <path>
- 架构图: 分层布局，不同区域用不同颜色区分

2. Mermaid 图表

用 Mermaid 语法创建可渲染的图表。

常用图表类型:

<!-- 流程图 -->
```mermaid
graph TD
    A[开始] --> B{判断}
    B -->|是| C[处理]
    B -->|否| D[结束]

<!-- 时序图 -->

sequenceDiagram
    Alice->>Bob: 你好
    Bob-->>Alice: 嗨

<!-- 思维导图 -->

mindmap
  root((主题))
    分支1
      子项A
      子项B
    分支2

<!-- 饼图 -->

pie title 分布
    "A" : 40
    "B" : 30
    "C" : 30

<!-- 类图 -->

classDiagram
    class Animal {
        +name: string
        +move(): void
    }

<!-- 状态图 -->

stateDiagram-v2
    [*] --> 待处理
    待处理 --> 进行中: 开始
    进行中 --> 已完成: 完成

何时使用: 流程图、时序图、甘特图、思维导图等需要交互式渲染的场景，优先用 Mermaid。

3. Graphviz DOT

用 DOT 语言绘制有向图、无向图、层次图等复杂图形。

digraph G {
    rankdir=LR;
    node [shape=box, style=rounded];
    A -> B -> C;
    A -> D [label="可选"];
    subgraph cluster_1 {
        label="子图";
        E -> F;
    }
}

何时使用: 复杂的结构图、依赖关系图、类层次图、自动布局需求时优先用 Graphviz。

4. ASCII / Unicode 绘图

在纯文本环境中（终端、注释、文档）绘制简单图形。

基本元素:
- 框线: ─ │ ┌ ┐ └ ┘ ├ ┤ ┬ ┴ ┼（Unicode 盒绘制）
- 箭头: → ← ↑ ↓ ↔ ↕
- 块: █ ▓ ▒ ░ ▄ ▀
- 其他: ● ○ ■ □ ◆ ◇ ▲ △ ▼ ▽ ★ ☆

示例:

┌─────────────┐     ┌─────────────┐
│  客户端      │────▶│  服务器      │
└─────────────┘     └─────────────┘
       │                    │
       │                    │
       ▼                    ▼
┌─────────────┐     ┌─────────────┐
│  缓存       │     │  数据库     │
└─────────────┘     └─────────────┘

格式选择指南

```