ComfyUI Workflow Graphics

Embed images directly in your workflow JSONs, useful for workflow branding, visual guides and much more!

Install

• Clone this repo inside your custom_nodes folder git clone https://github.com/pixelworldai/ComfyUI-WorkflowGraphics.git
• Restart ComfyUI.

Usage

1. Add the node by searching for Workflow Graphics.
2. Open the node’s panel (double‑click the node or use the right‑side properties).
3. Paste an image base64:
   • Example: data:image/png;base64,...

A great place to convert your PNGs to Base64: https://www.base64-image.de/ - Once converted click "copy image"

4. Adjust:

   • Scale (%): 0–100 of the image’s natural size
   • Opacity: 0..1
   • Background Color: any CSS color or transparent - Great for adding background colors to transparent PNGs
   • Border Radius: radius in pixels - Add rounded edges to image

5. Pin the node (ComfyUI pin) to allow click‑through over the canvas while keeping it visible.

6. Use the context menu item Reload Workflow Graphics to reload node once you paste the base64 string, as it does not appear automatically after pasting, alternatively you can refresh the page.

   

Notes:

• This is a frontend‑only node; it does not participate in execution.
• The node size auto‑matches the displayed image dimensions.

Support

If you like this node, please support development of this and future projects here: https://ko-fi.com/pixelworldai <3