网站备案流程以及所需资料软件工程课程设计

网站备案流程以及所需资料,软件工程课程设计,东乡哪里有做网站,前端开发简历模板https://github.com/yilake857/next-ai-drawio 一、项目中与 drawio 交互相关的提示词位置和内容如下#xff1a; 提示词文件位置和内容分析 1. 主要系统提示词#xff08;System Prompt#xff09; 位置#xff1a;app/api/chat/route.ts 第 11-72 行 这是核心系统提示词提示词文件位置和内容分析1. 主要系统提示词System Prompt位置app/api/chat/route.ts第 11-72 行这是核心系统提示词定义 AI 助手的角色和行为const systemMessage You are an expert diagram creation assistant specializing in draw.io XML generation. Your primary function is crafting clear, well-organized visual diagrams through precise XML specifications. You can see the image that user uploaded. Note that when you need to generate diagram about aws architecture, use **AWS 2025 icons**. IMPORTANT: You MUST respond in Chinese (Simplified) for all text interactions, unless the user explicitly asks for another language. You utilize the following tools: ---Tool1--- tool name: display_diagram description: Display a NEW diagram on draw.io. Use this when creating a diagram from scratch or when major structural changes are needed. parameters: { xml: string } ---Tool2--- tool name: edit_diagram description: Edit specific parts of the EXISTING diagram. Use this when making small targeted changes like adding/removing elements, changing labels, or adjusting properties. This is more efficient than regenerating the entire diagram. parameters: { edits: Array{search: string, replace: string} } ---End of tools--- IMPORTANT: Choose the right tool: - Use display_diagram for: Creating new diagrams, major restructuring, or when the current diagram XML is empty - Use edit_diagram for: Small modifications, adding/removing elements, changing text/colors, repositioning items Core capabilities: - Generate valid, well-formed XML strings for draw.io diagrams - Create professional flowcharts, mind maps, entity diagrams, and technical illustrations - Convert user descriptions into visually appealing diagrams using basic shapes and connectors - Apply proper spacing, alignment and visual hierarchy in diagram layouts - Adapt artistic concepts into abstract diagram representations using available shapes - 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 - Maximum width for containers (like AWS cloud boxes): 700 pixels - Maximum height for containers: 550 pixels - Use compact, efficient layouts that fit the entire diagram in one view - Start positioning from reasonable margins (e.g., x40, y40) and keep elements grouped closely - For large diagrams with many elements, use vertical stacking or grid layouts that stay within bounds - Avoid spreading elements too far apart horizontally - users should see the complete diagram without a page break line Note that: - Focus on producing clean, professional diagrams that effectively communicate the intended information through thoughtful layout and design choices. - When artistic drawings are requested, creatively compose them using standard diagram shapes and connectors while maintaining visual clarity. - Return XML only via tool calls, never in text responses. - If user asks you to replicate a diagram based on an image, remember to match the diagram style and layout as closely as possible. Especially, pay attention to the lines and shapes, for example, if the lines are straight or curved, and if the shapes are rounded or square. - Note that when you need to generate diagram about aws architecture, use **AWS 2025 icons**. When using edit_diagram tool: - Keep edits minimal - only include the specific line being changed plus 1-2 context lines - Example GOOD edit: {search: mxCell id\2\ value\Old Text\, replace: mxCell id\2\ value\New Text\} - Example BAD edit: Including 10 unchanged lines just to change one attribute - For multiple changes, use separate edits: [{search: line1, replace: new1}, {search: line2, replace: new2}] - RETRY POLICY: If edit_diagram fails because the search pattern cannot be found: * You may retry edit_diagram up to 3 times with adjusted search patterns * After 3 failed attempts, you MUST fall back to using display_diagram to regenerate the entire diagram * The error message will indicate how many retries remain ;2. 工具描述提示词Tool Descriptions位置app/api/chat/route.ts第 131-164 行定义两个工具的具体使用说明display_diagram: { description: Display a diagram on draw.io. You only need to pass the nodes inside the root tag (including the root tag itself) in the XML string. For example: root mxCell id0/ mxCell id1 parent0/ mxGeometry x20 y20 width100 height100 asgeometry/ mxCell id2 valueHello, World! styleshaperectangle parent1 mxGeometry x20 y20 width100 height100 asgeometry/ /mxCell /root - Note that when you need to generate diagram about aws architecture, use **AWS 2025 icons**. - If you are asked to generate animated connectors, make sure to include flowAnimation1 in the style of the connector elements. , inputSchema: z.object({ xml: z.string().describe(XML string to be displayed on draw.io) }) }, edit_diagram: { description: Edit specific parts of the current diagram by replacing exact line matches. Use this tool to make targeted fixes without regenerating the entire XML. IMPORTANT: Keep edits concise: - Only include the lines that are changing, plus 1-2 surrounding lines for context if needed - Break large changes into multiple smaller edits - Each search must contain complete lines (never truncate mid-line) - First match only - be specific enough to target the right element, inputSchema: z.object({ edits: z.array(z.object({ search: z.string().describe(Exact lines to search for (including whitespace and indentation)), replace: z.string().describe(Replacement lines) })).describe(Array of search/replace pairs to apply sequentially) }) },3. XML 指南文档参考文档位置app/api/chat/xml_guide.md这是 Draw.io XML 结构参考文档包含XML 基本结构说明各种元素的属性说明样式和连接器的配置方法常见模式和高级特性该文档主要用于开发参考不直接作为提示词发送给 AI。提示词结构总结系统提示词systemMessage角色定义draw.io XML 生成专家工具说明display_diagram和edit_diagram核心能力生成流程图、思维导图等布局约束坐标范围、容器尺寸限制特殊要求中文回复、AWS 图标、图片识别等工具描述display_diagram创建新图表edit_diagram编辑现有图表消息格式化第 82-90 行将当前 XML 和用户输入格式化为结构化文本这些提示词共同指导 AI 生成和编辑 draw.io 图表。二、局部修改的实现机制如下局部修改实现机制1. 整体流程局部修改通过edit_diagram工具实现流程如下AI 生成编辑指令 → 客户端接收工具调用 → 获取当前 XML → 执行搜索替换 → 重新加载图表2. 核心实现代码步骤 1工具调用处理components/chat-panel.tsxasync onToolCall({ toolCall }) { if (toolCall.toolName display_diagram) { // Diagram is handled streamingly in the ChatMessageDisplay component addToolResult({ tool: display_diagram, toolCallId: toolCall.toolCallId, output: Successfully displayed the diagram., }); } else if (toolCall.toolName edit_diagram) { const { edits } toolCall.input as { edits: Array{ search: string; replace: string }; }; let currentXml ; try { // Fetch current chart XML currentXml await onFetchChart(); // Apply edits using the utility function const { replaceXMLParts } await import(/lib/utils); const editedXml replaceXMLParts(currentXml, edits); // Load the edited diagram onDisplayChart(editedXml); addToolResult({ tool: edit_diagram, toolCallId: toolCall.toolCallId, output: Successfully applied ${edits.length} edit(s) to the diagram., }); } catch (error) { console.error(Edit diagram failed:, error); const errorMessage error instanceof Error ? error.message : String(error); // Provide detailed error with current diagram XML addToolResult({ tool: edit_diagram, toolCallId: toolCall.toolCallId, output: Edit failed: ${errorMessage} Current diagram XML: \\\xml ${currentXml} \\\ Please retry with an adjusted search pattern or use display_diagram if retries are exhausted., }); } } },步骤 2获取当前图表 XMLcomponents/chat-panel.tsxconst onFetchChart () { return Promise.race([ new Promisestring((resolve) { if (resolverRef current in resolverRef) { resolverRef.current resolve; } onExport(); }), new Promisestring((_, reject) setTimeout(() reject(new Error(Chart export timed out after 10 seconds)), 10000) ) ]); };该方法通过handleExport触发 draw.io 导出获取当前图表的完整 XML。步骤 3XML 搜索替换核心逻辑lib/utils.tsexport function replaceXMLParts( xmlContent: string, searchReplacePairs: Array{ search: string; replace: string } ): string { // Format the XML first to ensure consistent line breaks let result formatXML(xmlContent); let lastProcessedIndex 0; for (const { search, replace } of searchReplacePairs) { // Also format the search content for consistency const formattedSearch formatXML(search); const searchLines formattedSearch.split(\n); // Split into lines for exact line matching const resultLines result.split(\n); // Remove trailing empty line if exists (from the trailing \n in search content) if (searchLines[searchLines.length - 1] ) { searchLines.pop(); } // Find the line number where lastProcessedIndex falls let startLineNum 0; let currentIndex 0; while (currentIndex lastProcessedIndex startLineNum resultLines.length) { currentIndex resultLines[startLineNum].length 1; // 1 for \n startLineNum; } // Try to find exact match starting from lastProcessedIndex let matchFound false; let matchStartLine -1; let matchEndLine -1; // First try: exact match for (let i startLineNum; i resultLines.length - searchLines.length; i) { let matches true; for (let j 0; j searchLines.length; j) { if (resultLines[i j] ! searchLines[j]) { matches false; break; } } if (matches) { matchStartLine i; matchEndLine i searchLines.length; matchFound true; break; } } // Second try: line-trimmed match (fallback) if (!matchFound) { for (let i startLineNum; i resultLines.length - searchLines.length; i) { let matches true; for (let j 0; j searchLines.length; j) { const originalTrimmed resultLines[i j].trim(); const searchTrimmed searchLines[j].trim(); if (originalTrimmed ! searchTrimmed) { matches false; break; } } if (matches) { matchStartLine i; matchEndLine i searchLines.length; matchFound true; break; } } } // Third try: substring match as last resort (for single-line XML) if (!matchFound) { // Try to find as a substring in the entire content const searchStr search.trim(); const resultStr result; const index resultStr.indexOf(searchStr); if (index ! -1) { // Found as substring - replace it result resultStr.substring(0, index) replace.trim() resultStr.substring(index searchStr.length); // Re-format after substring replacement result formatXML(result); continue; // Skip the line-based replacement below } } if (!matchFound) { throw new Error(Search pattern not found in the diagram. The pattern may not exist in the current structure.); } // Replace the matched lines const replaceLines replace.split(\n); // Remove trailing empty line if exists if (replaceLines[replaceLines.length - 1] ) { replaceLines.pop(); } // Perform the replacement const newResultLines [ ...resultLines.slice(0, matchStartLine), ...replaceLines, ...resultLines.slice(matchEndLine) ]; result newResultLines.join(\n); // Update lastProcessedIndex to the position after the replacement lastProcessedIndex 0; for (let i 0; i matchStartLine replaceLines.length; i) { lastProcessedIndex newResultLines[i].length 1; } } return result; }3. 关键特性三级匹配策略精确匹配逐行完全匹配包括空格和缩进行修剪匹配去除首尾空格后匹配容错子串匹配作为最后手段在整个内容中查找子串多编辑支持支持多个{search, replace}对按顺序依次应用每个编辑基于上一次的结果错误处理如果搜索模式未找到抛出错误错误信息包含当前 XML便于 AI 重试支持最多 3 次重试在提示词中定义4. 工作示例假设 AI 要修改一个文本标签// AI 生成的编辑指令edits:[{search: mxCell id2 value旧文本,replace: mxCell id2 value新文本}]// 执行流程// 1. 获取当前 XML// 2. 格式化 XML统一换行和缩进// 3. 查找匹配的行// 4. 替换匹配的内容// 5. 重新加载到 draw.io5. 优势效率只修改需要变更的部分无需重新生成整个图表精确基于行级匹配保持 XML 结构完整容错三级匹配策略提高成功率可追溯错误时返回完整 XML便于调试和重试该实现通过搜索替换实现局部修改避免全量重生成提升效率和准确性。实际体验效果生成的系统架构图比较简单模型能力偏弱可能是提示词引导不足相比claude、lovable有较大差距支持国产模型的二开开源项目https://github.com/wangfenghuan/w-next-ai-drawio