ComfyUI Extension: ComfyUI-Title-Memo

Authored by xujianjian2004

Created

Updated

7 stars

Run ComfyUI workflows without the setup

No installs, no CUDA version roulette, no GPU sitting idle on your bill. Bring a workflow and run it in the browser.

Add title, comment and memo functions to nodes, which support custom styles and automatic word wrapping, compatible with Nodes 2.0.

Looking for a different extension?

Custom Nodes (0)

    README

    ComfyUI-Title-Memo

    一个功能丰富的 ComfyUI 画布注释节点，具有丰富的样式、内置预设、渐变背景、自定义设置等功能，可直接在工作流画布上添加标题、备注与说明。节点完美适配 Nodes 2.0，支持 Markdown 格式。A feature-rich ComfyUI canvas annotation node with rich styles, built-in presets, gradient backgrounds, and customizable settings.

    ✨ 核心特性

    • 零端口：无输入/输出，纯装饰与信息注释节点
    • 支持透明：背景透明度为 0 时，与任何画布主题无缝融合；编辑状态下自动显示虚线轮廓提示边界
    • 原生文本编辑：支持中英文混排、IME 输入法、复制粘贴、文本选中
    • 随画布缩放：文字字号与内边距随画布缩放比例等比同步，任意缩放层级下文字与节点保持一致比例
    • 双向自适应：输入/删除文字，调整字号、行距或切换预设时，节点高度实时撑开或收缩以适配内容；宽度由用户手动拖拽控制，文字超出宽度时自动换行
    • 边框与阴影联动：共用一个拾色器，颜色同步；边框宽度为 0 时不绘制任何边框
    • 渐变背景：支持 4 方向渐变（→ ↓ ← ↑），背景色与渐变色双色混合
    • 滚动条：内容超出节点高度时自动显示滚动条，支持鼠标滚轮滚动
    • 样式完整序列化：所有样式属性随工作流 JSON 保存与加载，重启不丢失
    • 自定义预设持久化：自定义预设存储于浏览器本地，刷新页面后保留
    • 固定节点：支持固定节点（pinned），固定后节点不可被选中或移动（除非取消固定）

    🖱️ 基本操作

    | 操作 | 效果 | | --- | --- | | 双击节点 | 编辑内容，并打开样式编辑器 | | 拖拽边缘 | 手动调整节点宽度与高度 | | 鼠标滚轮 | 内容超出时滚动查看 |

    🎨 样式编辑器

    双击节点文字区域即可打开，弹出位置默认位于节点左侧或右侧，自动防止超出屏幕边界。

    预设系统

    内置预设（一键应用）

    | 预设 | 风格 | 字号 | | --- | --- | --- | | 注释 | 无色透明背景，白色加粗文字，无边框，适合轻量注释 | 52px | | 标题 | 蓝色背景，白色加粗文字，圆角边框，适合工作流标题 | 72px | | 正文 | 绿色背景，白色文字，带边框，适合摘要性文字 | 24px | | 便签 | 黄色便签风格，深褐色文字，圆角+阴影，适合随文标签 | 24px | | 序号 | 深红棕色圆形背景，白色加粗文字，适合编号标记 | 60px |

    自定义预设

    在输入框中填写名称，点击「保存」将当前全部样式保存为自定义预设。自定义预设以标签形式显示，支持一键应用与单独删除，数据存储于浏览器本地，刷新不丢失。

    🖼️ 样式预览 Demo Preview

    <p align="center"> <img src="https://raw.githubusercontent.com/xujianjian2004/ComfyUI-Title-Memo/refs/heads/main/ComfyUI-Title-Memo-Preview.jpg" width="800"/> </p>

    文字设置

    对齐方式

    三个快速切换按钮：← 左对齐 · ↔ 居中对齐 · → 右对齐。未激活状态显示箭头符号，激活状态显示中文标签，两种状态均清晰可辨。

    背景 / 文字 / 字重

    | 控件 | 说明 | | --- | --- | | 背景拾色器 | 控制节点底色（配合透明度使用） | | 文字拾色器 | 控制文字颜色 | | 细 / 中 / 粗 | 切换字体粗细（lighter / normal / bold） |

    渐变设置

    | 控件 | 说明 | | --- | --- | | 渐变色拾色器 | 控制渐变目标颜色 | | 方向按钮（→ ↓ ← ↑） | 切换渐变方向（0° / 90° / 180° / 270°） |

    数值调节

    | 参数 | 范围 | 说明 | | --- | --- | --- | | 大小 | 8 – 200 px | 文字字号，修改后节点高度实时自适应 | | 行距 | 0.8 – 3.0 | 行间距倍数，默认 1.4 | | 透明 | 0 – 100 % | 背景填充透明度（0% 即全透明） | | 边框 | 0 – 10 px | 0 px 即无边框 | | 阴影 | 0 – 60 px | 发光 / 阴影扩散半径 | | 圆角 | 0 – 300 px | 节点与边框的圆角半径 | | 内边距 | 0 – 60 px | 文字与节点边缘的距离，默认 20 px |

    🚀 安装

    通过 ComfyUI Manager（推荐）

    • 安装：在 Manager 中搜索 ComfyUI-Title-Memo，点击安装后重启 ComfyUI；
    • 使用：在画布空白处双击或左侧"节点"中，搜索"Title Memo"。

    手动安装

    cd ComfyUI/custom_nodes
