60秒VPasCode快速入門指南

開始使用Visual Paradigm VPasCode不到一分鐘即可上手。由於此平台完全為雲原生，您無需安裝Java執行環境、設定Node.js模組，或下載大型IDE擴充套件相依性。您只需三步簡單操作，即可從原始文字語法轉換為高保真度的視覺化圖表。

遵循此快速導覽，建立、自訂並分享您的第一個Diagram-as-Code（DaC）資源。

步驟 1：開啟即時編輯器

將您的瀏覽器導向免費的VPasCode沙盒。預設情況下，您將看到一個現代化的雙面板介面：

• 左側面板（程式碼編輯器）： 一個輕量級、高性能的文字編輯器，內建自動語法高亮、行號顯示與即時錯誤偵測功能。
• 右側面板（即時預覽視窗）： 一個即時圖表渲染器，當您輸入或修改文字表示時，會自動更新您的視覺佈局。

步驟 2：選擇您的引擎並貼上藍圖

VPasCode會自動識別您的語法。要實際體驗，請清除左側面板中的任何提示文字，並將以下基線範例之一複製貼上至編輯器中：

選項 A：Markdown流程圖（Mermaid語法）

如果您偏好敏捷、自上而下的流程圖佈局，請使用此簡單範本：

graph TD
    A[客戶端請求] --> B{API閘道}
    B --> |有效權杖| C[驗證服務]
    B --> |無效權杖| D[存取被拒絕]
    C --> E[(使用者資料庫)]

選項 B：軟體架構元件（PlantUML語法）

如果您希望以正式的邊界框線來繪製結構化系統元件，請使用此範本：

@startuml
package "應用層" {
    [Web應用程式] -right-> [API閘道]
}
database "資料儲存" {
    [API閘道] --> [SQL主資料庫]
    [API閘道] ..> [Redis快取] : "讀取優化"
}
@enduml

您貼上程式碼的瞬間，右側面板便會立即編譯您的文字，並顯示出乾淨、完全對齊的視覺化圖表。

步驟 3：匯出並分享您的作品

當您對佈局滿意後，可立即使用介面頂端的工作區控制列匯出或分享您的文件：

1. 複製可分享的網址： 點擊 分享 按鈕以產生即時連結。VPasCode 使用零資料庫狀態序列化，表示您的整個圖表文字會安全地壓縮至網址雜湊中。任何點擊您連結的人都能立即檢視並編輯完全相同的程式碼模型。
2. 下載高解析度向量 (SVG)： 點擊 匯出 SVG 按鈕以下載可縮放的向量資源。這非常適合用於 Git 儲存庫、團隊 Wiki 或內部工程 Markdown 文件中的乾淨嵌入。
3. 下載靜態影像 (PNG)： 點擊 匯出 PNG 以取得高解析度的截圖，可直接插入 Slack、Microsoft Teams 或設計簡報中。

現在您已成功渲染第一個資源，請探索我們文件的下一個部分，以掌握個別的 PlantUML 使用手冊, Mermaid 使用手冊，以及 Graphviz 使用手冊 設計方法！