前言：DSL 設計器的視覺化骨架
在 Visual Studio DSL Tools 中，定義領域模型只是第一步；要讓模型在設計介面上「可視、可編輯、可互動」，必須定義圖形表示。本文以 LanguageSm 專案為例，深入剖析 DSL 定義介面右側「泳道」區域的五大核心圖形元素：圖表、編輯器、形狀、連接器、泳道。
一、圖表：設計介面的根容器
LanguageSmDiagram 是圖表元素，屬性如下：
- 角色：儲存形狀與連接器映射的容器，代表設計介面本身
- 模型映射：對應領域模型的根域類（例：
ExampleModel）
- 生成產物：T4 模板依據屬性生成
Diagram 類別（位於 GeneratedCode 資料夾）
- 可擴展性：可透過 partial 類別擴展，實現自訂背景、網格、縮放、概覽視窗等
- 關鍵屬性分類：
- 外觀：背景色、網格顯示、縮放範圍
- 代碼：命名空間、存取修飾詞、基類
- 文檔：工具提示、說明文字
- 公開樣式屬性：暴露給屬性視窗的樣式屬性
- 資源：圖示、圖片資源
若需完全自訂圖形化介面（非標準 DSL 設計器），必須實現自己的 Diagram 類別。
二、編輯器：VS 整合的進入點
編輯器定義位於 DSL Explorer 的「編輯器」節點，分兩類：
- 設計器：圖形化設計介面（預設）
- 自定義編輯器：非圖形化編輯體驗（如表格、文字編輯器）
關鍵屬性：
- 對應圖表元素
- 編輯器 GUID（VS 擴展性系統識別用）
- 根域類
- 檔案副檔名（如
.languagesm）
- 檔案關聯圖示
這些屬性用於生成 EditorFactory 類別、工具箱註冊、檔案關聯等 VS 整合機制。可刪除預設設計器，在根節點右鍵「添加自定義編輯器」實現完全自訂編輯體驗（需自行實現 DocView）。
三、形狀：模型元素的視覺化投影
形狀是 DSL 圖形符號的核心，與模型元素一一對應，使模型元素形象化。工具箱提供五種形狀類型，拖曳至圖形區即可創建：
1. 幾何形狀
- 基本形狀：矩形、橢圓、菱形等
- 文本裝飾器：
NameDecorator 控制形狀內文本顯示（內容、位置、字體、對齊）
- 可添加裝飾器：
IconDecorator：顯示圖示ExpandCollapseDecorator：展開/收合狀態
2. 隔間形狀
- 帶有多個隔間的幾何形狀（如 UML 類別圖：名稱/屬性/方法三隔間）
- 每個隔間可獨立映射領域模型集合屬性
- 同樣支援文本、圖示、展開收合裝飾器
3. 圖像形狀
- 顯示位圖而非幾何輪廓
- 可定義多種狀態對應不同圖像（預設、選中、禁用等）
- 屬性中指定圖示資源
4. 連接埠形狀
- 依附於父形狀輪廓，僅能沿輪廓移動的特殊形狀
- 用於表示連接點（如電路圖腳位、流程圖連接點）
- 除位置限制外，行為同幾何形狀
5. 泳道
- 將圖表劃分為行或列的區域容器
- 常用於 BPMN、跨職能流程圖、時序圖
- 來源：https://lonely7345.cnblogs.com/
四、連接器：關係的視覺化
雖本文重點在形狀，但連接器是圖形化 DSL 的另一半：
- 映射領域關係（引用、嵌入）
- 支援路由演算法（直線、正交、曲線）
- 源/目標裝飾器（箭頭、菱形、角色名）
- 標籤裝飾器（關係名稱、多重性）
五、圖形映射：模型與視圖的紐帶
在 DSL 定義中，必須建立 圖形映射：
- 選中圖表元素
- 在「圖形映射」屬性中添加映射規則
- 每條規則：域類別 → 形狀類別
- 例如：
ExampleElement → ExampleShape
這使得：
- 模型新增元素 → 自動創建對應形狀
- 形狀拖曳移動 → 更新模型位置屬性
- 形狀刪除 → 刪除模型元素（視嵌入關係而定）
實戰建議與常見坑點
- 形狀與模型 1:1 原則：一個域類別映射一個形狀類別；需不同視覺表示時，用繼承或裝飾器區分
- 裝飾器綁定：文本裝飾器的
DisplayProperty 需正確綁定域屬性，支援自訂格式化
- 工具箱自動填入：定義形狀後，重建專案，工具箱會自動出現對應項目
- 圖表擴展點：
OnLayoutChanged、OnChildAdded 等虛擬方法可攔截佈局變更
- 效能考量：大量形狀時，考慮虛擬化、分層渲染、延遲載入
總結
DSL 圖形表示系統以「圖表為根、編輯器為入口、形狀為元素投影、連接器為關係投影、泳道為區域容器」構成完整視覺化編輯體驗。掌握五種形狀類型的特性與適用場景，正確配置裝飾器與映射，是構建專業級 DSL 設計器的關鍵。下一篇將深入連接器定義與佈局演算法客製化。
