Build a Construction WBS Diagram with PlantUML & VPasCode

在管理像建築項目這樣的大規模運作時，確保每個階段、子任務和交付成果井然有序至關重要。視覺化此層級結構最有效的方法之一是透過工作分解結構（WBS）。傳統上，在圖形軟體中手動繪製這些層級結構既繁瑣又難以維護。因此，現代技術團隊依賴「圖形即程式碼工具（PlantUML）以及像我們免費的「PlantUML 編輯器」, Visual Paradigm VPasCode.

在這堂大師級案例研討中，我將帶您逐步了解我從零開始構建清晰、美觀的建築項目工作分解結構（WBS）的完整思維過程與策略。無論您使用的是「免費 PlantUML 編輯器」還是探索功能強大的「PlantUML 編輯器」環境，本指南將向您展示如何輕鬆將純文字轉換為可直接用於簡報的專業圖表。

1. 建立結構基礎

當我開始一個新的圖形即程式碼專案時，我的第一步從來不是關於樣式設計，而是建立結構層級。對於 WBS，PlantUML 使用工作分解結構語法（@startwbs與「@endwbs」），其中星號用於定義樹狀深度。

我從設定根節點與主要專案階段開始：

@startwbs
title 建築項目工作分解結構

* 建築項目 WBS
** 專案啟動與規劃
** 場地準備
** 主體結構工程
** 建築設備工程
** 室內裝修與收尾
** 外觀與場地工程
** 調試與移交@endwbs

我如此結構化的原因：透過先勾勒出最高層級類別（深度 1），我建立了一個堅實的骨架框架。這確保了當我後續加入細粒度任務時，版面佈局仍能保持邏輯清晰且平衡。

2. 填補細粒度工作包

接下來，我將每個主要階段擴展為可執行的子任務（深度 2 及更深層）。例如，在「專案啟動與規劃」，我需要涵蓋可行性研究、調查、工程圖紙、許可證與進度表。我使用三個星號來添加這些內容：

** 專案啟動與規劃
*** 可行性研究
*** 場地調查與評估
*** 設計與工程圖紙
*** 許可與核准申請
*** 施工進度與預算

我將這種系統化的分解方式重複應用於所有剩餘階段，從場地準備一直到調試。以文字形式撰寫讓我能立即發現遺漏的專案里程碑，而無需擔心在畫布上拖曳與對齊圖形。

3. 使用 PlantUML 樣式打造自訂視覺主題

預設圖表雖具功能性，但專業技術文件則要求精緻的外觀。為提升視覺吸引力，我注入了一段自訂的 <style>區塊，位置就在標題正下方。我選擇了一套協調且現代的配色方案，包含柔和的青色與深板岩色文字，以符合工程美學。

以下是我設定標題與一般節點屬性的方式：

<style>
title {
    FontName "Segoe UI, Helvetica, Arial, sans-serif"
    FontSize 16
    FontColor #0f292d
    FontStyle bold
    HorizontalAlignment center
    Padding 8
}

node {
    Padding 10
    Margin 16
    HorizontalAlignment center
    RoundCorner 10
    LineThickness 0
    FontName "Segoe UI, Helvetica, Arial, sans-serif"
    FontSize 12
    BackgroundColor #e0f0f0
    FontColor #0f292d
    MaximumWidth 100
}
</style>

設計選擇理由：我設定 RoundCorner 10並移除了粗邊框（LineThickness 0）讓區塊呈現現代化、類似卡片的外觀。設定 MaximumWidth 100可確保文字整齊換行，而非拉伸成尷尬的長方形。

4. 實施基於深度的色彩漸層

為了讓利害關係人能立即掃描階層結構，我根據節點深度套用漸層效果。較深的層級會逐漸變淺，引導觀眾視線從專案根節點平滑地向下移動至微任務。

:depth(0) {
    BackgroundColor #b2d8d8
    FontColor #0f292d
}
:depth(1) {
    BackgroundColor #cce6e6
}
:depth(2) {
    BackgroundColor #e0f0f0
}
:depth(3) {
    BackgroundColor #f2f9f9
}
arrow {
    LineColor #52787c
    LineThickness 0.8
}