一句话描述流程，生成可编辑的网页流程图。节点能拖、双击能改字、一键导出 PNG。
Flowmaker 是一个 Agent Skill。你用自然语言描述一段流程——比如「世界杯赛制」或「国内安装 Claude Code 的步骤」——它会自动拆解成步骤，生成一个独立的 HTML 文件，双击就能打开。Flowmaker is an Agent Skill. Describe a process in natural language — like "World Cup format" or "how to install Claude Code in China" — and it generates a self-contained HTML file with an interactive flowchart. Double-click to open.
不是一张死图：每个节点都能拖动、编辑，连线可以增删，节点还能展开详情。画完一键导出 PNG 分享给别人。It's not a static image: every node is draggable and editable, connections can be added or removed, and nodes can expand to show details. Export to PNG when done.
处理矩形、起止圆角条、判断菱形。符合标准流程图规范。Process rectangle, terminator pill, decision diamond. Standard flowchart conventions.
节点上点「详情 ▾」展开攻略内容——链接、代码块、分系统命令。Click "Details" on a node to expand — links, code blocks, per-OS commands.
拖动节点、双击改名、拖圆点连线、单击改连线文字、面板删改。Drag nodes, double-click to rename, drag handles to connect, click edges to label.
导出高清 PNG，2x 像素密度，底色与主题一致。直接发给别人。Export high-DPI PNG at 2x pixel ratio with matching theme background. Share instantly.
一个 HTML 文件，通过 CDN 加载 React Flow + dagre，双击即开。Single HTML file, loads React Flow + dagre via CDN, opens by double-clicking.
朱砂强调色、宣纸暖底、Noto Serif SC 标题、Ring 阴影。融入个人设计系统。Vermillion accent, warm paper background, serif headings, ring shadows. Integrated into personal design DNA.
两个示例流程图，可以直接在浏览器里拖拽、编辑、导出。Two example flowcharts — try dragging, editing, and exporting right in your browser.
安装到 Claude Code 或其他支持 SKILL.md 的 Agent 后，直接对话即可：After installing into Claude Code or any SKILL.md-compatible agent, just talk to it:
或更复杂的：Or something more complex:
完整 Skill 包，含模板、示例、文档。克隆到技能目录即可使用。Complete skill package — template, examples, docs. Clone into your skills directory to use.
下载 .zip (69 KB)Download .zip (69 KB)原版来自 Originally from xntj-ai/flowmaker （MIT 许可证，XNTJ.AI 出品）。在此基础上做了以下优化： (MIT License, by XNTJ.AI). The following optimizations were made on top of it:
① 视觉全面定制为个人设计 DNA（朱砂色系 · 宣纸暖底 · Ring 阴影 · Noto Serif SC） ② 连线文字瘦身（减小背景框、降低视觉干扰） ③ dagre 间距调宽（ranksep 96 / nodesep 64，连线更有呼吸感） ④ 多选对齐工具栏 + 网格吸附① Full visual customization to personal design DNA (vermillion palette · warm paper · ring shadows · serif headings) ② Slimmed edge labels (smaller background, less visual noise) ③ Wider dagre spacing (ranksep 96 / nodesep 64, more breathing room) ④ Multi-select alignment toolbar + grid snapping