周智龙

周智龙

Hello World

图表表示方式建议

图表表示方式建议

当前方式分析

1. ASCII 艺术图（当前使用）

优点：

  • 纯文本，易于编辑
  • 无需额外工具
  • 版本控制友好

缺点：

  • 视觉效果一般
  • 复杂图表难以表达
  • 移动端显示可能有问题

2. SVG 图片（IndexLib 系列使用）

优点：

  • 视觉效果好
  • 矢量图，缩放不失真
  • 浏览器原生支持

缺点：

  • 需要创建图片文件
  • 编辑需要图形工具
  • 文件管理复杂

推荐方案

方案 1：SVG 图片（推荐用于复杂架构图）

适用场景：

  • 系统架构图
  • 复杂流程图
  • 类图/组件关系图

实现方式：

![PolarDB 架构图](/images/diagrams/polardb-architecture.svg)

工具推荐：

  • Draw.io（在线/桌面版）
  • Excalidraw（手绘风格）
  • Figma（专业设计）

方案 2：改进的 ASCII 艺术图（推荐用于简单流程图）

适用场景：

  • 简单流程
  • 数据流向
  • 层级结构

改进技巧：

  1. 使用更清晰的字符
  2. 添加注释说明
  3. 保持对齐

示例：

传统方式（当前）：
┌─────────────┐     ┌─────────────┐
│  Compute   │────▶│  Storage    │
│  Nodes     │     │  Cluster    │
└─────────────┘     └─────────────┘

改进方式（推荐）：
┌─────────────────┐         ┌─────────────────┐
│  Compute Layer  │  RDMA   │  Storage Layer  │
│                 │────────▶│                 │
│  • Primary      │         │  • Chunk 1      │
│  • Replica 1    │         │  • Chunk 2      │
│  • Replica 2    │         │  • Chunk 3      │
└─────────────────┘         └─────────────────┘
     │                            │
     │                            │
     └──────── PolarFS ───────────┘

方案 3：表格形式（推荐用于对比和关系）

适用场景：

  • 特性对比
  • 配置参数
  • 简单关系

示例：

特性 传统架构 云原生架构
扩展性 计算和存储耦合 计算和存储分离
成本 固定成本 按需付费
恢复时间 分钟级 秒级

方案 4：列表 + 缩进（推荐用于层级结构）

适用场景：

  • 目录结构
  • 组件层次
  • 配置项

示例：

PolarDB 架构
├── Compute Layer
│   ├── Primary Node
│   ├── Read Replica 1
│   └── Read Replica 2
├── PolarFS
│   ├── Metadata Service
│   └── Chunk Servers
└── Storage Layer
    ├── Chunk 1 (3 replicas)
    ├── Chunk 2 (3 replicas)
    └── Chunk 3 (3 replicas)

方案 5：代码块 + 注释（推荐用于流程说明）

适用场景：

  • 算法流程
  • 操作步骤
  • 状态转换

示例：

// PolarDB 写入流程
void write(Data data) {
    // 1. 写入本地 Buffer Pool
    buffer_pool.write(data);
    
    // 2. 写入 Redo Log
    redo_log.append(data);
    
    // 3. 通过 PolarFS 刷新到存储层
    polafs.flush(redo_log);
    
    // 4. 等待存储确认
    wait_for_storage_ack();
    
    // 5. 返回成功
    return success;
}

混合方案建议

对于论文笔记文章：

  1. 架构图：使用 SVG 图片
    • 系统整体架构
    • 组件关系图
    • 数据流向图
  2. 流程图：使用改进的 ASCII 图
    • 简单流程
    • 操作步骤
    • 状态转换
  3. 对比表：使用表格
    • 特性对比
    • 参数配置
    • 性能指标
  4. 代码流程：使用代码块
    • 算法流程
    • 实现细节
    • 伪代码

具体实施建议

优先级 1：改进现有 ASCII 图

改进点：

  • 添加更清晰的注释
  • 使用更统一的格式
  • 保持对齐和间距

优先级 2：为关键架构图创建 SVG

需要创建的 SVG：

  • PolarDB 整体架构图
  • RocksDB LSM-Tree 结构图
  • 分布式存储系统架构图

优先级 3：使用表格和列表

适用场景：

  • 配置参数对比
  • 性能指标对比
  • 组件功能说明

工具推荐

创建 SVG 图表：

  1. Draw.io：https://app.diagrams.net/
    • 免费，功能强大
    • 支持导出 SVG
    • 可以保存源文件
  2. Excalidraw：https://excalidraw.com/
    • 手绘风格
    • 简单易用
    • 适合技术图表
  3. Figma：https://www.figma.com/
    • 专业设计工具
    • 协作功能强
    • 适合复杂图表

ASCII 图工具：

  1. ASCII Flow：http://asciiflow.com/
  2. Monodraw：Mac 专用
  3. Textik：在线工具

总结

推荐策略：

  • 简单图表：改进的 ASCII 艺术图
  • 复杂架构：SVG 图片
  • 对比说明：表格形式
  • 层级结构：列表缩进
  • 流程说明：代码块 + 注释

实施步骤：

  1. 先改进现有 ASCII 图的格式
  2. 为关键架构图创建 SVG
  3. 逐步替换复杂图表为 SVG
  4. 保持简单图表使用 ASCII