Document diagram editor, file tree context menu, and skill send GUI

Author: JE-Chen

README.md

@@ -69,6 +69,14 @@ PyBreeze is not just a code editor — it is a command center for the automation
   - Password and private key authentication
   - Interactive command execution
   - Remote file tree viewer with CRUD operations (create folder, rename, delete, upload, download)
+  - Interactive TOFU host-key verification with confirmed keys persisted to `~/.pybreeze/ssh_known_hosts`
+- **Diagram Editor** — Built-in WYSIWYG architecture-diagram editor:
+  - Rectangle, rounded rectangle, ellipse, diamond nodes, connection lines, and free text
+  - Image insertion from local files or URLs (URL fetches are SSRF-validated and size-capped)
+  - Mermaid `flowchart` / `graph` import
+  - Save/Open as `.diagram.json`, export to PNG or SVG
+  - Undo/redo, align, distribute, grid, snap, and zoom controls
+- **File Tree Context Menu** — Right-click any file or folder in the project tree to create files/folders, rename, delete, copy absolute or relative paths, or reveal the item in your platform file manager. Renaming or deleting a file that is currently open in an editor tab keeps the tab in sync.
 - **Package Manager** — Install automation modules and build tools directly from the IDE menu without leaving the editor.
 - **Integrated Documentation** — Quick access to documentation and GitHub pages for each automation module directly from the menu bar.
 
@@ -82,6 +90,7 @@ PyBreeze is not just a code editor — it is a command center for the automation
   - Step-by-step analysis
   - Summary generation
 - **Skill Prompt Editor** — Define and manage reusable skill-based prompts (code explanation, code review templates) that can be sent to LLM APIs.
+- **Skill Send GUI** — Pick a skill prompt template, optionally edit the prompt text, send it to an LLM API endpoint, and view the response — all in a dedicated tab or dock.
 
 ### Plugin System
 
@@ -148,7 +157,9 @@ flowchart TB
         T2["AI Code Review"]
         T3["CoT Prompt Editor"]
         T4["Skill Prompt Editor"]
-        T5["JupyterLab"]
+        T5["Skill Send GUI"]
+        T6["Diagram Editor"]
+        T7["JupyterLab"]
     end
 
     subgraph Install["Install Menu"]
@@ -193,6 +204,8 @@ PyBreeze UI (PySide6)
 │   ├── AI Code Review Client
 │   ├── CoT Prompt Editor
 │   ├── Skill Prompt Editor
+│   ├── Skill Send GUI
+│   ├── Diagram Editor (WYSIWYG, Mermaid import, PNG/SVG export)
 │   └── JupyterLab Integration
 └── Install Menu
     ├── Automation Module Installers
@@ -334,8 +347,9 @@ PyBreeze/
 │   │   └── process_executor/python_task_process_manager.py
 │   ├── extend_multi_language/      # Built-in translations (English, Traditional Chinese)
 │   ├── pybreeze_ui/
-│   │   ├── editor_main/            # Main window (extends JEditor)
-│   │   ├── connect_gui/ssh/        # SSH client widgets
+│   │   ├── editor_main/            # Main window (extends JEditor) + file tree context menu
+│   │   ├── connect_gui/ssh/        # SSH client widgets (TOFU host-key verification)
+│   │   ├── diagram_editor/         # WYSIWYG architecture-diagram editor
 │   │   ├── extend_ai_gui/          # AI code review & prompt editors
 │   │   ├── jupyter_lab_gui/        # JupyterLab integration
 │   │   ├── menu/                   # Menu bar construction

README/README_zh-CN.md

@@ -68,6 +68,14 @@ PyBreeze 不仅仅是一个代码编辑器——它是自动化生命周期的
   - 密码与私钥认证
   - 交互式命令执行
   - 远程文件树查看器，支持 CRUD 操作（创建文件夹、重命名、删除、上传、下载）
