visualization v4.0.0 749 words

流程图 D2 类定义 v4.0 — 标准符号代码

Source: flowchart

FlowViz D2 类定义 v4.0

heflo.com 流程图符号标准 对齐 规则:1个符号 = 1个标准形状 + 1种颜色。形状编码含义。


完整 Classes 代码块 — 复制到每个 .d2 文件

classes: {
  # ═══════════════════════════════════════════════════════
  # 标准流程图符号(对齐 heflo.com)
  # 形状 = 标准含义。颜色 = 视觉区分。
  # ═══════════════════════════════════════════════════════

  # ① 终止符 — 流程的开始/结束
  terminator: {
    shape: oval
    style.fill: "#EDE9FE"
    style.stroke: "#7C3AED"
    style.stroke-width: 2
    style.font-color: "#4C1D95"
  }

  # ② 处理 — 动作、任务、操作、计算
  process: {
    shape: rectangle
    style.fill: "#DBEAFE"
    style.stroke: "#2563EB"
    style.stroke-width: 2
    style.border-radius: 8
    style.font-color: "#1E3A8A"
  }

  # ③ 判断 — 是/否问题,条件分支
  decision: {
    shape: diamond
    style.fill: "#FEF3C7"
    style.stroke: "#D97706"
    style.stroke-width: 2
    style.font-color: "#78350F"
  }

  # ④ 数据(I/O)— 进入或离开系统的数据
  data: {
    shape: parallelogram
    style.fill: "#F1F5F9"
    style.stroke: "#475569"
    style.stroke-width: 2
    style.font-color: "#1E293B"
  }

  # ⑤ 文档 — 生成、接收或使用的单个文档
  document: {
    shape: page
    style.fill: "#E0E7FF"
    style.stroke: "#4F46E5"
    style.stroke-width: 2
    style.font-color: "#312E81"
  }

  # ⑥ 多文档 — 批量文档
  multi-document: {
    shape: page
    style.fill: "#E0E7FF"
    style.stroke: "#4F46E5"
    style.stroke-width: 2
    style.font-color: "#312E81"
    style.3d: true
  }

  # ⑦ 子程序 — 预定义的函数/子过程
  subroutine: {
    shape: step
    style.fill: "#FFEDD5"
    style.stroke: "#EA580C"
    style.stroke-width: 2
    style.font-color: "#7C2D12"
  }

  # ⑧ 准备 — 设置、初始化、配置加载
  preparation: {
    shape: hexagon
    style.fill: "#FCE7F3"
    style.stroke: "#DB2777"
    style.stroke-width: 2
    style.font-color: "#831843"
  }

  # ⑨ 数据库 — 结构化数据存储
  database: {
    shape: cylinder
    style.fill: "#CCFBF1"
    style.stroke: "#0D9488"
    style.stroke-width: 2
    style.font-color: "#134E4A"
  }

  # ⑩ 存储数据 — 通用持久存储
  stored-data: {
    shape: stored_data
    style.fill: "#F0FDFA"
    style.stroke: "#14B8A6"
    style.stroke-width: 2
    style.font-color: "#134E4A"
  }

  # ⑪ 延迟 — 等待、暂停、超时
  delay: {
    shape: queue
    style.fill: "#F5F5F4"
    style.stroke: "#78716C"
    style.stroke-width: 2
    style.font-color: "#292524"
  }

  # ⑫ 手动输入
  manual-input: {
    shape: parallelogram
    style.fill: "#FFEDD5"
    style.stroke: "#EA580C"
    style.stroke-width: 2
    style.font-color: "#7C2D12"
  }

  # ⑬ 显示
  display: {
    shape: rectangle
    style.fill: "#D1FAE5"
    style.stroke: "#059669"
    style.stroke-width: 2
    style.border-radius: 16
    style.font-color: "#064E3B"
  }

  # ⑭ 连接器
  connector: {
    shape: circle
    style.fill: "#F3F4F6"
    style.stroke: "#9CA3AF"
    style.stroke-width: 2
    style.font-color: "#374151"
  }

  # ⑮ 跨页连接器
  offpage: {
    shape: package
    style.fill: "#F3F4F6"
    style.stroke: "#9CA3AF"
    style.stroke-width: 2
    style.font-color: "#374151"
  }

  # ⑯ 内部存储
  internal-storage: {
    shape: square
    style.fill: "#CCFBF1"
    style.stroke: "#0D9488"
    style.stroke-width: 3
    style.font-color: "#134E4A"
  }

  # ⑰ 循环限制
  loop-limit: {
    shape: package
    style.fill: "#FEF3C7"
    style.stroke: "#D97706"
    style.stroke-width: 2
    style.font-color: "#78350F"
  }

  # ⑱ 手动循环
  manual-loop: {
    shape: hexagon
    style.fill: "#FFEDD5"
    style.stroke: "#EA580C"
    style.stroke-width: 2
    style.font-color: "#7C2D12"
  }

  # ═══════════════════════ 扩展 ═══════════════════════

  # AI / LLM — 模型调用、生成
  ai: {
    shape: rectangle
    style.fill: "#D1FAE5"
    style.stroke: "#059669"
    style.stroke-width: 3
    style.border-radius: 16
    style.font-color: "#064E3B"
  }

  # 外部服务 — 第三方 API、云服务
  external: {
    shape: cloud
    style.fill: "#F5F5F4"
    style.stroke: "#78716C"
    style.stroke-width: 2
    style.font-color: "#292524"
  }

  # ═══════════════════════ 组容器 ═══════════════════════
  group: {
    style.fill: "#FAFAFA"
    style.stroke: "#D1D5DB"
    style.stroke-width: 1
    style.border-radius: 8
    style.font-size: 16
    style.bold: true
  }
}

