VPasCode 是一個基於瀏覽器的工作區，可用於從文字程式碼建立和檢視圖表。它支援包括 PlantUML、Mermaid、Graphviz 和 D2 在內的圖表語言，並將程式碼編輯、即時渲染與 AI 輔助工具整合於一處。您撰寫或產生圖表腳本，VPasCode 即會將其渲染為視覺化圖表。
1. 開始建立圖表
-
在您的網頁瀏覽器中開啟 VPasCode。
-
從空白編輯器開始，或貼上現有的圖表腳本。
-
對於 PlantUML，請包含常見的
@startuml與@enduml標記。VPasCode 可偵測 PlantUML 語法並啟動對應的渲染器。 -
在操作過程中隨時檢查已渲染的圖表。
2. 使用 AI 產生圖表
使用 AI 助理將自然語言描述轉換為圖表程式碼。請明確說明您希望包含的元素與關係。
例如，您可以詢問：
建立使用者登入驗證的序列圖，包含使用者、網頁應用程式、驗證服務與資料庫。
檢視產生的程式碼及其渲染結果。若缺少重要的參與者、步驟或關係，請優化提示詞。
3. 精修現有程式碼
無需重新開始，請使用自然語言指令來修改您已有的圖表。描述您想要的變更及其應放置的位置。
例如：
在訂單提交步驟之後立即新增金流閘道檢查。
接著檢視更新後的程式碼與圖表，以確保變更符合預期的工作流程。
4. 修正錯誤
若圖表未按預期渲染，請使用 AI 程式碼錯誤修正工具來協助診斷並修復語法問題。該工具可識別錯字、缺少括號或標記對齊錯誤等問題，進行修正並說明錯誤原因。
套用修正後，請同時檢查程式碼與渲染後的圖表，以確認結果正確無誤。
5. 翻譯圖表文字
使用 AI 圖表翻譯工具來翻譯圖表內的文字，例如標籤、類別屬性與訊息描述。這有助於為國際團隊準備圖表。
請在上下文中檢視翻譯後的詞彙，特別是技術術語與應保持不變的名稱。
6. 套用主題
在編輯器中選擇主題以調整圖表的視覺風格。可用選項包括 Visual Paradigm 的經典主題及其他經典替代方案。主題設定可為您套用適當的膚色參數。
在匯出前，請檢查結果的可讀性與一致性。
7. 匯出與分享
選擇適合圖表使用方式的匯出格式：
| 格式 | 適用情境 |
|---|---|
| SVG | 可縮放的網頁文件與技術維基 |
| PNG | 聊天應用程式、錯誤追蹤器與簡報 |
| 正式文件與列印 |
若要分享圖表，請使用平台產生的直接網址或 QR 碼。
實作工作流程
-
描述您想要建模的系統、流程或架構。
-
使用 AI 產生初始圖表程式碼，或貼上現有的腳本。
-
檢視即時渲染結果，並針對圖表進行精細調整。
-
若語法問題導致無法渲染，請使用錯誤修復功能。
-
如有需要，請翻譯標籤或套用主題。
-
以符合您的文件或簡報需求的格式進行匯出。
-
使用圖表的網址或 QR 碼進行分享。
