Sign in

Nodes Browser

ComfyDeploy: How ComfyUI-Anchors works in ComfyUI?

What is ComfyUI-Anchors?

A ComfyUI extension to add spatial anchors/waypoints to better navigate large workflows.

How to install it in ComfyDeploy?

Head over to the machine page

  1. Click on the "Create a new machine" button
  2. Select the Edit build steps
  3. Add a new step -> Custom Node
  4. Search for ComfyUI-Anchors and select it
  5. Close the build step dialig and then click on the "Save" button to rebuild the machine

ComfyUI-Anchors

A ComfyUI extension to add spatial anchors/waypoints to better navigate large workflows.

Usage

Add Anchor Nodes (in utils)

Jump between them using the a and d keys.

Unexpected side-effects you can abuse

The way Comfy's Litegraph's centerOnNode works doesn't account for collapsed nodes.
So if you want to change the centering position when jumping to an Anchor, you can make it nice and big, then collapse it.
Try it out.

TODO

  • ⬜ Nodes
    • ✅ Anchors
  • ⬜ Behavior
    • ✅ a or d to jump between Anchors
    • ✅ Anchors show their coordinates (Hacky widgets right now)
    • ⬜ Show list of current Anchors (with names)
    • ⬜ Allow changing of iteration order
      • ⬜ Setting?
      • ⬜ By name only?
    • ⬜ Stretch: Add in vector based navigation, e.g. w would go to the anchor that most closely aligns with [0,1], d [0,-1], etc.
  • ⬜ Documentation

Development

  • Clone the repo
  • pnpm install
  • pnpm build

No plans to have this library work outside of ComfyUI

Confessions

Typing

To get the types working without extracting the JS code from ComfyUI, I have the development files (TS) reference Comfy as a sibling. So if you want TS hints and checks to work, you'll need to have a similar structure.

To get the JS to run properly, the relative path is swapped in the dist for a different relative path based on where the JS is copied on __init__.

Check out the vite.config.ts and tsconfig.json if you're interested. If you can find a cleaner/simpler way to do it, please tell me.