文章目錄
- 整體說明
- 一、背景
- 二、前置條件
- 三、生成 Promt
- 四、結果查看
- 五、結果編輯
摘要: Cursor生成Java的架構設計圖
關鍵詞: Cursor、人工智能 、開發工具、Java 架構設計圖
整體說明
Cursor 作為現在非常好用的開發工具,非常的火爆,能夠大幅提升工作效率和開發效率,其中就有 Java 的架構設計圖,是真的不想自己畫,這時候大模型工具的作用就可以體現出來了,如下:
一、背景
前面我們已經說了 README 的文件怎么生成了,大概知道了這個工程是怎么使用的,但是我們還是不知道具體模塊的詳細設計,具體流程的模塊依賴關系,還有數據的流向流程圖,想要更加深入地去了解詳細設計,就需要架構設計圖了。
二、前置條件
-
Cursor 安裝和配置
需要安裝 Cursor 和 配置好相關配置,如果不知道怎么配置,可以參考我的另一篇文章 《Cursor日常配置指南》
-
工程代碼
不多說,就是需要使用 Cursor 打開我們工程代碼文件,和 IDEA 差不多,區別就是 Cursor 有一個 Chat 的人工智能聊天窗口,這個就是我們之后,生成文檔的方法
-
結果查看插件安裝
當我們生成我們文檔之后,我們得能打開預覽我們文件,最終結果是帶 Mermaid 的 Markdown 文件,所以需要下載插件 Markdown Preview Mermaid Support,直接在 Cursor 插件里搜索安裝就可以了
-
Draw.io 安裝
當我們生成的 Mermaid 圖形代碼我們,不滿意,想要自己去編輯的時候,需要使用這個軟件去編輯
三、生成 Promt
如下就是我常用的 Java架構設計生成promt,當然我這個是基于我寫的代碼工程寫的,如果你的代碼工程有自己的特點,可以再修改
# Mermaid工程架構圖生成提示請為我的Spring Boot項目生成一個使用Mermaid語法的架構圖,并以Markdown格式呈現。## 需求說明
1. 使用Mermaid語法創建多個圖表來展示項目的不同架構視圖
2. 所有圖表應嵌入在一個Markdown文件中,標題為"項目名稱模塊架構設計"
3. 圖表應清晰展示組件之間的關系和數據流
4. **重要:確保所有文字使用深色(黑色或深藍色),保證在淺色背景上清晰可見**
5. **圖表中的節點顏色應當使用較淺的填充色,但文字和邊框使用深色,提高對比度**
6. **特別注意:在節點文本中使用換行時,確保使用正確的Mermaid語法**- 在節點文本中,使用 `<br>` 而不是 `\n` 進行換行- 例如:`A[第一行<br>第二行]`,而不是 `A[第一行\n第二行]`- 或者使用Markdown語法 `A["第一行<br/>第二行"]`
7. 為每個圖表添加簡短的說明文字,解釋圖表的目的和內容## 需要包含的圖表類型### 1. 模塊依賴圖
- 使用Mermaid的`graph TD`語法
- 展示項目主要模塊之間的依賴關系和內部組件結構
- 區分主要模塊和內部組件(Controller、Service、Mapper等)
- 展示組件之間的調用關系
- 使用不同形狀和顏色區分不同類型的模塊和組件
- 文字標簽使用深色(黑色或深藍色),確保可讀性
- 樣式定義示例:```classDef module fill:#f9f,stroke:#333,stroke-width:2px,color:#000classDef component fill:#bbf,stroke:#33f,stroke-width:1px,color:#000classDef utility fill:#bfb,stroke:#3f3,stroke-width:1px,color:#000```### 2. 系統部署架構圖
- 使用Mermaid的`flowchart TD`語法
- 展示系統在生產環境中的部署結構
- 包括客戶端、負載均衡器、應用服務器、數據庫、配置中心和外部系統
- 顯示組件之間的網絡連接和通信方式(HTTP請求、REST API、JDBC等)
- 使用不同顏色和樣式區分不同類型的組件
- 樣式定義示例:```classDef client fill:#e7f5fe,stroke:#1da1f2,stroke-width:1px,color:#000classDef server fill:#fcefe3,stroke:#fd8a3f,stroke-width:1px,color:#000classDef db fill:#f0fff0,stroke:#2ecc71,stroke-width:1px,color:#000classDef ext fill:#fcf3e3,stroke:#f1c40f,stroke-width:1px,color:#000classDef infra fill:#f5e8f5,stroke:#9b59b6,stroke-width:1px,color:#000```### 3. 數據流程圖
- 使用Mermaid的`flowchart LR`語法
- 展示數據從數據源到最終存儲的完整流程
- 包括API客戶端、服務層、數據轉換、數據訪問層和數據庫
- 顯示觸發流程的方式(手動觸發或定時任務)
- 樣式定義示例:```classDef external fill:#f9a,stroke:#a86,stroke-width:1px,color:#000classDef process fill:#adf,stroke:#68c,stroke-width:1px,color:#000classDef data fill:#ad5,stroke:#6b4,stroke-width:1px,color:#000classDef storage fill:#bbf,stroke:#99e,stroke-width:1px,color:#000```### 4. 核心業務流程圖
- 使用Mermaid的`sequenceDiagram`語法
- 展示系統中的主要業務流程的時序關系
- 包括客戶端、控制器、服務層、外部API和數據庫等參與者
- 展示完整的調用流程,包括獲取授權、數據處理和結果返回
- 使用loop表示循環處理(如分頁獲取數據)
- 用Note添加額外說明(如支持按日期范圍同步)### 5. 數據庫ER圖
- 使用Mermaid的`erDiagram`語法
- 展示主要數據實體及其關系(一對多、多對多等)
- 包括每個實體的主要字段、主鍵和外鍵
- 使用明確的關系符號(||--o{、}o--o{等)表示實體間關系
- 為每個字段添加類型和簡短描述### 6. 接口調用關系圖
- 使用Mermaid的`flowchart TB`語法
- 展示系統內部各組件間的接口調用關系
- 包括控制器、服務接口、服務實現類、API客戶端和數據訪問層
- 顯示與外部系統和數據庫的交互
- 樣式定義示例:```classDef controller fill:#f9f0ff,stroke:#333,stroke-width:1px,color:#000classDef service fill:#e6f7ff,stroke:#333,stroke-width:1px,color:#000classDef impl fill:#f0f5ff,stroke:#333,stroke-width:1px,color:#000classDef client fill:#fff7e6,stroke:#333,stroke-width:1px,color:#000classDef external fill:#f9f9f9,stroke:#333,stroke-width:1px,color:#000classDef database fill:#f6ffed,stroke:#333,stroke-width:1px,color:#000```### 7. 異常處理流程圖
- 使用Mermaid的`flowchart TD`語法
- 展示系統的異常處理機制和流程
- 包括異常觸發、捕獲、分類處理和恢復機制
- 展示不同類型異常的處理策略(業務異常、系統異常、網絡異常、數據庫異常)
- 樣式定義示例:```classDef normal fill:#f0f5ff,stroke:#333,stroke-width:1px,color:#000classDef decision fill:#fff7e6,stroke:#333,stroke-width:1px,color:#000classDef error fill:#fff1f0,stroke:#333,stroke-width:1px,color:#000classDef recovery fill:#f6ffed,stroke:#333,stroke-width:1px,color:#000classDef response fill:#f9f0ff,stroke:#333,stroke-width:1px,color:#000```### 8. 性能優化設計圖
- 使用Mermaid的`flowchart LR`語法
- 展示系統的主要性能優化策略
- 包括數據庫優化、API調用優化、緩存策略和并發處理等方面
- 展示各優化點的具體技術措施
- 樣式定義示例:```classDef strategy fill:#f9f0ff,stroke:#333,stroke-width:1px,color:#000classDef category fill:#e6f7ff,stroke:#333,stroke-width:1px,color:#000classDef technique fill:#f6ffed,stroke:#333,stroke-width:1px,color:#000```## 格式要求
1. 所有圖表應使用正確的Mermaid語法
2. Markdown文件應包含適當的標題和說明文字
3. 每個圖表前應有簡短的說明,解釋圖表的目的和內容
4. 每個圖表后應有簡短的解釋,說明圖表展示的內容和價值
5. 使用注釋來增強圖表的可讀性(使用`%%`添加注釋)
6. **對于所有圖表,確保:**- 節點填充色使用淺色,便于查看- 文字和邊框使用深色(黑色 `#000` 或深藍色 `#333`),確保可讀性- 箭頭標簽使用深色- 樣式定義中添加 `color:#000` 或 `color:#333` 屬性- **使用 `<br>` 進行文本換行,不要使用 `\n`**
7. 在文檔最后添加總結部分,簡要概括所有圖表的內容和價值## 換行示例
```mermaid
flowchart TDA[單行文本] -->|調用| B["多行文本<br>第二行"]C["控制器<br>Controller"] -->|調用| D["服務層<br>Service<br>業務處理"]
```## 樣式示例
```mermaid
flowchart TDA[模塊A] -->|調用| B[模塊B]%% 樣式定義 - 確保文字為深色classDef default fill:#f9f9f9,stroke:#333,stroke-width:1px,color:#000classDef important fill:#ffe6e6,stroke:#c00,stroke-width:2px,color:#000%% 應用樣式class B important
```請基于項目實際情況創建這些圖表,確保圖表內容準確、完整且易于理解。如果某些信息不足,可以使用合理的假設,但請在說明中注明。最終的文檔應能全面展示系統的架構設計、工作流程和數據關系,幫助開發人員和維護人員理解系統。
四、結果查看
使用 Ctrl + L 打開 Chat 窗口,在 Chat 窗口 如下執行觸發這個文檔生成即可
其中要 @Java架構設計生成promt 和 @工程代碼文件夾,表示引用
生成結果如下,這個是 Mermaid 語法
可點擊右上角預覽呈現結果
五、結果編輯
打開 架構設計.md
找到你不滿意的 mermaid 圖代碼,復制
打開 Draw.io ,并新建一個空白繪圖
然后 依次點擊 調整圖形 -> 插入 -> 高級 -> mermaid ,然后把剛剛復制的 mermaid 圖代碼 放進去
之后就能自由編輯圖形了