手動繪製圖表往往會消耗寶貴的工程時間,這些時間本可用於構建軟體。透過手動拖曳形狀並連接連接器來設計架構模型、序列流程及系統互動,會迅速拖慢開發工作流程。VPasCode透過基於文字的視覺化解決此痛點,讓開發人員能夠使用純文字和結構化宣告高效地定義視覺元素。
隨著先進人工智慧整合至VPasCode 編輯器視覺建模變得更加快速。開發人員和軟體架構師現在可以直接從簡潔的文字提示生成完整圖表,並利用智慧內聯 AI 修改來更新現有程式碼。本指南將介紹這些新功能如何簡化技術文件與圖表維護。
了解 VPasCode 中的圖表即程式碼
圖表即程式碼將視覺化資產視為原始程式碼。將視覺結構以文字格式儲存,讓開發團隊能夠直接在儲存庫管理平台中對架構圖表進行版本控制,對視覺架構進行程式碼審查,並維護單一真實來源的系統文件。
由Visual Paradigm,VPasCode 提供一個多功能的線上環境,支援多種流行的建模語法與資料格式:
- 支援的建模語法:PlantUML、Mermaid.js、Graphviz (DOT)、D2、Markmap、ECharts 與 DBML。
- 支援的資料格式:JSON、YAML 與 SQL 結構定義。
- 自動語法偵測:即時引擎自動識別輸入格式,並立即渲染精確的預覽。
VPasCode 中的關鍵 AI 功能
1. 即時 AI 圖表生成
使用者無需手動學習不同框架語言的語法細節,只需以自然語言描述系統行為、資料庫表格或元件關係。內建 AI 會自動解析請求,並生成乾淨且語法正確的程式碼,同時提供即時預覽。
2. 智慧 AI 程式碼修改與差異比對
更新現有架構圖表不再需要重新閱讀冗長的程式碼區塊。使用者可以標記現有的圖表程式碼,並指示 AI 助手進行重構、新增新元素、調整樣式或變更元件。VPasCode 會顯示智慧並排差異預覽,讓使用者在接受更新前驗證程式碼變更。
逐步指南:使用 AI 功能
步驟 1:開啟線上工作區
存取線上編輯器,並選擇您偏好的引擎框架(例如 Mermaid、PlantUML 或 Graphviz)。
步驟 2:以自然語言生成圖表
在工作區介面中點擊 AI 提示操作按鈕。輸入自然語言描述(例如:「建立一個包含 API 閘道、認證服務與訂單資料庫的電商微服務序列圖」」並觸發生成操作。
步驟 3:檢視與精進程式碼
編輯器會立即填滿程式碼面板並呈現視覺預覽。您可以手動調整所產生的腳本,或繼續發出 AI 提示以擴展系統節點。
步驟 4:智慧重構與差異檢視
要修改現有結構,請選取一段程式碼並向 AI 工具發出提示(例如:「在 API 閘道與訂單服務之間新增 Redis 快取」)。使用差異檢視器檢查新增或刪除的列,然後接受修改以立即更新您的視覺圖表。
探索 Visual Paradigm 解決方案
提升您在 Visual Paradigm 生態系中的設計與軟體架構工作流程: