ComfyUI Content Viewer：从 Markdown 到无限画布，内置 12 种视图与无限画布合成器

在 ComfyUI 的复杂工作流中，我们常常面临这样的困扰：生成的 JSON 数据难以直观阅读，Markdown 文档无法实时渲染，或者想要对多张生成图进行简单的合成与蒙版处理时，却不得不切换到外部软件。

• GitHub：https://github.com/WASasquatch/ComfyUI_Viewer

ComfyUI Content Viewer 是一款强大且高度可扩展的自定义节点，它不仅仅是一个“查看器”，更是一个模块化的内容渲染引擎。通过安全的嵌入式 iframe 沙盒，它能自动识别并渲染多达 12 种内容类型，甚至内置了一个功能齐全的无限画布图像合成器。最重要的是，这一切都无需修改 ComfyUI 的核心代码，即可动态加载、扩展和定制。

核心亮点：模块化与安全性并重

1. 智能视图扩展系统

Content Viewer 采用独特的模块化架构，每种内容类型由独立的视图扩展处理：

• 动态发现：系统自动扫描 web/views/view_manifest.js，即时加载新视图。
• 优先级检测：当多种视图均可处理同一内容时（如图像张量既可用“画布”也可用“对象”视图），系统会根据优先级自动匹配，或弹出选择器供用户切换。
• 主题同步：所有视图自动继承 ComfyUI 的主题令牌，确保界面风格高度一致。
• 零侵入扩展：开发者只需添加新的视图文件，即可支持全新的内容格式，完全无需触碰核心逻辑。

2. 银行级的安全沙盒

为了保障系统稳定，所有内容均在隔离的 iframe 沙盒中运行：

• 非同源隔离：iframe 无法访问 ComfyUI 主页面的 JavaScript 上下文或 localStorage，杜绝了潜在的安全风险。
• 独立运行：即使某个视图脚本出错，也不会导致整个 ComfyUI 界面崩溃。

内置 12 种强力视图，覆盖全场景需求

Content Viewer 预装了 12 种高频使用的视图，按智能优先级自动触发：

特色视图深度解析

🖌️ 画布视图：内置的 Photoshop 轻量版
这不仅仅是预览，更是一个完整的图像合成工作空间：

• 图层管理：自由添加、排序、隐藏、删除图层。
• 变换工具：支持移动、缩放、旋转，带智能手柄。
• 专业绘图：提供画笔、橡皮擦、仿制图章，支持调整大小、硬度与不透明度。
• 非破坏性编辑：支持图层蒙版、混合模式、阴影与描边效果。
• 无缝对接：合成结果可直接作为图像张量或蒙版张量输出，连接到下游节点继续处理。
• 导航辅助：内置迷你地图，轻松驾驭超大画布。

📝 Markdown 视图：技术文档的完美伴侣

• 图表绘制：直接在 ```mermaid 代码块中绘制流程图、序列图。
• 数学公式：通过 $$...$$ 渲染复杂的 LaTeX 公式。
• 交互列表：支持可勾选的任务列表 - [x]。

💻 终端视图：日志调试利器

• 完整支持 ANSI 转义码，无论是 16 色、256 色还是 24 位真彩色，亦或是粗体、斜体、删除线样式，都能精准还原，让调试信息一目了然。

🛠️ 强大的交互与控制

Content Viewer 提供了丰富的操作控件，让数据管理更加得心应手：

• 直接编辑：点击“编辑”按钮，即可在节点内直接修改 HTML、Markdown 或代码内容，保存即渲染。
• 列表增强：
  • 对于字符串列表，自动显示为带索引的独立容器。
  • 每项配备复选框（用于过滤输出）、复制按钮（一键复制到剪贴板）和独立编辑区。
• 全能下载：
  • 单个内容：自动检测扩展名并下载。
  • 列表内容：自动打包为 .zip 文件，内含所有独立命名的文件。
• 全屏模式：一键扩展至全屏，获得沉浸式查看体验。
• 数据持久化：手动编辑的内容会随工作流保存，确保下次打开时状态一致。

🚀 安装与使用

安装方式（三选一）

方式 A：Git 克隆（推荐）

cd ComfyUI/custom_nodes
git clone https://github.com/WASasquatch/ComfyUI_Viewer.git

方式 B：ComfyUI Manager
打开 Manager，搜索 ComfyUI_Viewer 并点击安装。

方式 C：手动安装
下载 ZIP 包，解压至 ComfyUI/custom_nodes/ComfyUI_Viewer 目录。

基本用法

1. 添加节点：在工作流中添加 Content Viewer 节点。
2. 连接数据：将任意字符串输出（如 JSON、Markdown、图片路径列表）连接到 content 输入端。
3. 自动渲染：系统自动检测内容类型并调用最佳视图进行渲染。

进阶玩法：作为笔记与合成中心

• 编写文档：直接点击“编辑”，输入 Markdown 或 HTML，将其作为工作流的说明文档，随文件一起保存。
• 图像合成：
  1. 将多个图像输出连接到画布合成器节点。
  2. 在画布视图中拖拽图像，利用变换工具调整位置。
  3. 使用画笔工具绘制蒙版或修饰细节。
  4. 点击“发送到输出”，将合成后的张量传递给后续节点（如放大、保存）。

🔌 扩展开发：打造你的专属视图

Content Viewer 拥有强大的扩展性。开发者可以轻松创建自定义视图，支持新的文件格式或交互式 UI。

• 前端视图：编写独立的 JS 类处理渲染逻辑。
• 后端解析：可选配 Python 后端解析器处理复杂数据。
• 动态注册：只需在 view_manifest.js 中注册，新视图即刻生效。

🔧 故障排除小贴士

• 内容不更新：检查上游节点是否执行；尝试断开重连输入线。
• 视图未识别：打开浏览器控制台（F12），查找 [WAS Viewer] 日志，确认 detect() 函数返回值是否大于 0。
• 画布图片加载失败：确保图片位于 ComfyUI 的 input 目录中，并检查是否有 CORS 跨域错误。
• 自定义视图不显示：验证文件是否在 view_manifest.js 中正确列出，并确保导出格式为 export default YourViewClass。