AI+網頁CAD實現文生CAD圖紙（web cad sdk) 詳情 - javascript,typescript,html5,node.js 夢想雲圖網頁CAD 博客

一、項目概述

本章節將探討AI技術與在線CAD相結合，能否打造一個能讓CAD"聽懂人話"的智能助手。
核心價值：告別繁瑣的手動繪圖，用自然語言就能完成CAD設計。無論是建築工程師、機械設計師，還是CAD開發者，都能通過AI大幅提升工作效率。

二、為什麼選擇MxCAD來做CAD智能系統？

1. 原子化API - AI時代的CAD開發利器

傳統CAD軟件的問題是：你只能用它給你的功能，比如"畫直線"、"畫圓"這樣的整體功能。但MxCAD的API把所有功能都拆得特別細，就像樂高積木一樣：

// 傳統方式：只能調用drawCircle()
drawCircle(center, radius);
// MxCAD原子化API：AI可以精確控制每個細節
const center = new McGePoint3d(100, 100, 0);  // 精確控制圓心
const circle = new McDbCircle();              // 創建圓對象
circle.center = center;                       // 設置圓心
circle.radius = 50;                           // 設置半徑
circle.trueColor = new McCmColor(255, 0, 0);  // 精確控制顏色
entitys.push(circle);                         // 添加到圖紙

這對AI意味着什麼？

AI可以像人類工程師一樣思考，理解每個幾何元素的含義
-可以精確控制顏色、圖層、線型等所有屬性
-能處理複雜的空間變換和幾何計算
-生成的代碼質量更高，更符合工程規範

2. 智能體策略 - 讓AI像專業工程師一樣思考

我們設計了三種AI智能體，各自負責不同的專業領域：

A.建模智能體（ModelingAgent）

專業領域：CAD圖形創建和迭代修改

工作流程：

接收自然語言指令（如"畫一個帶圓角的矩形，長100寬60，圓角半徑5"）
分析需求，拆解為幾何元素
生成精確的MxCAD代碼
在沙箱中預覽效果
自動修復可能的錯誤
最終插入到圖紙中

技術亮點：

支持代碼迭代修改："剛才那個矩形，把圓角改成10"
自動管理實體數組，避免重複和遺漏
智能錯誤修復：代碼執行失敗時自動分析錯誤並修復
最多重試3次，確保成功率

B.通用智能體（DefaultAgent）

專業領域：CAD圖紙操作和查詢

典型任務：

"選中所有長度大於100的直線"
"把圖層"標註"的顏色改成紅色"
"計算這個區域的面積"
"導出選中的實體為DXF"

技術亮點：

理解CAD專業術語和概念
能操作圖層、線型、標註等CAD特有功能
支持複雜的選擇條件和過濾

C.意圖識別智能體（IntentRecognitionAgent）

角色：智能調度員

工作原理：

關鍵詞匹配：快速識別用户意圖（如包含"畫"、"創建"等詞 → 建模智能體）
LLM深度分析：複雜請求調用大語言模型分析
智能路由：自動選擇最合適的智能體處理

優勢：用户無需手動選擇模式，系統智能判斷

3. 安全沙箱 - 讓AI代碼安全運行

為什麼需要沙箱？
AI生成的代碼可能包含錯誤、無限循環或惡意代碼，直接在主應用中執行可能導致崩潰或數據丟失。

我們的解決方案：

用户輸入 → AI生成代碼 → 沙箱預覽 → 錯誤檢測 → 自動修復 → 用户確認 → 插入圖紙

技術實現：

在隔離的iframe中執行代碼
限制訪問DOM和本地存儲
捕獲所有錯誤信息
提供詳細的錯誤堆棧分析
支持最多3次自動修復嘗試

用户體驗：

實時預覽AI繪圖效果
確認無誤後再插入圖紙
隨時取消或重新生成
支持撤銷操作

三、AI功能詳解

自然語言到CAD代碼轉換

示例1：繪製複雜機械零件

用户：畫一個法蘭盤，外徑200，內徑100，6個直徑20的螺栓孔均勻分佈
AI生成代碼：
// 創建外圓
const outerCircle = new McDbCircle();
outerCircle.center = new McGePoint3d(0, 0, 0);
outerCircle.radius = 100;
entitys.push(outerCircle);
// 創建內圓
const innerCircle = new McDbCircle();
innerCircle.center = new McGePoint3d(0, 0, 0);
innerCircle.radius = 50;
entitys.push(innerCircle);
// 創建6個螺栓孔
for (let i = 0; i < 6; i++) {
  const angle = (i * 60) * Math.PI / 180;
  const hole = new McDbCircle();
  hole.center = new McGePoint3d(75 * Math.cos(angle), 75 * Math.sin(angle), 0);
  hole.radius = 10;
  entitys.push(hole);
}

示例2：建築平面圖

用户：畫一個10m×8m的房間，牆厚240mm，門寬900mm在右側牆中央
AI自動計算所有尺寸，生成符合建築規範的牆體和門窗

智能代碼優化

自動補全import語句：