+  - 交互式 TOFU host key 验证，已确认的密钥会持久化到 `~/.pybreeze/ssh_known_hosts`
+- **架构图编辑器** — 内置的 WYSIWYG 架构图编辑器：
+  - 矩形、圆角矩形、椭圆、菱形节点、连线、自由文本
+  - 从本地文件或 URL 插入图片（URL 下载会做 SSRF 验证并有大小上限）
+  - 支持 Mermaid `flowchart` / `graph` 导入
+  - 保存/打开为 `.diagram.json`，导出为 PNG 或 SVG
+  - Undo/redo、对齐、分布、Grid、Snap、Zoom 控制
+- **文件树右键菜单** — 在项目文件树中对任何文件或文件夹右键，可创建文件/文件夹、重命名、删除、复制绝对或相对路径、在系统文件管理器中打开。重命名或删除当前已在编辑器标签页中打开的文件时，标签页会同步更新。
 - **包管理器** — 直接从 IDE 菜单安装自动化模块和构建工具，无需离开编辑器。
 - **集成文档** — 从菜单栏快速访问每个自动化模块的文档和 GitHub 页面。
 
@@ -81,6 +89,7 @@ PyBreeze 不仅仅是一个代码编辑器——它是自动化生命周期的
   - 逐步分析
   - 摘要生成
 - **Skill 提示词编辑器** — 定义和管理可重复使用的技能型提示词（代码解说、代码审查模板），可发送至 LLM API。
+- **Skill Send GUI** — 在独立的标签页或停靠面板中选择技能提示词模板、按需编辑提示词内容、发送到 LLM API 端点并查看响应。
 
 ### 插件系统
 
@@ -147,7 +156,9 @@ flowchart TB
         T2["AI 代码审查"]
         T3["CoT 提示词编辑器"]
         T4["Skill 提示词编辑器"]
-        T5["JupyterLab"]
+        T5["Skill Send GUI"]
+        T6["架构图编辑器"]
+        T7["JupyterLab"]
     end
 
     subgraph Install["安装菜单"]
@@ -192,6 +203,8 @@ PyBreeze UI (PySide6)
 │   ├── AI 代码审查客户端
 │   ├── CoT 提示词编辑器
 │   ├── Skill 提示词编辑器
+│   ├── Skill Send GUI
+│   ├── 架构图编辑器（WYSIWYG、Mermaid 导入、PNG/SVG 导出）
 │   └── JupyterLab 集成
 └── 安装菜单
     ├── 自动化模块安装器
@@ -333,8 +346,9 @@ PyBreeze/
 │   │   └── process_executor/python_task_process_manager.py
 │   ├── extend_multi_language/      # 内置翻译（英语、繁体中文）
 │   ├── pybreeze_ui/
-│   │   ├── editor_main/            # 主窗口（扩展 JEditor）
-│   │   ├── connect_gui/ssh/        # SSH 客户端组件
+│   │   ├── editor_main/            # 主窗口（扩展 JEditor）+ 文件树右键菜单
+│   │   ├── connect_gui/ssh/        # SSH 客户端组件（TOFU host key 验证）
+│   │   ├── diagram_editor/         # WYSIWYG 架构图编辑器
 │   │   ├── extend_ai_gui/          # AI 代码审查与提示词编辑器
 │   │   ├── jupyter_lab_gui/        # JupyterLab 集成
 │   │   ├── menu/                   # 菜单栏构建

README/README_zh-TW.md

@@ -68,6 +68,14 @@ PyBreeze 不僅僅是一個程式碼編輯器——它是自動化生命週期
   - 密碼與私鑰驗證
   - 互動式指令執行
   - 遠端檔案樹檢視器，支援 CRUD 操作（建立資料夾、重新命名、刪除、上傳、下載）
