Update README.md

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.
+<img width="1397" height="919" alt="image" src="https://github.com/user-attachments/assets/f117d0a6-833b-4a3a-8d20-fa6ae1d760ea" />
+
+
+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"
+<img width="1535" height="842" alt="image" src="https://github.com/user-attachments/assets/f313786a-a1a6-4a68-8fda-d5d07a01d053" />
+
 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.
+
+   <img width="423" height="255" alt="image" src="https://github.com/user-attachments/assets/27b146f3-fb78-4b59-84da-a13c06ae8e6d" />
+
 
 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