// AI生成的代碼可能缺少import
const line = new McDbLine(); // 錯誤：McDbLine未定義
// 系統自動補全
import { McDbLine, McGePoint3d } from "mxcad";
const line = new McDbLine(); // 正確

管理實體數組：

// AI可能忘記將實體添加到圖紙
const circle = new McDbCircle();
// 缺少 entitys.push(circle);
// 系統自動檢測並添加
const circle = new McDbCircle();
entitys.push(circle); // 自動添加

智能修復語法錯誤：

// AI可能生成有語法錯誤的代碼
const point = new McGePoint3d(0, 0, 0) // 缺少分號
// 系統自動修復
const point = new McGePoint3d(0, 0, 0); // 自動添加分號

多AI模型支持

支持的AI提供商：

OpenRouter：統一接口，支持DeepSeek、Llama、Gemini等100+模型
OpenAI：GPT-4、GPT-3.5等官方模型
iFlow：國產大模型，包括通義千問、Kimi、DeepSeek等
自定義：支持任何OpenAI兼容的API

模型選擇策略：

免費模型：適合測試和簡單任務
付費模型：適合複雜任務和高質量要求
國產模型：適合數據安全要求高的場景

四、實際應用場景

場景一：建築工程師 - 快速繪製標準户型

傳統方式：

打開CAD軟件
選擇畫線工具
輸入起點座標(0,0)
輸入終點座標(10000,0) // 10米牆
重複步驟3-4，畫4面牆
選擇偏移工具，偏移240mm生成內牆線
選擇修剪工具，修剪牆角
插入門、窗圖塊
添加尺寸標註
整個過程約15-30分鐘

AI方式：

輸入：畫一個10m×8m的房間，牆厚240mm，門寬900mm在右側牆中央，窗寬1500mm在左側牆中央
AI響應：✅ 已生成標準房間平面圖
- 外牆：10m×8m，牆厚240mm
- 門：900mm寬，位於右側牆中央
- 窗：1500mm寬，位於左側牆中央
- 已添加尺寸標註
用時：10秒

場景二：機械設計師 - 參數化零件設計

傳統方式：

手動計算所有尺寸
逐個繪製每個特徵
容易出錯，修改困難

AI方式：

輸入：生成一個M10螺栓，長度50mm，頭部六角對邊16mm
AI響應：✅ 已生成M10螺栓模型
- 螺紋公稱直徑：10mm
- 螺栓長度：50mm
- 六角頭對邊寬度：16mm
- 符合GB/T 5782標準
用時：5秒

場景三：圖紙修改 - 智能批量操作

傳統方式：

手動查找需要修改的元素
逐個修改，耗時且容易遺漏

AI方式：

輸入：把所有標註文字的字體改成仿宋，字高改為3.5mm
AI響應：✅ 已修改23個標註對象
- 字體：仿宋
- 字高：3.5mm
- 修改對象：23個尺寸標註
用時：3秒

五、技術架構深度解析

代碼執行流程

核心模塊説明

1. agents/AgentStrategy.ts

智能體策略接口定義
智能體實例管理
智能體選擇邏輯

2. agents/ModelingAgent.ts

CAD建模專用智能體
代碼生成與修改
錯誤自動修復

3. agents/IntentRecognitionAgent.ts

用户意圖識別
智能體路由調度
對話狀態管理

4. core/LLMClient.ts

多AI提供商支持
請求管理與取消
錯誤處理與重試

5. core/codeModificationUtils.ts

代碼智能修改
JSON指令解析
語法錯誤修復

6. sandbox.ts

沙箱環境初始化
代碼安全執行
錯誤信息捕獲

7. services/openRouterAPI.ts

AI模型管理
API配置管理
模型緩存機制

六、快速體驗AI 智能體服務

首先打開https://demo2.mxdraw3d.com:3000/mxcad/，如下圖：

打開AI服務會彈出一個膠囊輸入框。我們點擊設置按鈕，如下圖：

我們需要線配置AI的api接口。這裏我們選擇iflow AI服務,這是目前國內免費的最佳供應商，如下圖：

具有配置如下：
首先我們打開https://iflow.cn 登錄賬號,然後我們鼠標移入頭像，找到api管理，如下圖：

我們把api key填寫到MxCAD AI服務中，如下圖：

選擇模型商: iFlow
填寫API Key: 剛剛複製的key粘貼在這裏
模型選擇: 支持很多模型，都可以，甚至稍微差一些的模型都可以比如qwen3-32b 這種都可以。iFlow目前所有的模型都是免費使用。
然後我們點擊“保存”按鈕。就可以開始在膠囊輸入框內輸入你的需求了。比如：一個比較抽象的需求, "畫一朵花" 然後按下回車鍵，如下圖：

等待一會兒, 就把代碼生成出來給你看，並且還有預覽效果，如果滿意的話點擊確認就可以把這朵花插入到圖元中了。如果不滿意，我們可以繼續與AI對話進行修改，如下圖：

比如現在我們覺得這個花不夠精緻。我們和AI説, “花不夠精緻”。然後按下回車鍵，如下圖：

我們可以不斷的讓AI修改代碼，從而達到一個滿意的效果。但要真正投入使用，還需要結合具體的需求調整提示詞和整個智能體的流程。