Patterns

Agent Node Design

Visual language for ZGI's agent graph editor. Each node communicates type, state, and data flow without decoration. Every decision — icon, color, border, port — has exactly one job.

Canvas preview

Full editor layout: white palette sidebar with all 19 nodes, dot-grid canvas, toolbar, bottom controls.

Policy assistant

·Draft · saved 2m ago

流程控制

AI 能力

数据处理

扩展工具

82%

Click nodes to select · drag from palette to canvas to add · select mode active

Node types

Six shapes cover all graph operations. Shape encodes behavior, not aesthetics.

Triage

Agent

Executes an LLM call or sub-agent. Most common node type.

Classify

Category 1

Category 2

Category 3

Classify

Routes to N output branches. Each branch gets its own port.

Condition

If / else

input.output_parsed
.has_all_details == true

Else

True

Condition

Boolean branch. Shows the expression inline; True/Else ports on right.

If any data is missing, ask the user before proceeding.

Note

Non-executable sticky. Always yellow; no ports. Documentation only.

Start

Entry point. Exactly one per graph. No left port — only right output.

New node

Placeholder shown when a branch has no target. Click to open palette.

Node anatomy

Three layers: header (always), subtitle (optional), body (optional).

LLM Reasoning

Agent

Qwen3-Max · temp 0.3

Outputs

draft_answer · confidence

Icon28px · 7px radius · type-matched pastel bg + icon color

Name13px semibold #0a0b0d — instance name, not type

Type label11px #6b7280 — node category, below the name

Ports10px circle · white 2px ring · on header vertical center

Subtitle11px #6b7280 · border-t hairline · model / params / dataset

Expanded bodyOutputs, variables, or condition text — only when relevant

Node states

State lives in the border and ring only. Background never changes.

LLM Reasoning

Agent

Qwen3-Max

Default

Neutral border · no ring

LLM Reasoning

Agent

Qwen3-Max

Selected

#2A6FDB border + selection ring

LLM Reasoning

Agent

Qwen3-Max

Running

Pulsing blue dot in header

LLM Reasoning

Agent

Qwen3-Max

Error

#dc2626 border + red ring

Node palette

Group is encoded by the icon-tile background color. Icons themselves stay uniform near-black (#1a1a1a).

流程控制

条件分支

#fbcfa8

人工审查

#fbcfa8

迭代

#fbcfa8

循环

#fbcfa8

直接回复

#fbcfa8

AI 能力

参数提取器

#cfd6f7

知识检索

#cfd6f7

LLM

#cfd6f7

图片生成

#cfd6f7

数据处理

变量聚合器

#dac6ed

变量赋值

#dac6ed

文档提取器

#dac6ed

JSON 解析器

#dac6ed

扩展工具

HTTP 请求

#f9dc7a

创建定时任务

#f9dc7a

发送短信

#f9dc7a

执行自定义SQL

#f9dc7a

智能SQL生成

#f9dc7a

代码执行

#f9dc7a

Palette sidebar

White panel with hairline right border · group encoded by icon-tile color family · 19 nodes across 4 groups. Width 180px.

流程控制

AI 能力

数据处理

扩展工具

Backgroundwhite · border-r 1px rgba(10,11,13,0.06)

Active item#eef0f3 fill — neutral cool, low contrast

Hover#f5f4f2 fill — warm gray, barely visible

Icon size28px container · 14px icon · 7px radius

Label13px regular #1a1a1a — calm, readable

Group header12px regular #8a8783 — Chinese label, no uppercase

Color familyAI 能力 = indigo · 流程控制 = peach · 数据处理 = lavender · 扩展工具 = yellow

Specifications

Node width180–240px (fixed per type)

Node radius10px

Icon container28px · 7px radius · pastel bg

Icon size14px · strokeWidth 1.75

Name13px semibold · #0a0b0d

Type label11px · #6b7280 · below name

Subtitle11px · #6b7280 · border-t hairline

Port dot10px circle · white 2px ring · #c8cdd6

Selected1.5px #2A6FDB border · 0 0 0 3px rgba(42,111,219,0.12)

Error1.5px #dc2626 border · 0 0 0 3px rgba(220,38,38,0.10)

Palette bgwhite · border-r rgba(10,11,13,0.06)

Palette width180px

Edge1.5px · rgba(10,11,13,0.25)

Dashed edge4 3 dash · conditional branches only

Canvas bg#f5f4f2 · 20px dot grid

Rules

Node name is the instance name ("Triage"), not the type ("Agent") — the type label appears below.
Icon color and hue encode group membership. Never reuse a hue across groups.
State lives in border + ring only. Background color never changes on hover, select, or run.
Port dots are neutral (#c8cdd6) by default. They turn blue only during an active drag connection.
Dashed edges indicate conditional or inactive paths. Solid edges are always-active.
Palette uses a white background with a hairline right border — quiet container. Group is encoded by icon-tile color: AI=indigo, 流程控制=peach, 数据处理=lavender, 扩展工具=yellow.
New node placeholders use a dashed border — they are invitations, not real graph nodes.
Classify and Condition output ports sit on each output row, not on the node header.