+  - 互動式 TOFU host key 驗證，已確認的金鑰會持久化到 `~/.pybreeze/ssh_known_hosts`
+- **架構圖編輯器** — 內建的 WYSIWYG 架構圖編輯器：
+  - 矩形、圓角矩形、橢圓、菱形節點、連線、自由文字
+  - 從本地檔案或 URL 插入圖片（URL 下載會做 SSRF 驗證並有大小上限）
+  - 支援 Mermaid `flowchart` / `graph` 匯入
+  - 儲存/開啟為 `.diagram.json`，匯出為 PNG 或 SVG
+  - Undo/redo、對齊、分佈、Grid、Snap、Zoom 控制
+- **檔案樹右鍵選單** — 在專案檔案樹中對任何檔案或資料夾按右鍵，可建立檔案/資料夾、重新命名、刪除、複製絕對或相對路徑、在系統檔案管理器中開啟。重新命名或刪除目前已開在編輯器分頁中的檔案時，分頁會同步更新。
 - **套件管理器** — 直接從 IDE 選單安裝自動化模組和建構工具，無需離開編輯器。
 - **整合文件** — 從選單列快速存取每個自動化模組的文件和 GitHub 頁面。
 
@@ -81,6 +89,7 @@ PyBreeze 不僅僅是一個程式碼編輯器——它是自動化生命週期
   - 逐步分析
   - 摘要生成
 - **Skill 提示詞編輯器** — 定義和管理可重複使用的技能型提示詞（程式碼解說、程式碼審查範本），可傳送至 LLM API。
+- **Skill Send GUI** — 在獨立的分頁或停靠面板中選擇技能提示詞範本、視需要編輯提示詞內容、傳送到 LLM API 端點並檢視回應。
 
 ### 插件系統
 
@@ -147,7 +156,9 @@ flowchart TB
         T2["AI 程式碼審查"]
         T3["CoT 提示詞編輯器"]
         T4["Skill 提示詞編輯器"]
-        T5["JupyterLab"]
+        T5["Skill Send GUI"]
+        T6["架構圖編輯器"]
+        T7["JupyterLab"]
     end
 
     subgraph Install["安裝選單"]
@@ -192,6 +203,8 @@ PyBreeze UI (PySide6)
 │   ├── AI 程式碼審查用戶端
 │   ├── CoT 提示詞編輯器
 │   ├── Skill 提示詞編輯器
+│   ├── Skill Send GUI
+│   ├── 架構圖編輯器（WYSIWYG、Mermaid 匯入、PNG/SVG 匯出）
 │   └── JupyterLab 整合
 └── 安裝選單
     ├── 自動化模組安裝器
@@ -333,8 +346,9 @@ PyBreeze/
 │   │   └── process_executor/python_task_process_manager.py
 │   ├── extend_multi_language/      # 內建翻譯（英文、繁體中文）
 │   ├── pybreeze_ui/
-│   │   ├── editor_main/            # 主視窗（擴展 JEditor）
-│   │   ├── connect_gui/ssh/        # SSH 用戶端元件
+│   │   ├── editor_main/            # 主視窗（擴展 JEditor）+ 檔案樹右鍵選單
+│   │   ├── connect_gui/ssh/        # SSH 用戶端元件（TOFU host key 驗證）
+│   │   ├── diagram_editor/         # WYSIWYG 架構圖編輯器
 │   │   ├── extend_ai_gui/          # AI 程式碼審查與提示詞編輯器
 │   │   ├── jupyter_lab_gui/        # JupyterLab 整合
 │   │   ├── menu/                   # 選單列建構

docs/source/Eng/menu_tools.rst

@@ -1,9 +1,10 @@
 Tools Menu
 ==========
 
-The **Tools** menu provides access to SSH client and AI-powered development tools.
-Each tool can be opened either as a **Tab** (in the main tab widget) or as a
-**Dock** (a floating/dockable panel).
+The **Tools** menu provides access to the SSH client, AI-powered development
+tools, and the built-in WYSIWYG architecture-diagram editor. Each tool can be
+opened either as a **Tab** (in the main tab widget) or as a **Dock** (a
+floating/dockable panel).
 
 SSH
 ---
@@ -46,6 +47,66 @@ Skill Send GUI Tab / Dock
 Opens the Skill Prompt Sender interface for sending prompts to an LLM API
 and viewing responses. See :doc:`ai_tools` for full details.
 
