[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"tb-a-2077685931434835968-2077688787680362496":3},{"detail":4,"html":18,"toc":19,"catalog":38,"tool":42},{"id":5,"title":6,"coverUrl":7,"url":8,"level":8,"description":9,"publishDate":10,"views":11,"isCollect":12,"isLike":12,"vipRequired":13,"vipFlag":14,"price":8,"contentType":15,"station":8,"seq":15,"readMinutes":16,"toolIds":17,"relatedVideo":8},"2077688787680362496","excalidraw-diagram：会“视觉论证”的手绘风流程图","",null,"GitHub 4.1k 星（coleam00）。用自然语言生成 Excalidraw 手绘风图表，形状呼应概念（一对多用扇出、顺序用时间线），技术图能嵌真实代码，自带 Playwright 渲染校验。适合画流程图、架构图、原理示意图。","2026-07-16",0,"0",false,"1",1,2,[],"\u003Cdiv style=\"padding:0 4px 24px;font-size:14px;color:#333;line-height:1.85;word-break:break-word\">\n\n\u003Cdiv style=\"background:#FFF7ED;border:1px solid #FFEDD5;border-radius:12px;padding:12px 14px;margin:0 0 18px;font-size:13px;line-height:1.7;color:#9A3412\">🔥 \u003Cstrong style=\"font-weight:700;color:#1a1a1a\">社区高星\u003C\u002Fstrong>：GitHub 4.1k 星（作者 coleam00）。\u003C\u002Fdiv>\n\n\u003Ch1 style=\"font-size:17px;font-weight:800;color:#111;margin:26px 0 14px;padding-left:10px;border-left:5px solid #FF8916;line-height:1.5\" id=\"s1\" data-toc>一、这是什么\u003C\u002Fh1>\n\u003Cp style=\"margin:0 0 14px\">用自然语言生成 \u003Cstrong style=\"font-weight:700;color:#1a1a1a\">Excalidraw 手绘风图表\u003C\u002Fstrong>的 skill。和那种千篇一律的\"方框加箭头\"不同，它讲究\u003Cstrong style=\"font-weight:700;color:#1a1a1a\">「用图形本身来论证」\u003C\u002Fstrong>——图长得像它要表达的意思。\u003C\u002Fp>\n\n\u003Ch1 style=\"font-size:17px;font-weight:800;color:#111;margin:26px 0 14px;padding-left:10px;border-left:5px solid #FF8916;line-height:1.5\" id=\"s2\" data-toc>二、有意思在哪\u003C\u002Fh1>\n\u003Cdiv style=\"background:#fff;border:1px solid #F1F5F9;border-radius:14px;padding:14px;margin:0 0 10px;box-shadow:0 2px 10px rgba(0,0,0,0.03)\">\u003Ch2 style=\"font-size:15px;font-weight:700;color:#1a1a1a;margin:0 0 6px\" id=\"s3\" data-toc>🧠 形状呼应概念\u003C\u002Fh2>\u003Cp style=\"margin:0\">一对多用\"扇出\"、有先后用\"时间线\"，图形结构本身就在说事，不是随便摆方块。\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv style=\"background:#fff;border:1px solid #F1F5F9;border-radius:14px;padding:14px;margin:0 0 10px;box-shadow:0 2px 10px rgba(0,0,0,0.03)\">\u003Ch2 style=\"font-size:15px;font-weight:700;color:#1a1a1a;margin:0 0 6px\" id=\"s4\" data-toc>🔬 技术图带真代码\u003C\u002Fh2>\u003Cp style=\"margin:0\">架构\u002F技术图里能嵌真实代码片段、JSON，不是空壳示意。\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv style=\"background:#fff;border:1px solid #F1F5F9;border-radius:14px;padding:14px;margin:0 0 10px;box-shadow:0 2px 10px rgba(0,0,0,0.03)\">\u003Ch2 style=\"font-size:15px;font-weight:700;color:#1a1a1a;margin:0 0 6px\" id=\"s5\" data-toc>✅ 画完自己校验\u003C\u002Fh2>\u003Cp style=\"margin:0\">自带 Playwright 渲染，画完自己看一眼、发现版式乱了会迭代修正。\u003C\u002Fp>\u003C\u002Fdiv>\n\n\u003Ch1 style=\"font-size:17px;font-weight:800;color:#111;margin:26px 0 14px;padding-left:10px;border-left:5px solid #FF8916;line-height:1.5\" id=\"s6\" data-toc>三、适合谁\u003C\u002Fh1>\n\u003Cdiv style=\"display:flex;margin:0 0 8px\">\u003Cspan style=\"color:#FF8916;margin-right:8px;flex-shrink:0;font-weight:700\">•\u003C\u002Fspan>\u003Cdiv style=\"flex:1\">画流程图、系统架构图、原理示意图的开发者、PM\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv style=\"display:flex;margin:0 0 8px\">\u003Cspan style=\"color:#FF8916;margin-right:8px;flex-shrink:0;font-weight:700\">•\u003C\u002Fspan>\u003Cdiv style=\"flex:1\">喜欢 Excalidraw 手绘风、要图\"有讲究\"的人\u003C\u002Fdiv>\u003C\u002Fdiv>\n\n\u003Cdiv style=\"background:#FFF7ED;border:1px solid #FFEDD5;border-radius:12px;padding:12px 14px;margin:18px 0 0;font-size:13px;line-height:1.7;color:#9A3412\">⚠️ \u003Cstrong style=\"font-weight:700;color:#1a1a1a\">一句实话\u003C\u002Fstrong>：产出是 Excalidraw 图（手绘风示意），不是精美海报\u002F图表；要数据图表看 AntV，要脑图看 mindmap。需在 Claude Code 等 AI 助手里使用，本地要配 Python + Playwright。\u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n",[20,23,26,29,32,35],{"id":21,"text":22,"level":15},"s1","一、这是什么",{"id":24,"text":25,"level":15},"s2","二、有意思在哪",{"id":27,"text":28,"level":16},"s3","🧠 形状呼应概念",{"id":30,"text":31,"level":16},"s4","🔬 技术图带真代码",{"id":33,"text":34,"level":16},"s5","✅ 画完自己校验",{"id":36,"text":37,"level":15},"s6","三、适合谁",[39],{"id":5,"title":6,"coverUrl":7,"duration":8,"level":8,"publishDate":10,"views":11,"aiSoftapp":8,"tags":40,"contentType":15,"station":8,"seq":15,"relateId":8,"toolId":41,"readMinutes":16},[],"2077685931434835968",{"id":41,"createTime":43,"createdBy":44,"updateTime":43,"updatedBy":44,"echoMap":45,"slug":46,"name":46,"categorySlug":47,"subCategory":48,"region":8,"website":49,"appName":7,"description":50,"tags":51,"sortOrder":11,"state":15,"tenantCode":56,"tutorialContent":8,"resourceType":57,"accessTypes":7,"installCmd":58,"logo":59,"hotScore":60,"githubStars":61,"category":47},"2026-07-16 17:25:02","1744248479271616512",{},"excalidraw-diagram","design","流程图与脑图","https:\u002F\u002Fgithub.com\u002Fcoleam00\u002Fexcalidraw-diagram-skill","GitHub 4.1k 星。生成会“视觉论证”的 Excalidraw 手绘风图表——形状呼应概念本身（一对多用扇出、顺序用时间线），技术图还能嵌真实代码片段。自带 Playwright 渲染校验，画完自己看一眼再修版式。适合画流程图、架构图、示意图。",[52,53,54,55],"社区高星","流程图","excalidraw手绘风","自动渲染校验","0000","skill","npx skills add coleam00\u002Fexcalidraw-diagram-skill","https:\u002F\u002Fgithub.com\u002Fcoleam00.png",72,4100]