# .drawio 之 Entity Relationship Diagram 解壓縮後的檔案結構

[TOC]

###### tags: `draw.io` `diagrams.net`

---

## 結構

mxfile
└─ diagram…
   └─ mxGraphModel
      └─ root
         └─ mxCell…

:::info
`…` 表示為一或多個。
:::

### `/mxfile` 根元素

- 必要，BJ4。

| 屬性 | 預設值 | 備註 |
| ---------- | ---------- | -------------------------------------------------------- |
| `host` | `Electron` | 固定值 |
| `modified` | | 最後修改時戳，格式：`yyyy-MM-dd'T'HH:mm:ss.SSSX`；可省略 |
| `agent` | | User-Agent 字串；可省略 |
| `etag` | | 實體標籤；可省略 |
| `version` | | 版本 |
| `type` | `device` | 固定值 |

### `/mxfile/diagram` 分頁配置

- 一或多個。

| 屬性 | 備註 |
| ------ | ------------ |
| `id` | 分頁識別碼 |
| `name` | 分頁顯示名稱 |

### `/mxfile/diagram/mxGraphModel` 繪圖區域配置

- 一個。

| 屬性 | 預設值 | 備註 |
| ------------ | ------ | ---------------------- |
| `dx` | `1284` | ⁉️的 x 軸座標 |
| `dy` | `793` | ⁉️的 y 軸座標 |
| `grid` | `1` | 顯示格線 |
| `gridSize` | `10` | 格線尺寸 |
| `guides` | `1` | 顯示導引 |
| `tooltips` | `1` | 顯示工具提示 |
| `connect` | `1` | ⁉️ |
| `arrows` | `1` | 顯示箭頭 |
| `fold` | `1` | 收折⁉️ |
| `page` | `1` | 目前開啟分頁⁉️ |
| `pageScale` | `1` | 分頁縮放比例 |
| `pageWidth` | `827` | 分頁頁面寬度，單位：mm |
| `pageHeight` | `1169` | 分頁頁面高度，單位：mm |
| `math` | `0` | 數學⁉️ |
| `shadow` | `0` | 陰影⁉️ |

### `/mxfile/diagram/mxGraphModel/root`

- 一個。

### `/mxfile/diagram/mxGraphModel/root/mxCell`

- 二或更多個。

#### 前兩個 `<mxCell/>` 不知是在幹嘛用的

<!-- omitted for brevity -->
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<!-- omitted for brevity -->

第一個 `<mxCell/>` 的 `@id` 為 `0`，第二個 `<mxCell/>` 的 `@id` 為 `1` 且估計其 `@parent` 的 `0` 指的是第一個的 `@id`。

| 屬性 | `<mxfile/>` | `<diagram/>` | `<mxGraphModel/>` | `<root/>` | `<mxCell/>` |
| ------------ | ----------- | ------------ | ----------------- | --------- | ----------- |
| `host` | ✅ | | | | |
| `modified` | ✅ | | | | |
| `agent` | ✅ | | | | |
| `etag` | ✅ | | | | |
| `version` | ✅ | | | | |
| `type` | ✅ | | | | |
| `id` | | ✅ | | | ✅ |
| `name` | | ✅ | | | |
| `dx` | | | ✅ | | |
| `dy` | | | ✅ | | |
| `grid` | | | ✅ | | |
| `gridSize` | | | ✅ | | |
| `guides` | | | ✅ | | |
| `tooltips` | | | ✅ | | |
| `connect` | | | ✅ | | |
| `arrows` | | | ✅ | | |
| `fold` | | | ✅ | | |
| `page` | | | ✅ | | |
| `pageScale` | | | ✅ | | |
| `pageWidth` | | | ✅ | | |
| `pageHeight` | | | ✅ | | |
| `math` | | | ✅ | | |
| `shadow` | | | ✅ | | |
| `value` | | | | | ✅ |
| `style` | | | | | ✅ |