+Diagram Editor
+--------------
+
+Diagram Editor Tab / Dock
+^^^^^^^^^^^^^^^^^^^^^^^^^
+
+Opens the built-in WYSIWYG architecture-diagram editor. Use it to sketch
+flowcharts and architecture diagrams directly inside PyBreeze without
+switching to an external tool.
+
+Drawing tools
+"""""""""""""
+
+- **Select** -- pick, move, multi-select with rubber-band
+- **Rectangle / Rounded Rectangle / Ellipse / Diamond** -- node shapes
+- **Connection** -- connect two nodes with a labelled line
+- **Text** -- free-floating text annotation
+- **Image (file)** -- insert a local image file
+- **Image (URL)** -- download and insert an image from a URL (validated
+  against private/loopback IP ranges and capped at 20 MB to prevent SSRF)
+
+File operations
+"""""""""""""""
+
+.. list-table::
+   :header-rows: 1
+   :widths: 25 75
+
+   * - Action
+     - Description
+   * - **New**
+     - Discards the current diagram (with confirmation if non-empty).
+   * - **Open**
+     - Loads a previously saved ``.diagram.json`` file.
+   * - **Save** / **Save As** (``Ctrl+S`` / ``Ctrl+Shift+S``)
+     - Saves the diagram as ``.diagram.json``.
+   * - **Import Mermaid**
+     - Pastes Mermaid ``flowchart`` / ``graph`` source and converts it to
+       editable nodes and edges.
+   * - **Export PNG / SVG**
+     - Renders the canvas to a raster (PNG) or vector (SVG) image.
+
+Editing helpers
+"""""""""""""""
+
+- **Undo / Redo** (``Ctrl+Z`` / ``Ctrl+Y``) -- full undo stack with named
+  commands (Add, Move, Delete, Import, etc.)
+- **Copy / Paste / Duplicate / Select All** -- standard shortcuts plus
+  ``Ctrl+D`` to duplicate selected items
+- **Align** -- align selection by left, right, top, bottom, horizontal
+  centre, or vertical centre
+- **Distribute** -- distribute three or more selected items evenly
+  horizontally or vertically
+- **Grid** -- toggle background grid rendering
+- **Snap** -- snap node positions to grid while dragging
+- **Property Panel** (right side) -- edit text, colours, line width,
+  shape, and connection style of the selected item
+- **Zoom** -- zoom in/out (``Ctrl+=`` / ``Ctrl+-``), reset to 100%
+  (``Ctrl+0``), or fit-to-content
+
 Tab vs. Dock
 ------------
 

docs/source/Eng/ui_overview.rst

@@ -25,7 +25,7 @@ The menu bar includes these top-level menus (from left to right):
 - **UI Style** -- Theme switching
 - **Automation** -- All automation module menus (AutoControl, APITestka, WebRunner, etc.)
 - **Install** -- Install automation packages and build tools
-- **Tools** -- SSH client, AI tools
+- **Tools** -- SSH client, AI tools, diagram editor
 - **Plugins** -- Plugin browser and loaded plugins
 - **Run With** -- Run files with different compilers/interpreters
 
@@ -37,7 +37,38 @@ directory. You can:
 
 - Browse files and folders
 - Double-click to open files in the editor
