在 Visual Paradigm，我們致力於讓「以圖表為程式碼」的使用盡可能簡單、順暢且彈性。今天，我們非常高興地宣布，Visual Paradigm 將迎來一項重大升級VPasCode：正式支援JSONC（帶註釋的 JSON） 可視化！
開發人員與系統架構師經常使用如下的設定檔tsconfig.json, settings.json，或package.json。雖然標準 JSON 普遍使用，但嚴格禁止加入註釋——迫使團隊在嚴格語法與清晰上下文之間做出選擇。JSONC 透過允許內聯與區塊註釋解決此問題。透過我們最新的更新，您現在可使用 VPasCode 作為功能豐富的免費 JSONC 編輯器，以及直覺的線上 JSONC 圖表工具，可立即將複雜的設定檔轉換為清晰的視覺圖表。
什麼是 VPasCode？
如果您是首次接觸 VPasCode，歡迎加入！VPasCode（全稱為 Visual Paradigm 的以圖表為程式碼平台）是一個整合的網路環境，專為將文字與程式碼腳本轉換為美觀、專業的圖表而設計。您無需手動繪製形狀與連接線，只需輸入或貼上程式碼，引擎便會即時在旁邊呈現視覺化呈現。
VPasCode 支援廣泛的「文字轉圖表」格式與領域特定語言，包括：
- 圖表與可視化 DSL： PlantUML, Mermaid, Graphviz, Markmap, ECharts
- 結構化資料格式： JSON, JSONC, YAML, XML, CSV, TOML
- 資料庫語言： SQL （DDL，ERD 建立）
- 程式語言： Java, TypeScript, Go, Rust, C#, Python, C, C++, PHP, Ruby, Scala, Zig, Kotlin, Swift, Elixir
無論您需要一個PlantUML 序列圖，一個Mermaid 流程圖，一個SQL實體關係圖，或一個複雜結構化檔案的視覺樹狀圖，VPasCode可作為您的全方位工作室。您可以在官方網站上了解更多VPasCode 功能與概覽頁面.
為什麼 JSONC 可視化很重要
現代的建構工具、語法檢查器和編譯器嚴重依賴 JSONC 在檔案內部直接記錄設定旗標。然而，隨著設定樹的擴大，閱讀深度嵌套的鍵和冗長的內聯註解可能會變得煩瑣。
透過利用 VPasCode 作為您的首選線上 JSONC 圖表工具，您可以將密集的設定結構轉換為清晰、互動式的層級圖表，同時保持內聯文件的完整性。它結合了現代免費 JSONC 編輯器與即時的視覺渲染功能。
運作方式：一個實際範例
在 VPasCode 中使用 JSONC 的方式，與我們其他支援的格式一樣，採用簡單明瞭的雙窗格體驗。在螢幕左側，您可以在免費 JSONC 編輯器中編寫或貼上您的註解 JSON 語法。在右側，VPasCode 會立即渲染對應的動態圖表。
考慮這個標準tsconfig.json檔案，包含現代編譯器旗標和單行註解：
{
// TypeScript 編譯器設定
"compilerOptions": {
"target": "ES2020", // 現代目標
"module": "ESNext",
"moduleResolution": "Bundler",
"strict": true,
"noUnusedLocals": true,
"skipLibCheck": true,
"jsx": "react-jsx",
"paths": {
"@/*": ["./src/*"] // 路徑別名
}
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}當貼入我們的線上 JSONC 圖表工具時，VPasCode 會解析物件層次結構，適當地去除或保留上下文，並生成視覺化表示，顯示compilerOptions, include，以及exclude屬性如何以視覺方式呈現。這使得在程式碼審查或團隊入職時，輕鬆檢視複雜的專案設定成為可能。
VPasCode JSONC 使用體驗的關鍵功能
我們的 JSONC 支援完全整合了強大的編輯和發佈套件，使 VPasCode 獨一無二：
- 互動式程式碼至圖表導航：點擊渲染圖表中的任何節點或形狀，會立即在編輯器中高亮對應的程式碼行，讓您在幾秒內定位關鍵屬性。
- 一鍵美觀格式化：僅需點擊一次，即可自動格式化雜亂或未縮排的 JSONC 程式碼，以維持清晰的可讀性。
- 多種圖表主題：從多種視覺主題中選擇，以符合您的簡報偏好、深色模式設定或文件風格。
- 彈性匯出（SVG 與 PNG）：將您生成的 JSONC 圖表匯出為高解析度 PNG 圖像或可縮放的 SVG 向量，以便嵌入文件平台。
- 將圖像複製到剪貼簿：立即將圖表視覺內容複製到剪貼簿，以便快速貼入 Slack、Microsoft Teams 或郵件串列中。
- 免登入超連結分享：生成輕量級分享連結和 QR 碼，可立即與團隊成員或客戶分享您的即時 JSONC 圖表——無需註冊或登入。
進階 AI 與平台功能
除了標準的文字轉圖表工作流程外，VPasCode 還整合了業界獨有的功能，旨在加速您的工作流程：
- 自動格式偵測：將任何支援的程式碼片段貼入編輯器，VPasCode 將自動偵測其為 JSONC、PlantUML、Mermaid 或 SQL，並立即選擇適當的渲染器。
- AI 程式碼錯誤修復: 若發現語法錯誤或遺漏的括號？點擊由 AI 修復以自動解決語法錯誤。VPasCode 還提供並排的差異細節，說明了哪些內容被修復，讓您即時學習。
- AI 圖表翻譯:僅需點擊一次，即可原生將圖表內的文字翻譯成多種語言，以促進跨國際團隊的協作。
- OpenDocs 整合:無縫發佈並推送您生成的圖表至 Visual Paradigm OpenDocs，以進行全面的專案文件編寫。
注意：核心圖表編輯、即時渲染、自動程式碼偵測與影像匯出功能對所有使用者完全免費。AI 錯誤修復與 AI 翻譯功能僅提供使用 Visual Paradigm Online Combo Edition（或更高版本）或 Visual Paradigm Desktop Professional Edition（具備有效維護合約）的使用者。
立即試用免費的 JSONC 編輯器！
準備好可視化您的設定檔、檢視複雜的資料結構，並簡化您的開發文件了嗎？您現在就可以在瀏覽器中使用我們的免費的 JSONC 編輯器立即在您的網頁瀏覽器中使用——無需安裝或註冊。
要探索支援的 DSL、主題和平台更新的完整清單，請造訪VPasCode 首頁.