VPasCode 是一款基於瀏覽器的編輯器,用於創建圖表並可視化結構化文本。您可以以支援的格式編寫或生成程式碼,在即時預覽中查看結果,然後分享或匯出該圖表。它將多種文字轉圖表引擎以及程式碼或資料格式整合在同一個工作區中。
VPasCode:入門指南

-
開啟 VPasCode 編輯器。
-
選擇一種格式,或從內建範例之一開始。
-
在編輯器中輸入或貼上您的圖表程式碼。
-
檢視即時渲染的預覽,並根據需要調整程式碼。
-
透過連結分享圖表,或匯出以供在其他地方使用。
該編輯器被描述為免費且基於瀏覽器,因此您無需安裝桌面圖表應用程式即可進行工作。
VPasCode:支援的格式與圖表類型
VPasCode 支援多種圖表語言、資料格式與程式語言。

-
PlantUML:ArchiMate、C4 模型、序列圖、使用案例圖、類別圖、物件圖、活動圖、元件圖、部署圖、狀態圖與時序圖;實體關係圖(ERD)、陳氏實體關係圖(Chen ERD)、網路佈局圖與工作分解結構(WBS)。
-
Mermaid:流程圖、類別圖與序列圖、實體關係圖(ERD)、狀態圖、心智圖、C4 模型、甘特圖、四象限圖與需求圖、時間軸、使用者旅程圖、Git 圖表與看板板。
-
Graphviz:有向圖與標準圖、流程圖、組織圖、叢集圖與資料流程圖。
-
D2:基本形狀、容器、序列圖、風格化圖表與網路圖。
-
資料與結構:SQL、DBML、JSON、JSON Schema、JSONC、JSON5、JSONL/NDJSON、TOON、YAML、XML、CSV 與 TOML。
-
程式碼:Java、TypeScript、Go、Rust、C#、Python、C、C++、PHP、Ruby、Scala、Zig、Kotlin、Swift 與 Elixir。
該文章指出,未來更新中可能會新增更多格式。
VPasCode:建立圖表
您可以透過以下兩種方式之一開始:
-
自行編寫程式碼:選擇一種支援的格式,並在編輯器中輸入其語法。
-
從範例開始:瀏覽內建範例以學習某種格式,或調整範本以建立您自己的圖表。
在編輯時,VPasCode 會即時渲染預覽。這讓您在工作的過程中就能發現版面或語法問題,而不必等到單獨的匯出步驟。
VPasCode:使用 AI 工具
VPasCode 的 AI 功能可協助建立與精修圖表程式碼:

-
產生圖表:以簡單的英文描述系統或流程,AI 將為所選格式產生程式碼。
-
修改圖表:提供指示以擴充、簡化或調整現有圖表。
-
修正程式碼錯誤:使用 AI 協助偵測並修正圖表的語法問題。
-
翻譯標籤:請翻譯功能將圖表中的文字標籤轉換為另一種語言。
這些工具旨在減少手動處理語法的工時。在分享前,請檢視所產生或修改的程式碼並預覽結果。
VPasCode:PlantUML 主題
對於 PlantUML 圖表,編輯器提供主題選擇介面。從可用清單中選擇主題以套用其語法並預覽更新後的外觀。本文也介紹了自訂的 Visual Paradigm 與 Rose 主題:前者使用藍色標題,後者則採用經典的淺黃色 IBM Rational Rose 風格。
VPasCode:分享與匯出
當您的圖表準備就緒時,您可以:
-
建立可分享的網頁連結。
-
匯出為向量 PDF。
-
匯出為 SVG 向量影像。
-
匯出為高解析度 PNG。
向量格式(如 SVG 與 PDF)在需要縮放圖表而不損失清晰度時非常實用;PNG 則適合一般文件與簡報使用。
VPasCode:連接 AI 服務供應商

組織可以連接自身的 AI 基礎設施,並使用現有的 API 憑證。本文列出了 OpenAI、Anthropic、Google、DeepSeek、Mistral、Qwen 與 Groq 等服務供應商。此選項旨在讓您對 AI 環境、憑證與費用安排擁有控制權;請根據組織需求進行設定。
VPasCode:實用工作流程

-
選擇符合您使用情境的圖表格式。
-
從內建範例開始,或向 AI 產生器描述圖表。
-
檢視並編輯產生的程式碼。
-
使用即時預覽來檢查可讀性與正確性。
-
若您在 PlantUML 中工作,請套用主題。
-
如有需要,可使用 AI 修改、錯誤修正或翻譯功能。
-
分享連結或匯出完成的圖表。
當您偏好基於文字的圖表編輯、需要在多種圖表格式間作業,或希望快速產生與修訂圖表而無需手動排列每個形狀時,VPasCode 最為實用。












