AI輔助生成文字基礎圖表(AI generated text-based diagram) II
===
> [name=George YEH]
> [time=Sun, May 15, 2024 10:30 AM]
###### tags: `AI`, `GenAI`, `ChatGPT`, `Text-based diagram`, `Graphviz`, `Mermaid`
url: https://hackmd.io/@b73201020/B10Bf6Zm0
:::info
:bulb: 本課程將使用 生成式AI工具。可以先註冊[OpenAI ChatGPT](https://chat.openai.com/), 或 [Microsoft Copilot(建議使用Edge瀏覽器)](https://copilot.microsoft.com/)
另外，也將使用
* 文字基礎圖表(Text-based diagram)線上工具:
* **Markdown**, https://markmap.js.org/repl
* **PlantUML**, https://www.plantuml.com/
* **Mermaid**, https://mermaid.live
* **Graphviz**, https://dreampuf.github.io/GraphvizOnline
:::
#### :small_blue_diamond: **講師:** 靜宜大學 [葉介山資訊長](https://www1.pu.edu.tw/~jsyeh/DRYEH/)
## 文字基礎圖表有哪些格式?
* **Markdown**
* 特點：Markdown是一種輕量級標記語言，支援簡單的圖表和列表表示方法。
* 用途：適用於編寫具有基本結構圖表的文檔，如GitHub README文件中的項目結構描述。
* 線上編輯工具 https://markmap.js.org/repl
* **[PlantUML](https://www.plantuml.com/)**
* 特點：簡單的文本語言來定義UML圖表，然後自動轉換成圖形表示。
* 用途：快速生成軟體設計文檔中的UML圖表。
* 線上編輯工具 https://www.plantuml.com/
* **[Mermaid](https://mermaid.js.org/)**
* 特點：文本語言描述圖表，然後自動生成流程圖、序列圖、甘特圖等。
* 用途：適用於Markdown文件中快速創建和共享複雜的圖表。
* 線上編輯工具 https://mermaid.live ☝️
* **[Graphviz](https://graphviz.org/)**
* 特點：使用DOT語言來描述圖表，然後生成圖形。
* 用途：用於自動化圖表生成，特別適合需要表示複雜網絡或結構的場合。
* 線上編輯工具
* https://dreampuf.github.io/GraphvizOnline/ ☝️
* https://www.devtoolsdaily.com/graphviz ☝️
* **[D2](https://d2lang.com/) (Diagram Definition Language)**
* 特點：Declarative Diagramming
* 用途：適合需要表示複雜網絡或結構。
* 線上編輯工具
* https://play.d2lang.com/ ☝️
## ℹ Visual Studio Code Extensions
### 在VSCode 中預覽 text-based diagram
- markmap (by Gerald Liu), Supported Formats `*.md`
- PlantUML (by jebbs), Supported Formats `*.wsd`, `*.pu`, `*.puml`, `*.plantuml`, `*.iuml`
- Markdown Preview Mermaid (by Matt Bierner), Supported Formats `*.md`
- Graphviz Interactive Preview (by tintinweb), Supported Formats `*.dot`
## ℹ WEB javascript
## ℹ 範例
### Markmap
- https://markmap.js.org/ 將 Markdown 語法的文本通過思維導圖的方式進行可視化
- Online tool, https://markmap.js.org/repl
#### Markmap格式:
```typescript
---
markmap:
colorFreezeLevel: 2
---
# markmap
## Links
- [Website](https://markmap.js.org/)
- [GitHub](https://github.com/gera2ld/markmap)
## Related Projects
- [coc-markmap](https://github.com/gera2ld/coc-markmap) for Neovim
- [markmap-vscode](https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode) for VSCode
- [eaf-markmap](https://github.com/emacs-eaf/eaf-markmap) for Emacs
## Features
Note that if blocks and lists appear at the same level, the lists will be ignored.
### Lists
- **strong** ~~del~~ *italic* ==highlight==
- `inline code`
- [x] checkbox
- Katex: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$ <!-- markmap: fold -->
- [More Katex Examples](#?d=gist:af76a4c245b302206b16aec503dbe07b:katex.md)
- Now we can wrap very very very very long text based on `maxWidth` option
### Blocks
```
#### 呈現:
```markmap
---
markmap:
colorFreezeLevel: 2
---
# markmap
## Links
- [Website](https://markmap.js.org/)
- [GitHub](https://github.com/gera2ld/markmap)
## Related Projects
- [coc-markmap](https://github.com/gera2ld/coc-markmap) for Neovim
- [markmap-vscode](https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode) for VSCode
- [eaf-markmap](https://github.com/emacs-eaf/eaf-markmap) for Emacs
## Features
Note that if blocks and lists appear at the same level, the lists will be ignored.
### Lists
- **strong** ~~del~~ *italic* ==highlight==
- `inline code`
- [x] checkbox
- Katex: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$ <!-- markmap: fold -->
- [More Katex Examples](#?d=gist:af76a4c245b302206b16aec503dbe07b:katex.md)
- Now we can wrap very very very very long text based on `maxWidth` option
### Blocks
```
### PlantUML
- https://plantuml.com/en/
- Online tool, https://www.plantuml.com/
#### PlantUML格式: Class Diagram
```typescript
@startuml
class Customer {
+customerID: int
+name: String
+contactInfo: ContactInfo
+address: String
--Methods--
+addContactInfo(): void
+updateContactInfo(): void
}
class Contact {
+contactID: int
+name: String
+role: String
+phone: String
+email: String
--Methods--
+updateContactInfo(): void
+queryHistory(): void
}
class Opportunity {
+opportunityID: int
+description: String
+estimatedValue: double
+successProbability: double
+expectedCloseDate: Date
--Methods--
+updateStage(): void
+calculateEstimatedValue(): void
}
class Case {
+caseID: int
+description: String
+openDate: Date
+status: String
+resolutionDate: Date
--Methods--
+updateStatus(): void
+recordSolution(): void
}
class ServiceRequest {
+requestID: int
+description: String
+requestType: String
+status: String
+openDate: Date
+closeDate: Date
--Methods--
+updateStatus(): void
+allocateResources(): void
}
class Product {
+productID: int
+name: String
+description: String
+price: double
+inventoryQuantity: int
--Methods--
+updateInventory(): void
+adjustPricing(): void
}
Customer "1" -- "*" Contact
Customer "1" -- "*" Opportunity
Opportunity "*" -- "*" Product
Customer -- "*" Case
Customer -- "*" ServiceRequest
Contact "*" -- "*" Case
Contact "*" -- "*" ServiceRequest
@enduml
```
#### 呈現:
```plantuml
@startuml
class Customer {
+customerID: int
+name: String
+contactInfo: ContactInfo
+address: String
--Methods--
+addContactInfo(): void
+updateContactInfo(): void
}
class Contact {
+contactID: int
+name: String
+role: String
+phone: String
+email: String
--Methods--
+updateContactInfo(): void
+queryHistory(): void
}
class Opportunity {
+opportunityID: int
+description: String
+estimatedValue: double
+successProbability: double
+expectedCloseDate: Date
--Methods--
+updateStage(): void
+calculateEstimatedValue(): void
}
class Case {
+caseID: int
+description: String
+openDate: Date
+status: String
+resolutionDate: Date
--Methods--
+updateStatus(): void
+recordSolution(): void
}
class ServiceRequest {
+requestID: int
+description: String
+requestType: String
+status: String
+openDate: Date
+closeDate: Date
--Methods--
+updateStatus(): void
+allocateResources(): void
}
class Product {
+productID: int
+name: String
+description: String
+price: double
+inventoryQuantity: int
--Methods--
+updateInventory(): void
+adjustPricing(): void
}
Customer "1" -- "*" Contact
Customer "1" -- "*" Opportunity
Opportunity "*" -- "*" Product
Customer -- "*" Case
Customer -- "*" ServiceRequest
Contact "*" -- "*" Case
Contact "*" -- "*" ServiceRequest
@enduml
```
### Mermaid.js
- https://mermaid.js.org/
- Online tool, https://mermaid.live
#### Mermaid格式: Bubble Sort 流程圖
```typescript
graph TD;
A(開始) --> B(初始化：設定已排序標記為false<br>設定n為數列長度);
B --> C{已排序標記為<br>true？};
C -->|是| D(結束);
C -->|否| E(對於數列中的每個元素);
E --> F{如果元素i大於元素i+1？};
F -->|是| G(交換元素i和i+1<br>設定已排序標記為false);
G --> H[返回至for迴圈的開始];
F -->|否| H;
H --> I{for迴圈結束？};
I -->|否| E;
I -->|是| J(設定已排序標記為true);
J --> C;
```
#### 呈現:
```mermaid
graph TD;
A(開始) --> B(初始化：設定已排序標記為false<br>設定n為數列長度);
B --> C{已排序標記為<br>true？};
C -->|是| D(結束);
C -->|否| E(對於數列中的每個元素);
E --> F{如果元素i大於元素i+1？};
F -->|是| G(交換元素i和i+1<br>設定已排序標記為false);
G --> H[返回至for迴圈的開始];
F -->|否| H;
H --> I{for迴圈結束？};
I -->|否| E;
I -->|是| J(設定已排序標記為true);
J --> C;
```
### graphviz
- Online tool, https://dreampuf.github.io/GraphvizOnline/
- Online tool, https://www.devtoolsdaily.com/graphviz
#### graphviz格式: 創意發想心智圖
```typescript
digraph G {
node [shape=box]
A [label="創意發想"]
B [label="創意1: 環保生活"]
C [label="創意2: 數位學習"]
D [label="創意3: 健康飲食"]
E [label="創意4: 社區共享"]
F [label="創意5: 文化藝術推廣"]
G [label="創意6: 科技創新應用"]
B1 [label="使用可回收材料"]
B2 [label="鼓勵無紙化"]
B3 [label="推行分類回收"]
C1 [label="線上互動平台"]
C2 [label="虛擬實境學習"]
C3 [label="自學資源共享"]
D1 [label="植物性飲食推廣"]
D2 [label="健康食譜分享"]
D3 [label="食品來源透明化"]
E1 [label="物品互借互換"]
E2 [label="社區活動組織"]
E3 [label="共享空間開放"]
F1 [label="街頭藝術展覽"]
F2 [label="在地文化工作坊"]
F3 [label="文藝活動的線上平台"]
G1 [label="智慧家居解決方案"]
G2 [label="可持續能源技術"]
G3 [label="健康監測智能裝置"]
A -> B
A -> C
A -> D
A -> E
A -> F
A -> G
B -> B1
B -> B2
B -> B3
C -> C1
C -> C2
C -> C3
D -> D1
D -> D2
D -> D3
E -> E1
E -> E2
E -> E3
F -> F1
F -> F2
F -> F3
G -> G1
G -> G2
G -> G3
}
```
#### 呈現:
## ℹ 進階範例
### 電子商務資料庫的實體關係圖（Entity-Relationship Diagram, ERD）
#### 實體
1. 用戶(User)
2. 商品(Product)
3. 訂單(Order)
4. 訂單明細(Order Detail)
5. 支付方式(Payment Method)
6. 評論(Comment)
#### 關聯
1. 用戶 和 訂單 之間是一對多的關聯，表示一位用戶可以有多筆訂單。
2. 訂單 和 訂單明細 之間是一對多的關聯，表示一筆訂單可以包含多個商品。
3. 商品 和 訂單明細 之間是一對多的關聯，表示一種商品可以在多筆訂單明細中出現。
4. 用戶 和 支付方式 之間是一對多的關聯，表示一位用戶可以有多種支付方式。
5. 商品 和 評論 之間是一對多的關聯，表示一種商品可以有多條評論。
6. 用戶 和 評論 之間是一對多的關聯，表示一位用戶可以發表多條評論。
SQL for MySQL Database
```sql
-- 創建用戶表
CREATE TABLE IF NOT EXISTS `User` (
`userID` INT AUTO_INCREMENT PRIMARY KEY,
`name` VARCHAR(255) NOT NULL,
`email` VARCHAR(255) NOT NULL UNIQUE,
`password` VARCHAR(255) NOT NULL,
`registrationDate` DATETIME NOT NULL
);
-- 創建商品表
CREATE TABLE IF NOT EXISTS `Product` (
`productID` INT AUTO_INCREMENT PRIMARY KEY,
`name` VARCHAR(255) NOT NULL,
`description` TEXT,
`price` DECIMAL(10, 2) NOT NULL,
`inventory` INT NOT NULL
);
-- 創建訂單表
CREATE TABLE IF NOT EXISTS `Order` (
`orderID` INT AUTO_INCREMENT PRIMARY KEY,
`userID` INT NOT NULL,
`orderDate` DATETIME NOT NULL,
`totalPrice` DECIMAL(10, 2) NOT NULL,
`status` VARCHAR(50) NOT NULL,
FOREIGN KEY (`userID`) REFERENCES `User`(`userID`)
);
-- 創建訂單明細表
CREATE TABLE IF NOT EXISTS `Order_Detail` (
`orderDetailID` INT AUTO_INCREMENT PRIMARY KEY,
`orderID` INT NOT NULL,
`productID` INT NOT NULL,
`purchasePrice` DECIMAL(10, 2) NOT NULL,
`quantity` INT NOT NULL,
FOREIGN KEY (`orderID`) REFERENCES `Order`(`orderID`),
FOREIGN KEY (`productID`) REFERENCES `Product`(`productID`)
);
-- 創建支付方式表
CREATE TABLE IF NOT EXISTS `Payment_Method` (
`paymentMethodID` INT AUTO_INCREMENT PRIMARY KEY,
`userID` INT NOT NULL,
`type` VARCHAR(255) NOT NULL,
`details` TEXT,
FOREIGN KEY (`userID`) REFERENCES `User`(`userID`)
);
-- 創建評論表
CREATE TABLE IF NOT EXISTS `Comment` (
`commentID` INT AUTO_INCREMENT PRIMARY KEY,
`productID` INT NOT NULL,
`userID` INT NOT NULL,
`content` TEXT NOT NULL,
`rating` DECIMAL(3, 2) NOT NULL,
`commentDate` DATETIME NOT NULL,
FOREIGN KEY (`productID`) REFERENCES `Product`(`productID`),
FOREIGN KEY (`userID`) REFERENCES `User`(`userID`)
);
```
### Mermaid格式: (像是SQL語法)
```typescript
erDiagram
USER {
int userID PK "用戶ID"
string name "姓名"
string email "電子郵件"
string password "密碼"
datetime registrationDate "註冊日期"
}
PRODUCT {
int productID PK "商品ID"
string name "名稱"
string description "描述"
float price "價格"
int inventory "存貨量"
}
ORDER {
int orderID PK "訂單ID"
int userID FK "用戶ID"
datetime orderDate "訂單日期"
float totalPrice "總價格"
string status "狀態"
}
ORDER-DETAIL {
int orderDetailID PK "訂單明細ID"
int orderID FK "訂單ID"
int productID FK "商品ID"
float purchasePrice "購買價格"
int quantity "數量"
}
PAYMENT-METHOD {
int paymentMethodID PK "支付方式ID"
int userID FK "用戶ID"
string type "類型"
string details "詳細資訊"
}
COMMENT {
int commentID PK "評論ID"
int productID FK "商品ID"
int userID FK "用戶ID"
string content "內容"
float rating "評分"
datetime commentDate "評論日期"
}
USER ||--o{ ORDER : "has"
USER ||--o{ PAYMENT-METHOD : "uses"
USER ||--o{ COMMENT : "makes"
PRODUCT ||--o{ ORDER-DETAIL : "included_in"
PRODUCT ||--o{ COMMENT : "receives"
ORDER ||--o{ ORDER-DETAIL : "contains"
```
#### 呈現：
```mermaid
erDiagram
USER {
int userID PK "用戶ID"
string name "姓名"
string email "電子郵件"
string password "密碼"
datetime registrationDate "註冊日期"
}
PRODUCT {
int productID PK "商品ID"
string name "名稱"
string description "描述"
float price "價格"
int inventory "存貨量"
}
ORDER {
int orderID PK "訂單ID"
int userID FK "用戶ID"
datetime orderDate "訂單日期"
float totalPrice "總價格"
string status "狀態"
}
ORDER-DETAIL {
int orderDetailID PK "訂單明細ID"
int orderID FK "訂單ID"
int productID FK "商品ID"
float purchasePrice "購買價格"
int quantity "數量"
}
PAYMENT-METHOD {
int paymentMethodID PK "支付方式ID"
int userID FK "用戶ID"
string type "類型"
string details "詳細資訊"
}
COMMENT {
int commentID PK "評論ID"
int productID FK "商品ID"
int userID FK "用戶ID"
string content "內容"
float rating "評分"
datetime commentDate "評論日期"
}
USER ||--o{ ORDER : "has"
USER ||--o{ PAYMENT-METHOD : "uses"
USER ||--o{ COMMENT : "makes"
PRODUCT ||--o{ ORDER-DETAIL : "included_in"
PRODUCT ||--o{ COMMENT : "receives"
ORDER ||--o{ ORDER-DETAIL : "contains"
```
### PlantUML格式:
```typescript
@startuml
entity USER {
int userID PK "用戶ID"
string name "姓名"
string email "電子郵件"
string password "密碼"
datetime registrationDate "註冊日期"
}
entity PRODUCT {
int productID PK "商品ID"
string name "名稱"
string description "描述"
float price "價格"
int inventory "存貨量"
}
entity ORDER {
int orderID PK "訂單ID"
int userID FK "用戶ID"
datetime orderDate "訂單日期"
float totalPrice "總價格"
string status "狀態"
}
entity ORDER_DETAIL {
int orderDetailID PK "訂單明細ID"
int orderID FK "訂單ID"
int productID FK "商品ID"
float purchasePrice "購買價格"
int quantity "數量"
}
entity PAYMENT_METHOD {
int paymentMethodID PK "支付方式ID"
int userID FK "用戶ID"
string type "類型"
string details "詳細資訊"
}
entity COMMENT {
int commentID PK "評論ID"
int productID FK "商品ID"
int userID FK "用戶ID"
string content "內容"
float rating "評分"
datetime commentDate "評論日期"
}
USER ||--o{ ORDER : "has"
USER ||--o{ PAYMENT_METHOD : "uses"
USER ||--o{ COMMENT : "makes"
PRODUCT ||--o{ ORDER_DETAIL : "included_in"
PRODUCT ||--o{ COMMENT : "receives"
ORDER ||--o{ ORDER_DETAIL : "contains"
@enduml
```
#### 呈現:
```plantuml
@startuml
entity USER {
int userID PK "用戶ID"
string name "姓名"
string email "電子郵件"
string password "密碼"
datetime registrationDate "註冊日期"
}
entity PRODUCT {
int productID PK "商品ID"
string name "名稱"
string description "描述"
float price "價格"
int inventory "存貨量"
}
entity ORDER {
int orderID PK "訂單ID"
int userID FK "用戶ID"
datetime orderDate "訂單日期"
float totalPrice "總價格"
string status "狀態"
}
entity ORDER_DETAIL {
int orderDetailID PK "訂單明細ID"
int orderID FK "訂單ID"
int productID FK "商品ID"
float purchasePrice "購買價格"
int quantity "數量"
}
entity PAYMENT_METHOD {
int paymentMethodID PK "支付方式ID"
int userID FK "用戶ID"
string type "類型"
string details "詳細資訊"
}
entity COMMENT {
int commentID PK "評論ID"
int productID FK "商品ID"
int userID FK "用戶ID"
string content "內容"
float rating "評分"
datetime commentDate "評論日期"
}
USER ||--o{ ORDER : "has"
USER ||--o{ PAYMENT_METHOD : "uses"
USER ||--o{ COMMENT : "makes"
PRODUCT ||--o{ ORDER_DETAIL : "included_in"
PRODUCT ||--o{ COMMENT : "receives"
ORDER ||--o{ ORDER_DETAIL : "contains"
@enduml
```
Sign in with Wallet
Connect another wallet