边样式 — 6种标准类型

# ━━ 主流程 ━━
a -> b {
  style.stroke: "#111827"
  style.stroke-width: 3
  style.opacity: 0.85
}

# ✓ 通过门 ✓
gate -> next: "pass" {
  style.stroke: "#16A34A"
  style.stroke-width: 2
  style.opacity: 0.80
}

# ✗ 失败门 ✗
gate -> rework: "fail" {
  style.stroke: "#DC2626"
  style.stroke-width: 2
  style.opacity: 0.70
  style.stroke-dash: 5
}

# ── 数据流 ──
a -> b: "data.csv" {
  style.stroke: "#6B8DB2"
  style.stroke-width: 1.5
  style.opacity: 0.50
}

# ╌╌ 跳转 ╌╌
a -> b: "跳至" {
  style.stroke: "#64748B"
  style.stroke-width: 1.5
  style.opacity: 0.40
  style.stroke-dash: 5
}

# ⟲ 反馈 ⟲
a -> b: "重试" {
  style.stroke: "#7C3AED"
  style.stroke-width: 1.5
  style.opacity: 0.45
  style.stroke-dash: 2
}

速查表

你在画什么 D2 类名 形状(颜色)
流程开始/结束 terminator 椭圆(紫罗兰)
任何动作、任务 process 矩形(蓝)
是/否分支 decision 菱形(琥珀)
数据进出 data 平行四边形(石板灰)
文档、报告 document 页面(靛蓝)
多份文档 multi-document 堆叠页面(靛蓝)
调用子程序 subroutine 步骤(橙)
设置/初始化 preparation 六边形(粉)
数据库 database 圆柱体(青)
通用存储 stored-data 弧形(浅青)
等待/暂停 delay D形(石灰)
用户输入 manual-input 平行四边形(橙)
屏幕显示 display 圆角矩形(翠绿)
同页链接 connector 圆形(灰)
跨页继续 offpage 五边形(灰)
RAM/缓存 internal-storage 方形(青)
循环边界 loop-limit 五边形(琥珀)
手动重复 manual-loop 六边形(橙)
AI/LLM调用 ai 柔和矩形(翠绿)
第三方API external 云(石灰)

图例模板

legend: {
  label: "图例"
  style.fill: "#FFFFFF"
  style.stroke: "#D1D5DB"
  style.border-radius: 8

  shapes: {
    label: "标准符号"
    s1: "终止符" { class: terminator }
    s2: "处理" { class: process }
    s3: "判断" { class: decision }
    s4: "数据" { class: data }
    s5: "文档" { class: document }
    s6: "子程序" { class: subroutine }
    s7: "准备" { class: preparation }
    s8: "数据库" { class: database }
  }
}

Skills Using This Standard (1)