40 lines
1.8 KiB
Markdown
40 lines
1.8 KiB
Markdown
## ComfyUI Workflow Graphics
|
||
|
||
<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
|
||
- 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"
|
||
<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` - 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.
|
||
|
||
<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.
|
||
|
||
### Support
|
||
If you like this node, please support development of this and future projects here: https://ko-fi.com/pixelworldai <3
|
||
|
||
|