Initial commit of B&W Flowchart Sketcher web app

.gitignore

@@ -0,0 +1,6 @@
+__pycache__/
+*.pyc
+.gemini/
+temp_project.json
+verify_flowchart.py
+generate_screenshot.py

README.md

@@ -0,0 +1,23 @@
+---
+title: B&W Flowchart Sketcher
+emoji: 📊
+colorFrom: gray
+colorTo: white
+sdk: streamlit
+sdk_version: 1.35.0
+app_file: app.py
+pinned: false
+license: mit
+---
+
+# B&W Flowchart Sketcher
+
+A web-based tool to sketch clean, professional black-and-white flowcharts. 
+
+## Features
+- **Diverse Node Shapes**: Circle, Oval, Square, Diamond, and Inverted Triangle.
+- **Auto-Layout**: Layer nodes hierarchically automatically.
+- **Manual Positioning**: Fine-tune node coordinates using sliders.
+- **Custom Line Styles**: Connect nodes using straight, curved, or dotted lines.
+- **JSON Save/Load**: Export and load project files to resume work.
+- **High-Quality Export**: Export cropped PNG diagrams, perfect for documents and presentations.

app.py

@@ -0,0 +1,755 @@
+import streamlit as st
+import math
+import json
+import os
+import io
+from PIL import Image, ImageDraw, ImageFont
+
+# Set page config
+st.set_page_config(page_title="B&W Flowchart Sketcher", layout="wide")
+
+# ==========================================
+# Geometry & Math Helpers
+# ==========================================
+
+def intersect_segments(p1, p2, q1, q2):
+    x1, y1 = p1
+    x2, y2 = p2
+    x3, y3 = q1
+    x4, y4 = q2
+    
+    denom = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1)
+    if denom == 0:
+        return None  # Parallel
+        
+    ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denom
+    ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denom
+    
+    if 0 <= ua <= 1 and 0 <= ub <= 1:
+        return (x1 + ua * (x2 - x1), y1 + ua * (y2 - y1))
+    return None
+
+def get_boundary_intersection(node, target):
+    cx, cy = node.x, node.y
+    tx, ty = target
+    dx = tx - cx
+    dy = ty - cy
+    dist = math.hypot(dx, dy)
+    if dist == 0:
+        return (cx, cy)
+        
+    if node.shape == "circle":
+        r = min(node.w, node.h) / 2
+        return (cx + r * dx / dist, cy + r * dy / dist)
+        
+    elif node.shape == "oval":
+        a = node.w / 2
+        b = node.h / 2
+        t = 1.0 / math.sqrt((dx/a)**2 + (dy/b)**2 + 1e-9)
+        return (cx + t * dx, cy + t * dy)
+        
+    else:
+        if node.shape == "square":
+            vertices = [
+                (cx - node.w/2, cy - node.h/2),
+                (cx + node.w/2, cy - node.h/2),
+                (cx + node.w/2, cy + node.h/2),
+                (cx - node.w/2, cy + node.h/2)
+            ]
+        elif node.shape == "diamond":
+            vertices = [
+                (cx, cy - node.h/2),
+                (cx + node.w/2, cy),
+                (cx, cy + node.h/2),
+                (cx - node.w/2, cy)
+            ]
+        elif node.shape == "inverted triangle":
+            vertices = [
+                (cx - node.w/2, cy - node.h/2),
+                (cx + node.w/2, cy - node.h/2),
+                (cx, cy + node.h/2)
+            ]
+        else:
+            return (cx, cy)
+            
+        ray_end = (cx + 10000 * dx / dist, cy + 10000 * dy / dist)
+        
+        for i in range(len(vertices)):
+            v1 = vertices[i]
+            v2 = vertices[(i + 1) % len(vertices)]
+            pt = intersect_segments((cx, cy), ray_end, v1, v2)
+            if pt:
+                return pt
+        return (cx, cy)
+
+def get_quadratic_bezier_points(p0, p1, p2, num_steps=20):
+    points = []
+    for i in range(num_steps + 1):
+        t = i / num_steps
+        x = (1-t)**2 * p0[0] + 2*(1-t)*t * p1[0] + t**2 * p2[0]
+        y = (1-t)**2 * p0[1] + 2*(1-t)*t * p1[1] + t**2 * p2[1]
+        points.append((x, y))
+    return points
+
+# ==========================================
+# Word Wrapping Helper
+# ==========================================
+
+def wrap_text_by_width(text, max_width, measure_fn):
+    if not text:
+        return ""
+    words = text.split()
+    lines = []
+    current_line = []
+    for word in words:
+        test_line = " ".join(current_line + [word])
+        if measure_fn(test_line) <= max_width:
+            current_line.append(word)
+        else:
+            if current_line:
+                lines.append(" ".join(current_line))
+                current_line = [word]
+            else:
+                lines.append(word)
+                current_line = []
+    if current_line:
+        lines.append(" ".join(current_line))
+    return "\n".join(lines)
+
+# ==========================================
+# PIL Font Loader
+# ==========================================
+
+def get_pil_font(font_name, size, bold=False):
+    win_font_dir = "C:\\Windows\\Fonts"
+    paths = []
+    if bold:
+        paths.append(os.path.join(win_font_dir, f"{font_name}bd.ttf"))
+        paths.append(os.path.join(win_font_dir, f"{font_name}b.ttf"))
+        paths.append(os.path.join(win_font_dir, "arialbd.ttf"))
+    else:
+        paths.append(os.path.join(win_font_dir, f"{font_name}.ttf"))
+        paths.append(os.path.join(win_font_dir, "arial.ttf"))
+        
+    for p in paths:
+        if os.path.exists(p):
+            try:
+                return ImageFont.truetype(p, size)
+            except Exception:
+                pass
+    return ImageFont.load_default()
+
+# ==========================================
+# Model Classes
+# ==========================================
+
+class Node:
+    def __init__(self, designation, shape, description="", x=100.0, y=100.0):
+        self.id = designation.strip()
+        self.shape = shape.lower()
+        self.description = description.strip()
+        self.x = float(x)
+        self.y = float(y)
+        self.w, self.h = self.default_sizes()
+        
+    def default_sizes(self):
+        if self.shape == "circle":
+            return 80.0, 80.0
+        elif self.shape == "oval":
+            return 120.0, 60.0
+        elif self.shape == "square":
+            return 110.0, 70.0
+        elif self.shape == "diamond":
+            return 120.0, 90.0
+        elif self.shape == "inverted triangle":
+            return 120.0, 90.0
+        return 100.0, 60.0
+
+    def get_vertices(self):
+        cx, cy, w, h = self.x, self.y, self.w, self.h
+        if self.shape == "square":
+            return [
+                (cx - w/2, cy - h/2),
+                (cx + w/2, cy - h/2),
+                (cx + w/2, cy + h/2),
+                (cx - w/2, cy + h/2)
+            ]
+        elif self.shape == "diamond":
+            return [
+                (cx, cy - h/2),
+                (cx + w/2, cy),
+                (cx, cy + h/2),
+                (cx - w/2, cy)
+            ]
+        elif self.shape == "inverted triangle":
+            return [
+                (cx - w/2, cy - h/2),
+                (cx + w/2, cy - h/2),
+                (cx, cy + h/2)
+            ]
+        return []
+
+    def get_max_text_width(self):
+        if self.shape == "circle":
+            return self.w * 0.70
+        elif self.shape == "oval":
+            return self.w * 0.75
+        elif self.shape == "square":
+            return self.w * 0.82
+        elif self.shape == "diamond":
+            return self.w * 0.58
+        elif self.shape == "inverted triangle":
+            return self.w * 0.62
+        return self.w * 0.8
+
+    def to_dict(self):
+        return {
+            "id": self.id,
+            "shape": self.shape,
+            "description": self.description,
+            "x": self.x,
+            "y": self.y
+        }
+
+    @classmethod
+    def from_dict(cls, d):
+        return cls(d["id"], d["shape"], d.get("description", ""), d["x"], d["y"])
+
+
+class Edge:
+    def __init__(self, u, v, style="straight"):
+        self.u = u.strip()
+        self.v = v.strip()
+        self.style = style.lower()
+
+    def to_dict(self):
+        return {
+            "u": self.u,
+            "v": self.v,
+            "style": self.style
+        }
+
+    @classmethod
+    def from_dict(cls, d):
+        return cls(d["u"], d["v"], d["style"])
+
+
+class FlowchartModel:
+    def __init__(self):
+        self.nodes = {}
+        self.edges = []
+
+    def add_node(self, designation, shape, description="", x=100.0, y=100.0):
+        designation = designation.strip()
+        if not designation:
+            return False, "Node designation cannot be empty."
+        node = Node(designation, shape, description, x, y)
+        self.nodes[designation] = node
+        return True, node
+
+    def delete_node(self, designation):
+        designation = designation.strip()
+        if designation in self.nodes:
+            del self.nodes[designation]
+            self.edges = [e for e in self.edges if e.u != designation and e.v != designation]
+            return True
+        return False
+
+    def add_edge_path(self, path_str, style="straight"):
+        if "->" in path_str or "-->" in path_str:
+            s = path_str.replace("-->", "->")
+            parts = [p.strip() for p in s.split("->") if p.strip()]
+        elif "," in path_str:
+            parts = [p.strip() for p in path_str.split(",") if p.strip()]
+        else:
+            parts = [p.strip() for p in path_str.split() if p.strip()]
+            
+        if len(parts) < 2:
+            return False, "Invalid path. Enter at least two nodes (e.g. A -> B)."
+            
+        missing = [p for p in parts if p not in self.nodes]
+        if missing:
+            return False, f"Missing nodes: {', '.join(missing)}. Create them first."
+            
+        added_count = 0
+        for i in range(len(parts) - 1):
+            u, v = parts[i], parts[i+1]
+            exists = any(e.u == u and e.v == v for e in self.edges)
+            if not exists:
+                self.edges.append(Edge(u, v, style))
+                added_count += 1
+                
+        return True, f"Added {added_count} edge(s)."
+
+    def remove_edge(self, index):
+        if 0 <= index < len(self.edges):
+            self.edges.pop(index)
+            return True
+        return False
+
+    def clear(self):
+        self.nodes.clear()
+        self.edges.clear()
+
+    def auto_layout(self):
+        if not self.nodes:
+            return
+            
+        adj = {name: [] for name in self.nodes}
+        in_degree = {name: 0 for name in self.nodes}
+        for e in self.edges:
+            if e.u in adj and e.v in adj:
+                adj[e.u].append(e.v)
+                in_degree[e.v] += 1
+                
+        levels = {}
+        queue = []
+        
+        for name in self.nodes:
+            if in_degree[name] == 0:
+                levels[name] = 0
+                queue.append(name)
+                
+        if not queue:
+            first_node = list(self.nodes.keys())[0]
+            levels[first_node] = 0
+            queue.append(first_node)
+            
+        visited = set()
+        while queue:
+            curr = queue.pop(0)
+            visited.add(curr)
+            curr_level = levels.get(curr, 0)
+            
+            for neighbor in adj[curr]:
+                old_lvl = levels.get(neighbor, -1)
+                if curr_level + 1 > old_lvl:
+                    levels[neighbor] = curr_level + 1
+                    
+                if neighbor not in visited and neighbor not in queue:
+                    queue.append(neighbor)
+                    
+        for name in self.nodes:
+            if name not in levels:
+                levels[name] = 0
+                
+        nodes_by_level = {}
+        for name, lvl in levels.items():
+            nodes_by_level.setdefault(lvl, []).append(name)
+            
+        canvas_width = 800
+        level_height = 140
+        horizontal_spacing = 150
+        
+        for lvl, lvl_nodes in sorted(nodes_by_level.items()):
+            lvl_nodes.sort()
+            num_nodes = len(lvl_nodes)
+            y = 100 + lvl * level_height
+            for i, name in enumerate(lvl_nodes):
+                x = (canvas_width / 2) + (i - (num_nodes - 1) / 2) * horizontal_spacing
+                node = self.nodes[name]
+                node.x = x
+                node.y = y
+
+    def save_to_json(self):
+        data = {
+            "nodes": [n.to_dict() for n in self.nodes.values()],
+            "edges": [e.to_dict() for e in self.edges]
+        }
+        return json.dumps(data, indent=4)
+
+    def load_from_json(self, json_str):
+        data = json.loads(json_str)
+        self.clear()
+        for n_dict in data.get("nodes", []):
+            node = Node.from_dict(n_dict)
+            self.nodes[node.id] = node
+        for e_dict in data.get("edges", []):
+            self.edges.append(Edge.from_dict(e_dict))
+
+# ==========================================
+# PIL Dashed Line Helper
+# ==========================================
+
+def draw_dashed_line_pil(draw, points, fill="black", width=2, dash_len=6, gap_len=6):
+    if len(points) < 2:
+        return
+        
+    current_dash_left = dash_len
+    current_gap_left = 0
+    drawing = True
+    
+    for i in range(len(points) - 1):
+        p1 = points[i]
+        p2 = points[i+1]
+        
+        seg_dx = p2[0] - p1[0]
+        seg_dy = p2[1] - p1[1]
+        seg_len = math.hypot(seg_dx, seg_dy)
+        if seg_len == 0:
+            continue
+            
+        vx = seg_dx / seg_len
+        vy = seg_dy / seg_len
+        
+        dist_moved = 0
+        curr_pt = p1
+        
+        while dist_moved < seg_len:
+            if drawing:
+                step = min(seg_len - dist_moved, current_dash_left)
+                next_pt = (curr_pt[0] + vx * step, curr_pt[1] + vy * step)
+                draw.line([curr_pt, next_pt], fill=fill, width=width)
+                dist_moved += step
+                current_dash_left -= step
+                curr_pt = next_pt
+                if current_dash_left <= 0:
+                    drawing = False
+                    current_gap_left = gap_len
+            else:
+                step = min(seg_len - dist_moved, current_gap_left)
+                next_pt = (curr_pt[0] + vx * step, curr_pt[1] + vy * step)
+                dist_moved += step
+                current_gap_left -= step
+                curr_pt = next_pt
+                if current_gap_left <= 0:
+                    drawing = True
+                    current_dash_left = dash_len
+
+# ==========================================
+# Flowchart Image Generator
+# ==========================================
+
+def render_flowchart_image(model):
+    if not model.nodes:
+        img = Image.new("RGB", (400, 300), "white")
+        return img
+        
+    # Determine bounds
+    min_x = min(n.x - n.w/2 for n in model.nodes.values())
+    max_x = max(n.x + n.w/2 for n in model.nodes.values())
+    min_y = min(n.y - n.h/2 for n in model.nodes.values())
+    max_y = max(n.y + n.h/2 for n in model.nodes.values())
+    
+    margin = 50.0
+    crop_x1 = min_x - margin
+    crop_y1 = min_y - margin
+    crop_x2 = max_x + margin
+    crop_y2 = max_y + margin
+    
+    img_w = max(100, int(crop_x2 - crop_x1))
+    img_h = max(100, int(crop_y2 - crop_y1))
+    
+    img = Image.new("RGB", (img_w, img_h), "white")
+    draw = ImageDraw.Draw(img)
+    
+    def get_pt(cx, cy):
+        return int(cx - crop_x1), int(cy - crop_y1)
+        
+    font_bold = get_pil_font("segoeui", 10, bold=True)
+    font_reg = get_pil_font("segoeui", 9, bold=False)
+    
+    if hasattr(draw, 'textlength'):
+        measure_fn = lambda txt: draw.textlength(txt, font=font_reg)
+    else:
+        measure_fn = lambda txt: font_reg.getsize(txt)[0]
+        
+    def draw_pil_arrowhead(p_end, p_from):
+        xe, ye = get_pt(p_end[0], p_end[1])
+        xf, yf = get_pt(p_from[0], p_from[1])
+        dx = xe - xf
+        dy = ye - yf
+        dist = math.hypot(dx, dy)
+        if dist == 0:
+            return
+        ux = dx / dist
+        uy = dy / dist
+        
+        arrow_l = 12
+        arrow_w = 8
+        bx = xe - ux * arrow_l
+        by = ye - uy * arrow_l
+        px = -uy * (arrow_w / 2)
+        py = ux * (arrow_w / 2)
+        
+        pts = [(xe, ye), (bx + px, by + py), (bx - px, by - py)]
+        draw.polygon(pts, fill="black", outline="black")
+        
+    def draw_centered_text_pil(xy, text, font, fill="black"):
+        lines = text.split("\n")
+        try:
+            bbox = font.getbbox("Abgqp")
+            line_h = bbox[3] - bbox[1]
+        except:
+            line_h = font.getsize("Abgqp")[1]
+            
+        line_widths = []
+        for line in lines:
+            if hasattr(draw, 'textlength'):
+                w = draw.textlength(line, font=font)
+            else:
+                w = font.getsize(line)[0]
+            line_widths.append(w)
+            
+        total_height = line_h * len(lines) + 4 * (len(lines) - 1)
+        curr_y = xy[1] - total_height / 2
+        
+        for i, line in enumerate(lines):
+            w = line_widths[i]
+            draw.text((xy[0] - w/2, curr_y), line, font=font, fill=fill)
+            curr_y += line_h + 4
+
+    # 1. Draw Edges
+    for edge in model.edges:
+        u_node = model.nodes.get(edge.u)
+        v_node = model.nodes.get(edge.v)
+        if not u_node or not v_node:
+            continue
+            
+        if edge.style == "curved":
+            dx = v_node.x - u_node.x
+            dy = v_node.y - u_node.y
+            dist = math.hypot(dx, dy)
+            mx = (u_node.x + v_node.x) / 2
+            my = (u_node.y + v_node.y) / 2
+            
+            if dist > 0:
+                nx = -dy / dist
+                ny = dx / dist
+                p_ctrl = (mx + nx * 45, my + ny * 45)
+            else:
+                p_ctrl = (mx, my + 45)
+                
+            p_start = get_boundary_intersection(u_node, p_ctrl)
+            p_end = get_boundary_intersection(v_node, p_ctrl)
+            
+            bezier_pts = get_quadratic_bezier_points(p_start, p_ctrl, p_end, 30)
+            mapped_pts = [get_pt(px, py) for px, py in bezier_pts]
+            
+            if edge.style == "dotted":
+                draw_dashed_line_pil(draw, mapped_pts, fill="black", width=2, dash_len=4, gap_len=4)
+            else:
+                draw.line(mapped_pts, fill="black", width=2)
+                
+            draw_pil_arrowhead(p_end, p_ctrl)
+        else:
+            p_start = get_boundary_intersection(u_node, (v_node.x, v_node.y))
+            p_end = get_boundary_intersection(v_node, (u_node.x, u_node.y))
+            
+            p_start_m = get_pt(p_start[0], p_start[1])
+            p_end_m = get_pt(p_end[0], p_end[1])
+            
+            if edge.style == "dotted":
+                steps = int(math.hypot(p_end_m[0] - p_start_m[0], p_end_m[1] - p_start_m[1]) / 6)
+                if steps < 2: steps = 2
+                pts = []
+                for s in range(steps + 1):
+                    t = s / steps
+                    pts.append((p_start_m[0] + t * (p_end_m[0] - p_start_m[0]), p_start_m[1] + t * (p_end_m[1] - p_start_m[1])))
+                draw_dashed_line_pil(draw, pts, fill="black", width=2, dash_len=4, gap_len=4)
+            else:
+                draw.line([p_start_m, p_end_m], fill="black", width=2)
+                
+            draw_pil_arrowhead(p_end, p_start)
+            
+    # 2. Draw Nodes
+    for node in model.nodes.values():
+        cx, cy, w, h = node.x, node.y, node.w, node.h
+        px, py = get_pt(cx, cy)
+        
+        # Shadow
+        sh = 4
+        shadow_color = (233, 236, 239)
+        if node.shape in ("circle", "oval"):
+            draw.ellipse([px - w/2 + sh, py - h/2 + sh, px + w/2 + sh, py + h/2 + sh], fill=shadow_color, outline=None)
+        elif node.shape == "square":
+            draw.rectangle([px - w/2 + sh, py - h/2 + sh, px + w/2 + sh, py + h/2 + sh], fill=shadow_color, outline=None)
+        else:
+            sh_vertices = [(vx - crop_x1 + sh, vy - crop_y1 + sh) for vx, vy in node.get_vertices()]
+            draw.polygon(sh_vertices, fill=shadow_color, outline=None)
+            
+        # Shape
+        if node.shape in ("circle", "oval"):
+            draw.ellipse([px - w/2, py - h/2, px + w/2, py + h/2], fill="white", outline="black", width=2)
+        elif node.shape == "square":
+            draw.rectangle([px - w/2, py - h/2, px + w/2, py + h/2], fill="white", outline="black", width=2)
+        else:
+            sh_vertices = [(vx - crop_x1, vy - crop_y1) for vx, vy in node.get_vertices()]
+            draw.polygon(sh_vertices, fill="white")
+            draw.line(sh_vertices + [sh_vertices[0]], fill="black", width=2, joint="curve")
+            
+        # Text
+        max_w = node.get_max_text_width()
+        if node.description:
+            desc_wrapped = wrap_text_by_width(node.description, max_w, measure_fn)
+            draw_centered_text_pil((px, py - 12), node.id, font_bold, fill="black")
+            draw_centered_text_pil((px, py + 10), desc_wrapped, font_reg, fill=(73, 80, 87))
+        else:
+            draw_centered_text_pil((px, py), node.id, font_bold, fill="black")
+            
+    return img
+
+# ==========================================
+# Streamlit App Logic
+# ==========================================
+
+st.title("📊 B&W Flowchart Sketcher")
+
+# Initialize Model in Session State
+if "model" not in st.session_state:
+    model = FlowchartModel()
+    
+    # Load defaults
+    model.add_node("Start", "Circle", "Start", 400.0, 80.0)
+    model.add_node("Step 1", "Square", "Process Inputs", 400.0, 200.0)
+    model.add_node("Check", "Diamond", "Valid?", 400.0, 330.0)
+    model.add_node("Error", "Inverted Triangle", "Log Error", 220.0, 330.0)
+    model.add_node("End", "Oval", "Success Finish", 400.0, 460.0)
+    
+    model.add_edge_path("Start -> Step 1", "straight")
+    model.add_edge_path("Step 1 -> Check", "straight")
+    model.add_edge_path("Check -> Error", "straight")
+    model.add_edge_path("Check -> End", "straight")
+    model.add_edge_path("Error -> Start", "curved")
+    st.session_state.model = model
+else:
+    model = st.session_state.model
+
+# Split Layout
+col_ctrl, col_canvas = st.columns([1, 2])
+
+with col_ctrl:
+    st.header("Controls")
+    
+    # --- Node Management ---
+    with st.expander("Node Manager", expanded=True):
+        node_id = st.text_input("Designation / Label (Short ID)", key="node_id")
+        shape = st.selectbox("Icon Shape", ["Square", "Circle", "Oval", "Diamond", "Inverted Triangle"], key="shape")
+        desc = st.text_input("Description (Inside Shape)", key="desc")
+        
+        col_node_btns = st.columns(2)
+        with col_node_btns[0]:
+            if st.button("Add/Save Node", use_container_width=True):
+                if node_id:
+                    is_update = node_id in model.nodes
+                    if is_update:
+                        n = model.nodes[node_id]
+                        n.shape = shape.lower()
+                        n.description = desc
+                        n.w, n.h = n.default_sizes()
+                    else:
+                        model.add_node(node_id, shape, desc, x=300.0 + 50.0 * len(model.nodes), y=200.0)
+                    st.rerun()
+                else:
+                    st.error("Short ID designation required.")
+        with col_node_btns[1]:
+            if st.button("Delete Node", use_container_width=True):
+                if node_id:
+                    if model.delete_node(node_id):
+                        st.rerun()
+                    else:
+                        st.error(f"Node '{node_id}' not found.")
+                else:
+                    st.error("Enter a Short ID designation to delete.")
+
+    # --- Edge Management ---
+    with st.expander("Edge Manager", expanded=True):
+        edge_path = st.text_input("Path (e.g., A -> B -> C)", key="edge_path")
+        edge_style = st.selectbox("Connector Line Style", ["Straight", "Curved", "Dotted"], key="edge_style")
+        
+        if st.button("Add Edges", use_container_width=True):
+            if edge_path:
+                success, msg = model.add_edge_path(edge_path, edge_style)
+                if success:
+                    st.rerun()
+                else:
+                    st.error(msg)
+            else:
+                st.error("Enter an edge path.")
+                
+    # --- Manual Node Positioning ---
+    with st.expander("Manual Node Positioning", expanded=False):
+        if model.nodes:
+            selected_pos_node = st.selectbox("Select Node to Position", list(model.nodes.keys()))
+            node_to_move = model.nodes[selected_pos_node]
+            new_x = st.slider("X Coordinate", 0.0, 1000.0, float(node_to_move.x), step=10.0)
+            new_y = st.slider("Y Coordinate", 0.0, 1000.0, float(node_to_move.y), step=10.0)
+            if new_x != node_to_move.x or new_y != node_to_move.y:
+                node_to_move.x = new_x
+                node_to_move.y = new_y
+                st.rerun()
+        else:
+            st.info("Create nodes to enable manual positioning.")
+
+    # --- Lists and Deletions ---
+    with st.expander("Active Lists"):
+        st.subheader("Nodes")
+        if model.nodes:
+            for k, v in model.nodes.items():
+                st.text(f"• {k} ({v.shape.title()}) - {v.description}")
+        else:
+            st.text("No nodes.")
+            
+        st.subheader("Edges")
+        if model.edges:
+            edge_labels = [f"{e.u} -> {e.v} ({e.style.title()})" for e in model.edges]
+            del_edge_idx = st.selectbox("Select Edge to Delete", range(len(model.edges)), format_func=lambda i: edge_labels[i])
+            if st.button("Delete Selected Edge", use_container_width=True):
+                model.remove_edge(del_edge_idx)
+                st.rerun()
+        else:
+            st.text("No edges.")
+
+    # --- Actions ---
+    with st.expander("Global Actions", expanded=True):
+        col_actions = st.columns(2)
+        with col_actions[0]:
+            if st.button("Auto-Layout", use_container_width=True):
+                model.auto_layout()
+                st.rerun()
+        with col_actions[1]:
+            if st.button("Clear All", use_container_width=True):
+                model.clear()
+                st.rerun()
+                
+        # Save and Load
+        st.subheader("Save / Load Project")
+        json_data = model.save_to_json()
+        st.download_button(
+            label="Download JSON Project File",
+            data=json_data,
+            file_name="flowchart_project.json",
+            mime="application/json",
+            use_container_width=True
+        )
+        
+        uploaded_file = st.file_uploader("Upload JSON Project", type="json")
+        if uploaded_file is not None:
+            try:
+                json_str = uploaded_file.read().decode("utf-8")
+                model.load_from_json(json_str)
+                st.success("Project loaded successfully!")
+                st.rerun()
+            except Exception as e:
+                st.error(f"Error loading project: {e}")
+
+with col_canvas:
+    st.header("Sketch Canvas")
+    
+    # Render flowchart B&W image
+    flowchart_img = render_flowchart_image(model)
+    
+    # Display in browser
+    buffer = io.BytesIO()
+    flowchart_img.save(buffer, format="PNG")
+    img_bytes = buffer.getvalue()
+    
+    st.image(img_bytes, caption="Clean B&W Flowchart (Auto-cropped)", use_container_width=False)
+    
+    # Download Button
+    st.download_button(
+        label="📥 Download Flowchart Image (PNG)",
+        data=img_bytes,
+        file_name="flowchart_export.png",
+        mime="image/png"
+    )

