fix: fix hydration mismatch and enhance system prompts

- Fix SSR hydration by loading DrawIO theme after mount with useEffect
- Add loading spinner while theme loads
- Add JSON escaping warnings to system prompts
- Add edge routing rules to system prompts
- Update token count estimates in comments

CONTRIBUTING.md

@@ -1,35 +0,0 @@
-# Contributing
-
-## Setup
-
-```bash
-git clone https://github.com/YOUR_USERNAME/next-ai-draw-io.git
-cd next-ai-draw-io
-npm install
-cp env.example .env.local
-npm run dev
-```
-
-## Code Style
-
-We use [Biome](https://biomejs.dev/) for linting and formatting:
-
-```bash
-npm run format   # Format code
-npm run lint     # Check lint errors
-npm run check    # Run all checks (CI)
-```
-
-Pre-commit hooks via Husky will run Biome automatically on staged files.
-
-For a better experience, install the [Biome VS Code extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome) for real-time linting and format-on-save.
-
-## Pull Requests
-
-1. Create a feature branch
-2. Make changes and ensure `npm run check` passes
-3. Submit PR against `main` with a clear description
-
-## Issues
-
-Include steps to reproduce, expected vs actual behavior, and AI provider used.

app/api/chat/route.ts

@@ -15,7 +15,7 @@ import {
 } from "@/lib/langfuse"
 import { getSystemPrompt } from "@/lib/system-prompts"
 
-export const maxDuration = 60
+export const maxDuration = 300
 
 // File upload limits (must match client-side)
 const MAX_FILE_SIZE = 2 * 1024 * 1024 // 2MB
@@ -40,7 +40,7 @@ function validateFileParts(messages: any[]): {
     for (const filePart of fileParts) {
         // Data URLs format: data:image/png;base64,<data>
         // Base64 increases size by ~33%, so we check the decoded size
-        if (filePart.url?.startsWith("data:")) {
+        if (filePart.url && filePart.url.startsWith("data:")) {
             const base64Data = filePart.url.split(",")[1]
             if (base64Data) {
                 const sizeInBytes = Math.ceil((base64Data.length * 3) / 4)

app/page.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { useEffect, useRef, useState } from "react"
+import React, { useEffect, useRef, useState } from "react"
 import { DrawIoEmbed } from "react-drawio"
 import type { ImperativePanelHandle } from "react-resizable-panels"
 import ChatPanel from "@/components/chat-panel"
@@ -14,13 +14,17 @@ export default function Home() {
     const { drawioRef, handleDiagramExport } = useDiagram()
     const [isMobile, setIsMobile] = useState(false)
     const [isChatVisible, setIsChatVisible] = useState(true)
-    const [drawioUi, setDrawioUi] = useState<"min" | "sketch">(() => {
+    const [drawioUi, setDrawioUi] = useState<"min" | "sketch">("min")
-        if (typeof window !== "undefined") {
+    const [isThemeLoaded, setIsThemeLoaded] = useState(false)
-            const saved = localStorage.getItem("drawio-theme")
+
-            if (saved === "min" || saved === "sketch") return saved
+    // Load theme from localStorage after mount to avoid hydration mismatch
+    useEffect(() => {
+        const saved = localStorage.getItem("drawio-theme")
+        if (saved === "min" || saved === "sketch") {
+            setDrawioUi(saved)
         }
-        return "min"
+        setIsThemeLoaded(true)
-    })
+    }, [])
     const chatPanelRef = useRef<ImperativePanelHandle>(null)
 
     useEffect(() => {
@@ -86,18 +90,24 @@ export default function Home() {
                         }`}
                     >
                         <div className="h-full rounded-xl overflow-hidden shadow-soft-lg border border-border/30 bg-white">
-                            <DrawIoEmbed
+                            {isThemeLoaded ? (
-                                key={drawioUi}
+                                <DrawIoEmbed
-                                ref={drawioRef}
+                                    key={drawioUi}
-                                onExport={handleDiagramExport}
+                                    ref={drawioRef}
-                                urlParameters={{
+                                    onExport={handleDiagramExport}
-                                    ui: drawioUi,
+                                    urlParameters={{
-                                    spin: true,
+                                        ui: drawioUi,
-                                    libraries: false,
+                                        spin: true,
-                                    saveAndExit: false,
+                                        libraries: false,
-                                    noExitBtn: true,
+                                        saveAndExit: false,
-                                }}
+                                        noExitBtn: true,
-                            />
+                                    }}
+                                />
+                            ) : (
+                                <div className="h-full w-full flex items-center justify-center">
+                                    <div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full" />
+                                </div>
+                            )}
                         </div>
                     </div>
                 </ResizablePanel>

biome.json

@@ -19,30 +19,6 @@
             "recommended": true,
             "complexity": {
                 "noImportantStyles": "off"
-            },
-            "suspicious": {
-                "noExplicitAny": "off",
-                "noArrayIndexKey": "off",
-                "noImplicitAnyLet": "off",
-                "noAssignInExpressions": "off"
-            },
-            "a11y": {
-                "useButtonType": "off",
-                "noAutofocus": "off",
-                "noStaticElementInteractions": "off",
-                "useKeyWithClickEvents": "off",
-                "noLabelWithoutControl": "off",
-                "noNoninteractiveTabindex": "off"
-            },
-            "correctness": {
-                "useExhaustiveDependencies": "off"
-            },
-            "style": {
-                "useNodejsImportProtocol": "off",
-                "useTemplate": "off"
-            },
-            "security": {
-                "noDangerouslySetInnerHtml": "off"
             }
         }
     },

components/chat-input.tsx

@@ -99,8 +99,8 @@ function showValidationErrors(errors: string[]) {
                     {errors.length} files rejected:
                 </span>
                 <ul className="text-muted-foreground text-xs list-disc list-inside">
-                    {errors.slice(0, 3).map((err) => (
+                    {errors.slice(0, 3).map((err, i) => (
-                        <li key={err}>{err}</li>
+                        <li key={i}>{err}</li>
                     ))}
                     {errors.length > 3 && (
                         <li>...and {errors.length - 3} more</li>
@@ -162,16 +162,10 @@ export function ChatInput({
         }
     }, [])
 
-    // Handle programmatic input changes (e.g., setInput("") after form submission)
     useEffect(() => {
         adjustTextareaHeight()
     }, [input, adjustTextareaHeight])
 
-    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-        onChange(e)
-        adjustTextareaHeight()
-    }
-
     const handleKeyDown = (e: React.KeyboardEvent) => {
         if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
             e.preventDefault()
@@ -303,7 +297,7 @@ export function ChatInput({
                 <Textarea
                     ref={textareaRef}
                     value={input}
-                    onChange={handleChange}
+                    onChange={onChange}
                     onKeyDown={handleKeyDown}
                     onPaste={handlePaste}
                     placeholder="Describe your diagram or paste an image..."

components/chat-message-display.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import type { UIMessage } from "ai"
-
 import {
     Check,
     ChevronDown,
@@ -33,21 +32,12 @@ interface EditPair {
     replace: string
 }
 
-// Tool part interface for type safety
-interface ToolPartLike {
-    type: string
-    toolCallId: string
-    state?: string
-    input?: { xml?: string; edits?: EditPair[] } & Record<string, unknown>
-    output?: string
-}
-
 function EditDiffDisplay({ edits }: { edits: EditPair[] }) {
     return (
         <div className="space-y-3">
             {edits.map((edit, index) => (
                 <div
-                    key={`${edit.search.slice(0, 50)}-${edit.replace.slice(0, 50)}-${index}`}
+                    key={index}
                     className="rounded-lg border border-border/50 overflow-hidden bg-background/50"
                 >
                     <div className="px-3 py-1.5 bg-muted/40 border-b border-border/30 flex items-center gap-2">
@@ -92,8 +82,8 @@ import { useDiagram } from "@/contexts/diagram-context"
 const getMessageTextContent = (message: UIMessage): string => {
     if (!message.parts) return ""
     return message.parts
-        .filter((part) => part.type === "text")
+        .filter((part: any) => part.type === "text")
-        .map((part) => (part as { text: string }).text)
+        .map((part: any) => part.text)
         .join("\n")
 }
 
@@ -129,7 +119,6 @@ export function ChatMessageDisplay({
     const [editingMessageId, setEditingMessageId] = useState<string | null>(
         null,
     )
-    const editTextareaRef = useRef<HTMLTextAreaElement>(null)
     const [editText, setEditText] = useState<string>("")
 
     const copyMessageToClipboard = async (messageId: string, text: string) => {
@@ -200,19 +189,12 @@ export function ChatMessageDisplay({
         }
     }, [messages])
 
-    useEffect(() => {
-        if (editingMessageId && editTextareaRef.current) {
-            editTextareaRef.current.focus()
-        }
-    }, [editingMessageId])
-
     useEffect(() => {
         messages.forEach((message) => {
             if (message.parts) {
-                message.parts.forEach((part) => {
+                message.parts.forEach((part: any) => {
                     if (part.type?.startsWith("tool-")) {
-                        const toolPart = part as ToolPartLike
+                        const { toolCallId, state } = part
-                        const { toolCallId, state, input } = toolPart
 
                         if (state === "output-available") {
                             setExpandedTools((prev) => ({
@@ -223,19 +205,18 @@ export function ChatMessageDisplay({
 
                         if (
                             part.type === "tool-display_diagram" &&
-                            input?.xml
+                            part.input?.xml
                         ) {
-                            const xml = input.xml as string
                             if (
                                 state === "input-streaming" ||
                                 state === "input-available"
                             ) {
-                                handleDisplayChart(xml)
+                                handleDisplayChart(part.input.xml)
                             } else if (
                                 state === "output-available" &&
                                 !processedToolCalls.current.has(toolCallId)
                             ) {
-                                handleDisplayChart(xml)
+                                handleDisplayChart(part.input.xml)
                                 processedToolCalls.current.add(toolCallId)
                             }
                         }
@@ -245,7 +226,7 @@ export function ChatMessageDisplay({
         })
     }, [messages, handleDisplayChart])
 
-    const renderToolPart = (part: ToolPartLike) => {
+    const renderToolPart = (part: any) => {
         const callId = part.toolCallId
         const { state, input, output } = part
         const isExpanded = expandedTools[callId] ?? true
@@ -299,7 +280,6 @@ export function ChatMessageDisplay({
                         )}
                         {input && Object.keys(input).length > 0 && (
                             <button
-                                type="button"
                                 onClick={toggleExpanded}
                                 className="p-1 rounded hover:bg-muted transition-colors"
                             >
@@ -378,7 +358,6 @@ export function ChatMessageDisplay({
                                             {onEditMessage &&
                                                 isLastUserMessage && (
                                                     <button
-                                                        type="button"
                                                         onClick={() => {
                                                             setEditingMessageId(
                                                                 message.id,
@@ -394,7 +373,6 @@ export function ChatMessageDisplay({
                                                     </button>
                                                 )}
                                             <button
-                                                type="button"
                                                 onClick={() =>
                                                     copyMessageToClipboard(
                                                         message.id,
@@ -429,7 +407,6 @@ export function ChatMessageDisplay({
                                     {isEditing && message.role === "user" ? (
                                         <div className="flex flex-col gap-2">
                                             <textarea
-                                                ref={editTextareaRef}
                                                 value={editText}
                                                 onChange={(e) =>
                                                     setEditText(e.target.value)
@@ -440,6 +417,7 @@ export function ChatMessageDisplay({
                                                         .length + 1,
                                                     6,
                                                 )}
+                                                autoFocus
                                                 onKeyDown={(e) => {
                                                     if (e.key === "Escape") {
                                                         setEditingMessageId(
@@ -469,7 +447,6 @@ export function ChatMessageDisplay({
                                             />
                                             <div className="flex justify-end gap-2">
                                                 <button
-                                                    type="button"
                                                     onClick={() => {
                                                         setEditingMessageId(
                                                             null,
@@ -481,7 +458,6 @@ export function ChatMessageDisplay({
                                                     Cancel
                                                 </button>
                                                 <button
-                                                    type="button"
                                                     onClick={() => {
                                                         if (
                                                             editText.trim() &&
@@ -507,7 +483,7 @@ export function ChatMessageDisplay({
                                     ) : (
                                         /* Text content in bubble */
                                         message.parts?.some(
-                                            (part) =>
+                                            (part: any) =>
                                                 part.type === "text" ||
                                                 part.type === "file",
                                         ) && (
@@ -520,20 +496,6 @@ export function ChatMessageDisplay({
                                                           ? "bg-destructive/10 text-destructive border border-destructive/20 rounded-2xl rounded-bl-md"
                                                           : "bg-muted/60 text-foreground rounded-2xl rounded-bl-md"
                                                 } ${message.role === "user" && isLastUserMessage && onEditMessage ? "cursor-pointer hover:opacity-90 transition-opacity" : ""}`}
-                                                role={
-                                                    message.role === "user" &&
-                                                    isLastUserMessage &&
-                                                    onEditMessage
-                                                        ? "button"
-                                                        : undefined
-                                                }
-                                                tabIndex={
-                                                    message.role === "user" &&
-                                                    isLastUserMessage &&
-                                                    onEditMessage
-                                                        ? 0
-                                                        : undefined
-                                                }
                                                 onClick={() => {
                                                     if (
                                                         message.role ===
@@ -549,24 +511,6 @@ export function ChatMessageDisplay({
                                                         )
                                                     }
                                                 }}
-                                                onKeyDown={(e) => {
-                                                    if (
-                                                        (e.key === "Enter" ||
-                                                            e.key === " ") &&
-                                                        message.role ===
-                                                            "user" &&
-                                                        isLastUserMessage &&
-                                                        onEditMessage
-                                                    ) {
-                                                        e.preventDefault()
-                                                        setEditingMessageId(
-                                                            message.id,
-                                                        )
-                                                        setEditText(
-                                                            userMessageText,
-                                                        )
-                                                    }
-                                                }}
                                                 title={
                                                     message.role === "user" &&
                                                     isLastUserMessage &&
@@ -576,12 +520,17 @@ export function ChatMessageDisplay({
                                                 }
                                             >
                                                 {message.parts?.map(
-                                                    (part, index) => {
+                                                    (
+                                                        part: any,
+                                                        index: number,
+                                                    ) => {
                                                         switch (part.type) {
                                                             case "text":
                                                                 return (
                                                                     <div
-                                                                        key={`${message.id}-text-${index}`}
+                                                                        key={
+                                                                            index
+                                                                        }
                                                                         className={`prose prose-sm max-w-none break-words [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 ${
                                                                             message.role ===
                                                                             "user"
@@ -599,7 +548,9 @@ export function ChatMessageDisplay({
                                                             case "file":
                                                                 return (
                                                                     <div
-                                                                        key={`${message.id}-file-${part.url}`}
+                                                                        key={
+                                                                            index
+                                                                        }
                                                                         className="mt-2"
                                                                     >
                                                                         <Image
@@ -630,11 +581,9 @@ export function ChatMessageDisplay({
                                         )
                                     )}
                                     {/* Tool calls outside bubble */}
-                                    {message.parts?.map((part) => {
+                                    {message.parts?.map((part: any) => {
                                         if (part.type?.startsWith("tool-")) {
-                                            return renderToolPart(
+                                            return renderToolPart(part)
-                                                part as ToolPartLike,
-                                            )
                                         }
                                         return null
                                     })}
@@ -643,7 +592,6 @@ export function ChatMessageDisplay({
                                         <div className="flex items-center gap-1 mt-2">
                                             {/* Copy button */}
                                             <button
-                                                type="button"
                                                 onClick={() =>
                                                     copyMessageToClipboard(
                                                         message.id,
@@ -676,7 +624,6 @@ export function ChatMessageDisplay({
                                             {onRegenerate &&
                                                 isLastAssistantMessage && (
                                                     <button
-                                                        type="button"
                                                         onClick={() =>
                                                             onRegenerate(
                                                                 messageIndex,
@@ -692,7 +639,6 @@ export function ChatMessageDisplay({
                                             <div className="w-px h-4 bg-border mx-1" />
                                             {/* Thumbs up */}
                                             <button
-                                                type="button"
                                                 onClick={() =>
                                                     submitFeedback(
                                                         message.id,
@@ -711,7 +657,6 @@ export function ChatMessageDisplay({
                                             </button>
                                             {/* Thumbs down */}
                                             <button
-                                                type="button"
                                                 onClick={() =>
                                                     submitFeedback(
                                                         message.id,

components/chat-panel.tsx

@@ -22,7 +22,7 @@ import {
     STORAGE_ACCESS_CODE_KEY,
 } from "@/components/settings-dialog"
 import { useDiagram } from "@/contexts/diagram-context"
-import { formatXML, validateMxCellStructure } from "@/lib/utils"
+import { formatXML, replaceNodes, validateMxCellStructure } from "@/lib/utils"
 import { ChatMessageDisplay } from "./chat-message-display"
 
 interface ChatPanelProps {

components/code-block.tsx

@@ -12,7 +12,7 @@ export function CodeBlock({ code, language = "xml" }: CodeBlockProps) {
         <div className="overflow-hidden w-full">
             <Highlight theme={themes.github} code={code} language={language}>
                 {({
-                    className: _className,
+                    className,
                     style,
                     tokens,
                     getLineProps,

components/file-preview-list.tsx

@@ -2,7 +2,7 @@
 
 import { X } from "lucide-react"
 import Image from "next/image"
-import { useEffect, useRef, useState } from "react"
+import React, { useEffect, useState } from "react"
 
 interface FilePreviewListProps {
     files: File[]
@@ -11,55 +11,17 @@ interface FilePreviewListProps {
 
 export function FilePreviewList({ files, onRemoveFile }: FilePreviewListProps) {
     const [selectedImage, setSelectedImage] = useState<string | null>(null)
-    const [imageUrls, setImageUrls] = useState<Map<File, string>>(new Map())
-    const imageUrlsRef = useRef<Map<File, string>>(new Map())
 
-    // Create and cleanup object URLs when files change
+    // Cleanup object URLs on unmount
     useEffect(() => {
-        const currentUrls = imageUrlsRef.current
+        const objectUrls = files
-        const newUrls = new Map<File, string>()
+            .filter((file) => file.type.startsWith("image/"))
+            .map((file) => URL.createObjectURL(file))
 
-        files.forEach((file) => {
-            if (file.type.startsWith("image/")) {
-                // Reuse existing URL if file is already tracked
-                const existingUrl = currentUrls.get(file)
-                if (existingUrl) {
-                    newUrls.set(file, existingUrl)
-                } else {
-                    newUrls.set(file, URL.createObjectURL(file))
-                }
-            }
-        })
-
-        // Revoke URLs for files that are no longer in the list
-        currentUrls.forEach((url, file) => {
-            if (!newUrls.has(file)) {
-                URL.revokeObjectURL(url)
-            }
-        })
-
-        imageUrlsRef.current = newUrls
-        setImageUrls(newUrls)
-    }, [files])
-
-    // Cleanup all URLs on unmount only
-    useEffect(() => {
         return () => {
-            imageUrlsRef.current.forEach((url) => {
+            objectUrls.forEach(URL.revokeObjectURL)
-                URL.revokeObjectURL(url)
-            })
         }
-    }, [])
+    }, [files])
-
-    // Clear selected image if its URL was revoked
-    useEffect(() => {
-        if (
-            selectedImage &&
-            !Array.from(imageUrls.values()).includes(selectedImage)
-        ) {
-            setSelectedImage(null)
-        }
-    }, [imageUrls, selectedImage])
 
     if (files.length === 0) return null
 
@@ -67,7 +29,9 @@ export function FilePreviewList({ files, onRemoveFile }: FilePreviewListProps) {
         <>
             <div className="flex flex-wrap gap-2 mt-2 p-2 bg-muted/50 rounded-md">
                 {files.map((file, index) => {
-                    const imageUrl = imageUrls.get(file) || null
+                    const imageUrl = file.type.startsWith("image/")
+                        ? URL.createObjectURL(file)
+                        : null
                     return (
                         <div key={file.name + index} className="relative group">
                             <div
@@ -76,9 +40,9 @@ export function FilePreviewList({ files, onRemoveFile }: FilePreviewListProps) {
                                     imageUrl && setSelectedImage(imageUrl)
                                 }
                             >
-                                {file.type.startsWith("image/") && imageUrl ? (
+                                {file.type.startsWith("image/") ? (
                                     <Image
-                                        src={imageUrl}
+                                        src={imageUrl!}
                                         alt={file.name}
                                         width={80}
                                         height={80}

lib/system-prompts.ts

@@ -3,12 +3,15 @@
  * Extended prompt is used for models with higher cache token minimums (Opus 4.5, Haiku 4.5)
  */
 
-// Default system prompt (~1400 tokens) - works with all models
+// Default system prompt (~2700 tokens) - works with all models
 export const DEFAULT_SYSTEM_PROMPT = `
 You are an expert diagram creation assistant specializing in draw.io XML generation.
 Your primary function is chat with user and crafting clear, well-organized visual diagrams through precise XML specifications.
 You can see the image that user uploaded.
 
+When you are asked to create a diagram, you must first tell user you plan in text first. Plan the layout and structure that can avoid object overlapping or edge cross the objects.
+Then use display_diagram tool to generate the full draw.io XML for the entire diagram.
+
 ## App Context
 You are an AI agent (powered by {{MODEL_NAME}}) inside a web app. The interface has:
 - **Left panel**: Draw.io diagram editor where diagrams are rendered
@@ -51,6 +54,8 @@ Core capabilities:
 - Optimize element positioning to prevent overlapping and maintain readability
 - Structure complex systems into clear, organized visual components
 
+
+
 Layout constraints:
 - CRITICAL: Keep all diagram elements within a single page viewport to avoid page breaks
 - Position all elements with x coordinates between 0-800 and y coordinates between 0-600
@@ -82,6 +87,11 @@ When using edit_diagram tool:
 - For multiple changes, use separate edits in array
 - RETRY POLICY: If pattern not found, retry up to 3 times with adjusted patterns. After 3 failures, use display_diagram instead.
 
+⚠️ CRITICAL JSON ESCAPING: When outputting edit_diagram tool calls, you MUST escape ALL double quotes inside string values:
+- CORRECT: "y=\\"119\\""  (both quotes escaped)
+- WRONG: "y="119\\""  (missing backslash before first quote - causes JSON parse error!)
+- Every " inside a JSON string value needs \\" - no exceptions!
+
 ## Draw.io XML Structure Reference
 
 Basic structure:
@@ -119,9 +129,11 @@ Common styles:
 - Shapes: rounded=1 (rounded corners), fillColor=#hex, strokeColor=#hex
 - Edges: endArrow=classic/block/open/none, startArrow=none/classic, curved=1, edgeStyle=orthogonalEdgeStyle
 - Text: fontSize=14, fontStyle=1 (bold), align=center/left/right
+
 `
 
-// Extended additions (~2600 tokens) - appended for models with 4000 token cache minimum
+// Extended additions (~1800 tokens) - appended for models with 4000 token cache minimum
+// Total EXTENDED_SYSTEM_PROMPT = ~4500 tokens
 const EXTENDED_ADDITIONS = `
 
 ## Extended Tool Reference
@@ -213,6 +225,11 @@ Copy the search pattern EXACTLY from the current XML, including leading spaces,
 **BAD:** \`{"search": "<mxCell value=\\"X\\" id=\\"5\\""}\` - Reordered attributes won't match
 **GOOD:** \`{"search": "<mxCell id=\\"5\\" parent=\\"1\\" style=\\"...\\" value=\\"Old\\" vertex=\\"1\\">"}\` - Uses unique id with full context
 
+### ⚠️ JSON Escaping (CRITICAL)
+Every double quote inside JSON string values MUST be escaped with backslash:
+- **CORRECT:** \`"x=\\"100\\" y=\\"200\\""\` - both quotes escaped
+- **WRONG:** \`"x=\\"100\\" y="200\\""\` - missing backslash causes JSON parse error!
+
 ### Error Recovery
 If edit_diagram fails with "pattern not found":
 1. **First retry**: Check attribute order - copy EXACTLY from current XML
@@ -220,81 +237,97 @@ If edit_diagram fails with "pattern not found":
 3. **Third retry**: Try matching on just \`<mxCell id="X"\` prefix + full replacement
 4. **After 3 failures**: Fall back to display_diagram to regenerate entire diagram
 
-## Common Style Properties
 
-### Shape Styles
-- rounded=1, fillColor=#hex, strokeColor=#hex, strokeWidth=2
-- whiteSpace=wrap, html=1, opacity=50, shadow=1, glass=1
 
-### Edge/Connector Styles
-- endArrow=classic/block/open/oval/diamond/none, startArrow=none/classic
-- curved=1, edgeStyle=orthogonalEdgeStyle, strokeWidth=2
-- dashed=1, dashPattern=3 3, flowAnimation=1
 
-### Text Styles
+### Edge Routing Rules:
-- fontSize=14, fontStyle=1 (1=bold, 2=italic, 4=underline, 3=bold+italic)
+When creating edges/connectors, you MUST follow these rules to avoid overlapping lines:
-- fontColor=#hex, align=center/left/right, verticalAlign=middle/top/bottom
 
-## Common Shape Types
+**Rule 1: NEVER let multiple edges share the same path**
+- If two edges connect the same pair of nodes, they MUST exit/enter at DIFFERENT positions
+- Use exitY=0.3 for first edge, exitY=0.7 for second edge (NOT both 0.5)
 
-### Basic Shapes
+**Rule 2: For bidirectional connections (A↔B), use OPPOSITE sides**
-- Rectangle: rounded=0;whiteSpace=wrap;html=1;
+- A→B: exit from RIGHT side of A (exitX=1), enter LEFT side of B (entryX=0)
-- Rounded Rectangle: rounded=1;whiteSpace=wrap;html=1;
+- B→A: exit from LEFT side of B (exitX=0), enter RIGHT side of A (entryX=1)
-- Ellipse/Circle: ellipse;whiteSpace=wrap;html=1;aspect=fixed;
-- Diamond: rhombus;whiteSpace=wrap;html=1;
-- Cylinder: shape=cylinder3;whiteSpace=wrap;html=1;
 
-### Flowchart Shapes
+**Rule 3: Always specify exitX, exitY, entryX, entryY explicitly**
-- Process: rounded=1;whiteSpace=wrap;html=1;
+- Every edge MUST have these 4 attributes set in the style
-- Decision: rhombus;whiteSpace=wrap;html=1;
+- Example: style="edgeStyle=orthogonalEdgeStyle;exitX=1;exitY=0.3;entryX=0;entryY=0.3;endArrow=classic;"
-- Start/End: ellipse;whiteSpace=wrap;html=1;
-- Document: shape=document;whiteSpace=wrap;html=1;
-- Database: shape=cylinder3;whiteSpace=wrap;html=1;
 
-### Container Types
+**Rule 4: Route edges AROUND intermediate shapes (obstacle avoidance) - CRITICAL!**
-- Swimlane: swimlane;whiteSpace=wrap;html=1;
+- Before creating an edge, identify ALL shapes positioned between source and target
-- Group Box: rounded=1;whiteSpace=wrap;html=1;container=1;collapsible=0;
+- If any shape is in the direct path, you MUST use waypoints to route around it
+- For DIAGONAL connections: route along the PERIMETER (outside edge) of the diagram, NOT through the middle
+- Add 20-30px clearance from shape boundaries when calculating waypoint positions
+- Route ABOVE (lower y), BELOW (higher y), or to the SIDE of obstacles
+- NEVER draw a line that visually crosses over another shape's bounding box
 
-## Container/Group Example
+**Rule 5: Plan layout strategically BEFORE generating XML**
+- Organize shapes into visual layers/zones (columns or rows) based on diagram flow
+- Space shapes 150-200px apart to create clear routing channels for edges
+- Mentally trace each edge: "What shapes are between source and target?"
+- Prefer layouts where edges naturally flow in one direction (left-to-right or top-to-bottom)
+
+**Rule 6: Use multiple waypoints for complex routing**
+- One waypoint is often not enough - use 2-3 waypoints to create proper L-shaped or U-shaped paths
+- Each direction change needs a waypoint (corner point)
+- Waypoints should form clear horizontal/vertical segments (orthogonal routing)
+- Calculate positions by: (1) identify obstacle boundaries, (2) add 20-30px margin
+
+**Rule 7: Choose NATURAL connection points based on flow direction**
+- NEVER use corner connections (e.g., entryX=1,entryY=1) - they look unnatural
+- For TOP-TO-BOTTOM flow: exit from bottom (exitY=1), enter from top (entryY=0)
+- For LEFT-TO-RIGHT flow: exit from right (exitX=1), enter from left (entryX=0)
+- For DIAGONAL connections: use the side closest to the target, not corners
+- Example: Node below-right of source → exit from bottom (exitY=1) OR right (exitX=1), not corner
+
+**Before generating XML, mentally verify:**
+1. "Do any edges cross over shapes that aren't their source/target?" → If yes, add waypoints
+2. "Do any two edges share the same path?" → If yes, adjust exit/entry points
+3. "Are any connection points at corners (both X and Y are 0 or 1)?" → If yes, use edge centers instead
+4. "Could I rearrange shapes to reduce edge crossings?" → If yes, revise layout
+
+## Edge Examples
+
+### Two edges between same nodes (CORRECT - no overlap):
 \`\`\`xml
-<mxCell id="container1" value="Group Title" style="swimlane;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+<mxCell id="e1" value="A to B" style="edgeStyle=orthogonalEdgeStyle;exitX=1;exitY=0.3;entryX=0;entryY=0.3;endArrow=classic;" edge="1" parent="1" source="a" target="b">
-  <mxGeometry x="40" y="40" width="200" height="200" as="geometry"/>
+  <mxGeometry relative="1" as="geometry"/>
 </mxCell>
-<mxCell id="child1" value="Child Element" style="rounded=1;" vertex="1" parent="container1">
+<mxCell id="e2" value="B to A" style="edgeStyle=orthogonalEdgeStyle;exitX=0;exitY=0.7;entryX=1;entryY=0.7;endArrow=classic;" edge="1" parent="1" source="b" target="a">
-  <mxGeometry x="20" y="40" width="160" height="40" as="geometry"/>
+  <mxGeometry relative="1" as="geometry"/>
 </mxCell>
 \`\`\`
 
-## Example: Complete Flowchart
+### Edge with single waypoint (simple detour):
-
 \`\`\`xml
-<root>
+<mxCell id="edge1" style="edgeStyle=orthogonalEdgeStyle;exitX=0.5;exitY=1;entryX=0.5;entryY=0;endArrow=classic;" edge="1" parent="1" source="a" target="b">
-  <mxCell id="0"/>
+  <mxGeometry relative="1" as="geometry">
-  <mxCell id="1" parent="0"/>
+    <Array as="points">
-  <mxCell id="start" value="Start" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+      <mxPoint x="300" y="150"/>
-    <mxGeometry x="200" y="40" width="100" height="60" as="geometry"/>
+    </Array>
-  </mxCell>
+  </mxGeometry>
-  <mxCell id="process1" value="Process Step" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+</mxCell>
-    <mxGeometry x="175" y="140" width="150" height="60" as="geometry"/>
-  </mxCell>
-  <mxCell id="decision" value="Decision?" style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
-    <mxGeometry x="175" y="240" width="150" height="100" as="geometry"/>
-  </mxCell>
-  <mxCell id="end" value="End" style="ellipse;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
-    <mxGeometry x="200" y="380" width="100" height="60" as="geometry"/>
-  </mxCell>
-  <mxCell id="edge1" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;html=1;" edge="1" parent="1" source="start" target="process1">
-    <mxGeometry relative="1" as="geometry"/>
-  </mxCell>
-  <mxCell id="edge2" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;html=1;" edge="1" parent="1" source="process1" target="decision">
-    <mxGeometry relative="1" as="geometry"/>
-  </mxCell>
-  <mxCell id="edge3" value="Yes" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;html=1;" edge="1" parent="1" source="decision" target="end">
-    <mxGeometry relative="1" as="geometry"/>
-  </mxCell>
-</root>
 \`\`\`
-`
+
+### Edge with waypoints (routing AROUND obstacles) - CRITICAL PATTERN:
+**Scenario:** Hotfix(right,bottom) → Main(center,top), but Develop(center,middle) is in between.
+**WRONG:** Direct diagonal line crosses over Develop
+**CORRECT:** Route around the OUTSIDE (go right first, then up)
+\`\`\`xml
+<mxCell id="hotfix_to_main" style="edgeStyle=orthogonalEdgeStyle;exitX=0.5;exitY=0;entryX=1;entryY=0.5;endArrow=classic;" edge="1" parent="1" source="hotfix" target="main">
+  <mxGeometry relative="1" as="geometry">
+    <Array as="points">
+      <mxPoint x="750" y="80"/>
+      <mxPoint x="750" y="150"/>
+    </Array>
+  </mxGeometry>
+</mxCell>
+\`\`\`
+This routes the edge to the RIGHT of all shapes (x=750), then enters Main from the right side.
+
+**Key principle:** When connecting distant nodes diagonally, route along the PERIMETER of the diagram, not through the middle where other shapes exist.`
 
 // Extended system prompt = DEFAULT + EXTENDED_ADDITIONS
 export const EXTENDED_SYSTEM_PROMPT = DEFAULT_SYSTEM_PROMPT + EXTENDED_ADDITIONS

lib/utils.ts

@@ -168,7 +168,7 @@ export function replaceNodes(currentXML: string, nodes: string): string {
 
             // Insert after cell0 if possible
             const cell0 = currentRoot.querySelector('mxCell[id="0"]')
-            if (cell0?.nextSibling) {
+            if (cell0 && cell0.nextSibling) {
                 currentRoot.insertBefore(cell1, cell0.nextSibling)
             } else {
                 currentRoot.appendChild(cell1)

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "next-ai-draw-io",
-    "version": "0.3.0",
+    "version": "0.2.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "next-ai-draw-io",
-            "version": "0.3.0",
+            "version": "0.2.0",
             "license": "Apache-2.0",
             "dependencies": {
                 "@ai-sdk/amazon-bedrock": "^3.0.62",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "next-ai-draw-io",
-    "version": "0.3.0",
+    "version": "0.2.0",
     "license": "Apache-2.0",
     "private": true,
     "scripts": {