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 }
}
}