Supported Diagram Types in VPasCode

VPasCode brings PlantUML, Mermaid, Graphviz, ECharts, and Markmap together in one unified workspace. Try our diagram-as-code tool to streamline your architectural documentation.

PlantUML 支援

在 VPasCode 中的 PlantUML 為軟體架構師提供強大的圖表即程式碼工具用來建模複雜系統。輕鬆地將純文字轉換為正式的 UML 類別、序列、活動和 C4 架構圖表。

PlantUML use case diagram generated from text in VPasCode diagram-as-code tool

用例圖
PlantUML class diagram rendered from code using VPasCode text to diagram engine

類別圖
PlantUML sequence diagram created inside VPasCode diagram-as-code tool

序列圖
PlantUML activity diagram workflow rendered from text in VPasCode editor

活動圖
PlantUML state machine diagram generated using VPasCode diagram-as-code tool

狀態圖
PlantUML object diagram model rendered in VPasCode text to diagram platform

物件圖
PlantUML component architecture diagram created in VPasCode diagram-as-code tool

元件圖
PlantUML deployment architecture created using VPasCode text to diagram engine

部署圖
PlantUML timing diagram generated from text script in VPasCode editor

時序圖
PlantUML entity relationship diagram created using VPasCode diagram-as-code tool

ERD 圖
PlantUML ArchiMate enterprise architecture diagram rendered in VPasCode text to diagram platform

ArchiMate 圖
PlantUML C4 model system architecture diagram generated inside VPasCode diagram-as-code tool

C4 模型圖

Mermaid.js 支援

專為快速開發文件設計，VPasCode 將 Mermaid 納入為輕量且靈活的圖表即程式碼工具。幾秒內即可生成流程圖、使用者旅程、Gantt 專案時程圖和 Git 圖表。

Mermaid flowchart diagram generated from text in VPasCode diagram-as-code tool

流程圖
Mermaid class diagram rendered from code using VPasCode text to diagram engine

類別圖
Mermaid sequence diagram created inside VPasCode diagram-as-code tool

序列圖
Mermaid entity relationship diagram generated using VPasCode diagram-as-code tool

ERD 圖
Mermaid state diagram created from text script in VPasCode editor

狀態圖
Mermaid mind map rendered from plain text in VPasCode text to diagram tool

思維導圖
Mermaid Gantt project chart generated inside VPasCode diagram-as-code tool

甘特圖
Mermaid quadrant matrix chart created using VPasCode text to diagram platform

象限圖
Mermaid timeline diagram rendered from code script in VPasCode editor

時間軸
Mermaid user journey map created inside VPasCode diagram-as-code tool

使用者旅程
Mermaid Venn diagram generated from text in VPasCode diagram-as-code tool

維恩圖
Mermaid pie chart rendered from data script using VPasCode text to diagram tool

圓餅圖
Mermaid Ishikawa cause and effect diagram created in VPasCode diagram-as-code tool

石川圖
Mermaid treemap chart generated from text script using VPasCode editor

樹狀圖
Mermaid Sankey flow diagram rendered inside VPasCode diagram-as-code tool

桑基圖
Mermaid XY line and bar chart created from code in VPasCode text to diagram tool

XY 圖表
Mermaid Kanban task board generated using VPasCode diagram-as-code tool

看板
Mermaid Wardley strategy map rendered from text in VPasCode editor

沃德利地圖
Mermaid event modeling diagram created using VPasCode diagram-as-code tool

事件建模
Mermaid system architecture diagram generated from code in VPasCode text to diagram platform

架構圖
Mermaid network packet structure diagram rendered in VPasCode diagram-as-code tool

封包圖
Mermaid block diagram created from text script inside VPasCode editor

方塊圖
Mermaid system requirements diagram generated using VPasCode diagram-as-code tool

需求圖
Mermaid C4 software model diagram rendered in VPasCode text to diagram platform

C4 圖
Mermaid Git graph branch diagram created from code using VPasCode diagram-as-code tool

GitGraph 圖

複雜網路與有向圖（Graphviz）

針對複雜的關聯依賴與結構層級，VPasCode 擔任精準的圖示程式碼工具直接從 DOT 程式碼中渲染高密度的組織結構圖、資料流程圖與系統節點地圖。
Graphviz directed flowchart diagram generated from text in VPasCode diagram-as-code tool

