From 035d34dee6b85dba593d38ac1fa23ecd1512c726 Mon Sep 17 00:00:00 2001 From: pixelworldai Date: Sun, 10 Aug 2025 08:15:22 -0500 Subject: [PATCH] Update README.md --- README.md | 36 +++++++++++++++++++----------------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 3b8fd68..4cddda9 100644 --- a/README.md +++ b/README.md @@ -1,37 +1,39 @@ -## Workflow Graphics (ComfyUI) +## ComfyUI Workflow Graphics -Add static images to your ComfyUI canvas as non-executable overlay nodes. Useful for logos, watermarks, or visual guides inside your workflow. +image + + +Embed images directly in your workflow JSONs, useful for workflow branding, visual guides and much more! ### Install -- Place this folder (`ComfyUI_Workflow_Branding`) in `ComfyUI/custom_nodes/`. +- Clone this repo inside your custom_nodes folder `git clone https://github.com/pixelworldai/ComfyUI-WorkflowGraphics.git` - Restart ComfyUI. -### Node -- Category: `branding` -- Name: `Workflow Graphics` - ### 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 as either: - - A complete data URL: `data:image/png;base64,...` - - Raw base64 (assumed PNG) +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" +image + 4. Adjust: - `Scale (%)`: 0–100 of the image’s natural size - `Opacity`: 0..1 - - `Background Color`: any CSS color or `transparent` - - `Border Radius`: radius in pixels + - `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` if you manually changed the base64 and want to refresh. +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. + + image + Notes: - This is a frontend‑only node; it does not participate in execution. - The node size auto‑matches the displayed image dimensions. -### Dev helpers -In the browser console you can run `window.refreshBrandingImages()` to reload all Workflow Graphics nodes on the canvas. - ### Support -If this saved you time, you can support development here: `https://ko-fi.com/pixelworldai` +If you like this node, please support development of this and future projects here: https://ko-fi.com/pixelworldai <3