fix: save session when diagram is modified via autosave

Add chartXML to dependency array of auto-save effect so that user
modifications in draw.io (captured via autosave) trigger session save.

.github/renovate.json

@@ -1,7 +1,7 @@
 {
     "$schema": "https://docs.renovatebot.com/renovate-schema.json",
     "extends": ["config:recommended"],
-    "schedule": ["after 10am on saturday"],
+    "schedule": ["after 10am on the first day of the month"],
     "timezone": "Asia/Tokyo",
     "packageRules": [
         {
@@ -13,6 +13,7 @@
         {
             "matchUpdateTypes": ["major"],
             "matchPackagePatterns": ["*"],
+            "groupName": "major dependencies",
             "automerge": false
         },
         {

.github/workflows/electron-release.yml

@@ -67,7 +67,7 @@ jobs:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Upload unsigned artifacts for signing
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v6
         id: upload-unsigned
         with:
           name: windows-unsigned

.github/workflows/test.yml

@@ -11,10 +11,10 @@ jobs:
     name: Lint & Unit Tests
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: "20"
           cache: "npm"
@@ -32,10 +32,10 @@ jobs:
     name: E2E Tests
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: "20"
           cache: "npm"
@@ -44,7 +44,7 @@ jobs:
         run: npm ci
 
       - name: Cache Playwright browsers
-        uses: actions/cache@v4
+        uses: actions/cache@v5
         id: playwright-cache
         with:
           path: ~/.cache/ms-playwright
@@ -67,7 +67,7 @@ jobs:
           CI: true
 
       - name: Upload test results
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v6
         if: always()
         with:
           name: playwright-report

.gitignore

@@ -67,4 +67,5 @@ CLAUDE.md
 .spec-workflow
 
 # edgeone
-.edgeone
+.edgeone
+opencode.json

README.md

@@ -45,6 +45,7 @@ https://github.com/user-attachments/assets/9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1
   - [Multi-Provider Support](#multi-provider-support)
   - [How It Works](#how-it-works)
   - [Support \& Contact](#support--contact)
+  - [FAQ](#faq)
   - [Star History](#star-history)
 
 ## Examples
@@ -246,6 +247,10 @@ For support or inquiries, please open an issue on the GitHub repository or conta
 
 -   Email: me[at]jiang.jp
 
+## FAQ
+
+See [FAQ](./docs/en/FAQ.md) for common issues and solutions.
+
 ## Star History
 
 [![Star History Chart](https://api.star-history.com/svg?repos=DayuanJiang/next-ai-draw-io&type=date&legend=top-left)](https://www.star-history.com/#DayuanJiang/next-ai-draw-io&type=date&legend=top-left)

app/[lang]/page.tsx

@@ -4,7 +4,6 @@ import { Suspense, useCallback, useEffect, useRef, useState } from "react"
 import { DrawIoEmbed } from "react-drawio"
 import type { ImperativePanelHandle } from "react-resizable-panels"
 import ChatPanel from "@/components/chat-panel"
-import { STORAGE_CLOSE_PROTECTION_KEY } from "@/components/settings-dialog"
 import {
     ResizableHandle,
     ResizablePanel,
@@ -17,8 +16,13 @@ const drawioBaseUrl =
     process.env.NEXT_PUBLIC_DRAWIO_BASE_URL || "https://embed.diagrams.net"
 
 export default function Home() {
-    const { drawioRef, handleDiagramExport, onDrawioLoad, resetDrawioReady } =
-        useDiagram()
+    const {
+        drawioRef,
+        handleDiagramExport,
+        handleAutoSave,
+        onDrawioLoad,
+        resetDrawioReady,
+    } = useDiagram()
     const router = useRouter()
     const pathname = usePathname()
     // Extract current language from pathname (e.g., "/zh/about" → "zh")
@@ -29,7 +33,6 @@ export default function Home() {
     const [darkMode, setDarkMode] = useState(false)
     const [isLoaded, setIsLoaded] = useState(false)
     const [isDrawioReady, setIsDrawioReady] = useState(false)
-    const [closeProtection, setCloseProtection] = useState(false)
 
     const chatPanelRef = useRef<ImperativePanelHandle>(null)
     const isMobileRef = useRef(false)
@@ -66,13 +69,6 @@ export default function Home() {
             document.documentElement.classList.toggle("dark", prefersDark)
         }
 
-        const savedCloseProtection = localStorage.getItem(
-            STORAGE_CLOSE_PROTECTION_KEY,
-        )
-        if (savedCloseProtection === "true") {
-            setCloseProtection(true)
-        }
-
         setIsLoaded(true)
     }, [pathname, router])
 
@@ -146,20 +142,6 @@ export default function Home() {
         return () => window.removeEventListener("keydown", handleKeyDown)
     }, [])
 
-    // Show confirmation dialog when user tries to leave the page
-    useEffect(() => {
-        if (!closeProtection) return
-
-        const handleBeforeUnload = (event: BeforeUnloadEvent) => {
-            event.preventDefault()
-            return ""
-        }
-
-        window.addEventListener("beforeunload", handleBeforeUnload)
-        return () =>
-            window.removeEventListener("beforeunload", handleBeforeUnload)
-    }, [closeProtection])
-
     return (
         <div className="h-screen bg-background relative overflow-hidden">
             <ResizablePanelGroup
@@ -187,6 +169,8 @@ export default function Home() {
                                         ref={drawioRef}
                                         onExport={handleDiagramExport}
                                         onLoad={handleDrawioLoad}
+                                        onAutoSave={handleAutoSave}
+                                        autosave={true}
                                         baseUrl={drawioBaseUrl}
                                         urlParameters={{
                                             ui: drawioUi,
@@ -195,6 +179,7 @@ export default function Home() {
                                             saveAndExit: false,
                                             noSaveBtn: true,
                                             noExitBtn: true,
+                                            modified: false,
                                             dark: darkMode,
                                             lang: currentLang,
                                         }}
@@ -243,7 +228,6 @@ export default function Home() {
                                 darkMode={darkMode}
                                 onToggleDarkMode={handleDarkModeChange}
                                 isMobile={isMobile}
-                                onCloseProtectionChange={setCloseProtection}
                             />
                         </Suspense>
                     </div>

app/api/validate-model/route.ts

@@ -202,7 +202,7 @@ export async function POST(req: Request) {
             case "siliconflow": {
                 const sf = createOpenAI({
                     apiKey,
-                    baseURL: baseUrl || "https://api.siliconflow.com/v1",
+                    baseURL: baseUrl || "https://api.siliconflow.cn/v1",
                 })
                 model = sf.chat(modelId)
                 break

app/globals.css

@@ -244,6 +244,19 @@
     .scrollbar-thin::-webkit-scrollbar-thumb:hover {
         background-color: oklch(0.75 0.01 260);
     }
+
+    /* Dark mode scrollbar */
+    .dark .scrollbar-thin {
+        scrollbar-color: oklch(0.35 0.015 260) transparent;
+    }
+
+    .dark .scrollbar-thin::-webkit-scrollbar-thumb {
+        background-color: oklch(0.35 0.015 260);
+    }
+
+    .dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+        background-color: oklch(0.45 0.015 260);
+    }
 }
 
 /* Smooth page transitions */

components/chat-input.tsx

@@ -24,6 +24,7 @@ import { useDiagram } from "@/contexts/diagram-context"
 import { useDictionary } from "@/hooks/use-dictionary"
 import { formatMessage } from "@/lib/i18n/utils"
 import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
+import { STORAGE_KEYS } from "@/lib/storage"
 import type { FlattenedModel } from "@/lib/types/model-config"
 import { extractUrlContent, type UrlData } from "@/lib/url-utils"
 import { FilePreviewList } from "./file-preview-list"
@@ -192,6 +193,7 @@ export function ChatInput({
     const [showHistory, setShowHistory] = useState(false)
     const [showUrlDialog, setShowUrlDialog] = useState(false)
     const [isExtractingUrl, setIsExtractingUrl] = useState(false)
+    const [sendShortcut, setSendShortcut] = useState("ctrl-enter")
     // Allow retry when there's an error (even if status is still "streaming" or "submitted")
     const isDisabled =
         (status === "streaming" || status === "submitted") && !error
@@ -208,13 +210,36 @@ export function ChatInput({
         adjustTextareaHeight()
     }, [input, adjustTextareaHeight])
 
+    // Load send shortcut preference from localStorage and listen for changes
+    useEffect(() => {
+        const stored = localStorage.getItem(STORAGE_KEYS.sendShortcut)
+        if (stored) setSendShortcut(stored)
+
+        const handleChange = (e: CustomEvent<string>) =>
+            setSendShortcut(e.detail)
+        window.addEventListener(
+            "sendShortcutChange",
+            handleChange as EventListener,
+        )
+        return () =>
+            window.removeEventListener(
+                "sendShortcutChange",
+                handleChange as EventListener,
+            )
+    }, [])
+
     const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         onChange(e)
         adjustTextareaHeight()
     }
 
     const handleKeyDown = (e: React.KeyboardEvent) => {
-        if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+        const shouldSend =
+            sendShortcut === "enter"
+                ? e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey
+                : (e.metaKey || e.ctrlKey) && e.key === "Enter"
+
+        if (shouldSend) {
             e.preventDefault()
             const form = e.currentTarget.closest("form")
             if (form && input.trim() && !isDisabled) {
@@ -407,7 +432,7 @@ export function ChatInput({
                     placeholder={dict.chat.placeholder}
                     disabled={isDisabled}
                     aria-label="Chat input"
-                    className="min-h-[60px] max-h-[200px] resize-none border-0 bg-transparent px-4 py-3 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-muted-foreground/60"
+                    className="min-h-[60px] max-h-[200px] resize-none border-0 bg-transparent px-4 py-3 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-muted-foreground/60 scrollbar-thin"
                 />
 
                 <div className="flex items-center justify-end gap-1 px-3 py-2 border-t border-border/50">

components/chat-message-display.tsx

@@ -1114,7 +1114,7 @@ export function ChatMessageDisplay({
                                                                                                         )}
                                                                                                     </button>
                                                                                                     {isExpanded && (
-                                                                                                        <div className="px-3 py-2 border-t border-border/40 max-h-48 overflow-y-auto bg-muted/30">
+                                                                                                        <div className="px-3 py-2 border-t border-border/40 max-h-48 overflow-y-auto bg-muted/30 scrollbar-thin">
                                                                                                             <pre className="text-xs whitespace-pre-wrap text-foreground/80">
                                                                                                                 {
                                                                                                                     section.content

components/chat-panel.tsx

@@ -70,7 +70,6 @@ interface ChatPanelProps {
     darkMode: boolean
     onToggleDarkMode: () => void
     isMobile?: boolean
-    onCloseProtectionChange?: (enabled: boolean) => void
 }
 
 // Constants for tool states
@@ -111,7 +110,6 @@ export default function ChatPanel({
     darkMode,
     onToggleDarkMode,
     isMobile = false,
-    onCloseProtectionChange,
 }: ChatPanelProps) {
     const {
         loadDiagram: onDisplayChart,
@@ -641,6 +639,7 @@ export default function ChatPanel({
         sessionIsAvailable,
         currentSessionId,
         buildSessionData,
+        chartXML,
     ])
 
     // Update URL when a new session is created (first message sent)
@@ -1296,7 +1295,6 @@ export default function ChatPanel({
             <SettingsDialog
                 open={showSettingsDialog}
                 onOpenChange={setShowSettingsDialog}
-                onCloseProtectionChange={onCloseProtectionChange}
                 drawioUi={drawioUi}
                 onToggleDrawioUi={onToggleDrawioUi}
                 darkMode={darkMode}

components/history-dialog.tsx

@@ -43,7 +43,7 @@ export function HistoryDialog({
 
     return (
         <Dialog open={showHistory} onOpenChange={onToggleHistory}>
-            <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
+            <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto scrollbar-thin">
                 <DialogHeader>
                     <DialogTitle>{dict.history.title}</DialogTitle>
                     <DialogDescription>

components/settings-dialog.tsx

@@ -25,6 +25,7 @@ import { Switch } from "@/components/ui/switch"
 import { useDictionary } from "@/hooks/use-dictionary"
 import { getApiEndpoint } from "@/lib/base-path"
 import { i18n, type Locale } from "@/lib/i18n/config"
+import { STORAGE_KEYS } from "@/lib/storage"
 
 // Reusable setting item component for consistent layout
 function SettingItem({
@@ -60,7 +61,6 @@ const LANGUAGE_LABELS: Record<Locale, string> = {
 interface SettingsDialogProps {
     open: boolean
     onOpenChange: (open: boolean) => void
-    onCloseProtectionChange?: (enabled: boolean) => void
     drawioUi: "min" | "sketch"
     onToggleDrawioUi: () => void
     darkMode: boolean
@@ -70,7 +70,6 @@ interface SettingsDialogProps {
 }
 
 export const STORAGE_ACCESS_CODE_KEY = "next-ai-draw-io-access-code"
-export const STORAGE_CLOSE_PROTECTION_KEY = "next-ai-draw-io-close-protection"
 const STORAGE_ACCESS_CODE_REQUIRED_KEY = "next-ai-draw-io-access-code-required"
 
 function getStoredAccessCodeRequired(): boolean | null {
@@ -83,7 +82,6 @@ function getStoredAccessCodeRequired(): boolean | null {
 function SettingsContent({
     open,
     onOpenChange,
-    onCloseProtectionChange,
     drawioUi,
     onToggleDrawioUi,
     darkMode,
@@ -96,13 +94,13 @@ function SettingsContent({
     const pathname = usePathname() || "/"
     const search = useSearchParams()
     const [accessCode, setAccessCode] = useState("")
-    const [closeProtection, setCloseProtection] = useState(true)
     const [isVerifying, setIsVerifying] = useState(false)
     const [error, setError] = useState("")
     const [accessCodeRequired, setAccessCodeRequired] = useState(
         () => getStoredAccessCodeRequired() ?? false,
     )
     const [currentLang, setCurrentLang] = useState("en")
+    const [sendShortcut, setSendShortcut] = useState("ctrl-enter")
 
     // Proxy settings state (Electron only)
     const [httpProxy, setHttpProxy] = useState("")
@@ -149,11 +147,10 @@ function SettingsContent({
                 localStorage.getItem(STORAGE_ACCESS_CODE_KEY) || ""
             setAccessCode(storedCode)
 
-            const storedCloseProtection = localStorage.getItem(
-                STORAGE_CLOSE_PROTECTION_KEY,
+            const storedSendShortcut = localStorage.getItem(
+                STORAGE_KEYS.sendShortcut,
             )
-            // Default to true if not set
-            setCloseProtection(storedCloseProtection !== "false")
+            setSendShortcut(storedSendShortcut || "ctrl-enter")
 
             setError("")
 
@@ -387,25 +384,6 @@ function SettingsContent({
                         </Button>
                     </SettingItem>
 
-                    {/* Close Protection */}
-                    <SettingItem
-                        label={dict.settings.closeProtection}
-                        description={dict.settings.closeProtectionDescription}
-                    >
-                        <Switch
-                            id="close-protection"
-                            checked={closeProtection}
-                            onCheckedChange={(checked) => {
-                                setCloseProtection(checked)
-                                localStorage.setItem(
-                                    STORAGE_CLOSE_PROTECTION_KEY,
-                                    checked.toString(),
-                                )
-                                onCloseProtectionChange?.(checked)
-                            }}
-                        />
-                    </SettingItem>
-
                     {/* Diagram Style */}
                     <SettingItem
                         label={dict.settings.diagramStyle}
@@ -425,6 +403,43 @@ function SettingsContent({
                         </div>
                     </SettingItem>
 
+                    {/* Send Shortcut */}
+                    <SettingItem
+                        label={dict.settings.sendShortcut}
+                        description={dict.settings.sendShortcutDescription}
+                    >
+                        <Select
+                            value={sendShortcut}
+                            onValueChange={(value) => {
+                                setSendShortcut(value)
+                                localStorage.setItem(
+                                    STORAGE_KEYS.sendShortcut,
+                                    value,
+                                )
+                                window.dispatchEvent(
+                                    new CustomEvent("sendShortcutChange", {
+                                        detail: value,
+                                    }),
+                                )
+                            }}
+                        >
+                            <SelectTrigger
+                                id="send-shortcut-select"
+                                className="w-[170px] h-9 rounded-xl"
+                            >
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="enter">
+                                    {dict.settings.enterToSend}
+                                </SelectItem>
+                                <SelectItem value="ctrl-enter">
+                                    {dict.settings.ctrlEnterToSend}
+                                </SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </SettingItem>
+
                     {/* Proxy Settings - Electron only */}
                     {typeof window !== "undefined" &&
                         window.electronAPI?.isElectron && (

components/ui/card.tsx

@@ -1,92 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Card({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card"
-      className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-[data-slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-6", className)}
-      {...props}
-    />
-  )
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}

contexts/diagram-context.tsx

@@ -2,7 +2,7 @@
 
 import type React from "react"
 import { createContext, useContext, useEffect, useRef, useState } from "react"
-import type { DrawIoEmbedRef } from "react-drawio"
+import type { DrawIoEmbedRef, EventAutoSave } from "react-drawio"
 import { toast } from "sonner"
 import type { ExportFormat } from "@/components/save-dialog"
 import { getApiEndpoint } from "@/lib/base-path"
@@ -23,6 +23,7 @@ interface DiagramContextType {
     resolverRef: React.Ref<((value: string) => void) | null>
     drawioRef: React.Ref<DrawIoEmbedRef | null>
     handleDiagramExport: (data: any) => void
+    handleAutoSave: (data: EventAutoSave) => void
     clearDiagram: () => void
     saveDiagramToFile: (
         filename: string,
@@ -226,6 +227,13 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
         }
     }
 
+    // Handle autosave events from draw.io - keeps chartXML in sync with user modifications
+    const handleAutoSave = (data: EventAutoSave) => {
+        if (data.xml) {
+            setChartXML(data.xml)
+        }
+    }
+
     const clearDiagram = () => {
         const emptyDiagram = `<mxfile><diagram name="Page-1" id="page-1"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/></root></mxGraphModel></diagram></mxfile>`
         // Skip validation for trusted internal template (loadDiagram also sets chartXML)
@@ -350,6 +358,7 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
                 resolverRef,
                 drawioRef,
                 handleDiagramExport,
+                handleAutoSave,
                 clearDiagram,
                 saveDiagramToFile,
                 getThumbnailSvg,

docs/cn/FAQ.md

@@ -0,0 +1,78 @@
+# 常见问题解答 (FAQ)
+
+---
+
+## 1. 无法导出 PDF
+
+**问题**: Web 版点击导出 PDF 后跳转到 `convert.diagrams.net/node/export` 然后无响应
+
+**原因**: 嵌入式 Draw.io 不支持直接 PDF 导出，依赖外部转换服务，在 iframe 中无法正常工作
+
+**解决方案**: 先导出为图片（PNG），再打印转成 PDF
+
+**相关 Issue**: #539, #125
+
+---
+
+## 2. 无法访问 embed.diagrams.net（离线/内网部署）
+
+**问题**: 内网环境提示"找不到 embed.diagrams.net 的服务器 IP 地址"
+
+**关键点**: `NEXT_PUBLIC_*` 环境变量是**构建时**变量，会被打包到 JS 代码中，**运行时设置无效**！
+
+**解决方案**: 必须在构建时通过 `args` 传入：
+
+```yaml
+# docker-compose.yml
+services:
+  drawio:
+    image: jgraph/drawio:latest
+    ports: ["8080:8080"]
+  next-ai-draw-io:
+    build:
+      context: .
+      args:
+        - NEXT_PUBLIC_DRAWIO_BASE_URL=http://你的服务器IP:8080/
+    ports: ["3000:3000"]
+    env_file: .env
+```
+
+**内网用户**: 在外网修改 Dockerfile 并构建镜像，再传到内网使用
+
+**相关 Issue**: #295, #317
+
+---
+
+## 3. 自建模型只思考不画图
+
+**问题**: 本地部署的模型（如 Qwen、LiteLLM）只输出思考过程，不生成图表
+
+**可能原因**:
+1. **模型太小** - 小模型难以正确遵循 tool calling 指令，建议使用 32B+ 参数的模型
+2. **未开启 tool calling** - 模型服务需要配置 tool use 功能
+
+**解决方案**: 开启 tool calling，例如 vLLM：
+```bash
+python -m vllm.entrypoints.openai.api_server \
+    --model Qwen/Qwen3-32B \
+    --enable-auto-tool-choice \
+    --tool-call-parser hermes
+```
+
+**相关 Issue**: #269, #75
+
+---
+
+## 4. 上传图片后提示"未提供图片"
+
+**问题**: 上传图片后，系统显示"未提供图片"错误
+
+**可能原因**:
+1. 模型不支持视觉功能（如 Kimi K2、DeepSeek、Qwen 文本模型）
+
+**解决方案**:
+- 使用支持视觉的模型：GPT-5.2、Claude 4.5 Sonnet、Gemini 3 Pro
+- 模型名带 `vision` 或 `vl` 的支持图片
+- 更新到最新版本（v0.4.9+）
+
+**相关 Issue**: #324, #421, #469

docs/cn/README_CN.md

@@ -42,6 +42,7 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
   - [多提供商支持](#多提供商支持)
   - [工作原理](#工作原理)
   - [支持与联系](#支持与联系)
+  - [常见问题](#常见问题)
   - [Star历史](#star历史)
 
 ## 示例
@@ -238,6 +239,10 @@ npm run dev
 
 -   邮箱：me[at]jiang.jp
 
+## 常见问题
+
+请参阅 [FAQ](./FAQ.md) 了解常见问题和解决方案。
+
 ## Star历史
 
 [![Star History Chart](https://api.star-history.com/svg?repos=DayuanJiang/next-ai-draw-io&type=date&legend=top-left)](https://www.star-history.com/#DayuanJiang/next-ai-draw-io&type=date&legend=top-left)

docs/en/FAQ.md

@@ -0,0 +1,78 @@
+# Frequently Asked Questions (FAQ)
+
+---
+
+## 1. Cannot Export PDF
+
+**Problem**: Web version redirects to `convert.diagrams.net/node/export` when exporting PDF, then nothing happens
+
+**Cause**: Embedded Draw.io doesn't support direct PDF export, it relies on external conversion service which doesn't work in iframe
+
+**Solution**: Export as image (PNG) first, then print to PDF
+
+**Related Issues**: #539, #125
+
+---
+
+## 2. Cannot Access embed.diagrams.net (Offline/Intranet Deployment)
+
+**Problem**: Intranet environment shows "Cannot find server IP address for embed.diagrams.net"
+
+**Key Point**: `NEXT_PUBLIC_*` environment variables are **build-time** variables, they get bundled into JS code. **Runtime settings don't work!**
+
+**Solution**: Must pass via `args` at build time:
+
+```yaml
+# docker-compose.yml
+services:
+  drawio:
+    image: jgraph/drawio:latest
+    ports: ["8080:8080"]
+  next-ai-draw-io:
+    build:
+      context: .
+      args:
+        - NEXT_PUBLIC_DRAWIO_BASE_URL=http://your-server-ip:8080/
+    ports: ["3000:3000"]
+    env_file: .env
+```
+
+**Intranet Users**: Modify Dockerfile and build image on external network, then transfer to intranet
+
+**Related Issues**: #295, #317
+
+---
+
+## 3. Self-hosted Model Only Thinks But Doesn't Draw
+
+**Problem**: Locally deployed models (e.g., Qwen, LiteLLM) only output thinking process, don't generate diagrams
+
+**Possible Causes**:
+1. **Model too small** - Small models struggle to follow tool calling instructions correctly, recommend 32B+ parameter models
+2. **Tool calling not enabled** - Model service needs tool use configuration
+
+**Solution**: Enable tool calling, e.g., vLLM:
+```bash
+python -m vllm.entrypoints.openai.api_server \
+    --model Qwen/Qwen3-32B \
+    --enable-auto-tool-choice \
+    --tool-call-parser hermes
+```
+
+**Related Issues**: #269, #75
+
+---
+
+## 4. "No Image Provided" After Uploading Image
+
+**Problem**: After uploading an image, the system shows "No image provided" error
+
+**Possible Causes**:
+1. Model doesn't support vision (e.g., Kimi K2, DeepSeek, Qwen text models)
+
+**Solution**:
+- Use vision-capable models: GPT-5.2, Claude 4.5 Sonnet, Gemini 3 Pro
+- Models with `vision` or `vl` in name support images
+- Update to latest version (v0.4.9+)
+
+**Related Issues**: #324, #421, #469

docs/ja/FAQ.md

@@ -0,0 +1,78 @@
+# よくある質問 (FAQ)
+
+---
+
+## 1. PDFをエクスポートできない
+
+**問題**: Web版でPDFエクスポートをクリックすると `convert.diagrams.net/node/export` にリダイレクトされ、その後何も起こらない
+
+**原因**: 埋め込みDraw.ioは直接PDFエクスポートをサポートしておらず、外部変換サービスに依存しているが、iframe内では正常に動作しない
+
+**解決策**: まず画像（PNG）としてエクスポートし、その後PDFに印刷する
+
+**関連Issue**: #539, #125
+
+---
+
+## 2. embed.diagrams.netにアクセスできない（オフライン/イントラネットデプロイ）
+
+**問題**: イントラネット環境で「embed.diagrams.netのサーバーIPアドレスが見つかりません」と表示される
+
+**重要**: `NEXT_PUBLIC_*` 環境変数は**ビルド時**変数であり、JSコードにバンドルされます。**実行時の設定は無効です！**
+
+**解決策**: ビルド時に `args` で渡す必要があります：
+
+```yaml
+# docker-compose.yml
+services:
+  drawio:
+    image: jgraph/drawio:latest
+    ports: ["8080:8080"]
+  next-ai-draw-io:
+    build:
+      context: .
+      args:
+        - NEXT_PUBLIC_DRAWIO_BASE_URL=http://あなたのサーバーIP:8080/
+    ports: ["3000:3000"]
+    env_file: .env
+```
+
+**イントラネットユーザー**: 外部ネットワークでDockerfileを修正してイメージをビルドし、イントラネットに転送する
+
+**関連Issue**: #295, #317
+
+---
+
+## 3. 自前モデルが思考するだけで描画しない
+
+**問題**: ローカルデプロイのモデル（Qwen、LiteLLMなど）が思考過程のみを出力し、図表を生成しない
+
+**考えられる原因**:
+1. **モデルが小さすぎる** - 小さいモデルはtool calling指示に正しく従うことが難しい、32B+パラメータのモデルを推奨
+2. **tool callingが有効になっていない** - モデルサービスでtool use機能を設定する必要がある
+
+**解決策**: tool callingを有効にする、例えばvLLM：
+```bash
+python -m vllm.entrypoints.openai.api_server \
+    --model Qwen/Qwen3-32B \
+    --enable-auto-tool-choice \
+    --tool-call-parser hermes
+```
+
+**関連Issue**: #269, #75
+
+---
+
+## 4. 画像アップロード後「画像が提供されていません」と表示される
+
+**問題**: 画像をアップロードした後、「画像が提供されていません」というエラーが表示される
+
+**考えられる原因**:
+1. モデルがビジョン機能をサポートしていない（Kimi K2、DeepSeek、Qwenテキストモデルなど）
+
+**解決策**:
+- ビジョン対応モデルを使用：GPT-5.2、Claude 4.5 Sonnet、Gemini 3 Pro
+- モデル名に `vision` または `vl` が含まれているものは画像をサポート
+- 最新バージョン（v0.4.9+）にアップデート
+
+**関連Issue**: #324, #421, #469

docs/ja/README_JA.md

@@ -42,6 +42,7 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
   - [マルチプロバイダーサポート](#マルチプロバイダーサポート)
   - [仕組み](#仕組み)
   - [サポート＆お問い合わせ](#サポートお問い合わせ)
+  - [よくある質問](#よくある質問)
   - [スター履歴](#スター履歴)
 
 ## 例
@@ -239,6 +240,10 @@ AWS BedrockとOpenRouter以外のすべてのプロバイダーはカスタム
 
 -   メール：me[at]jiang.jp
 
+## よくある質問
+
+一般的な問題と解決策については [FAQ](./FAQ.md) をご覧ください。
+
 ## スター履歴
 
 [![Star History Chart](https://api.star-history.com/svg?repos=DayuanJiang/next-ai-draw-io&type=date&legend=top-left)](https://www.star-history.com/#DayuanJiang/next-ai-draw-io&type=date&legend=top-left)

hooks/use-diagram-tool-handlers.ts

@@ -1,4 +1,5 @@
 import type { MutableRefObject } from "react"
+import type { DiagramOperation } from "@/components/chat/types"
 import { isMxCellXmlComplete, wrapWithMxFile } from "@/lib/utils"
 
 const DEBUG = process.env.NODE_ENV === "development"
@@ -29,12 +30,6 @@ type AddToolOutputParams = AddToolOutputSuccess | AddToolOutputError
 
 type AddToolOutputFn = (params: AddToolOutputParams) => void
 
-interface DiagramOperation {
-    operation: "update" | "add" | "delete"
-    cell_id: string
-    new_xml?: string
-}
-
 interface UseDiagramToolHandlersParams {
     partialXmlRef: MutableRefObject<string>
     editDiagramOriginalXmlRef: MutableRefObject<Map<string, string>>

lib/ai-config.ts

@@ -1,26 +0,0 @@
-import { STORAGE_KEYS } from "./storage"
-
-/**
- * Get AI configuration from localStorage.
- * Returns API keys and settings for custom AI providers.
- * Used to override server defaults when user provides their own API key.
- */
-export function getAIConfig() {
-    if (typeof window === "undefined") {
-        return {
-            accessCode: "",
-            aiProvider: "",
-            aiBaseUrl: "",
-            aiApiKey: "",
-            aiModel: "",
-        }
-    }
-
-    return {
-        accessCode: localStorage.getItem(STORAGE_KEYS.accessCode) || "",
-        aiProvider: localStorage.getItem(STORAGE_KEYS.aiProvider) || "",
-        aiBaseUrl: localStorage.getItem(STORAGE_KEYS.aiBaseUrl) || "",
-        aiApiKey: localStorage.getItem(STORAGE_KEYS.aiApiKey) || "",
-        aiModel: localStorage.getItem(STORAGE_KEYS.aiModel) || "",
-    }
-}

lib/ai-providers.ts

@@ -8,22 +8,9 @@ import { createOpenAI, openai } from "@ai-sdk/openai"
 import { fromNodeProviderChain } from "@aws-sdk/credential-providers"
 import { createOpenRouter } from "@openrouter/ai-sdk-provider"
 import { createOllama, ollama } from "ollama-ai-provider-v2"
+import type { ProviderName } from "@/lib/types/model-config"
 
-export type ProviderName =
-    | "bedrock"
-    | "openai"
-    | "anthropic"
-    | "google"
-    | "azure"
-    | "ollama"
-    | "openrouter"
-    | "deepseek"
-    | "siliconflow"
-    | "sglang"
-    | "gateway"
-    | "edgeone"
-    | "doubao"
-    | "modelscope"
+export type { ProviderName }
 
 interface ModelConfig {
     model: any
@@ -75,6 +62,32 @@ const ANTHROPIC_BETA_HEADERS = {
     "anthropic-beta": "fine-grained-tool-streaming-2025-05-14",
 }
 
+/**
+ * Resolve baseURL based on whether user is providing their own API key.
+ * When user provides their own API key, we should NOT fall back to server's
+ * baseURL environment variable - user credentials should only be sent to
+ * user-specified endpoints or official provider endpoints.
+ *
+ * @param userApiKey - User-provided API key (if any)
+ * @param userBaseUrl - User-provided base URL (if any)
+ * @param serverBaseUrl - Server's base URL from environment variable
+ * @param defaultBaseUrl - Provider's official/default base URL (optional)
+ * @returns The resolved base URL to use
+ */
+export function resolveBaseURL(
+    userApiKey: string | null | undefined,
+    userBaseUrl: string | null | undefined,
+    serverBaseUrl: string | undefined,
+    defaultBaseUrl?: string,
+): string | undefined {
+    if (userApiKey) {
+        // User provides their own API key - only use user's baseUrl or default
+        return userBaseUrl || defaultBaseUrl || undefined
+    }
+    // No user API key - fall back to server config
+    return userBaseUrl || serverBaseUrl || defaultBaseUrl || undefined
+}
+
 /**
  * Safely parse integer from environment variable with validation
  */
@@ -464,7 +477,7 @@ function validateProviderCredentials(provider: ProviderName): void {
  * - DEEPSEEK_API_KEY: DeepSeek API key
  * - DEEPSEEK_BASE_URL: DeepSeek endpoint (optional)
  * - SILICONFLOW_API_KEY: SiliconFlow API key
- * - SILICONFLOW_BASE_URL: SiliconFlow endpoint (optional, defaults to https://api.siliconflow.com/v1)
+ * - SILICONFLOW_BASE_URL: SiliconFlow endpoint (optional, defaults to https://api.siliconflow.cn/v1)
  * - SGLANG_API_KEY: SGLang API key
  * - SGLANG_BASE_URL: SGLang endpoint (optional)
  * - MODELSCOPE_API_KEY: ModelScope API key
@@ -608,7 +621,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
 
         case "openai": {
             const apiKey = overrides?.apiKey || process.env.OPENAI_API_KEY
-            const baseURL = overrides?.baseUrl || process.env.OPENAI_BASE_URL
+            const baseURL = resolveBaseURL(
+                overrides?.apiKey,
+                overrides?.baseUrl,
+                process.env.OPENAI_BASE_URL,
+            )
             if (baseURL) {
                 // Custom base URL = third-party proxy, use Chat Completions API
                 // for compatibility (most proxies don't support /responses endpoint)
@@ -627,10 +644,12 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
 
         case "anthropic": {
             const apiKey = overrides?.apiKey || process.env.ANTHROPIC_API_KEY
-            const baseURL =
-                overrides?.baseUrl ||
-                process.env.ANTHROPIC_BASE_URL ||
-                "https://api.anthropic.com/v1"
+            const baseURL = resolveBaseURL(
+                overrides?.apiKey,
+                overrides?.baseUrl,
+                process.env.ANTHROPIC_BASE_URL,
+                "https://api.anthropic.com/v1",
+            )
             const customProvider = createAnthropic({
                 apiKey,
                 baseURL,
@@ -645,7 +664,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
         case "google": {
             const apiKey =
                 overrides?.apiKey || process.env.GOOGLE_GENERATIVE_AI_API_KEY
-            const baseURL = overrides?.baseUrl || process.env.GOOGLE_BASE_URL
+            const baseURL = resolveBaseURL(
+                overrides?.apiKey,
+                overrides?.baseUrl,
+                process.env.GOOGLE_BASE_URL,
+            )
             if (baseURL || overrides?.apiKey) {
                 const customGoogle = createGoogleGenerativeAI({
                     apiKey,
@@ -660,8 +683,15 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
 
         case "azure": {
             const apiKey = overrides?.apiKey || process.env.AZURE_API_KEY
-            const baseURL = overrides?.baseUrl || process.env.AZURE_BASE_URL
-            const resourceName = process.env.AZURE_RESOURCE_NAME
+            const baseURL = resolveBaseURL(
+                overrides?.apiKey,
+                overrides?.baseUrl,
+                process.env.AZURE_BASE_URL,
+            )
+            // Only use server's resourceName if user is NOT providing their own API key
+            const resourceName = overrides?.apiKey
+                ? undefined
+                : process.env.AZURE_RESOURCE_NAME
             // Azure requires either baseURL or resourceName to construct the endpoint
             // resourceName constructs: https://{resourceName}.openai.azure.com/openai/v1{path}
             if (baseURL || resourceName || overrides?.apiKey) {
@@ -691,8 +721,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
 
         case "openrouter": {
             const apiKey = overrides?.apiKey || process.env.OPENROUTER_API_KEY
-            const baseURL =
-                overrides?.baseUrl || process.env.OPENROUTER_BASE_URL
+            const baseURL = resolveBaseURL(
+                overrides?.apiKey,
+                overrides?.baseUrl,
+                process.env.OPENROUTER_BASE_URL,
+            )
             const openrouter = createOpenRouter({
                 apiKey,
                 ...(baseURL && { baseURL }),
@@ -703,7 +736,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
 
         case "deepseek": {
             const apiKey = overrides?.apiKey || process.env.DEEPSEEK_API_KEY
-            const baseURL = overrides?.baseUrl || process.env.DEEPSEEK_BASE_URL
+            const baseURL = resolveBaseURL(
+                overrides?.apiKey,
+                overrides?.baseUrl,
+                process.env.DEEPSEEK_BASE_URL,
+            )
             if (baseURL || overrides?.apiKey) {
                 const customDeepSeek = createDeepSeek({
                     apiKey,
@@ -718,10 +755,12 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
 
         case "siliconflow": {
             const apiKey = overrides?.apiKey || process.env.SILICONFLOW_API_KEY
-            const baseURL =
-                overrides?.baseUrl ||
-                process.env.SILICONFLOW_BASE_URL ||
-                "https://api.siliconflow.com/v1"
+            const baseURL = resolveBaseURL(
+                overrides?.apiKey,
+                overrides?.baseUrl,
+                process.env.SILICONFLOW_BASE_URL,
+                "https://api.siliconflow.cn/v1",
+            )
             const siliconflowProvider = createOpenAI({
                 apiKey,
                 baseURL,
@@ -732,11 +771,15 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
 
         case "sglang": {
             const apiKey = overrides?.apiKey || process.env.SGLANG_API_KEY
-            const baseURL = overrides?.baseUrl || process.env.SGLANG_BASE_URL
+            const baseURL = resolveBaseURL(
+                overrides?.apiKey,
+                overrides?.baseUrl,
+                process.env.SGLANG_BASE_URL,
+            )
 
             const sglangProvider = createOpenAI({
                 apiKey,
-                baseURL,
+                ...(baseURL && { baseURL }),
                 // Add a custom fetch wrapper to intercept and fix the stream from sglang
                 fetch: async (url, options) => {
                     const response = await fetch(url, options)
@@ -841,8 +884,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
             // Model format: "provider/model" e.g., "openai/gpt-4o", "anthropic/claude-sonnet-4-5"
             // See: https://vercel.com/ai-gateway
             const apiKey = overrides?.apiKey || process.env.AI_GATEWAY_API_KEY
-            const baseURL =
-                overrides?.baseUrl || process.env.AI_GATEWAY_BASE_URL
+            const baseURL = resolveBaseURL(
+                overrides?.apiKey,
+                overrides?.baseUrl,
+                process.env.AI_GATEWAY_BASE_URL,
+            )
             // Only use custom configuration if explicitly set (local dev or custom Gateway)
             // Otherwise undefined → AI SDK uses Vercel default (https://ai-gateway.vercel.sh/v1/ai) + OIDC
             if (baseURL || overrides?.apiKey) {
@@ -874,10 +920,12 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
 
         case "doubao": {
             const apiKey = overrides?.apiKey || process.env.DOUBAO_API_KEY
-            const baseURL =
-                overrides?.baseUrl ||
-                process.env.DOUBAO_BASE_URL ||
-                "https://ark.cn-beijing.volces.com/api/v3"
+            const baseURL = resolveBaseURL(
+                overrides?.apiKey,
+                overrides?.baseUrl,
+                process.env.DOUBAO_BASE_URL,
+                "https://ark.cn-beijing.volces.com/api/v3",
+            )
             const lowerModelId = modelId.toLowerCase()
             // Use DeepSeek provider for DeepSeek/Kimi models, OpenAI for others (multimodal support)
             if (
@@ -901,10 +949,12 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
 
         case "modelscope": {
             const apiKey = overrides?.apiKey || process.env.MODELSCOPE_API_KEY
-            const baseURL =
-                overrides?.baseUrl ||
-                process.env.MODELSCOPE_BASE_URL ||
-                "https://api-inference.modelscope.cn/v1"
+            const baseURL = resolveBaseURL(
+                overrides?.apiKey,
+                overrides?.baseUrl,
+                process.env.MODELSCOPE_BASE_URL,
+                "https://api-inference.modelscope.cn/v1",
+            )
             const modelscopeProvider = createOpenAI({
                 apiKey,
                 baseURL,

lib/i18n/dictionaries/en.json

@@ -100,10 +100,12 @@
         "switchTo": "Switch to",
         "minimal": "Minimal",
         "sketch": "Sketch",
-        "closeProtection": "Close Protection",
-        "closeProtectionDescription": "Show confirmation when leaving the page.",
         "diagramStyle": "Diagram Style",
         "diagramStyleDescription": "Toggle between minimal and styled diagram output.",
+        "sendShortcut": "Send Shortcut",
+        "sendShortcutDescription": "Choose how to send messages.",
+        "enterToSend": "Enter to send",
+        "ctrlEnterToSend": "Cmd/Ctrl+Enter to send",
         "diagramActions": "Diagram Actions",
         "diagramActionsDescription": "Manage diagram history and exports",
         "history": "History",

lib/i18n/dictionaries/ja.json

@@ -100,10 +100,12 @@
         "switchTo": "切り替え",
         "minimal": "ミニマル",
         "sketch": "スケッチ",
-        "closeProtection": "ページ離脱確認",
-        "closeProtectionDescription": "ページを離れる際に確認を表示します。",
         "diagramStyle": "ダイアグラムスタイル",
         "diagramStyleDescription": "ミニマルとスタイル付きの出力を切り替えます。",
+        "sendShortcut": "送信ショートカット",
+        "sendShortcutDescription": "メッセージの送信方法を選択します。",
+        "enterToSend": "Enterで送信",
+        "ctrlEnterToSend": "Cmd/Ctrl+Enterで送信",
         "diagramActions": "ダイアグラム操作",
         "diagramActionsDescription": "ダイアグラムの履歴とエクスポートを管理",
         "history": "履歴",

lib/i18n/dictionaries/zh.json

@@ -100,10 +100,12 @@
         "switchTo": "切换到",
         "minimal": "简约",
         "sketch": "草图",
-        "closeProtection": "关闭确认",
-        "closeProtectionDescription": "离开页面时显示确认。",
         "diagramStyle": "图表样式",
         "diagramStyleDescription": "切换简约与精致图表输出模式。",
+        "sendShortcut": "发送快捷键",
+        "sendShortcutDescription": "选择发送消息的方式。",
+        "enterToSend": "回车发送",
+        "ctrlEnterToSend": "Cmd/Ctrl+回车发送",
         "diagramActions": "图表操作",
         "diagramActionsDescription": "管理图表历史记录和导出",
         "history": "历史记录",

lib/storage.ts

@@ -12,7 +12,6 @@ export const STORAGE_KEYS = {
 
     // Settings
     accessCode: "next-ai-draw-io-access-code",
-    closeProtection: "next-ai-draw-io-close-protection",
     accessCodeRequired: "next-ai-draw-io-access-code-required",
     aiProvider: "next-ai-draw-io-ai-provider",
     aiBaseUrl: "next-ai-draw-io-ai-base-url",
@@ -22,4 +21,7 @@ export const STORAGE_KEYS = {
     // Multi-model configuration
     modelConfigs: "next-ai-draw-io-model-configs",
     selectedModelId: "next-ai-draw-io-selected-model-id",
+
+    // Chat input preferences
+    sendShortcut: "next-ai-draw-io-send-shortcut",
 } as const

lib/token-counter.ts

@@ -1,39 +0,0 @@
-/**
- * Token counting utilities using js-tiktoken
- *
- * Uses cl100k_base encoding (GPT-4) which is close to Claude's tokenization.
- * This is a pure JavaScript implementation, no WASM required.
- */
-
-import { encodingForModel } from "js-tiktoken"
-import { DEFAULT_SYSTEM_PROMPT, EXTENDED_SYSTEM_PROMPT } from "./system-prompts"
-
-const encoder = encodingForModel("gpt-4o")
-
-/**
- * Count the number of tokens in a text string
- * @param text - The text to count tokens for
- * @returns The number of tokens
- */
-export function countTextTokens(text: string): number {
-    return encoder.encode(text).length
-}
-
-/**
- * Get token counts for the system prompts
- * Useful for debugging and optimizing prompt sizes
- * @returns Object with token counts for default and extended prompts
- */
-export function getSystemPromptTokenCounts(): {
-    default: number
-    extended: number
-    additions: number
-} {
-    const defaultTokens = countTextTokens(DEFAULT_SYSTEM_PROMPT)
-    const extendedTokens = countTextTokens(EXTENDED_SYSTEM_PROMPT)
-    return {
-        default: defaultTokens,
-        extended: extendedTokens,
-        additions: extendedTokens - defaultTokens,
-    }
-}

lib/types/model-config.ts

@@ -6,6 +6,7 @@ export type ProviderName =
     | "google"
     | "azure"
     | "bedrock"
+    | "ollama"
     | "openrouter"
     | "deepseek"
     | "siliconflow"
@@ -76,11 +77,15 @@ export const PROVIDER_INFO: Record<
     google: { label: "Google" },
     azure: { label: "Azure OpenAI" },
     bedrock: { label: "Amazon Bedrock" },
+    ollama: {
+        label: "Ollama",
+        defaultBaseUrl: "http://localhost:11434",
+    },
     openrouter: { label: "OpenRouter" },
     deepseek: { label: "DeepSeek" },
     siliconflow: {
         label: "SiliconFlow",
-        defaultBaseUrl: "https://api.siliconflow.com/v1",
+        defaultBaseUrl: "https://api.siliconflow.cn/v1",
     },
     sglang: {
         label: "SGLang",
@@ -99,7 +104,7 @@ export const PROVIDER_INFO: Record<
 }
 
 // Suggested models per provider for quick add
-export const SUGGESTED_MODELS: Record<ProviderName, string[]> = {
+export const SUGGESTED_MODELS: Partial<Record<ProviderName, string[]>> = {
     openai: [
         "gpt-5.2-pro",
         "gpt-5.2-chat-latest",

lib/utils.ts

@@ -1,6 +1,9 @@
 import { type ClassValue, clsx } from "clsx"
 import * as pako from "pako"
 import { twMerge } from "tailwind-merge"
+import type { DiagramOperation } from "@/components/chat/types"
+
+export type { DiagramOperation }
 
 export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs))
@@ -473,12 +476,6 @@ export function replaceNodes(currentXML: string, nodes: string): string {
 // ID-based Diagram Operations
 // ============================================================================
 
-export interface DiagramOperation {
-    operation: "update" | "add" | "delete"
-    cell_id: string
-    new_xml?: string
-}
-
 export interface OperationError {
     type: "update" | "add" | "delete"
     cellId: string

package.json

@@ -47,9 +47,9 @@
         "@langfuse/otel": "^4.4.4",
         "@langfuse/tracing": "^4.4.9",
         "@next/third-parties": "^16.0.6",
-        "@opennextjs/cloudflare": "1.14.7",
+        "@opennextjs/cloudflare": "1.14.8",
         "@openrouter/ai-sdk-provider": "^1.5.4",
-        "@opentelemetry/exporter-trace-otlp-http": "^0.208.0",
+        "@opentelemetry/exporter-trace-otlp-http": "^0.209.0",
         "@opentelemetry/sdk-trace-node": "^2.2.0",
         "@radix-ui/react-alert-dialog": "^1.1.15",
         "@radix-ui/react-collapsible": "^1.1.12",
@@ -69,11 +69,10 @@
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
         "idb": "^8.0.3",
-        "js-tiktoken": "^1.0.21",
         "jsonrepair": "^3.13.1",
         "lucide-react": "^0.562.0",
         "motion": "^12.23.25",
-        "nanoid": "^3.3.11",
+        "nanoid": "^5.0.0",
         "negotiator": "^1.0.0",
         "next": "^16.0.7",
         "ollama-ai-provider-v2": "^2.0.0",
@@ -138,7 +137,7 @@
         "vite-tsconfig-paths": "^6.0.3",
         "vitest": "^4.0.16",
         "wait-on": "^9.0.3",
-        "wrangler": "4.54.0"
+        "wrangler": "4.58.0"
     },
     "overrides": {
         "@openrouter/ai-sdk-provider": {

packages/claude-plugin/.claude-plugin/plugin.json

@@ -0,0 +1,11 @@
+{
+    "name": "next-ai-drawio",
+    "version": "1.0.0",
+    "description": "AI-powered Draw.io diagram generation with real-time browser preview. Create flowcharts, architecture diagrams, and more through natural language.",
+    "author": {
+        "name": "DayuanJiang"
+    },
+    "repository": "https://github.com/DayuanJiang/next-ai-draw-io",
+    "homepage": "https://next-ai-drawio.jiang.jp",
+    "license": "Apache-2.0"
+}

packages/claude-plugin/.mcp.json

@@ -0,0 +1,8 @@
+{
+    "mcpServers": {
+        "drawio": {
+            "command": "npx",
+            "args": ["@next-ai-drawio/mcp-server@latest"]
+        }
+    }
+}

packages/claude-plugin/README.md

@@ -0,0 +1,107 @@
+# Next AI Draw.io - Claude Code Plugin
+
+AI-powered Draw.io diagram generation with real-time browser preview for Claude Code.
+
+## Installation
+
+### From Plugin Directory (Coming Soon)
+
+Once approved, install via:
+```
+/plugin install next-ai-drawio
+```
+
+### Manual Installation
+
+```bash
+claude --plugin-dir /path/to/packages/claude-plugin
+```
+
+Or add the MCP server directly:
+```bash
+claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
+```
+
+## Features
+
+- **Real-time Preview**: Diagrams appear and update in your browser as Claude creates them
+- **Version History**: Restore previous diagram versions with visual thumbnails
+- **Natural Language**: Describe diagrams in plain text - flowcharts, architecture diagrams, etc.
+- **Edit Support**: Modify existing diagrams with natural language instructions
+- **Export**: Save diagrams as `.drawio` files
+- **Self-contained**: Embedded server, no external dependencies required
+
+## Use Case Examples
+
+### 1. Create Architecture Diagrams
+
+```
+Generate an AWS architecture diagram with Lambda, API Gateway, DynamoDB,
+and S3 for a serverless REST API
+```
+
+### 2. Flowchart Generation
+
+```
+Create a flowchart showing the CI/CD pipeline: code commit -> build ->
+test -> staging deploy -> production deploy with approval gates
+```
+
+### 3. System Design Documentation
+
+```
+Design a microservices e-commerce system with user service, product catalog,
+shopping cart, order processing, and payment gateway
+```
+
+### 4. Cloud Architecture (AWS/GCP/Azure)
+
+```
+Generate a GCP architecture diagram with Cloud Run, Cloud SQL, and
+Cloud Storage for a web application
+```
+
+### 5. Sequence Diagrams
+
+```
+Create a sequence diagram showing OAuth 2.0 authorization code flow
+between user, client app, auth server, and resource server
+```
+
+## Available Tools
+
+| Tool | Description |
+|------|-------------|
+| `start_session` | Opens browser with real-time diagram preview |
+| `create_new_diagram` | Create a new diagram from XML |
+| `edit_diagram` | Edit diagram by ID-based operations |
+| `get_diagram` | Get the current diagram XML |
+| `export_diagram` | Save diagram to a `.drawio` file |
+
+## How It Works
+
+```
+Claude Code <--stdio--> MCP Server <--http--> Browser (draw.io)
+```
+
+1. Ask Claude to create a diagram
+2. Claude calls `start_session` to open a browser window
+3. Claude generates diagram XML and sends it to the browser
+4. You see the diagram update in real-time!
+
+## Configuration
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `PORT` | `6002` | Port for the embedded HTTP server |
+| `DRAWIO_BASE_URL` | `https://embed.diagrams.net` | Base URL for draw.io (for self-hosted deployments) |
+
+## Links
+
+- [Homepage](https://next-ai-drawio.jiang.jp)
+- [GitHub Repository](https://github.com/DayuanJiang/next-ai-draw-io)
+- [MCP Server Documentation](https://github.com/DayuanJiang/next-ai-draw-io/tree/main/packages/mcp-server)
+
+## License
+
+Apache-2.0

packages/mcp-server/package-lock.json

@@ -1,18 +1,18 @@
 {
     "name": "@next-ai-drawio/mcp-server",
-    "version": "0.1.6",
+    "version": "0.1.12",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@next-ai-drawio/mcp-server",
-            "version": "0.1.6",
+            "version": "0.1.12",
             "license": "Apache-2.0",
             "dependencies": {
                 "@modelcontextprotocol/sdk": "^1.0.4",
                 "linkedom": "^0.18.0",
                 "open": "^11.0.0",
-                "zod": "^3.24.0"
+                "zod": "^4.0.0"
             },
             "bin": {
                 "next-ai-drawio-mcp": "dist/index.js"
@@ -481,9 +481,9 @@
             }
         },
         "node_modules/@modelcontextprotocol/sdk": {
-            "version": "1.25.1",
-            "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.25.1.tgz",
-            "integrity": "sha512-yO28oVFFC7EBoiKdAn+VqRm+plcfv4v0xp6osG/VsCB0NlPZWi87ajbCZZ8f/RvOFLEu7//rSRmuZZ7lMoe3gQ==",
+            "version": "1.25.2",
+            "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.25.2.tgz",
+            "integrity": "sha512-LZFeo4F9M5qOhC/Uc1aQSrBHxMrvxett+9KLHt7OhcExtoiRN9DKgbZffMP/nxjutWDQpfMDfP3nkHI4X9ijww==",
             "license": "MIT",
             "dependencies": {
                 "@hono/node-server": "^1.19.7",
@@ -520,9 +520,9 @@
             }
         },
         "node_modules/@types/node": {
-            "version": "24.10.4",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.4.tgz",
-            "integrity": "sha512-vnDVpYPMzs4wunl27jHrfmwojOGKya0xyM3sH+UE5iv5uPS6vX7UIoh6m+vQc5LGBq52HBKPIn/zcSZVzeDEZg==",
+            "version": "24.10.6",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.6.tgz",
+            "integrity": "sha512-B8h60xgJMR/xmgyX9fncRzEW9gCxoJjdenUhke2v1JGOd/V66KopmWrLPXi5oUI4VuiGK+d+HlXJjDRZMj21EQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -2051,9 +2051,9 @@
             }
         },
         "node_modules/zod": {
-            "version": "3.25.76",
-            "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
-            "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+            "version": "4.3.5",
+            "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.5.tgz",
+            "integrity": "sha512-k7Nwx6vuWx1IJ9Bjuf4Zt1PEllcwe7cls3VNzm4CQ1/hgtFUK2bRNG3rvnpPUhFjmqJKAKtjV576KnUkHocg/g==",
             "license": "MIT",
             "peer": true,
             "funding": {

packages/mcp-server/package.json

@@ -39,7 +39,7 @@
         "@modelcontextprotocol/sdk": "^1.0.4",
         "linkedom": "^0.18.0",
         "open": "^11.0.0",
-        "zod": "^3.24.0"
+        "zod": "^4.0.0"
     },
     "devDependencies": {
         "@types/node": "^24.0.0",

scripts/prepare-electron-build.mjs

@@ -38,4 +38,12 @@ const targetStaticDir = join(targetDir, ".next", "static")
 mkdirSync(targetStaticDir, { recursive: true })
 cpSync(staticDir, targetStaticDir, { recursive: true })
 
+// Copy public folder (required for favicon-white.svg and other assets)
+console.log("Copying public folder...")
+const publicDir = join(rootDir, "public")
+const targetPublicDir = join(targetDir, "public")
+if (existsSync(publicDir)) {
+    cpSync(publicDir, targetPublicDir, { recursive: true })
+}
+
 console.log("Done! Files prepared in electron-standalone/")

tests/unit/ai-providers.test.ts

@@ -1,5 +1,141 @@
 import { describe, expect, it } from "vitest"
-import { supportsImageInput, supportsPromptCaching } from "@/lib/ai-providers"
+import {
+    resolveBaseURL,
+    supportsImageInput,
+    supportsPromptCaching,
+} from "@/lib/ai-providers"
+
+describe("resolveBaseURL", () => {
+    const SERVER_BASE_URL = "https://server-proxy.example.com"
+    const USER_BASE_URL = "https://user-proxy.example.com"
+    const DEFAULT_BASE_URL = "https://api.provider.com/v1"
+    const USER_API_KEY = "user-api-key-123"
+
+    describe("when user provides their own API key", () => {
+        it("uses user's baseUrl when provided", () => {
+            const result = resolveBaseURL(
+                USER_API_KEY,
+                USER_BASE_URL,
+                SERVER_BASE_URL,
+                DEFAULT_BASE_URL,
+            )
+            expect(result).toBe(USER_BASE_URL)
+        })
+
+        it("uses default baseUrl when user provides no baseUrl", () => {
+            const result = resolveBaseURL(
+                USER_API_KEY,
+                null,
+                SERVER_BASE_URL,
+                DEFAULT_BASE_URL,
+            )
+            expect(result).toBe(DEFAULT_BASE_URL)
+        })
+
+        it("returns undefined when user provides no baseUrl and no default exists", () => {
+            const result = resolveBaseURL(
+                USER_API_KEY,
+                null,
+                SERVER_BASE_URL,
+                undefined,
+            )
+            expect(result).toBeUndefined()
+        })
+
+        it("does NOT use server's baseUrl even when available", () => {
+            const result = resolveBaseURL(
+                USER_API_KEY,
+                undefined,
+                SERVER_BASE_URL,
+                undefined,
+            )
+            // Should NOT return SERVER_BASE_URL
+            expect(result).not.toBe(SERVER_BASE_URL)
+            expect(result).toBeUndefined()
+        })
+
+        it("prefers user's baseUrl over default", () => {
+            const result = resolveBaseURL(
+                USER_API_KEY,
+                USER_BASE_URL,
+                SERVER_BASE_URL,
+                DEFAULT_BASE_URL,
+            )
+            expect(result).toBe(USER_BASE_URL)
+        })
+    })
+
+    describe("when using server credentials (no user API key)", () => {
+        it("uses user's baseUrl when provided (overrides server)", () => {
+            const result = resolveBaseURL(
+                null,
+                USER_BASE_URL,
+                SERVER_BASE_URL,
+                DEFAULT_BASE_URL,
+            )
+            expect(result).toBe(USER_BASE_URL)
+        })
+
+        it("falls back to server's baseUrl when no user baseUrl", () => {
+            const result = resolveBaseURL(
+                null,
+                null,
+                SERVER_BASE_URL,
+                DEFAULT_BASE_URL,
+            )
+            expect(result).toBe(SERVER_BASE_URL)
+        })
+
+        it("falls back to default when no user or server baseUrl", () => {
+            const result = resolveBaseURL(
+                null,
+                null,
+                undefined,
+                DEFAULT_BASE_URL,
+            )
+            expect(result).toBe(DEFAULT_BASE_URL)
+        })
+
+        it("returns undefined when no baseUrl available anywhere", () => {
+            const result = resolveBaseURL(null, null, undefined, undefined)
+            expect(result).toBeUndefined()
+        })
+
+        it("handles undefined apiKey same as null", () => {
+            const result = resolveBaseURL(
+                undefined,
+                null,
+                SERVER_BASE_URL,
+                DEFAULT_BASE_URL,
+            )
+            expect(result).toBe(SERVER_BASE_URL)
+        })
+    })
+
+    describe("edge cases", () => {
+        it("handles empty string apiKey as falsy (uses server config)", () => {
+            const result = resolveBaseURL(
+                "",
+                null,
+                SERVER_BASE_URL,
+                DEFAULT_BASE_URL,
+            )
+            // Empty string is falsy, so should use server config
+            expect(result).toBe(SERVER_BASE_URL)
+        })
+
+        it("handles empty string baseUrl as falsy", () => {
+            const result = resolveBaseURL(
+                USER_API_KEY,
+                "",
+                SERVER_BASE_URL,
+                DEFAULT_BASE_URL,
+            )
+            // Empty string baseUrl is falsy, should fall back to default
+            expect(result).toBe(DEFAULT_BASE_URL)
+        })
+    })
+})
 
 describe("supportsPromptCaching", () => {
     it("returns true for Claude models", () => {