From dbbd4c4dfddaa3d9af20bcb608ae17e4f0d6d019 Mon Sep 17 00:00:00 2001
From: ku1x <ku1x@users.noreply.github.com>
Date: Thu, 23 Jul 2026 14:37:08 +0200
Subject: [PATCH] docs: add Mermaid workflow diagram for data flow pipeline

---
 README.md | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 133383f..d19ae0f 100644
--- a/README.md
+++ b/README.md
@@ -89,10 +89,31 @@ No extra dependencies — just restart ComfyUI.
 
 ### Example Workflow
 
-```
-LoadImage ──┐
-             ├── MaskCanvasEditor ──► PreviewImage
-LoadMask  ──┘
+```mermaid
+%%{init: {'flowchart': {'nodeSpacing': 30, 'rankSpacing': 25}}}%%
+flowchart LR
+    subgraph Input["📥 Input"]
+        direction TB
+        M["LoadImage\n(mask channel)"]
+        I["LoadImage"]
+        S["SAM / RMBG /\nMaskEditor"]
+    end
+
+    subgraph Editor["🎨 Mask Canvas Editor"]
+        N["MaskCanvasEditor\nscale / rotate / flip / offset"]
+    end
+
+    subgraph Output["📤 Output"]
+        P["PreviewImage"]
+        K["KSampler +\nother nodes"]
+    end
+
+    M -->|"mask"| N
+    I -->|"image"| N
+    S -->|"mask"| N
+    N -->|"cropped_image"| P
+    N -->|"cropped_mask"| P
+    N -->|"cropped_image"| K
 ```
 
 ---