-- Right-click for context menu options
+- Right-click any file or folder to access the context menu (see below)
+
+File Tree Context Menu
+""""""""""""""""""""""
+
+Right-clicking the file tree opens a context menu with the following actions:
+
+.. list-table::
+   :header-rows: 1
+   :widths: 25 75
+
+   * - Action
+     - Description
+   * - **New File**
+     - Prompts for a name and creates an empty file in the clicked directory
+       (or the directory containing the clicked file).
+   * - **New Folder**
+     - Prompts for a name and creates a new directory.
+   * - **Rename**
+     - Renames the selected file or folder. If the file is currently open in
+       an editor tab, the tab title and the editor's stored path are updated
+       to match.
+   * - **Delete**
+     - Deletes the selected file or folder after a confirmation dialog. If
+       the file is open in an editor tab, the tab is closed first.
+   * - **Copy Path**
+     - Copies the absolute path of the selected item to the clipboard.
+   * - **Copy Relative Path**
+     - Copies the path relative to the file tree's root directory.
+   * - **Reveal in Explorer**
+     - Opens the selected item's containing folder in the platform file
+       manager (Explorer on Windows, Finder on macOS, ``xdg-open`` on Linux).
 
 Code Editor (Tab Widget)
 ^^^^^^^^^^^^^^^^^^^^^^^^^
@@ -82,6 +113,7 @@ arrange them freely around the main window:
 - CoT Prompt Editor Dock
 - Skill Prompt Editor Dock
 - Skill Send GUI Dock
+- Diagram Editor Dock
 
 Dock widgets can be dragged, resized, and snapped to any edge of the main window.
 

docs/source/Zh/menu_tools.rst

@@ -1,7 +1,7 @@
 Tools 選單
 ==========
 
-**Tools** 選單提供 SSH 用戶端和 AI 開發工具的存取。
+**Tools** 選單提供 SSH 用戶端、AI 開發工具，以及內建的 WYSIWYG 架構圖編輯器。
 每個工具都可以作為 **分頁**（在主分頁元件中）或 **停靠面板**（浮動/可停靠面板）開啟。
 
 SSH
@@ -44,6 +44,60 @@ Skill Send GUI Tab / Dock
 開啟技能提示詞傳送介面，用於將提示詞發送到 LLM API 並查看回應。
 詳細資訊請參閱 :doc:`ai_tools`。
 
+架構圖編輯器
+------------
+
+Diagram Editor Tab / Dock
+^^^^^^^^^^^^^^^^^^^^^^^^^
+
+開啟內建的 WYSIWYG 架構圖編輯器，可直接在 PyBreeze 中繪製流程圖與架構圖，
+不需要切換到外部工具。
+
+繪圖工具
+""""""""
+
+- **選取（Select）** -- 點選、搬移、橡皮筋多選
+- **矩形 / 圓角矩形 / 橢圓 / 菱形** -- 節點形狀
+- **連線（Connection）** -- 將兩個節點以可加標籤的連線串接
+- **文字（Text）** -- 浮動文字註記
+- **圖片（檔案）** -- 插入本地圖片檔
+- **圖片（URL）** -- 從 URL 下載並插入圖片（會驗證
+  目標 IP 不在 private/loopback 範圍，並限制 20 MB 上限以防止 SSRF）
+
+檔案操作
+""""""""
+
+.. list-table::
+   :header-rows: 1
+   :widths: 25 75
+
+   * - 操作
+     - 說明
+   * - **New**
+     - 清除目前圖形（畫布非空時會跳出確認）。
+   * - **Open**
+     - 載入先前儲存的 ``.diagram.json`` 檔案。
+   * - **Save / Save As** (``Ctrl+S`` / ``Ctrl+Shift+S``)
+     - 將圖形儲存為 ``.diagram.json``。
+   * - **Import Mermaid**
+     - 貼上 Mermaid ``flowchart`` / ``graph`` 原始碼，轉換為可編輯的節點與邊。
+   * - **Export PNG / SVG**
+     - 將畫布輸出為點陣圖（PNG）或向量圖（SVG）。
+
+編輯輔助
+""""""""
+
+- **Undo / Redo** (``Ctrl+Z`` / ``Ctrl+Y``) -- 完整的 undo stack，含具名指令
+  （新增、搬移、刪除、Import 等）
+- **Copy / Paste / Duplicate / Select All** -- 標準快捷鍵；``Ctrl+D`` 可複製選取項目
+- **對齊（Align）** -- 將選取項目以左、右、上、下、水平置中、垂直置中對齊
+- **分佈（Distribute）** -- 三個以上選取項目可水平或垂直平均分佈
+- **Grid** -- 切換背景格線
+- **Snap** -- 拖曳節點時對齊格線
+- **屬性面板（右側）** -- 編輯選取項目的文字、顏色、線寬、形狀、連線樣式
+- **Zoom** -- 放大/縮小 (``Ctrl+=`` / ``Ctrl+-``)、重設 100%
+  (``Ctrl+0``)、Fit-to-content
+
 分頁 vs. 停靠面板
 ------------------