| `<mxCell/>` 樣式 | 資料表 | 主鍵容器 | 主鍵限制(左) | 主鍵定義(右) | 欄位容器 | 欄位限制(左) | 欄位定義(右) |
| ---------------- | ---------------- | ------------------- | ------------ | ------------ | ------------------- | ------------ | ------------ |
| `shape` | `table` | `partialRectangle` | (同左) | (同左) | (同左) | (同左) | (同左) |
| `startSize` | `40` | | | | | | |
| `container` | `1` | | | | | | |
| `collapsible` | `1` | `0` | | | `0` | | |
| `childLayout` | `tableLayout` | | | | | | |
| `fixedRows` | `1` | | | | | | |
| `rowLines` | `0` | | | | | | |
| `connectable` | | | `0` | `0` | | `0` | `0` |
| `dropTarget` | | `0` | | | `0` | | |
| `pointerEvents` | | `0` | | | `0` | | |
| `fillColor` | | `none` | `none` | `none` | `none` | `none` | `none` |
| `top` | | `0` | `0` | `0` | `0` | `0` | `0` |
| `left` | | `0` | `0` | `0` | `0` | `0` | `0` |
| `bottom` | | `1` | `0` | `0` | `0` | `0` | `0` |
| `right` | | `0` | `0` | `0` | `0` | `0` | `0` |
| `points` | | `[[0,0.5],[1,0.5]]` | | | `[[0,0.5],[1,0.5]]` | | |
| `portConstraint` | | `eastwest` | | | `eastwest` | | |
| `fontStyle` | `1` | | `1` | `5` | | | |
| `align` | `center` | | | `left` | | | `left` |
| `spacingLeft` | | | | `6` | | | `6` |
| `resizeLast` | `1` | | | | | | |
| `editable` | | | | | | `1` | |
| `overflow` | | | `hidden` | `hidden` | | `hidden` | `hidden` |
| `fontFamily` | `Roboto Mono` | (同左) | (同左) | (同左) | (同左) | (同左) | (同左) |
| `fontSource` | (註<SUP>1</SUP>) | (同左) | (同左) | (同左) | (同左) | (同左) | (同左) |

- 註<SUP>1</SUP>：`https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DRoboto%2BMono`

## `<mxCell/>`