flowchart_app.py

@@ -0,0 +1,1257 @@
+import tkinter as tk
+from tkinter import ttk, messagebox, filedialog
+import tkinter.font as tkfont
+import math
+import json
+import os
+from PIL import Image, ImageDraw, ImageFont
+
+# ==========================================
+# Geometry & Math Helpers
+# ==========================================
+
+def intersect_segments(p1, p2, q1, q2):
+    """
+    Finds the intersection of segment p1-p2 and segment q1-q2.
+    Returns (x, y) if they intersect, otherwise None.
+    """
+    x1, y1 = p1
+    x2, y2 = p2
+    x3, y3 = q1
+    x4, y4 = q2
+    
+    denom = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1)
+    if denom == 0:
+        return None  # Parallel or collinear
+        
+    ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denom
+    ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denom
+    
+    if 0 <= ua <= 1 and 0 <= ub <= 1:
+        return (x1 + ua * (x2 - x1), y1 + ua * (y2 - y1))
+    return None
+
+def get_boundary_intersection(node, target):
+    """
+    Calculates where a ray from the center of `node` to `target` (x, y)
+    intersects the node's boundary.
+    """
+    cx, cy = node.x, node.y
+    tx, ty = target
+    dx = tx - cx
+    dy = ty - cy
+    dist = math.hypot(dx, dy)
+    if dist == 0:
+        return (cx, cy)
+        
+    # Circle
+    if node.shape == "circle":
+        r = min(node.w, node.h) / 2
+        return (cx + r * dx / dist, cy + r * dy / dist)
+        
+    # Oval (Ellipse)
+    elif node.shape == "oval":
+        a = node.w / 2
+        b = node.h / 2
+        t = 1.0 / math.sqrt((dx/a)**2 + (dy/b)**2 + 1e-9)
+        return (cx + t * dx, cy + t * dy)
+        
+    # Polygon Shapes: square, diamond, inverted triangle
+    else:
+        if node.shape == "square":
+            vertices = [
+                (cx - node.w/2, cy - node.h/2),
+                (cx + node.w/2, cy - node.h/2),
+                (cx + node.w/2, cy + node.h/2),
+                (cx - node.w/2, cy + node.h/2)
+            ]
+        elif node.shape == "diamond":
+            vertices = [
+                (cx, cy - node.h/2),
+                (cx + node.w/2, cy),
+                (cx, cy + node.h/2),
+                (cx - node.w/2, cy)
+            ]
+        elif node.shape == "inverted triangle":
+            vertices = [
+                (cx - node.w/2, cy - node.h/2),
+                (cx + node.w/2, cy - node.h/2),
+                (cx, cy + node.h/2)
+            ]
+        else:
+            return (cx, cy)
+            
+        # Cast a long ray from center in the direction of target to ensure we hit the boundary
+        ray_end = (cx + 10000 * dx / dist, cy + 10000 * dy / dist)
+        
+        for i in range(len(vertices)):
+            v1 = vertices[i]
+            v2 = vertices[(i + 1) % len(vertices)]
+            pt = intersect_segments((cx, cy), ray_end, v1, v2)
+            if pt:
+                return pt
+        return (cx, cy)
+
+def get_quadratic_bezier_points(p0, p1, p2, num_steps=20):
+    """Generates points along a quadratic Bezier curve."""
+    points = []
+    for i in range(num_steps + 1):
+        t = i / num_steps
+        x = (1-t)**2 * p0[0] + 2*(1-t)*t * p1[0] + t**2 * p2[0]
+        y = (1-t)**2 * p0[1] + 2*(1-t)*t * p1[1] + t**2 * p2[1]
+        points.append((x, y))
+    return points
+
+# ==========================================
+# Word Wrapping Helper
+# ==========================================
+
+def wrap_text_by_width(text, max_width, measure_fn):
+    """Wraps text on word boundaries based on a width measurement function."""
+    if not text:
+        return ""
+    words = text.split()
+    lines = []
+    current_line = []
+    for word in words:
+        test_line = " ".join(current_line + [word])
+        if measure_fn(test_line) <= max_width:
+            current_line.append(word)
+        else:
+            if current_line:
+                lines.append(" ".join(current_line))
+                current_line = [word]
+            else:
+                lines.append(word)
+                current_line = []
+    if current_line:
+        lines.append(" ".join(current_line))
+    return "\n".join(lines)
+
+# ==========================================
+# Pillow Font Loader
+# ==========================================
+
+def get_pil_font(font_name, size, bold=False):
+    """Resilient font loader for Pillow on Windows."""
+    win_font_dir = "C:\\Windows\\Fonts"
+    paths = []
+    if bold:
+        paths.append(os.path.join(win_font_dir, f"{font_name}bd.ttf"))
+        paths.append(os.path.join(win_font_dir, f"{font_name}b.ttf"))
+        paths.append(os.path.join(win_font_dir, "arialbd.ttf"))
+    else:
+        paths.append(os.path.join(win_font_dir, f"{font_name}.ttf"))
+        paths.append(os.path.join(win_font_dir, "arial.ttf"))
+        
+    for p in paths:
+        if os.path.exists(p):
+            try:
+                return ImageFont.truetype(p, size)
+            except Exception:
+                pass
+    return ImageFont.load_default()
+
+# ==========================================
+# Model Classes
+# ==========================================
+
+class Node:
+    def __init__(self, designation, shape, description="", x=100.0, y=100.0):
+        self.id = designation.strip()
+        self.shape = shape.lower()  # diamond, inverted triangle, square, circle, oval
+        self.description = description.strip()
+        self.x = float(x)
+        self.y = float(y)
+        self.w, self.h = self.default_sizes()
+        
+    def default_sizes(self):
+        # Choose default dimensions based on shape to fit text neatly
+        if self.shape == "circle":
+            return 80.0, 80.0
+        elif self.shape == "oval":
+            return 120.0, 60.0
+        elif self.shape == "square":
+            return 110.0, 70.0
+        elif self.shape == "diamond":
+            return 120.0, 90.0
+        elif self.shape == "inverted triangle":
+            return 120.0, 90.0
+        return 100.0, 60.0
+
+    def get_vertices(self):
+        cx, cy, w, h = self.x, self.y, self.w, self.h
+        if self.shape == "square":
+            return [
+                (cx - w/2, cy - h/2),
+                (cx + w/2, cy - h/2),
+                (cx + w/2, cy + h/2),
+                (cx - w/2, cy + h/2)
+            ]
+        elif self.shape == "diamond":
+            return [
+                (cx, cy - h/2),
+                (cx + w/2, cy),
+                (cx, cy + h/2),
+                (cx - w/2, cy)
+            ]
+        elif self.shape == "inverted triangle":
+            return [
+                (cx - w/2, cy - h/2),
+                (cx + w/2, cy - h/2),
+                (cx, cy + h/2)
+            ]
+        return []
+
+    def get_max_text_width(self):
+        # Margins to prevent text touching borders
+        if self.shape == "circle":
+            return self.w * 0.70
+        elif self.shape == "oval":
+            return self.w * 0.75
+        elif self.shape == "square":
+            return self.w * 0.82
+        elif self.shape == "diamond":
+            return self.w * 0.58
+        elif self.shape == "inverted triangle":
+            return self.w * 0.62
+        return self.w * 0.8
+
+    def to_dict(self):
+        return {
+            "id": self.id,
+            "shape": self.shape,
+            "description": self.description,
+            "x": self.x,
+            "y": self.y
+        }
+
+    @classmethod
+    def from_dict(cls, d):
+        return cls(d["id"], d["shape"], d.get("description", ""), d["x"], d["y"])
+
+
+class Edge:
+    def __init__(self, u, v, style="straight"):
+        self.u = u.strip()  # From node ID
+        self.v = v.strip()  # To node ID
+        self.style = style.lower()  # straight, curved, dotted
+
+    def to_dict(self):
+        return {
+            "u": self.u,
+            "v": self.v,
+            "style": self.style
+        }
+
+    @classmethod
+    def from_dict(cls, d):
+        return cls(d["u"], d["v"], d["style"])
+
+
+class FlowchartModel:
+    def __init__(self):
+        self.nodes = {}  # ID -> Node
+        self.edges = []  # List of Edge objects
+
+    def add_node(self, designation, shape, description="", x=100.0, y=100.0):
+        designation = designation.strip()
+        if not designation:
+            return False, "Node designation cannot be empty."
+        node = Node(designation, shape, description, x, y)
+        self.nodes[designation] = node
+        return True, node
+
+    def delete_node(self, designation):
+        designation = designation.strip()
+        if designation in self.nodes:
+            del self.nodes[designation]
+            # Remove associated edges
+            self.edges = [e for e in self.edges if e.u != designation and e.v != designation]
+            return True
+        return False
+
+    def add_edge_path(self, path_str, style="straight"):
+        """
+        Parses paths like 'A -> B -> C' or 'A, B' or 'A - B' and adds
+        consecutive pairs as edges of the given style.
+        """
+        # Determine delimiters and split
+        if "->" in path_str or "-->" in path_str:
+            s = path_str.replace("-->", "->")
+            parts = [p.strip() for p in s.split("->") if p.strip()]
+        elif "," in path_str:
+            parts = [p.strip() for p in path_str.split(",") if p.strip()]
+        else:
+            parts = [p.strip() for p in path_str.split() if p.strip()]
+        
+        if len(parts) < 2:
+            return False, "Invalid path. Enter at least two nodes (e.g. A -> B)."
+            
+        # Verify all nodes exist
+        missing = [p for p in parts if p not in self.nodes]
+        if missing:
+            return False, f"Missing nodes: {', '.join(missing)}. Create them first."
+            
+        added_count = 0
+        for i in range(len(parts) - 1):
+            u, v = parts[i], parts[i+1]
+            # Avoid duplicate edges of the same direction
+            exists = any(e.u == u and e.v == v for e in self.edges)
+            if not exists:
+                self.edges.append(Edge(u, v, style))
+                added_count += 1
+                
+        return True, f"Added {added_count} edge(s)."
+
+    def remove_edge(self, index):
+        if 0 <= index < len(self.edges):
+            self.edges.pop(index)
+            return True
+        return False
+
+    def clear(self):
+        self.nodes.clear()
+        self.edges.clear()
+
+    def auto_layout(self):
+        """
+        Calculates a clean vertical hierarchical (layered) layout for the nodes.
+        """
+        if not self.nodes:
+            return
+            
+        # 1. Build adjacency list and compute in-degrees
+        adj = {name: [] for name in self.nodes}
+        in_degree = {name: 0 for name in self.nodes}
+        for e in self.edges:
+            if e.u in adj and e.v in adj:
+                adj[e.u].append(e.v)
+                in_degree[e.v] += 1
+                
+        # 2. Layer nodes using simple BFS-like sorting
+        levels = {}
+        queue = []
+        
+        # Start nodes (in-degree = 0)
+        for name in self.nodes:
+            if in_degree[name] == 0:
+                levels[name] = 0
+                queue.append(name)
+                
+        # Handle cycles/disconnected loops (if no 0-in-degree nodes exist)
+        if not queue:
+            first_node = list(self.nodes.keys())[0]
+            levels[first_node] = 0
+            queue.append(first_node)
+            
+        visited = set()
+        while queue:
+            curr = queue.pop(0)
+            visited.add(curr)
+            curr_level = levels.get(curr, 0)
+            
+            for neighbor in adj[curr]:
+                old_lvl = levels.get(neighbor, -1)
+                # Elevate level if current path is deeper
+                if curr_level + 1 > old_lvl:
+                    levels[neighbor] = curr_level + 1
+                    
+                if neighbor not in visited and neighbor not in queue:
+                    queue.append(neighbor)
+                    
+        # Catch any remaining nodes (e.g. disconnected nodes in cycles)
+        for name in self.nodes:
+            if name not in levels:
+                levels[name] = 0
+                
+        # 3. Group by level
+        nodes_by_level = {}
+        for name, lvl in levels.items():
+            nodes_by_level.setdefault(lvl, []).append(name)
+            
+        # 4. Assign Coordinates
+        # Canvas defaults: center is ~400
+        canvas_width = 800
+        level_height = 140
+        horizontal_spacing = 150
+        
+        for lvl, lvl_nodes in sorted(nodes_by_level.items()):
+            lvl_nodes.sort()  # Alphabetical for layout stability
+            num_nodes = len(lvl_nodes)
+            y = 100 + lvl * level_height
+            for i, name in enumerate(lvl_nodes):
+                x = (canvas_width / 2) + (i - (num_nodes - 1) / 2) * horizontal_spacing
+                node = self.nodes[name]
+                node.x = x
+                node.y = y
+
+    def save_to_file(self, filepath):
+        data = {
+            "nodes": [n.to_dict() for n in self.nodes.values()],
+            "edges": [e.to_dict() for e in self.edges]
+        }
+        with open(filepath, "w") as f:
+            json.dump(data, f, indent=4)
+
+    def load_from_file(self, filepath):
+        with open(filepath, "r") as f:
+            data = json.load(f)
+        self.clear()
+        for n_dict in data.get("nodes", []):
+            node = Node.from_dict(n_dict)
+            self.nodes[node.id] = node
+        for e_dict in data.get("edges", []):
+            self.edges.append(Edge.from_dict(e_dict))
+
+# ==========================================
+# Canvas GUI Widget
+# ==========================================
+
+class FlowchartCanvas(tk.Frame):
+    def __init__(self, parent, model, select_callback=None):
+        super().__init__(parent)
+        self.model = model
+        self.select_callback = select_callback
+        
+        self.selected_node_id = None
+        self.dragged_node = None
+        self.drag_offset_x = 0
+        self.drag_offset_y = 0
+        
+        # Scrollbars and canvas
+        self.canvas = tk.Canvas(self, bg="white", borderwidth=0, highlightthickness=0)
+        self.hbar = tk.Scrollbar(self, orient=tk.HORIZONTAL, command=self.canvas.xview)
+        self.vbar = tk.Scrollbar(self, orient=tk.VERTICAL, command=self.canvas.yview)
+        
+        self.canvas.config(xscrollcommand=self.hbar.set, yscrollcommand=self.vbar.set)
+        
+        self.grid(row=0, column=0, sticky="nsew")
+        self.canvas.grid(row=0, column=0, sticky="nsew")
+        self.vbar.grid(row=0, column=1, sticky="ns")
+        self.hbar.grid(row=1, column=0, sticky="ew")
+        
+        self.rowconfigure(0, weight=1)
+        self.columnconfigure(0, weight=1)
+        
+        # Grid settings
+        self.canvas.config(scrollregion=(0, 0, 1500, 1200))
+        
+        # Fonts
+        self.font_bold = ("Segoe UI", 10, "bold")
+        self.font_reg = ("Segoe UI", 9)
+        
+        # Event Bindings
+        self.canvas.bind("<Button-1>", self.on_press)
+        self.canvas.bind("<B1-Motion>", self.on_drag)
+        self.canvas.bind("<ButtonRelease-1>", self.on_release)
+        
+        # Initial draw
+        self.redraw()
+
+    def update_scroll_region(self):
+        if not self.model.nodes:
+            self.canvas.config(scrollregion=(0, 0, 1200, 900))
+            return
+        xs = [n.x for n in self.model.nodes.values()]
+        ys = [n.y for n in self.model.nodes.values()]
+        min_x = min(xs) - 150
+        max_x = max(xs) + 150
+        min_y = min(ys) - 150
+        max_y = max(ys) + 150
+        
+        min_x = min(0, min_x)
+        min_y = min(0, min_y)
+        max_x = max(1200, max_x)
+        max_y = max(900, max_y)
+        self.canvas.config(scrollregion=(min_x, min_y, max_x, max_y))
+
+    def on_press(self, event):
+        # Convert window event coordinates to canvas coordinates (taking scrolling into account)
+        cx = self.canvas.canvasx(event.x)
+        cy = self.canvas.canvasy(event.y)
+        
+        # Check if clicked on a node
+        clicked_node = None
+        for node in self.model.nodes.values():
+            if (node.x - node.w/2 <= cx <= node.x + node.w/2 and
+                node.y - node.h/2 <= cy <= node.y + node.h/2):
+                clicked_node = node
+                break
+                
+        if clicked_node:
+            self.selected_node_id = clicked_node.id
+            self.dragged_node = clicked_node
+            self.drag_offset_x = cx - clicked_node.x
+            self.drag_offset_y = cy - clicked_node.y
+            if self.select_callback:
+                self.select_callback(clicked_node.id)
+        else:
+            self.selected_node_id = None
+            if self.select_callback:
+                self.select_callback(None)
+                
+        self.redraw()
+
+    def on_drag(self, event):
+        if self.dragged_node:
+            cx = self.canvas.canvasx(event.x)
+            cy = self.canvas.canvasy(event.y)
+            # Drag node center relative to cursor offset
+            self.dragged_node.x = cx - self.drag_offset_x
+            self.dragged_node.y = cy - self.drag_offset_y
+            self.redraw()
+
+    def on_release(self, event):
+        self.dragged_node = None
+        self.update_scroll_region()
+
+    def draw_arrowhead(self, p_end, p_from, canvas_line_id=None):
+        """Draws a clean, custom filled B&W arrowhead pointing at p_end."""
+        xe, ye = p_end
+        xf, yf = p_from
+        dx = xe - xf
+        dy = ye - yf
+        dist = math.hypot(dx, dy)
+        if dist == 0:
+            return
+            
+        ux = dx / dist
+        uy = dy / dist
+        
+        arrow_length = 12
+        arrow_width = 8
+        
+        bx = xe - ux * arrow_length
+        by = ye - uy * arrow_length
+        
+        px = -uy * (arrow_width / 2)
+        py = ux * (arrow_width / 2)
+        
+        pts = [xe, ye, bx + px, by + py, bx - px, by - py]
+        self.canvas.create_polygon(pts, fill="#212529", outline="#212529")
+
+    def redraw(self):
+        self.canvas.delete("all")
+        
+        # 1. Draw Grid Lines
+        region = self.canvas.cget("scrollregion")
+        if region:
+            _, _, r_w, r_h = map(float, region.split())
+        else:
+            r_w, r_h = 1200, 900
+            
+        for x in range(0, int(r_w), 45):
+            self.canvas.create_line(x, 0, x, r_h, fill="#f1f3f5", dash=(2, 4))
+        for y in range(0, int(r_h), 45):
+            self.canvas.create_line(0, y, r_w, y, fill="#f1f3f5", dash=(2, 4))
+            
+        # Measure function using Tkinter's Font class
+        tk_font_reg = tkfont.Font(family="Segoe UI", size=9)
+        measure_fn = lambda txt: tk_font_reg.measure(txt)
+        
+        # 2. Draw Edges
+        for edge in self.model.edges:
+            u_node = self.model.nodes.get(edge.u)
+            v_node = self.model.nodes.get(edge.v)
+            if not u_node or not v_node:
+                continue
+                
+            # Line style properties
+            dash_pattern = (4, 4) if edge.style == "dotted" else None
+            
+            if edge.style == "curved":
+                # Compute control point offset from midpoint
+                dx = v_node.x - u_node.x
+                dy = v_node.y - u_node.y
+                dist = math.hypot(dx, dy)
+                mx = (u_node.x + v_node.x) / 2
+                my = (u_node.y + v_node.y) / 2
+                
+                # Curvature vector
+                if dist > 0:
+                    nx = -dy / dist
+                    ny = dx / dist
+                    p_ctrl = (mx + nx * 45, my + ny * 45)
+                else:
+                    p_ctrl = (mx, my + 45)
+                    
+                # Calculate boundary intersections towards the control point
+                p_start = get_boundary_intersection(u_node, p_ctrl)
+                p_end = get_boundary_intersection(v_node, p_ctrl)
+                
+                # Generate points along Bezier curve
+                bezier_pts = get_quadratic_bezier_points(p_start, p_ctrl, p_end, 25)
+                flat_coords = []
+                for pt in bezier_pts:
+                    flat_coords.extend(pt)
+                    
+                # Draw curved segments
+                self.canvas.create_line(*flat_coords, fill="#212529", width=2, dash=dash_pattern)
+                # Arrowhead points tangent to the curve end (direction: p_end - p_ctrl)
+                self.draw_arrowhead(p_end, p_ctrl)
+            else:
+                # Straight / Dotted line
+                p_start = get_boundary_intersection(u_node, (v_node.x, v_node.y))
+                p_end = get_boundary_intersection(v_node, (u_node.x, u_node.y))
+                
+                self.canvas.create_line(p_start[0], p_start[1], p_end[0], p_end[1], 
+                                         fill="#212529", width=2, dash=dash_pattern)
+                self.draw_arrowhead(p_end, p_start)
+                
+        # 3. Draw Nodes
+        for node in self.model.nodes.values():
+            cx, cy, w, h = node.x, node.y, node.w, node.h
+            
+            # --- Draw Drop Shadow (Light gray, offset 4px) ---
+            sh_offset = 4
+            scx, scy = cx + sh_offset, cy + sh_offset
+            if node.shape in ("circle", "oval"):
+                self.canvas.create_oval(scx - w/2, scy - h/2, scx + w/2, scy + h/2, fill="#e9ecef", outline="")
+            elif node.shape == "square":
+                self.canvas.create_rectangle(scx - w/2, scy - h/2, scx + w/2, scy + h/2, fill="#e9ecef", outline="")
+            else:
+                sh_vertices = []
+                for vx, vy in node.get_vertices():
+                    sh_vertices.extend([vx + sh_offset, vy + sh_offset])
+                self.canvas.create_polygon(sh_vertices, fill="#e9ecef", outline="")
+                
+            # --- Draw Main Node Shape ---
+            outline_color = "#212529"
+            bg_color = "#ffffff"
+            
+            if node.shape in ("circle", "oval"):
+                self.canvas.create_oval(cx - w/2, cy - h/2, cx + w/2, cy + h/2, fill=bg_color, outline=outline_color, width=2)
+            elif node.shape == "square":
+                self.canvas.create_rectangle(cx - w/2, cy - h/2, cx + w/2, cy + h/2, fill=bg_color, outline=outline_color, width=2)
+            else:
+                vertices = []
+                for vx, vy in node.get_vertices():
+                    vertices.extend([vx, vy])
+                self.canvas.create_polygon(vertices, fill=bg_color, outline=outline_color, width=2)
+                
+            # --- Draw Selected Highlight (Dashed boundary box) ---
+            if node.id == self.selected_node_id:
+                self.canvas.create_rectangle(cx - w/2 - 4, cy - h/2 - 4, cx + w/2 + 4, cy + h/2 + 4, 
+                                             outline="#4dabf7", width=1.5, dash=(2, 2))
+                                             
+            # --- Draw Text ---
+            max_w = node.get_max_text_width()
+            
+            if node.description:
+                # Text wrapping on description
+                desc_wrapped = wrap_text_by_width(node.description, max_w, measure_fn)
+                
+                # Draw Designation (Bold, centered slightly higher)
+                self.canvas.create_text(cx, cy - 12, text=node.id, font=self.font_bold, fill="#212529", anchor="center")
+                # Draw Description (Regular, centered slightly lower)
+                self.canvas.create_text(cx, cy + 10, text=desc_wrapped, font=self.font_reg, fill="#495057", anchor="center")
+            else:
+                # Designation only (Perfect center)
+                self.canvas.create_text(cx, cy, text=node.id, font=self.font_bold, fill="#212529", anchor="center")
+
+# ==========================================
+# Main App Controller GUI
+# ==========================================
+
+class FlowchartApp(tk.Tk):
+    def __init__(self):
+        super().__init__()
+        self.title("B&W Flowchart Sketcher")
+        self.geometry("1150x720")
+        self.configure(bg="#f8f9fa")
+        
+        # Initialize model
+        self.model = FlowchartModel()
+        
+        # Styles config
+        self.style = ttk.Style()
+        self.style.theme_use("clam")
+        
+        # Set primary palette (Clean Slate)
+        self.style.configure(".", background="#f8f9fa", foreground="#212529", font=("Segoe UI", 9))
+        self.style.configure("TLabel", foreground="#343a40", font=("Segoe UI", 9, "bold"))
+        self.style.configure("TButton", background="#e9ecef", foreground="#212529", font=("Segoe UI", 9, "bold"), borderwidth=1)
+        self.style.map("TButton", 
+                       background=[("active", "#dfe2e6"), ("pressed", "#ced4da")],
+                       foreground=[("active", "#212529")])
+        self.style.configure("Primary.TButton", background="#212529", foreground="#ffffff", borderwidth=0)
+        self.style.map("Primary.TButton", 
+                       background=[("active", "#343a40"), ("pressed", "#495057")],
+                       foreground=[("active", "#ffffff")])
+        
+        # Create Layout
+        self.setup_ui()
+        
+        # Load sample flowchart
+        self.load_samples()
+        
+    def setup_ui(self):
+        # Master grid setup
+        self.rowconfigure(0, weight=1)
+        self.columnconfigure(1, weight=1)
+        
+        # 1. Left Sidebar Panel (Inputs and lists)
+        self.sidebar = tk.Frame(self, bg="#ffffff", bd=1, relief=tk.SOLID, width=330)
+        self.sidebar.grid(row=0, column=0, sticky="nsw", padx=10, pady=10)
+        self.sidebar.pack_propagate(False)
+        
+        # Scrollable Sidebar Frame to handle smaller resolutions
+        canvas_sidebar = tk.Canvas(self.sidebar, bg="#ffffff", borderwidth=0, highlightthickness=0)
+        scrollbar_sidebar = ttk.Scrollbar(self.sidebar, orient=tk.VERTICAL, command=canvas_sidebar.yview)
+        self.sidebar_content = tk.Frame(canvas_sidebar, bg="#ffffff")
+        
+        canvas_sidebar.create_window((0, 0), window=self.sidebar_content, anchor="nw")
+        canvas_sidebar.configure(yscrollcommand=scrollbar_sidebar.set)
+        
+        scrollbar_sidebar.pack(side=tk.RIGHT, fill=tk.Y)
+        canvas_sidebar.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)
+        
+        # Bind scrolling size
+        self.sidebar_content.bind("<Configure>", lambda e: canvas_sidebar.configure(scrollregion=canvas_sidebar.bbox("all")))
+        
+        # Padding inside content
+        padx_c, pady_c = 15, 6
+        
+        # --- Node Editor Section ---
+        lbl_nodes_title = tk.Label(self.sidebar_content, text="NODE MANAGER", font=("Segoe UI", 11, "bold"), bg="#ffffff", fg="#212529")
+        lbl_nodes_title.pack(anchor="w", padx=padx_c, pady=(15, 5))
+        
+        # Node Designation (ID)
+        lbl_node_id = ttk.Label(self.sidebar_content, text="Designation / Label (Short ID):", background="#ffffff")
+        lbl_node_id.pack(anchor="w", padx=padx_c, pady=pady_c)
+        self.entry_node_id = ttk.Entry(self.sidebar_content, width=28)
+        self.entry_node_id.pack(anchor="w", padx=padx_c)
+        
+        # Node Shape
+        lbl_shape = ttk.Label(self.sidebar_content, text="Icon Shape:", background="#ffffff")
+        lbl_shape.pack(anchor="w", padx=padx_c, pady=pady_c)
+        self.combo_shape = ttk.Combobox(self.sidebar_content, values=["Square", "Circle", "Oval", "Diamond", "Inverted Triangle"], state="readonly", width=26)
+        self.combo_shape.set("Square")
+        self.combo_shape.pack(anchor="w", padx=padx_c)
+        
+        # Node Description
+        lbl_desc = ttk.Label(self.sidebar_content, text="Description (Inside Shape):", background="#ffffff")
+        lbl_desc.pack(anchor="w", padx=padx_c, pady=pady_c)
+        self.entry_desc = ttk.Entry(self.sidebar_content, width=28)
+        self.entry_desc.pack(anchor="w", padx=padx_c)
+        
+        # Node Action Buttons
+        btn_frame_node = tk.Frame(self.sidebar_content, bg="#ffffff")
+        btn_frame_node.pack(anchor="w", padx=padx_c, pady=(10, 10))
+        
+        self.btn_add_node = ttk.Button(btn_frame_node, text="Add/Save Node", style="Primary.TButton", command=self.add_or_update_node)
+        self.btn_add_node.grid(row=0, column=0, padx=(0, 5))
+        
+        self.btn_delete_node = ttk.Button(btn_frame_node, text="Delete Node", command=self.delete_node)
+        self.btn_delete_node.grid(row=0, column=1)
+        
+        # Divider Line
+        ttk.Separator(self.sidebar_content, orient=tk.HORIZONTAL).pack(fill=tk.X, padx=padx_c, pady=10)
+        
+        # --- Edge Editor Section ---
+        lbl_edges_title = tk.Label(self.sidebar_content, text="EDGE MANAGER", font=("Segoe UI", 11, "bold"), bg="#ffffff", fg="#212529")
+        lbl_edges_title.pack(anchor="w", padx=padx_c, pady=(5, 5))
+        
+        # Edge sequence description
+        lbl_edge_path = ttk.Label(self.sidebar_content, text="Path (e.g. A -> B -> C):", background="#ffffff")
+        lbl_edge_path.pack(anchor="w", padx=padx_c, pady=pady_c)
+        self.entry_edge_path = ttk.Entry(self.sidebar_content, width=28)
+        self.entry_edge_path.pack(anchor="w", padx=padx_c)
+        
+        # Edge style
+        lbl_edge_style = ttk.Label(self.sidebar_content, text="Connector Line Style:", background="#ffffff")
+        lbl_edge_style.pack(anchor="w", padx=padx_c, pady=pady_c)
+        self.combo_edge_style = ttk.Combobox(self.sidebar_content, values=["Straight", "Curved", "Dotted"], state="readonly", width=26)
+        self.combo_edge_style.set("Straight")
+        self.combo_edge_style.pack(anchor="w", padx=padx_c)
+        
+        # Edge Action Buttons
+        btn_frame_edge = tk.Frame(self.sidebar_content, bg="#ffffff")
+        btn_frame_edge.pack(anchor="w", padx=padx_c, pady=(10, 10))
+        
+        btn_add_edge = ttk.Button(btn_frame_edge, text="Add Edges", style="Primary.TButton", command=self.add_edges)
+        btn_add_edge.grid(row=0, column=0, padx=(0, 5))
+        
+        # Divider Line
+        ttk.Separator(self.sidebar_content, orient=tk.HORIZONTAL).pack(fill=tk.X, padx=padx_c, pady=10)
+        
+        # --- List Review & Clear ---
+        lbl_list_title = tk.Label(self.sidebar_content, text="EDGE LIST", font=("Segoe UI", 10, "bold"), bg="#ffffff", fg="#495057")
+        lbl_list_title.pack(anchor="w", padx=padx_c, pady=(5, 2))
+        
+        # Listbox for edges
+        self.edge_listbox = tk.Listbox(self.sidebar_content, width=30, height=5, font=("Segoe UI", 9), relief=tk.SOLID, borderwidth=1)
+        self.edge_listbox.pack(anchor="w", padx=padx_c, pady=pady_c)
+        
+        btn_delete_edge = ttk.Button(self.sidebar_content, text="Delete Selected Edge", command=self.delete_edge)
+        btn_delete_edge.pack(anchor="w", padx=padx_c, pady=(2, 10))
+        
+        # --- Project Operations ---
+        ttk.Separator(self.sidebar_content, orient=tk.HORIZONTAL).pack(fill=tk.X, padx=padx_c, pady=10)
+        
+        lbl_ops_title = tk.Label(self.sidebar_content, text="ACTIONS", font=("Segoe UI", 11, "bold"), bg="#ffffff", fg="#212529")
+        lbl_ops_title.pack(anchor="w", padx=padx_c, pady=(5, 5))
+        
+        # Grid layout for bottom action buttons
+        actions_frame = tk.Frame(self.sidebar_content, bg="#ffffff")
+        actions_frame.pack(anchor="w", padx=padx_c, pady=(5, 20))
+        
+        btn_auto_layout = ttk.Button(actions_frame, text="Auto-Layout", command=self.run_auto_layout)
+        btn_auto_layout.grid(row=0, column=0, padx=2, pady=2, sticky="ew")
+        
+        btn_clear = ttk.Button(actions_frame, text="Clear All", command=self.clear_all)
+        btn_clear.grid(row=0, column=1, padx=2, pady=2, sticky="ew")
+        
+        btn_save = ttk.Button(actions_frame, text="Save Project", command=self.save_project)
+        btn_save.grid(row=1, column=0, padx=2, pady=2, sticky="ew")
+        
+        btn_load = ttk.Button(actions_frame, text="Load Project", command=self.load_project)
+        btn_load.grid(row=1, column=1, padx=2, pady=2, sticky="ew")
+        
+        btn_export = ttk.Button(actions_frame, text="Export PNG", style="Primary.TButton", command=self.export_png)
+        btn_export.grid(row=2, column=0, columnspan=2, padx=2, pady=5, sticky="ew")
+        
+        # 2. Right Canvas Panel
+        self.canvas_panel = tk.Frame(self, bg="#ffffff", bd=1, relief=tk.SOLID)
+        self.canvas_panel.grid(row=0, column=1, sticky="nsew", padx=(0, 10), pady=10)
+        self.canvas_panel.rowconfigure(0, weight=1)
+        self.canvas_panel.columnconfigure(0, weight=1)
+        
+        # Create Flowchart Canvas widget
+        self.f_canvas = FlowchartCanvas(self.canvas_panel, self.model, select_callback=self.on_canvas_select)
+        
+    def on_canvas_select(self, node_id):
+        """Callback when a node is clicked on the canvas."""
+        if node_id:
+            node = self.model.nodes.get(node_id)
+            if node:
+                # Load fields
+                self.entry_node_id.delete(0, tk.END)
+                self.entry_node_id.insert(0, node.id)
+                self.combo_shape.set(node.shape.title())
+                self.entry_desc.delete(0, tk.END)
+                self.entry_desc.insert(0, node.description)
+                self.btn_add_node.config(text="Save Node")
+        else:
+            # Clear fields
+            self.entry_node_id.delete(0, tk.END)
+            self.combo_shape.set("Square")
+            self.entry_desc.delete(0, tk.END)
+            self.btn_add_node.config(text="Add Node")
+
+    def add_or_update_node(self):
+        node_id = self.entry_node_id.get().strip()
+        shape = self.combo_shape.get().strip()
+        desc = self.entry_desc.get().strip()
+        
+        if not node_id:
+            messagebox.showwarning("Input Error", "Node Designation (ID) is required.")
+            return
+            
+        is_update = node_id in self.model.nodes
+        
+        if is_update:
+            # Update existing node attributes
+            node = self.model.nodes[node_id]
+            node.shape = shape.lower()
+            node.description = desc
+            node.w, node.h = node.default_sizes()  # update size if shape changed
+        else:
+            # Create a new node in center of current screen
+            # Calculate approx canvas center coordinates
+            cx = self.f_canvas.canvas.canvasx(self.f_canvas.canvas.winfo_width() / 2)
+            cy = self.f_canvas.canvas.canvasy(self.f_canvas.canvas.winfo_height() / 2)
+            
+            # Avoid placing directly on top of each other
+            if not cx or cx < 100: cx = 200
+            if not cy or cy < 100: cy = 200
+            
+            success, node = self.model.add_node(node_id, shape, desc, x=cx, y=cy)
+            if not success:
+                messagebox.showerror("Error", node)
+                return
+                
+        self.f_canvas.redraw()
+        self.f_canvas.update_scroll_region()
+        self.refresh_edge_listbox()
+        
+        # Reset input form
+        self.on_canvas_select(None)
+        
+    def delete_node(self):
+        node_id = self.entry_node_id.get().strip()
+        if not node_id:
+            messagebox.showwarning("Select Node", "Select or type a node designation to delete.")
+            return
+            
+        if node_id in self.model.nodes:
+            confirm = messagebox.askyesno("Delete Node", f"Are you sure you want to delete node '{node_id}' and all connecting edges?")
+            if confirm:
+                self.model.delete_node(node_id)
+                self.f_canvas.selected_node_id = None
+                self.f_canvas.redraw()
+                self.f_canvas.update_scroll_region()
+                self.refresh_edge_listbox()
+                self.on_canvas_select(None)
+        else:
+            messagebox.showerror("Not Found", f"Node '{node_id}' does not exist.")
+
+    def add_edges(self):
+        path = self.entry_edge_path.get().strip()
+        style = self.combo_edge_style.get().lower()
+        
+        if not path:
+            messagebox.showwarning("Input Error", "Please specify an edge path (e.g. A -> B).")
+            return
+            
+        success, msg = self.model.add_edge_path(path, style)
+        if success:
+            self.entry_edge_path.delete(0, tk.END)
+            self.f_canvas.redraw()
+            self.refresh_edge_listbox()
+        else:
+            messagebox.showerror("Error", msg)
+
+    def delete_edge(self):
+        selected_idx = self.edge_listbox.curselection()
+        if not selected_idx:
+            messagebox.showwarning("Select Edge", "Select an edge from the Edge List to delete.")
+            return
+            
+        idx = selected_idx[0]
+        if self.model.remove_edge(idx):
+            self.f_canvas.redraw()
+            self.refresh_edge_listbox()
+
+    def refresh_edge_listbox(self):
+        self.edge_listbox.delete(0, tk.END)
+        for i, edge in enumerate(self.model.edges):
+            self.edge_listbox.insert(tk.END, f"{edge.u} -> {edge.v} ({edge.style.title()})")
+
+    def run_auto_layout(self):
+        if not self.model.nodes:
+            return
+        self.model.auto_layout()
+        self.f_canvas.redraw()
+        self.f_canvas.update_scroll_region()
+
+    def clear_all(self):
+        if messagebox.askyesno("Clear All", "Delete all nodes and edges from the workspace?"):
+            self.model.clear()
+            self.f_canvas.selected_node_id = None
+            self.f_canvas.redraw()
+            self.f_canvas.update_scroll_region()
+            self.refresh_edge_listbox()
+            self.on_canvas_select(None)
+
+    def save_project(self):
+        filename = filedialog.asksaveasfilename(
+            defaultextension=".json",
+            filetypes=[("JSON files", "*.json"), ("All Files", "*.*")],
+            title="Save Flowchart Project"
+        )
+        if filename:
+            try:
+                self.model.save_to_file(filename)
+                messagebox.showinfo("Saved", "Project saved successfully.")
+            except Exception as e:
+                messagebox.showerror("Error", f"Could not save project: {e}")
+
+    def load_project(self):
+        filename = filedialog.askopenfilename(
+            filetypes=[("JSON files", "*.json"), ("All Files", "*.*")],
+            title="Load Flowchart Project"
+        )
+        if filename:
+            try:
+                self.model.load_from_file(filename)
+                self.f_canvas.selected_node_id = None
+                self.f_canvas.redraw()
+                self.f_canvas.update_scroll_region()
+                self.refresh_edge_listbox()
+                self.on_canvas_select(None)
+                messagebox.showinfo("Loaded", "Project loaded successfully.")
+            except Exception as e:
+                messagebox.showerror("Error", f"Could not load project: {e}")
+
+    def load_samples(self):
+        # Create a beautiful sample flowchart to show on startup
+        self.model.add_node("Start", "Circle", "Start", 400.0, 80.0)
+        self.model.add_node("Step 1", "Square", "Process Inputs", 400.0, 200.0)
+        self.model.add_node("Check", "Diamond", "Valid?", 400.0, 330.0)
+        self.model.add_node("Error", "Inverted Triangle", "Log Error", 220.0, 330.0)
+        self.model.add_node("End", "Oval", "Success Finish", 400.0, 460.0)
+        
+        self.model.add_edge_path("Start -> Step 1", "straight")
+        self.model.add_edge_path("Step 1 -> Check", "straight")
+        self.model.add_edge_path("Check -> Error", "straight")
+        self.model.add_edge_path("Check -> End", "straight")
+        self.model.add_edge_path("Error -> Start", "curved")  # curve looping back
+        
+        self.f_canvas.redraw()
+        self.f_canvas.update_scroll_region()
+        self.refresh_edge_listbox()
+
+    # ==========================================
+    # PIL Render & Export PNG
+    # ==========================================
+
+    def export_png(self):
+        if not self.model.nodes:
+            messagebox.showwarning("Empty Project", "No nodes to export.")
+            return
+            
+        filename = filedialog.asksaveasfilename(
+            defaultextension=".png",
+            filetypes=[("PNG files", "*.png"), ("All Files", "*.*")],
+            title="Export Flowchart to Image"
+        )
+        if not filename:
+            return
+            
+        try:
+            # 1. Determine bounding box with padding
+            xs = [n.x for n in self.model.nodes.values()]
+            ys = [n.y for n in self.model.nodes.values()]
+            
+            # Find bounds using outer coordinates
+            min_x = min(n.x - n.w/2 for n in self.model.nodes.values())
+            max_x = max(n.x + n.w/2 for n in self.model.nodes.values())
+            min_y = min(n.y - n.h/2 for n in self.model.nodes.values())
+            max_y = max(n.y + n.h/2 for n in self.model.nodes.values())
+            
+            margin = 50.0
+            crop_x1 = min_x - margin
+            crop_y1 = min_y - margin
+            crop_x2 = max_x + margin
+            crop_y2 = max_y + margin
+            
+            img_w = int(crop_x2 - crop_x1)
+            img_h = int(crop_y2 - crop_y1)
+            
+            # Create white Pillow canvas
+            img = Image.new("RGB", (img_w, img_h), "white")
+            draw = ImageDraw.Draw(img)
+            
+            # Helper to map global coordinates to cropped coordinates
+            def get_pt(cx, cy):
+                return int(cx - crop_x1), int(cy - crop_y1)
+                
+            # Load clean fonts
+            font_bold = get_pil_font("segoeui", 10, bold=True)
+            font_reg = get_pil_font("segoeui", 9, bold=False)
+            
+            # Define measurement helper for PIL wrapping
+            if hasattr(draw, 'textlength'):
+                measure_fn = lambda txt: draw.textlength(txt, font=font_reg)
+            else:
+                measure_fn = lambda txt: font_reg.getsize(txt)[0]
+                
+            # Helper to draw PIL custom arrow
+            def draw_pil_arrowhead(p_end, p_from):
+                xe, ye = get_pt(p_end[0], p_end[1])
+                xf, yf = get_pt(p_from[0], p_from[1])
+                dx = xe - xf
+                dy = ye - yf
+                dist = math.hypot(dx, dy)
+                if dist == 0:
+                    return
+                ux = dx / dist
+                uy = dy / dist
+                
+                arrow_l = 12
+                arrow_w = 8
+                bx = xe - ux * arrow_l
+                by = ye - uy * arrow_l
+                px = -uy * (arrow_w / 2)
+                py = ux * (arrow_w / 2)
+                
+                pts = [(xe, ye), (bx + px, by + py), (bx - px, by - py)]
+                draw.polygon(pts, fill="black", outline="black")
+                
+            # Helper to draw centered multiline text in PIL
+            def draw_centered_text_pil(xy, text, font, fill="black"):
+                lines = text.split("\n")
+                # Get a constant line height for the font using a representative string
+                try:
+                    bbox = font.getbbox("Abgqp")
+                    line_h = bbox[3] - bbox[1]
+                except:
+                    line_h = font.getsize("Abgqp")[1]
+                    
+                line_widths = []
+                for line in lines:
+                    if hasattr(draw, 'textlength'):
+                        w = draw.textlength(line, font=font)
+                    else:
+                        w = font.getsize(line)[0]
+                    line_widths.append(w)
+                    
+                total_height = line_h * len(lines) + 4 * (len(lines) - 1)
+                curr_y = xy[1] - total_height / 2
+                
+                for i, line in enumerate(lines):
+                    w = line_widths[i]
+                    draw.text((xy[0] - w/2, curr_y), line, font=font, fill=fill)
+                    curr_y += line_h + 4
+
+            # 2. Draw Edges first (so they render behind nodes)
+            for edge in self.model.edges:
+                u_node = self.model.nodes.get(edge.u)
+                v_node = self.model.nodes.get(edge.v)
+                if not u_node or not v_node:
+                    continue
+                    
+                # Curved Line
+                if edge.style == "curved":
+                    dx = v_node.x - u_node.x
+                    dy = v_node.y - u_node.y
+                    dist = math.hypot(dx, dy)
+                    mx = (u_node.x + v_node.x) / 2
+                    my = (u_node.y + v_node.y) / 2
+                    
+                    if dist > 0:
+                        nx = -dy / dist
+                        ny = dx / dist
+                        p_ctrl = (mx + nx * 45, my + ny * 45)
+                    else:
+                        p_ctrl = (mx, my + 45)
+                        
+                    p_start = get_boundary_intersection(u_node, p_ctrl)
+                    p_end = get_boundary_intersection(v_node, p_ctrl)
+                    
+                    bezier_pts = get_quadratic_bezier_points(p_start, p_ctrl, p_end, 30)
+                    mapped_pts = [get_pt(px, py) for px, py in bezier_pts]
+                    
+                    if edge.style == "dotted":
+                        draw_dashed_line_pil(draw, mapped_pts, fill="black", width=2, dash_len=4, gap_len=4)
+                    else:
+                        draw.line(mapped_pts, fill="black", width=2)
+                        
+                    draw_pil_arrowhead(p_end, p_ctrl)
+                
+                # Straight or Dotted Line
+                else:
+                    p_start = get_boundary_intersection(u_node, (v_node.x, v_node.y))
+                    p_end = get_boundary_intersection(v_node, (u_node.x, u_node.y))
+                    
+                    p_start_m = get_pt(p_start[0], p_start[1])
+                    p_end_m = get_pt(p_end[0], p_end[1])
+                    
+                    if edge.style == "dotted":
+                        # interpolate a few points to draw dashed line
+                        steps = int(math.hypot(p_end_m[0] - p_start_m[0], p_end_m[1] - p_start_m[1]) / 6)
+                        if steps < 2: steps = 2
+                        pts = []
+                        for s in range(steps + 1):
+                            t = s / steps
+                            pts.append((p_start_m[0] + t * (p_end_m[0] - p_start_m[0]), p_start_m[1] + t * (p_end_m[1] - p_start_m[1])))
+                        draw_dashed_line_pil(draw, pts, fill="black", width=2, dash_len=4, gap_len=4)
+                    else:
+                        draw.line([p_start_m, p_end_m], fill="black", width=2)
+                        
+                    draw_pil_arrowhead(p_end, p_start)
+                    
+            # 3. Draw Nodes
+            for node in self.model.nodes.values():
+                cx, cy, w, h = node.x, node.y, node.w, node.h
+                
+                # Bounding coordinates in PIL layout
+                px, py = get_pt(cx, cy)
+                
+                # --- Drop Shadow ---
+                sh = 4
+                shadow_color = (233, 236, 239)  # #e9ecef
+                
+                if node.shape in ("circle", "oval"):
+                    draw.ellipse([px - w/2 + sh, py - h/2 + sh, px + w/2 + sh, py + h/2 + sh], fill=shadow_color, outline=None)
+                elif node.shape == "square":
+                    draw.rectangle([px - w/2 + sh, py - h/2 + sh, px + w/2 + sh, py + h/2 + sh], fill=shadow_color, outline=None)
+                else:
+                    sh_vertices = [(vx - crop_x1 + sh, vy - crop_y1 + sh) for vx, vy in node.get_vertices()]
+                    draw.polygon(sh_vertices, fill=shadow_color, outline=None)
+                    
+                # --- Main Shape ---
+                if node.shape in ("circle", "oval"):
+                    draw.ellipse([px - w/2, py - h/2, px + w/2, py + h/2], fill="white", outline="black", width=2)
+                elif node.shape == "square":
+                    draw.rectangle([px - w/2, py - h/2, px + w/2, py + h/2], fill="white", outline="black", width=2)
+                else:
+                    sh_vertices = [(vx - crop_x1, vy - crop_y1) for vx, vy in node.get_vertices()]
+                    # Draw filled shape
+                    draw.polygon(sh_vertices, fill="white")
+                    # Draw thick border (polygon outlines don't support custom width in older Pillow)
+                    draw.line(sh_vertices + [sh_vertices[0]], fill="black", width=2, joint="curve")
+                    
+                # --- Text Content ---
+                max_w = node.get_max_text_width()
+                
+                if node.description:
+                    desc_wrapped = wrap_text_by_width(node.description, max_w, measure_fn)
+                    
+                    # Designation (Bold, centered slightly higher)
+                    draw_centered_text_pil((px, py - 12), node.id, font_bold, fill="black")
+                    # Description (Regular, centered slightly lower)
+                    draw_centered_text_pil((px, py + 10), desc_wrapped, font_reg, fill=(73, 80, 87))
+                else:
+                    # Designation only
+                    draw_centered_text_pil((px, py), node.id, font_bold, fill="black")
+                    
+            # Save PIL Image
+            img.save(filename, "PNG")
+            messagebox.showinfo("Export Success", f"Flowchart exported successfully to:\n{filename}")
+            
+        except Exception as e:
+            messagebox.showerror("Export Failed", f"Could not export flowchart: {e}")
+
+def draw_dashed_line_pil(draw, points, fill="black", width=2, dash_len=6, gap_len=6):
+    """Walks along a list of connected points and draws dashes in PIL."""
+    if len(points) < 2:
+        return
+        
+    current_dash_left = dash_len
+    current_gap_left = 0
+    drawing = True
+    
+    for i in range(len(points) - 1):
+        p1 = points[i]
+        p2 = points[i+1]
+        
+        seg_dx = p2[0] - p1[0]
+        seg_dy = p2[1] - p1[1]
+        seg_len = math.hypot(seg_dx, seg_dy)
+        if seg_len == 0:
+            continue
+            
+        vx = seg_dx / seg_len
+        vy = seg_dy / seg_len
+        
+        dist_moved = 0
+        curr_pt = p1
+        
+        while dist_moved < seg_len:
+            if drawing:
+                step = min(seg_len - dist_moved, current_dash_left)
+                next_pt = (curr_pt[0] + vx * step, curr_pt[1] + vy * step)
+                draw.line([curr_pt, next_pt], fill=fill, width=width)
+                dist_moved += step
+                current_dash_left -= step
+                curr_pt = next_pt
+                if current_dash_left <= 0:
+                    drawing = False
+                    current_gap_left = gap_len
+            else:
+                step = min(seg_len - dist_moved, current_gap_left)
+                next_pt = (curr_pt[0] + vx * step, curr_pt[1] + vy * step)
+                dist_moved += step
+                current_gap_left -= step
+                curr_pt = next_pt
+                if current_gap_left <= 0:
+                    drawing = True
+                    current_dash_left = dash_len
+
+
+if __name__ == "__main__":
+    app = FlowchartApp()
+    app.mainloop()

requirements.txt

@@ -0,0 +1,2 @@
+Pillow
+streamlit