git clone https://github.com/xujianjian2004/ComfyUI-Title-Memo.git
# 重启 ComfyUI

    📁 项目结构

    ComfyUI-Title-Memo/
├── __init__.py              # 节点注册 & WEB_DIRECTORY 导出
├── py/
│   └── title_memo.py        # Python 节点类（轻量后端，支持 V3 API）
├── ComfyUI-Title-Memo-Preview.jpg # 节点预览图
├── js/
│   ├── title-memo.js        # 前端入口（LiteGraph 扩展注册）
├── workflows/
│   └── Title-Memo_example.json   # 示例工作流
├── LICENSE                 # MIT 开源协议
├── pyproject.toml           # 核心配置文件
├── requirements.txt         # Python 依赖清单
└── README.md                # 使用说明书

    v4.0 版

    • 升级内核至 WOSAI-ComfyUI v1.1 标准
    • 添加渐变背景功能（4 方向）
    • 添加滚动条（内容超出时自动显示）
    • 添加高级设置（透明度、边框、阴影、圆角、内边距）
    • 添加固定节点功能（pinned）
    • 添加 V3 API 支持
    • 优化样式面板 UI
    • 注入 cnr_id 和 ver 属性
    • 删减 9:21 比例
    • 更新 DESCRIPTION 和分类

    v3.0 版

    • 内置样式预设并适配标题 / 摘要 / 正文 / 便签 / 注释
    • Canvas 原生绘制 + Vue DOM 双模式自动适配
    • 支持 Markdown 格式，超链接自动识别（http/https/www/[[链接]]）
    • 字符级 CJK/英文混排自动换行 + 行首禁排规则
    • 字体自动检测（读取 ComfyUI CSS 变量，TTL 缓存）
    • 节点固定（pinned）+ 点击穿透
    • 优化代码结构和变量命名
    • 提升 Vue / Nodes 2.0 兼容性
    • 样式设置界面 UI 美化
    • 提升整体代码可维护性

    2.0 版

    • 重构代码，消除重复绘制与冗余样式
    • 优化监听范围，提升性能
    • 清理注释，精简文件结构
    • 统一版本、作者、分类、版权信息
    • 修复许可证描述错误
    • 无破坏性更新，可直接替换使用

    1.0 版

    • 初始版本，支持基础的标题、备注与说明。

    🛠 技术说明

    • 遵循 ComfyUI 自定义节点规范
    • 纯前端实现，Python 仅负责节点注册，所有渲染与交互由前端 JS 处理
    • 文字区域为真实 DOM <textarea> 元素，叠加在 canvas 上方，享有完整的原生编辑能力
    • 节点外观（背景、边框、阴影、圆角、渐变）通过 onDrawBackground 在 canvas 上绘制
    • 文字字号与内边距随 canvas.ds.scale 等比缩放，确保在任意画布缩放级别下文字与节点等比一致
    • 节点高度通过动态计算，在输入、删除、改字号、改行距、切换预设时实时双向调整；宽度保持用户设定值，文字超出自动换行
    • Markdown 支持：支持粗体、斜体、删除线、代码、链接、图片、标题、列表、任务、表格、分隔线等格式
    • 超链接识别：自动识别网址链接格式，支持点击跳转
    • 智能换行：CJK/英文混排自动换行 + 行首禁排规则（标点符号不换行）
    • 双模式渲染：Canvas 原生绘制 + Vue DOM 双模式自动适配，兼容 ComfyUI Nodes 2.0
    • 渐变背景：支持 4 方向线性渐变，背景色与渐变色双色混合
    • 滚动条：内容超出节点高度时自动显示滚动条，支持鼠标滚轮滚动
    • 样式状态通过 onSerialize / onConfigure 完整序列化至工作流 JSON
    • 自定义预设存储于 localStorage，刷新页面后保留
    • 内置 MutationObserver 自动清除 ComfyUI Vue 渲染产生的节点 Badge，保持界面整洁
    • 通过覆盖 ctx.fillText 与 Canvas 裁剪区域，抑制 LiteGraph 默认的节点 ID / 类型文字

    📄 许可证

    MIT License — COPYRIGHT © WOSAI STUDIO | 穿山阅海

    详见 LICENSE 文件。

    Run ComfyUI workflows without the setup

    No installs, no CUDA version roulette, no GPU sitting idle on your bill. Bring a workflow and run it in the browser.

    Learn more