2026

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Haoming
+Copyright (c) 2026 Haoming
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,5 +1,10 @@
 # ComfyUI Node Beautify
-This is an Extension for [ComfyUI](https://github.com/comfyanonymous/ComfyUI), which helps formatting the workflow.
+This is an Extension for [ComfyUI](https://github.com/Comfy-Org/ComfyUI), which adds a `Beautify` button that formats the workflow
 
-## Feature
-This will add a button, **Beautify**, to the menu that rounds the **size** and **position** of each **node** and **group** in a workflow using the set value
+### Features
+- Round the `size` and `position` of each **Node**
+- Resize each **Group** with proper `margin` for **Node**s within
+- Reset the graph `position` to origin `(0, 0)`
+
+## Settings
+- Adjust the rounding size

js/functions.js

@@ -8,7 +8,14 @@ function round(value, size) {
 export function process_graph() {
     const GRID_SIZE = app.extensionManager.setting.get("Beautify.GridSize");
 
-    app.graph._nodes?.forEach((node) => {
+    const nodes = app.graph._nodes;
+    const groups = app.graph._groups;
+
+    groups?.forEach((group) => {
+        group.recomputeInsideNodes();
+    });
+
+    nodes?.forEach((node) => {
         const [x, y] = node.pos;
         const [w, h] = node.size;
 
@@ -19,15 +26,42 @@ export function process_graph() {
         node.size[1] = round(h, GRID_SIZE);
     });
 
-    app.graph._groups?.forEach((group) => {
-        const [x, y] = group._pos;
-        const [w, h] = group._size;
+    if (nodes?.length) {
+        const minX = Math.min(...nodes.map((n) => n.pos[0]));
+        const minY = Math.min(...nodes.map((n) => n.pos[1]));
 
-        group.pos[0] = round(x, GRID_SIZE);
-        group.pos[1] = round(y, GRID_SIZE);
+        nodes.forEach((node) => {
+            node.pos[0] -= minX;
+            node.pos[1] -= minY;
+        });
+    }
 
-        group.size[0] = round(w, GRID_SIZE);
-        group.size[1] = round(h, GRID_SIZE);
+    groups?.forEach((group) => {
+        const _nodes = group._nodes;
+        if (!_nodes?.length) return;
+
+        const titleOffset = 60;
+
+        let minX = Infinity,
+            minY = Infinity;
+        let maxX = -Infinity,
+            maxY = -Infinity;
+
+        for (const node of _nodes) {
+            const [nx, ny] = node.pos;
+            const [nw, nh] = node.size;
+
+            minX = Math.min(minX, nx);
+            minY = Math.min(minY, ny - titleOffset);
+            maxX = Math.max(maxX, nx + nw);
+            maxY = Math.max(maxY, ny + nh);
+        }
+
+        group.pos[0] = round(minX - GRID_SIZE * 2, GRID_SIZE);
+        group.pos[1] = round(minY - GRID_SIZE * 2, GRID_SIZE);
+
+        group.size[0] = round(maxX - minX + GRID_SIZE * 4, GRID_SIZE);
+        group.size[1] = round(maxY - minY + GRID_SIZE * 4, GRID_SIZE);
 
         group.recomputeInsideNodes();
     });

js/node_beautify.js

@@ -1,25 +1,10 @@
 import { app } from "../../scripts/app.js";
 import { process_graph } from "./functions.js";
 
-function legacy() {
-	const menu = document.querySelector(".comfy-menu");
-
-	const beautifyButton = document.createElement("button");
-	beautifyButton.textContent = "Beautify";
-	beautifyButton.addEventListener("click", () => {
-		process_graph();
-	});
-
-	const refreshButton = document.getElementById("comfy-refresh-button");
-	menu.insertBefore(beautifyButton, refreshButton);
-	document.addEventListener("keydown", (e) => {
-		if (e.altKey && e.shiftKey && e.code === "KeyF")
-			beautifyButton.click();
-	});
-}
-
 async function frontend() {
-	const btn = new (await import("../../scripts/ui/components/button.js")).ComfyButton({
+	const btn = new (
+		await import("../../scripts/ui/components/button.js")
+	).ComfyButton({
 		icon: "creation",
 		action: () => {
 			process_graph();
@@ -35,13 +20,7 @@ async function frontend() {
 app.registerExtension({
 	name: "Comfy.NodeBeautify",
 	async setup() {
-		try {
-			await frontend();
-		} catch {
-			// No Frontend
-		}
-
-		legacy();
+		await frontend();
 	},
 	settings: [
 		{
@@ -50,5 +29,5 @@ app.registerExtension({
 			type: "number",
 			defaultValue: 10,
 		},
-	]
+	],
 });

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "comfyui-node-beautify"
 description = "Add a button that formats the workflow graph"
-version = "1.2.0"
+version = "1.3.0"
 license = { text = "MIT License" }
 dependencies = []