frame-flowchart-sticky

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

【模板: 便利贴流程图帧 (Sticky Flowchart)】【意图】把一个流程 / 系统 / 工作流画成"白板 + 便利贴"的样子, 适合 onboarding 视频、运营流程说明、系统架构讲解。Inspired by hyperframes flowchart。

【画布】1920×1080。背景: 米黄白板纸

#f4ede1

或冷灰白板

#f0f2f4

; 加非常浅的 hex grid

rgba(0,0,0,0.04)

让它有白板感。

【节点 (Sticky Notes)】

每节点 = 一张 240×180px 便利贴, 4 套颜色随机分配: 黄
```
#fcd34d
```
/ 桃
```
#fca5a5
```
/ 薄荷
```
#a7f3d0
```
/ 天
```
#a5b4fc
```
。

便利贴有轻微旋转

transform: rotate(±2deg)

不一致, 投影

drop-shadow(0 6px 14px rgba(0,0,0,0.12))

, 顶部胶带

linear-gradient(...)

装饰。

节点内容: 1 个 emoji 或单线 SVG icon + 大字标题 (16-20px) + 一行描述 (12px)。

节点字体:

Kalam

Caveat

Patrick Hand

手写感字体 (中文用

霞鹜文楷

或

LXGW WenKai Screen

)。

【连接线 (SVG)】

用
```
<path>
```
Bezier 曲线连接节点, stroke
```
#2a2a2a
```
, width 2.5,
```
stroke-linecap: round
```
,
```
stroke-dasharray: 0
```
(实线) 或
```
8 6
```
(虚线 = 条件分支)。
箭头终端用
```
marker-end
```
, 黑色三角小箭头。
复杂节点可有循环或分支: 同一节点连出 2 条 (分叉) 或 2 条进入一节点 (合并)。

【可选交互】

顶部 caption (sans, 12px uppercase): "FLOW · MIGRATION · 2026"。
鼠标 hover 节点: 抬起阴影 + scale 1.05, 用 CSS transition。
一个"光标"装饰 (
```
<svg>
```
arrow + name tag), 浮在某节点旁, 模拟 figma 协作光标。

【设计细节】

至少 5 个节点, 最多 12 个。
节点排布不要全部居中对齐, 要有一点白板风的"随手贴"感, 但保证连接线清晰不交叉。
严禁: 全屏深色背景、霓虹色、企业 dashboard 风格。
字体不能用 Inter / 衬线, 必须手写感。
单文件 HTML, 不要外部图标库 (用 inline SVG)。
必须用用户的真实流程内容; 节点文字直接来自用户输入。

【Template: Sticky Flowchart】【Purpose】To map a process / system / workflow in a "whiteboard + sticky notes" style, suitable for onboarding videos, operation process explanations, and system architecture introductions. Inspired by hyperframes flowchart.

【Canvas】1920×1080. Background: Beige whiteboard paper

#f4ede1

or cool gray whiteboard

#f0f2f4

; add a very light hex grid

rgba(0,0,0,0.04)

to give it a whiteboard feel.

【Nodes (Sticky Notes)】

Each node = a 240×180px sticky note, randomly assigned 4 color sets: Yellow
```
#fcd34d
```
/ Peach
```
#fca5a5
```
/ Mint
```
#a7f3d0
```
/ Sky Blue
```
#a5b4fc
```
.

Sticky notes have slight inconsistent rotation

transform: rotate(±2deg)

, shadow

drop-shadow(0 6px 14px rgba(0,0,0,0.12))

, and top tape decoration with

linear-gradient(...)

Node content: 1 emoji or single-line SVG icon + large title (16-20px) + one line of description (12px).
Node fonts: Handwritten-style fonts like
```
Kalam
```
/
```
Caveat
```
/
```
Patrick Hand
```
(use
```
霞鹜文楷
```
or
```
LXGW WenKai Screen
```
for Chinese).

【Connections (SVG)】

Use
```
<path>
```
Bezier curves to connect nodes, stroke
```
#2a2a2a
```
, width 2.5,
```
stroke-linecap: round
```
,
```
stroke-dasharray: 0
```
(solid line) or
```
8 6
```
(dashed line = conditional branch).
Arrow terminals use
```
marker-end
```
, small black triangular arrows.
Complex nodes can have loops or branches: 2 lines connecting from the same node (fork) or 2 lines entering one node (merge).

【Optional Interactions】

Top caption (sans, 12px uppercase): "FLOW · MIGRATION · 2026".
Mouse hover on node: Lift shadow + scale 1.05, using CSS transition.
A "cursor" decoration (
```
<svg>
```
arrow + name tag), floating next to a node, simulating Figma collaborative cursor.

【Design Details】

At least 5 nodes, maximum 12 nodes.
Nodes should not be fully centered aligned; they should have a slightly "casually stuck" whiteboard style, but ensure connections are clear and non-crossing.
Strictly prohibited: Full-screen dark background, neon colors, enterprise dashboard style.
Fonts cannot be Inter / serif; must be handwritten-style.
Single-file HTML, no external icon libraries (use inline SVG).
Must use the user's actual process content; node text directly comes from user input.