用途:把一个流程、系统或工作流画成“白板 + 便利贴”的视觉样式,适合 onboarding 视频、运营流程说明、系统架构讲解。灵感来自 hyperframes flowchart。
主要能力:画布为 1920×1080,背景用米黄白板纸 #f4ede1 或冷灰白板 #f0f2f4,并叠加很浅的 hex grid rgba(0,0,0,0.04) 营造白板感。每个节点是一张 240×180px 便利贴,从黄 #fcd34d、桃 #fca5a5、薄荷 #a7f3d0、天 #a5b4fc 四色中随机分配;便利贴带轻微不一致旋转 rotate(±2deg)、投影 drop-shadow(0 6px 14px rgba(0,0,0,0.12)) 和顶部胶带装饰。节点内容为 1 个 emoji 或单线 SVG 图标、16-20px 大字标题和 12px 一行描述。字体使用 Kalam、Caveat、Patrick Hand 等手写感字体,中文用霞鹜文楷或 LXGW WenKai Screen。连接线用 SVG path 贝塞尔曲线,stroke #2a2a2a、width 2.5、stroke-linecap: round,实线或 8 6 虚线表示条件分支,箭头终端用 marker-end 黑色小三角;支持分叉与合并。可选交互包括顶部 12px 大写 caption(如 FLOW · MIGRATION · 2026)、节点 hover 抬起阴影并 scale 1.05 的 CSS transition,以及模拟协作光标的 SVG 箭头加名字标签。
使用方式:单文件 HTML,不使用外部图标库,图标用 inline SVG。节点数量至少 5 个、最多 12 个,排布保留随手贴感但连接线需清晰不交叉。必须使用用户真实流程内容,节点文字直接来自用户输入。
限制:严禁全屏深色背景、霓虹色和企业 dashboard 风格;字体不能用 Inter 或衬线,必须手写感。资料未提供具体安装命令、收费方式或平台支持信息。