- 每個資料表需要一個 `<mxCell/>`；做為[**整個資料表容器**](#資料表容器)。
- 有一個 `<mxGeometry/>`。
- 每個主鍵需要三個 `<mxCell/>`。
- 一個做為[整個**主鍵容器**](#主鍵容器)。
- 一個 `<mxGeometry/>`。
- [左邊的**限制**描述](#主鍵左側限制描述)(主鍵<SUP>(`PK`)</SUP>)</SUP>。
- 一個 `<mxGeometry/>`。
- 一個 `<mxRectangle/>`。
- [右邊的欄位**定義**](#主鍵右側欄位定義)(`column_name data_type NOT NULL DFFAULT default_value` etc)。
- 一個 `<mxGeometry/>`。
- 一個 `<mxRectangle/>`。
- 每個欄位需要三個 `<mxCell/>`。
- 一個做為[整個**欄位容器**](#欄位容器)。
- 一個 `<mxGeometry/>`。
- [左邊的**限制**描述](#欄位左側限制描述)(外鍵<SUP>(`FK`)</SUP>、唯一<SUP>(`UQ`)</SUP>等)。
- 一個 `<mxGeometry/>`。
- 一個 `<mxRectangle/>`。
- [右邊的欄位**定義**](#欄位右側欄位定義)(`column_name data_type NOT NULL DFFAULT default_value` etc)。
- 一個 `<mxGeometry/>`。
- 一個 `<mxRectangle/>`。

### 資料表容器

<!-- omitted for brevity -->
<mxCell id="…" value="資料表" style="…" parent="1" vertex="1">
	<mxGeometry x="40" y="40" width="200" height="120" as="geometry"/>
</mxCell>
<!-- omitted for brevity -->

| 屬性 | 值 | 備註 |
| -------- | ---------------- | ----------------------------------------- |
| `id` | | 識別碼 |
| `value` | (帶入資料表名稱) | 顯示名稱 |
| `style` | | 外觀樣式；見下表 |
| `parent` | `1` | 估計是指 `<mxCell id="1" parent="0"/>` 吧 |
| `vertex` | `1` | ⁉️ |

| 外觀 | 樣式 |
| ------------- | ------------------------------------------------------------------- |
| `shape` | `table` |
| `startSize` | `40` |
| `container` | `1` |
| `collapsible` | `1` |
| `childLayout` | `tableLayout` |
| `fixedRows` | `1` |
| `rowLines` | `0` |
| `fontStyle` | `1` |
| `align` | `center` |
| `resizeLast` | `1` |
| `fontFamily` | `Roboto Mono` |
| `fontSource` | `https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DRoboto%2BMono` |

#### `<mxGeometry/>`

| 屬性 | 備註 |
| -------- | ----------------- |
| `x` | 左上角座標之 x 軸 |
| `y` | 左上角座標之 y 軸 |
| `width` | 寬度 |
| `height` | 高度 |
| `as` | `geometry` |

### 主鍵容器

<!-- omitted for brevity -->
<mxCell id="…" value="" style="…" parent="資料表容器" vertex="1">
	<mxGeometry y="40" width="200" height="40" as="geometry"/>
</mxCell>
<!-- omitted for brevity -->

| 屬性 | 值 | 備註 |
| -------- | ------------------ | ---------------- |
| `id` | | 識別碼 |
| `value` | (資料表名稱) | 顯示名稱 |
| `style` | | 外觀樣式；見下表 |
| `parent` | (資料表容器 `@id`) | 所屬於… |
| `vertex` | `1` | ⁉️ |

| 外觀 | 樣式 |
| ---------------- | ------------------------------------------------------------------- |
| `shape` | `partialRectangle` |
| `collapsible` | `0` |
| `dropTarget` | `0` |
| `pointerEvents` | `0` |
| `fillColor` | `none` |
| `top` | `0` |
| `left` | `0` |
| `bottom` | `1` |
| `right` | `0` |
| `points` | `[[0,0.5],[1,0.5]]` |
| `portConstraint` | `eastwest` |
| `fontFamily` | `Roboto Mono` |
| `fontSource` | `https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DRoboto%2BMono` |

#### 主鍵容器的 `<mxGeometry/>`

| 屬性 | 備註 |
| -------- | ----------------------------------- |
| `y` | 左上角座標之 y 軸；同資料表名稱高度 |
| `width` | 寬度；同資料表容器 |
| `height` | 高度 |
| `as` | `geometry` |

### 主鍵左側限制描述

<!-- omitted for brevity -->
<mxCell id="…" value="PK" style="…" parent="主鍵容器" vertex="1">
	<mxGeometry width="40" height="40" as="geometry">
		<mxRectangle width="40" height="40" as="alternateBounds"/>
	</mxGeometry>
</mxCell>
<!-- omitted for brevity -->

| 屬性 | 值 | 備註 |
| -------- | ---------------- | ---------------- |
| `id` | | 識別碼 |
| `value` | `PK` | 限制名稱 |
| `style` | | 外觀樣式；見下表 |
| `parent` | (主鍵容器 `@id`) | 所屬於… |
| `vertex` | `1` | ⁉️ |

| 外觀 | 樣式 |
| ------------- | ------------------------------------------------------------------- |
| `shape` | `partialRectangle` |
| `connectable` | `0` |
| `fillColor` | `none` |
| `top` | `0` |
| `left` | `0` |
| `bottom` | `0` |
| `right` | `0` |
| `fontStyle` | `1` |
| `overflow` | `hidden` |
| `fontFamily` | `Roboto Mono` |
| `fontSource` | `https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DRoboto%2BMono` |

#### 主鍵左側限制描述的 `<mxGeometry/>`

| 屬性 | 備註 |
| -------- | ----------------- |
| `width` | 寬度 |
| `height` | 高度 |
| `as` | `alternateBounds` |

##### 主鍵左側限制描述的 `<mxRectangle/>`

| 屬性 | 備註 |
| -------- | --------------------------------- |
| `width` | 寬度；同上層 `<mxGeometry/>` 寬度 |
| `height` | 高度；同上層 `<mxGeometry/>` 高度 |
| `as` | `alternateBounds` |

### 主鍵右側欄位定義

<!-- omitted for brevity -->
<mxCell id="…" value="id serial" style="…" parent="主鍵容器" vertex="1">
	<mxGeometry x="40" width="160" height="40" as="geometry">
		<mxRectangle width="160" height="40" as="alternateBounds"/>
	</mxGeometry>
</mxCell>
<!-- omitted for brevity -->

| 屬性 | 值 | 備註 |
| -------- | ---------------- | ---------------- |
| `id` | | 識別碼 |
| `value` | | 資料定義語法 |
| `style` | | 外觀樣式；見下表 |
| `parent` | (主鍵容器 `@id`) | 所屬於… |
| `vertex` | `1` | ⁉️ |

| 外觀 | 樣式 |
| ------------- | ------------------------------------------------------------------- |
| `shape` | `partialRectangle` |
| `connectable` | `0` |
| `fillColor` | `none` |
| `top` | `0` |
| `left` | `0` |
| `bottom` | `0` |
| `right` | `0` |
| `align` | `left` |
| `spacingLeft` | `6` |
| `fontStyle` | `5` |
| `overflow` | `hidden` |
| `fontFamily` | `Roboto Mono` |
| `fontSource` | `https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DRoboto%2BMono` |

#### 主鍵右側欄位定義的 `<mxGeometry/>`

| 屬性 | 備註 |
| -------- | ------------------------------------------------------ |
| `x` | 左上角座標之 x 軸；帶入**主鍵欄位左側限制描述**寬度 |
| `width` | 寬度；**主鍵容器**寬度扣掉**主鍵欄位左側限制描述**寬度 |
| `height` | 高度 |
| `as` | `alternateBounds` |

#### 主鍵右側欄位定義的 `<mxRectangle/>`

| 屬性 | 備註 |
| -------- | --------------------------------- |
| `width` | 寬度；同上層 `<mxGeometry/>` 寬度 |
| `height` | 高度；同上層 `<mxGeometry/>` 高度 |
| `as` | `alternateBounds` |

### 欄位容器

<!-- omitted for brevity -->
<mxCell id="…" value="" style="…" parent="資料表容器" vertex="1">
	<mxGeometry y="80" width="200" height="40" as="geometry"/>
</mxCell>
<!-- omitted for brevity -->

| 屬性 | 值 | 備註 |
| -------- | ------------------ | ---------------- |
| `id` | | 識別碼 |
| `value` | (資料表名稱) | 顯示名稱 |
| `style` | | 外觀樣式；見下表 |
| `parent` | (資料表容器 `@id`) | 所屬於… |
| `vertex` | `1` | ⁉️ |

| 外觀 | 樣式 |
| ---------------- | ------------------------------------------------------------------- |
| `shape` | `partialRectangle` |
| `collapsible` | `0` |
| `dropTarget` | `0` |
| `pointerEvents` | `0` |
| `fillColor` | `none` |
| `top` | `0` |
| `left` | `0` |
| `bottom` | `1` |
| `right` | `0` |
| `points` | `[[0,0.5],[1,0.5]]` |
| `portConstraint` | `eastwest` |
| `fontFamily` | `Roboto Mono` |
| `fontSource` | `https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DRoboto%2BMono` |

#### 欄位容器的 `<mxGeometry/>`

| 屬性 | 備註 |
| -------- | ------------------------------------------------------------- |
| `y` | 左上角座標之 y 軸；**資料表名稱**高度加上**前面所有欄位容器**高度 |
| `width` | 寬度；同資料表容器 |
| `height` | 高度 |
| `as` | `geometry` |

### 欄位左側限制描述

<!-- omitted for brevity -->
<mxCell id="…" value="FK" style="…" parent="欄位容器" vertex="1">
	<mxGeometry width="40" height="40" as="geometry">
		<mxRectangle width="40" height="40" as="alternateBounds"/>
	</mxGeometry>
</mxCell>
<!-- omitted for brevity -->

| 屬性 | 值 | 備註 |
| -------- | ----------------- | ---------------- |
| `id` | | 識別碼 |
| `value` | `FK`、`UQ` 或留白 | 限制標示 |
| `style` | | 外觀樣式；見下表 |
| `parent` | (欄位容器 `@id`) | 所屬於… |
| `vertex` | `1` | ⁉️ |

| 外觀 | 樣式 |
| ------------- | ------------------------------------------------------------------- |
| `shape` | `partialRectangle` |
| `connectable` | `0` |
| `fillColor` | `none` |
| `top` | `0` |
| `left` | `0` |
| `bottom` | `0` |
| `right` | `0` |
| `editable` | `1` |
| `overflow` | `hidden` |
| `fontFamily` | `Roboto Mono` |
| `fontSource` | `https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DRoboto%2BMono` |

#### 欄位左側限制描述的 `<mxGeometry/>`

| 屬性 | 備註 |
| -------- | ----------------- |
| `width` | 寬度 |
| `height` | 高度 |
| `as` | `alternateBounds` |

##### 欄位左側限制描述的 `<mxRectangle/>`

| 屬性 | 備註 |
| -------- | --------------------------------- |
| `width` | 寬度；同上層 `<mxGeometry/>` 寬度 |
| `height` | 高度；同上層 `<mxGeometry/>` 高度 |
| `as` | `alternateBounds` |

### 欄位右側欄位定義

<!-- omitted for brevity -->
<mxCell id="…" value="column_name int NOT NULL" style="…" parent="Llg9hWSBDlxRlbKe96Ud-5" vertex="1">
	<mxGeometry x="40" width="160" height="40" as="geometry">
		<mxRectangle width="160" height="40" as="alternateBounds"/>
	</mxGeometry>
</mxCell>
<!-- omitted for brevity -->

| 屬性 | 值 | 備註 |
| -------- | ---------------- | ---------------- |
| `id` | | 識別碼 |
| `value` | | 資料定義語法 |
| `style` | | 外觀樣式；見下表 |
| `parent` | (欄位容器 `@id`) | 所屬於… |
| `vertex` | `1` | ⁉️ |

| 外觀 | 樣式 |
| ------------- | ------------------------------------------------------------------- |
| `shape` | `partialRectangle` |
| `connectable` | `0` |
| `fillColor` | `none` |
| `top` | `0` |
| `left` | `0` |
| `bottom` | `0` |
| `right` | `0` |
| `align` | `left` |
| `spacingLeft` | `6` |
| `overflow` | `hidden` |
| `fontFamily` | `Roboto Mono` |
| `fontSource` | `https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DRoboto%2BMono` |

#### 欄位右側欄位定義的 `<mxGeometry/>`

| 屬性 | 備註 |
| -------- | ------------------------------------------------------ |
| `x` | 左上角座標之 x 軸；帶入**主鍵欄位左側限制描述**寬度 |
| `width` | 寬度；**主鍵容器**寬度扣掉**主鍵欄位左側限制描述**寬度 |
| `height` | 高度 |
| `as` | `alternateBounds` |

#### 欄位右側欄位定義的 `<mxRectangle/>`

| 屬性 | 備註 |
| -------- | --------------------------------- |
| `width` | 寬度；同上層 `<mxGeometry/>` 寬度 |
| `height` | 高度；同上層 `<mxGeometry/>` 高度 |
| `as` | `alternateBounds` |