有向圖
Graphviz network connectivity chart rendered from code using VPasCode text to diagram engine

圖
Graphviz grouped cluster diagram created inside VPasCode diagram-as-code tool

群集

D2 支援

在 VPasCode 中，D2 為工程團隊提供直覺的文本轉圖示引擎，專為清晰與快速而設計。輕鬆將簡單的文本程式碼轉換為清晰的雲端架構、資料庫模型與 CI/CD 工作流程圖。

D2 圖

互動式資料圖表與分析（ECharts）

超越軟體架構，VPasCode 擔任多功能的圖示程式碼工具用於資料視覺化。直接將原始的 JSON 資料集與文字程式碼轉換為互動式圓餅圖、長條圖與線型趨勢圖。

ECharts column chart generated from text in VPasCode diagram-as-code tool

柱狀圖
ECharts grouped column chart rendered from code using VPasCode text to diagram engine

柱狀圖（群組）
ECharts stacked column chart created inside VPasCode diagram-as-code tool

柱狀圖（堆疊）
ECharts horizontal bar chart generated from text in VPasCode diagram-as-code tool

長條圖
ECharts grouped bar chart rendered from data script in VPasCode text to diagram engine

長條圖（群組）
ECharts stacked bar chart created using VPasCode diagram-as-code tool

長條圖（堆疊）
ECharts line trend chart generated from text script in VPasCode editor

折線圖
ECharts filled area chart rendered using VPasCode text to diagram platform

面積圖
ECharts stacked area chart created inside VPasCode diagram-as-code tool

面積圖（堆疊）
ECharts pie chart rendered from data text in VPasCode diagram-as-code tool

餅圖
ECharts doughnut chart generated using VPasCode text to diagram engine

環形圖
ECharts sunburst hierarchy chart created in VPasCode diagram-as-code tool

太陽burst圖
ECharts treemap data chart rendered from text script in VPasCode editor

樹狀圖
ECharts structured tree diagram generated using VPasCode diagram-as-code tool

樹狀圖
ECharts Sankey flow chart created from text in VPasCode text to diagram engine

Sankey圖
ECharts conversion funnel chart rendered in VPasCode diagram-as-code tool

漏斗圖
ECharts boxplot statistical chart generated using VPasCode text to diagram tool

箱形圖
ECharts stock candlestick chart created from data in VPasCode diagram-as-code tool

K線圖
ECharts scatter plot chart rendered from text in VPasCode editor

散點圖
ECharts parallel coordinates chart generated using VPasCode diagram-as-code tool

平行圖
ECharts grid heatmap chart rendered from code in VPasCode text to diagram engine

熱力圖
ECharts radar performance chart created inside VPasCode diagram-as-code tool

雷達圖
ECharts network graph chart generated from text in VPasCode diagram-as-code tool

圖表
ECharts Nightingale rose chart rendered using VPasCode text to diagram engine

夜鶴（玫瑰）圖
ECharts metric gauge chart created in VPasCode diagram-as-code tool

儀表盤圖
ECharts pictorial bar chart generated from text script in VPasCode editor

圖示長條圖
ECharts theme river timeline chart rendered using VPasCode diagram-as-code tool

主題河圖
ECharts calendar heatmap chart created from text data in VPasCode text to diagram platform

日曆圖

Markdown思維導圖與腦力激盪（Markmap）

輕鬆整理您的想法，無需手動對齊形狀。VPasCode 操作直覺程式碼繪圖工具可將純文字的 Markdown 無序清單直接轉換為結構化、可響應的 Markmap 樹狀圖。

Markmap mind map tree generated from Markdown text in VPasCode diagram-as-code tool

思維導圖

資料與結構

無需手動佈局即可立即可視化資料庫結構。VPasCode 作為可靠的文本轉圖表工具，能自動將純文字清單與結構轉換為清晰、有組織的實體關係佈局。

SQL

DBML

JSON

JSON Schema

JSONC

JSON5

JSONL 與 NDJSON

TOON

YAML

XML

CSV

TOML

程式碼

無需手動繪製即可立即規劃軟體邏輯與專案結構。VPasCode 作為一款靈活的程式碼繪圖工具，能自動將原始程式碼細節與元件轉換為清晰、結構化的架構佈局。

Java

TypeScript

Go

Rust

C#

Python

C

C++

PHP

Ruby

Scala

Zig

Kotlin

Swift

Elixir
返回頂端