如何把 ComfyUI 工作流快速分享到第三方平台:开发者实战指南
【免费下载链接】ComfyUI-ManagerComfyUI-Manager is an extension designed to enhance the usability of ComfyUI. It offers management functions to install, remove, disable, and enable various custom nodes of ComfyUI. Furthermore, this extension provides a hub feature and convenience functions to access a wide range of information within ComfyUI.项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI-Manager
你有没有过这样的经历:好不容易在 ComfyUI 里调通了一条效果惊艳的工作流,想分享给团队复用,或者发到社区和同行交流,却只能在本地默默跑图?今天要讲的 ComfyUI 工作流分享方案,正是解决这个问题的钥匙——ComfyUI-Manager 内置了一套完整的分享 API,把工作流一键发布到 OpenArt、YouML、Copus、ComfyWorkflows 等多个平台,整个流程甚至不需要你写一行后端代码。
这套能力不依赖任何外部付费服务,全部实现在项目自己的 JavaScript 模块中。下面我们沿着一条真实的分享链路,把"从画布到第三方平台"的每一步都拆开讲清楚。
一、为什么你的工作流一直"发不出去"
先看三个最常见的卡点:
- 流程没跑完就想分享:分享的本质是把"工作流 JSON + 生成好的成品图"打包上传,而图片数据恰恰来自输出节点。节点里没有图,自然没东西可发。
- 不知道分享入口在哪:ComfyUI-Manager 主界面上其实有现成的 Share 按钮,但很多人装了 Manager 却从没点开过。
- 想接入自己的平台却无从下手:官方已经封装好了底层逻辑,你只需要调用现成函数,不需要自己研究 ComfyUI 的图数据结构。
也就是说,分享功能早就"长"在项目里了,你要做的只是找到正确的打开方式。
二、实战:三步完成一次真实的工作流分享
第一步:从画布拿到工作流 JSON
分享的第一步永远是获取数据。ComfyUI 前端提供了app.graphToPrompt()这个全局方法,它会返回当前画布中所有节点的完整定义:
const prompt = await app.graphToPrompt(); const workflowJSON = prompt["workflow"];这两行代码的作用是:把你在画布上拖出来的所有节点、连线、参数设置,序列化成一个标准的 JSON 对象。这个workflowJSON就是后续要上传给第三方平台的"工作流本体"。
第二步:让程序帮你找出输出节点
光有工作流还不够,分享通常还要带上成果图片。ComfyUI 的输出节点种类很多,比如PreviewImage、SaveImage、VHS_VideoCombine(视频合成)、SaveAnimatedWEBP(动图)等。与其自己一个个判断,不如直接调用项目封装好的识别函数:
import { getPotentialOutputsAndOutputNodes } from "./comfyui-share-common.js"; const nodes = app.graph._nodes; const { potential_outputs, potential_output_nodes } = getPotentialOutputsAndOutputNodes(nodes);调用后,potential_outputs里是所有可供分享的图片/文件资源,potential_output_nodes是对应的节点引用。这两个数组一一对应,后面选图、上传都靠它们。底层逻辑就是遍历节点列表,检查节点类型是否在SUPPORTED_OUTPUT_NODE_TYPES白名单中,再取出节点上已缓存的图片数据——所以画布上必须先跑过一次流程,节点里才有图可取。
第三步:调用分享对话框
ComfyUI-Manager 为不同平台准备了各自独立的分享对话框,全部集中在js/comfyui-share-common.js这个文件里:
import { showCopusShareDialog, showOpenArtShareDialog, showYouMLShareDialog, } from "./comfyui-share-common.js"; showOpenArtShareDialog(); // 发布到 OpenArt showCopusShareDialog(); // 发布到 Copus(支持区块链存证) showYouMLShareDialog(); // 发布到 YouML(可转成交互式应用)每一个函数做的事情都差不多:先调用app.graphToPrompt()拿工作流,再识别输出节点,最后把数据塞进对应的对话框类(OpenArtShareDialog、CopusShareDialog、YouMLShareDialog)并弹出窗口。你只需要在页面里加一个按钮,绑上这些函数即可。
如果你不想绑定单一平台,项目还提供了平台选择器ShareDialogChooser——就是主菜单 Share 按钮点击后弹出的那个面板,里面列了 OpenArt、YouML、ComfyWorkflows、eSheep、Copus 等入口,代码在js/comfyui-manager.js里通过share_option配置项控制默认行为。
补充:需要登录的平台怎么处理
以 OpenArt 为例,它的对话框里内置了 API Key 的读写逻辑:
// 保存密钥 await api.fetchApi(`/manager/set_openart_auth`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ openart_key: '你的Key' }) }); // 读取密钥 const data = await api.fetchApi(`/manager/get_openart_auth`).then(r => r.json()); console.log(data.openart_key);这两个接口由后端的glob/share_3rdparty.py提供,密钥会安全地存到服务端配置里,下次打开对话框会自动带出,不用重复输入。Matrix 和 ComfyWorkflows 的账号信息也走同样的模式(/manager/get_matrix_auth、/manager/get_comfyworkflows_auth)。
三、常见坑点排雷
新手在接入这套 API 时,最容易栽在下面几个地方:
- 提示"没有支持的输出节点":这说明画布里没有
PreviewImage、SaveImage这类白名单节点。解决思路很简单——补一个输出节点,重新跑一次流程,等节点上出现图片缩略图再点分享。 - 提示"先运行一次再分享":输出节点存在,但节点上没有缓存任何图片。说明流程压根没跑,或者跑完中途报错。重新执行一次生成即可。
- OpenArt 分享时鉴权失败:先确认 Key 是否正确保存。可以打开浏览器控制台,手动调用
/manager/get_openart_auth看返回值是否为空;为空就重新走一遍保存接口。 - 分享对话框打开后样式错乱或打不开:这些对话框依赖
js/custom-nodes-manager.css、js/model-manager.css等样式文件,以及ComfyDialog这个 UI 基类。如果你是在自己的插件里复用,务必确认这些资源已经被正确加载。 - 复制代码后报"找不到模块":分享相关函数之间互相依赖,比如
comfyui-share-common.js引用了三个平台对话框。直接从js/目录整体引入即可,不要只拷贝单个文件。
四、进阶玩法:把分享能力变成你自己的
掌握了基础调用后,你完全可以在此基础上二次开发:
- 自定义分享对话框:项目里的
ShareDialog和OpenArtShareDialog都继承自 ComfyUI 的ComfyDialog基类。你可以仿照它们,重写createButtons()和share()方法,做一套完全属于你品牌的分享 UI。 - 扩展工作流元数据:分享时除了标题和描述,还可以附带 credits(署名)、NSFW 标记、平台账号信息。表单收集到的这些字段会随
prompt和potential_outputs一起 POST 给后端/manager/share,后端负责真正分发到对应平台。 - 定制分享菜单:通过
/manager/share_option接口可以调整主菜单 Share 按钮的默认行为——直接打开指定平台,或弹出一个平台选择面板,甚至完全隐藏按钮。
这些进阶逻辑都能在js/comfyui-share-common.js、js/comfyui-share-openart.js和glob/share_3rdparty.py中逐个对照学习。
五、总结与下一步
回看整条链路:app.graphToPrompt()负责取工作流数据,getPotentialOutputsAndOutputNodes()负责筛选输出资源,一系列showXxxShareDialog()负责弹窗与上传,后端接口负责鉴权和分发——这就是 ComfyUI-Manager 工作流分享能力的全部骨架。你不需要理解每个平台的内部协议,只需要把现成的函数串起来。
如果想深入,建议按这个顺序读源码:先看js/comfyui-share-common.js(核心流程),再看js/comfyui-share-openart.js(完整平台接入范例),最后对照glob/share_3rdparty.py理解服务端如何处理这些请求。
分享只是第一步,更酷的玩法是把你的工作流转成交互式 Web 应用(YouML 就是这么干的),或者让分享出去的成果帮你获得收益(Copus 提供了无分成的变现模式)。你准备先把自己的哪条工作流发出去试试?动手跑一遍,比读十遍文档都管用。
【免费下载链接】ComfyUI-ManagerComfyUI-Manager is an extension designed to enhance the usability of ComfyUI. It offers management functions to install, remove, disable, and enable various custom nodes of ComfyUI. Furthermore, this extension provides a hub feature and convenience functions to access a wide range of information within ComfyUI.项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI-Manager
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考