--- title: AI Draw CAD source: https://vjmap.com/en/guide/aidraw.html --- # AI Draw CAD ## Generate CAD Drawings with Trae and Cursor for Free ### Sample Results Trae Editor ![](http://vjmap.com/blogimages/trae.gif) Cursor Editor ![](http://vjmap.com/blogimages/cursor.gif) ### Steps - 1. Download project source from GitHub [https://github.com/vjmap/aidraw](https://github.com/vjmap/aidraw) Or download directly: [https://vjmap.com/download/aidraw.zip](https://vjmap.com/download/aidraw.zip) - 2. Open the project source with `Trae` or `Cursor` editor - 3. Search for `LiveServer` in the extension marketplace and install (optional, or use another HTML server, or `double-click index.html` to open in browser [this method does `not` support loading local files]) - 4. Right-click `index.html`, select `Open with Live Server` from the menu - 5. In `Trae` enter `Builder` mode, or in `Cursor` enter `Composer` or `Edit` mode, then describe what you want to draw - 6. After generation, open `draw.js` to view the output, refresh the page in the browser to see the result - 7. Click the `Download` button in the top-right of the generated page to download the generated `dwg` file supported by AutoCAD ### Tutorial Video [https://www.bilibili.com/video/BV1sRRYY2EBo/](https://www.bilibili.com/video/BV1sRRYY2EBo/) ### Related Examples ``` Draw a sample diagram of common trigonometric functions for teaching, with scales, axes and grid, x range -10 to 10 ``` ![image-20250309195159868](https://vjmap.com/blogimages/202503091952067.png) ``` Draw a cute cat with rich details ``` ![image-20250309195734749](https://vjmap.com/blogimages/202503091957823.png) ```js data/china.json contains China map GeoJSON. Use it to draw China, fill each province with a color (random but cartographically appropriate), label names in cyan, and draw the map frame ``` ![image-20250309200219874](https://vjmap.com/blogimages/202503092002957.png) ``` Draw a plate 80 long, 60 wide, 2 thick, with four 8mm holes around it, one 16mm hole in the center, R5 fillets, and length dimensions ``` ![image-20250309200527023](https://vjmap.com/blogimages/202503092005107.png) ``` Beijing weekly temperature data. Draw a temperature curve chart with max temp (red) and min temp (green), small circles at each value, weather labels above max temp points. X-axis: date, Y-axis: temperature, with scale values and grid [ {"date": "2025-02-01", "weather": "Sunny", "max_temp": 5, "min_temp": -4}, {"date": "2025-02-02", "weather": "Cloudy", "max_temp": 9, "min_temp": 0}, {"date": "2025-02-03", "weather": "Sunny", "max_temp": 11, "min_temp": 8}, {"date": "2025-02-04", "weather": "Overcast", "max_temp": -2, "min_temp": -6}, {"date": "2025-02-05", "weather": "Heavy snow", "max_temp": -4, "min_temp": -7}, {"date": "2025-02-06", "weather": "Sunny", "max_temp": 6, "min_temp": -2}, {"date": "2025-02-07", "weather": "Overcast", "max_temp": 6, "min_temp": -1} ] ``` ![image-20250309200817897](https://vjmap.com/blogimages/202503092008015.png) Click `Download` on the generated drawing to download the `dwg` file and open it in AutoCAD ![image-20250309202030768](https://vjmap.com/blogimages/202503092020854.png) ## VJMap AI Draw CAD Usage Go to [VJMap Cloud Management Platform](https://vjmap.com/app/cloud), click `AI Draw CAD` on the right ![image-20250303133120273](https://vjmap.com/blogimages/202503031331297.png) ![image-20250303133149480](https://vjmap.com/blogimages/202503031331512.png) [Video tutorial: https://www.bilibili.com/video/BV1g19BYNECf/](https://www.bilibili.com/video/BV1g19BYNECf/) ## Drawing ### 1. Draw from Description - Enter a description of what to draw in the input box and click Send - AI generates code based on the description - Code runs automatically (or manually) to produce the CAD drawing - Click to download the generated DWG Example input: ``` Draw a cute cat with rich details ``` ![image-20250303135551282](https://vjmap.com/blogimages/202503031355337.png) Note: Set the model URL and name in Settings. Different models produce different results. This example used `claude 3.7 sonnet` ### 2. Draw from Direct Data When there is `little data`, you can include it directly in the prompt Example: ``` Draw these lines in different colors. [[0, 0],[4, 0]] [[4, 0],[2, 5],[3, 7]] [[2, 3],[0, 0]] ``` ![image-20250303140212862](https://vjmap.com/blogimages/202503031402902.png) ### 3. Draw from User Data When there is `lots of data`, because of model `context limits` and `token` cost, first click `User Data` and paste the data there so the code can read it at runtime. Note: the model `does not know the data format`, so `describe the format clearly` in the prompt. Example: for a China map, go to [Alibaba Data Visualization Platform](https://datav.aliyun.com/portal/school/atlas/area_selector), select province data, click `Copy GeoJSON` ![image-20250303142412632](https://vjmap.com/blogimages/202503031424704.png) ![image-20250303142742809](https://vjmap.com/blogimages/202503031427869.png) ``` User data is China map GeoJSON. Use it to draw China, fill each province with a color (random but cartographically appropriate), label names in cyan, and draw the map frame ``` ![image-20250303143121222](https://vjmap.com/blogimages/202503031431273.png) Note: This example used `claude 3.7 sonnet` GeoJSON is common; just say the user data is GeoJSON. For other formats, describe the structure. Example CSV: ``` 1,Item1,3.5,7.2,A 2,Item2,1.2,4.8,B 3,Item3,5.6,9.1,C 4,Item4,2.3,6.7,A ``` Describe each field and the requirements: ``` User data is CSV. Each row: "index,name,x,y,type". Draw a small circle at each row's x,y. Color by type. Label name below circle. Circle radius and font height based on data extent. ``` ![image-20250303143743767](https://vjmap.com/blogimages/202503031437814.png) ![image-20250303144343835](https://vjmap.com/blogimages/202503031443895.png) Note: This example used `qwen-coder-plus-latest` ### 4. Reference Entities from Other CAD Drawings For complex symbols or symbols that already exist in another drawing, you can reference CAD entities. First upload the CAD template to [VJMap Cloud Management Platform](https://vjmap.com/app/cloud) (give it a mapid), open it with `Memory` mode, click the entity to reference, and get its `objectid` from the property panel on the right ![image-20250303145548835](https://vjmap.com/blogimages/202503031455883.png) Example: ``` Draw a parking lot example (drawing 300 wide, 100 high), 2 rows 9 columns. Each space: rectangle, label, and car symbol [block reference from map car, entity id 331, block bounds [587613582,3103823616,587618261,3103825364], base at center]. Rectangle large enough for label and symbol (symbol 1/2 size). Label above, symbol below, no overlap. ``` ![image-20250303150028471](https://vjmap.com/blogimages/202503031500520.png) ### 5. Reference Other CAD Maps or Layer Data You can also reference entire CAD maps or specific layers. Example: `sys_world` layers `grid` and `latlon labels`: ![image-20250303151049961](https://vjmap.com/blogimages/202503031510017.png) ``` Based on map sys_world, select "grid" and "latlon labels". Drawing extent {"min":{"x":1756,"y":2537},"max":{"x":27713,"y":17957}}. Draw 50 random small circles in different colors, label index below each. ``` ![image-20250303151442124](https://vjmap.com/blogimages/202503031514172.png) ## Generation Modes ### 1. Create New Drawing By default each creation opens a new drawing ![image-20250303152233475](https://vjmap.com/blogimages/202503031522508.png) ### 2. Append to Current Drawing To add data to the current drawing, choose `Append created entities to current map` ![image-20250303153502053](https://vjmap.com/blogimages/202503031535129.png) ### 3. Interactive Manual Append ![image-20250303153906649](https://vjmap.com/blogimages/202503031539718.png) ## Download Generated CAD After generation, click `Download CAD` in the toolbar to download the `dwg` file. Open with AutoCAD to view. For private deployment, configure the backend for download due to data security. Open `config.json` in the `data` directory. Under the `system` key set the download path mapping, and in `usercfg` set `shareWorkspace` (workspace for drawing, empty for default) and `shareDownload` (download path key in token_router_static). Example: ```json { "system" : { "token_router_static": "_download_cad::./data/workspace/share/mapfiles" }, "usercfg": { "shareWorkspace": "share", "shareDownload": "_download_cad" } } ``` ## Settings ### Clear Session Chat history (default 5 messages) is sent as context. When the drawing task changes, `clear the session` (equivalent to starting a new session). ### Online Model API Settings Models can be configured in the backend or by users in the frontend. ![image-20250303160016995](https://vjmap.com/blogimages/202503031600044.png) More settings: [https://vjmap.com/guide/aichat.html](https://vjmap.com/guide/aichat.html) ## Using Free Online Models (e.g. DeepSeek) to Generate Drawings Online API calls consume tokens and cost money. This method uses free online AI sites to generate code: - 1. In Settings, enable "Only generate prompt template, do not auto-generate code" ![image-20250213171532518](https://vjmap.com/blogimages/202502131715689.png) - 2. Enter your question in the input area, e.g. ``` Get Beijing weather JSON for the last month. Create a new map from this data. Draw a temperature curve chart with max temp (red) and min temp (green), and weather labels above max temp points. X-axis: date (with scales), Y-axis: temperature (with scales, min -20, max 40, step 5) ``` - 3. Click Send. In the "AI Question" dialog, click "Copy" to copy the question. ![image-20250213174811969](https://vjmap.com/blogimages/202502131748041.png) - 4. Open an online AI site like [deepseek](https://chat.deepseek.com/), paste the content - 5. Copy the AI-generated code ![image-20250213180109112](https://vjmap.com/blogimages/202502131801169.png) - 6. In the "AI Question" dialog click "Execute Code" or use the toolbar menu "Execute Code", paste the code, click Execute ![image-20250213193012076](https://vjmap.com/blogimages/202502131930136.png) - 7. When execution finishes, view the result ![image-20250213193218984](https://vjmap.com/blogimages/202502131932051.png)