C4 圖表
C4 圖表：目前這是一個實驗性圖表。語法和屬性可能會在未來的版本中變更。當語法穩定後，將提供適當的文件。
Mermaid 的 C4 圖表語法與 plantUML 相容。請參閱以下範例
如需範例，請參閱原始碼 demos/index.html
支援 5 種 C4 圖表類型。
- 系統情境 (C4Context)
- 容器圖 (C4Container)
- 元件圖 (C4Component)
- 動態圖 (C4Dynamic)
- 部署圖 (C4Deployment)
請參考連結的文件 C4-PlantUML 語法，以了解如何撰寫 C4 圖表。
C4 圖表是固定樣式，例如 CSS 顏色，因此在不同的外觀下不提供不同的 CSS。updateElementStyle 和 UpdateElementStyle 寫在圖表的最後一部分。updateElementStyle 與原始定義不一致，並更新關係的樣式，包括文字標籤相對於原始位置的偏移。
版面配置不使用完全自動化的版面配置演算法。形狀的位置是透過變更陳述式的撰寫順序來調整的。因此，沒有計畫支援以下版面配置陳述式。可以使用 UpdateLayoutConfig 來調整每列的形狀數量和邊界的數量。
- 版面配置
- Lay_U、Lay_Up
- Lay_D、Lay_Down
- Lay_L、Lay_Left
- Lay_R、Lay_Right
短期內不支援以下未完成的功能。
[ ] 精靈圖 (sprite)
[ ] 標籤 (tags)
[ ] 連結 (link)
[ ] 圖例 (Legend)
[x] 系統情境
- [x] Person(別名, 標籤, ?描述, ?精靈圖, ?標籤, $連結)
- [x] Person_Ext
- [x] System(別名, 標籤, ?描述, ?精靈圖, ?標籤, $連結)
- [x] SystemDb
- [x] SystemQueue
- [x] System_Ext
- [x] SystemDb_Ext
- [x] SystemQueue_Ext
- [x] Boundary(別名, 標籤, ?類型, ?標籤, $連結)
- [x] Enterprise_Boundary(別名, 標籤, ?標籤, $連結)
- [x] System_Boundary
[x] 容器圖
- [x] Container(別名, 標籤, ?技術, ?描述, ?精靈圖, ?標籤, $連結)
- [x] ContainerDb
- [x] ContainerQueue
- [x] Container_Ext
- [x] ContainerDb_Ext
- [x] ContainerQueue_Ext
- [x] Container_Boundary(別名, 標籤, ?標籤, $連結)
[x] 元件圖
- [x] Component(別名, 標籤, ?技術, ?描述, ?精靈圖, ?標籤, $連結)
- [x] ComponentDb
- [x] ComponentQueue
- [x] Component_Ext
- [x] ComponentDb_Ext
- [x] ComponentQueue_Ext
[x] 動態圖
- [x] RelIndex(索引, 從, 到, 標籤, ?標籤, $連結)
[x] 部署圖
- [x] Deployment_Node(別名, 標籤, ?類型, ?描述, ?精靈圖, ?標籤, $連結)
- [x] Node(別名, 標籤, ?類型, ?描述, ?精靈圖, ?標籤, $連結): Deployment_Node() 的簡稱
- [x] Node_L(別名, 標籤, ?類型, ?描述, ?精靈圖, ?標籤, $連結): 左對齊的 Node()
- [x] Node_R(別名, 標籤, ?類型, ?描述, ?精靈圖, ?標籤, $連結): 右對齊的 Node()
[x] 關係類型
- [x] Rel(從, 到, 標籤, ?技術, ?描述, ?精靈圖, ?標籤, $連結)
- [x] BiRel (雙向關係)
- [x] Rel_U, Rel_Up
- [x] Rel_D, Rel_Down
- [x] Rel_L, Rel_Left
- [x] Rel_R, Rel_Right
- [x] Rel_Back
- [x] RelIndex * 與 C4-PlantUML 語法相容，但忽略索引參數。序號由 rel 陳述式的撰寫順序決定。
[ ] 自訂標籤/刻板印象支援和外觀參數更新
- [ ] AddElementTag(標籤刻板印象, ?背景顏色, ?字體顏色, ?邊框顏色, ?陰影, ?形狀, ?精靈圖, ?技術, ?圖例文本, ?圖例精靈圖): 引入新的元素標籤。已標記元素的樣式會更新，並且標籤會顯示在計算的圖例中。
- [ ] AddRelTag(標籤刻板印象, ?文字顏色, ?線條顏色, ?線條樣式, ?精靈圖, ?技術, ?圖例文本, ?圖例精靈圖): 引入新的關係標籤。已標記關係的樣式會更新，並且標籤會顯示在計算的圖例中。
- [x] UpdateElementStyle(元素名稱, ?背景顏色, ?字體顏色, ?邊框顏色, ?陰影, ?形狀, ?精靈圖, ?技術, ?圖例文本, ?圖例精靈圖): 此呼叫會更新元素（元件，...）的預設樣式，並且不會建立其他圖例項目。
- [x] UpdateRelStyle(從, 到, ?文字顏色, ?線條顏色, ?offsetX, ?offsetY): 此呼叫會更新預設的關係顏色，並且不會建立其他圖例項目。新增了兩個新參數 offsetX 和 offsetY 來設定文字原始位置的偏移。
- [ ] RoundedBoxShape(): 此呼叫會傳回圓角方塊形狀的名稱，並且可以當作 ?shape 引數使用。
- [ ] EightSidedShape(): 此呼叫會傳回八邊形狀的名稱，並且可以當作 ?shape 引數使用。
- [ ] DashedLine(): 此呼叫會傳回虛線的名稱，並且可以當作 ?lineStyle 引數使用。
- [ ] DottedLine(): 此呼叫會傳回點線的名稱，並且可以當作 ?lineStyle 引數使用。
- [ ] BoldLine(): 此呼叫會傳回粗線的名稱，並且可以當作 ?lineStyle 引數使用。
- [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): 新增。此呼叫會更新預設的 c4ShapeInRow(4) 和 c4BoundaryInRow(2)。
有兩種方式可以使用問號來指派參數。一種是依照參數順序使用非命名參數指派方法，另一種是使用命名參數指派方法，其中名稱必須以 $ 符號開頭。
範例：UpdateRelStyle(從, 到, ?文字顏色, ?線條顏色, ?offsetX, ?offsetY)
UpdateRelStyle(customerA, bankA, "red", "blue", "-40", "60")
UpdateRelStyle(customerA, bankA, $offsetX="-40", $offsetY="60", $lineColor="blue", $textColor="red")
UpdateRelStyle(customerA, bankA, $offsetY="60")