# สถาปนิกเมอร์เมด: ทักษะไดอะแกรมและเอกสารประกอบ

> สร้างไดอะแกรมเมอร์เมดและเอกสารการออกแบบที่ครอบคลุมด้วยการประสานงานอัจฉริยะ การแปลงโค้ดเป็นไดอะแกรม และเครื่องมือยูทิลิตี้ไพทอน เริ่มสร้างเอกสารทางเทคนิคโดยละเอียดได้ในไม่กี่วินาที

- Canonical: https://nanoskill.ai/th/skills/mermaid-agent-skill
- Markdown: https://nanoskill.ai/th/skills/mermaid-agent-skill.md
- Author: SpillwaveSolutions
- Published: 2026-05-26T01:25:42.765Z
- Updated: 2026-07-19T03:48:37.206Z
- Language: th
- Source type: github
- Popularity signal: 66

## Sources

- https://github.com/spillwavesolutions/design-doc-mermaid

## Install

```shell
npx skills add https://github.com/spillwavesolutions/design-doc-mermaid
```

## About

ทักษะสถาปนิกเมอร์เมดช่วยให้นักพัฒนา สถาปนิก และนักเขียนเทคนิคสามารถสร้างและจัดการไดอะแกรมเมอร์เมดและเอกสารการออกแบบที่ครอบคลุมได้อย่างมีประสิทธิภาพ ด้วยการใช้ประโยชน์จากการประสานงานอัจฉริยะและการโหลดคู่มือตามต้องการ ทักษะนี้ช่วยปรับปรุงการแสดงภาพของระบบที่ซับซ้อน เวิร์กโฟลว์ และโครงสร้างโค้ดให้มีประสิทธิภาพ ช่วยให้ผู้ใช้สร้างไดอะแกรมที่แม่นยำและสวยงาม มั่นใจได้ถึงการสื่อสารที่ชัดเจนและเอกสารที่ทันสมัย

ทักษะ Claude Code ที่ทรงพลังนี้นำเสนอคุณสมบัติขั้นสูงเช่นการสร้างไดอะแกรมจากโค้ด ช่วยให้คุณสามารถดึงข้อมูลเชิงลึกทางสถาปัตยกรรมได้โดยตรงจากแอปพลิเคชันสปริงบูตหรือฟาสต์เอพีไอของคุณ นอกจากนี้ยังมีชุดเครื่องมือยูทิลิตี้ไพทอนมากมายสำหรับการแยก ตรวจสอบ และแปลงไดอะแกรมเมอร์เมดเป็นรูปแบบรูปภาพ ทำให้ง่ายต่อการรวมเข้ากับเวิร์กโฟลว์เอกสารและเครื่องมือที่มีอยู่เช่นคอนฟลูเอนซ์ ระบบแบบลำดับชั้นช่วยให้การใช้โทเคนมีประสิทธิภาพและตอบสนองรวดเร็ว มอบประสบการณ์ที่ราบรื่น

ไม่ว่าคุณจะต้องการจัดทำเอกสารเอพีไอ แสดงภาพสถาปัตยกรรมระบบ หรือแสดงกระบวนการทางธุรกิจ สถาปนิกเมอร์เมดก็มีเครื่องมือและเทมเพลตที่จะช่วยให้งานสำเร็จ ด้วยการรองรับประเภทไดอะแกรมที่หลากหลาย สัญลักษณ์ความหมายยูนิโค้ด และการจัดรูปแบบที่มีคอนทราสต์สูง ไดอะแกรมของคุณจะทั้งให้ข้อมูลและเข้าถึงได้ ทักษะนี้ยังมีเส้นทางการเรียนรู้ที่มีโครงสร้างและตัวอย่างเพื่อช่วยให้ผู้ใช้เชี่ยวชาญในการสร้างเอกสารทางเทคนิคโดยละเอียดได้อย่างรวดเร็ว

## Key features

- **การสร้างแผนภาพอัจฉริยะ**: สร้างแผนภาพ Mermaid หลากหลายประเภท รวมถึงแผนภาพกิจกรรม แผนภาพการปรับใช้ แผนภาพสถาปัตยกรรม และแผนภาพลำดับ สำหรับเวิร์กโฟลว์ โครงสร้างพื้นฐาน ส่วนประกอบของระบบ และโฟลว์ API
- **การแปลงโค้ดเป็นแผนภาพ**: สร้างแผนภาพโดยอัตโนมัติจากโค้ดเบสที่มีอยู่ (เช่น Spring Boot, FastAPI) หรือไฟล์การกำหนดค่า เพื่อแสดงภาพสถาปัตยกรรม การปรับใช้ และโฟลว์ลำดับ
- **การสร้างเอกสารการออกแบบที่ครอบคลุม**: ผลิตเอกสารการออกแบบฉบับสมบูรณ์พร้อมแผนภาพ Mermaid ที่ฝังอยู่ โดยใช้เทมเพลตที่กำหนดไว้ล่วงหน้าสำหรับการออกแบบสถาปัตยกรรม, API, ฟีเจอร์, ฐานข้อมูล และระบบ
- **สัญลักษณ์ความหมาย Unicode และการจัดสไตล์คอนทราสต์สูง**: เพิ่มความชัดเจนและการเข้าถึงของแผนภาพด้วยสัญลักษณ์ Unicode ที่มีความหมายมากกว่า 100 สัญลักษณ์ และชุดสีคอนทราสต์สูงเพื่อการอ่านที่ดีขึ้น
- **โปรแกรมอรรถประโยชน์ Python สำหรับการจัดการแผนภาพ**: ใช้สคริปต์ Python เพื่อแยก ตรวจสอบ และแปลงแผนภาพ Mermaid เป็นภาพ PNG/SVG รองรับการประมวลผลแบบกลุ่มและการรวมเข้ากับเครื่องมือเช่น Confluence

## Use cases

- **แสดงภาพสถาปัตยกรรมซอฟต์แวร์**: นักพัฒนาและสถาปนิกสามารถสร้างแผนภาพสถาปัตยกรรมและการปรับใช้จากโค้ดหรือไฟล์การกำหนดค่าเพื่อทำความเข้าใจส่วนประกอบของระบบและโครงสร้างพื้นฐาน
- **จัดทำเอกสารโฟลว์ API และเวิร์กโฟลว์**: นักเขียนเทคนิคและวิศวกรสามารถสร้างแผนภาพลำดับและกิจกรรมโดยละเอียดเพื่อแสดงการโต้ตอบ API กระบวนการทางธุรกิจ และเส้นทางของผู้ใช้
- **สร้างเอกสารการออกแบบอัตโนมัติ**: ทีมสามารถสร้างเอกสารการออกแบบที่มีโครงสร้างสำหรับวัตถุประสงค์ต่างๆ (API, ระบบ, ฟีเจอร์) พร้อมแผนภาพ Mermaid ที่ฝังโดยอัตโนมัติได้อย่างรวดเร็ว ช่วยประหยัดเวลาและรับประกันความสม่ำเสมอ
- **รักษาเอกสารทางเทคนิคให้ทันสมัย**: ตรวจสอบให้แน่ใจว่าเอกสารยังคงเป็นปัจจุบันโดยการสร้างแผนภาพจากโค้ดหรือการกำหนดค่าโดยตรง และแปลงเป็นรูปแบบภาพได้อย่างง่ายดายเพื่อการแบ่งปันและการทำงานร่วมกัน

## Result preview

ดูไดอะแกรมเมอร์เมดเกี่ยวกับระบบสำหรับแพลตฟอร์มส่งอาหารที่สร้างโดยทักษะเอเจนต์นี้

![mermaid-architect-demo1](https://file.nanoskill.ai/mermaid-architect-demo1.jpg)

![mermaid-architect-demo-2](https://file.nanoskill.ai/mermaid-architect-demo-2.jpg)

![mermaid-architect-demo-3](https://file.nanoskill.ai/mermaid-architect-demo-3.jpg)

## Result walkthrough

### ขั้นตอนที่ 1: ติดตั้ง

เพิ่มทักษะให้กับเอเจนต์ของคุณ

![mermaid-architect-step-1](https://file.nanoskill.ai/mermaid-architect-step-1.jpg)

### ขั้นตอนที่ 2:อธิบายกระบวนการ

ป้อนเวิร์กโฟลว์ ระบบ หรือลำดับที่คุณต้องการแสดงภาพ

![mermaid-architect-step-2](https://file.nanoskill.ai/mermaid-architect-step-2.jpg)

### ขั้นตอนที่ 3: ตรวจสอบผลลัพธ์

รับไดอะแกรมเมอร์เมดที่สร้างขึ้นตามคำอธิบายกระบวนการของคุณ

![mermaid-architect-step-3](https://file.nanoskill.ai/mermaid-architect-step-3.jpg)

## Skill definition

# เมอร์เมด อาร์คิเทค - ทักษะไดอะแกรมและเอกสารประกอบที่ครอบคลุม

**รุ่น 2.0** - สถาปัตยกรรมแบบลำดับชั้นพร้อมการประสานงานอัจฉริยะ

ทักษะ Claude Code อันทรงพลังสำหรับการสร้างไดอะแกรม Mermaid และเอกสารออกแบบ โดยใช้การโหลดคู่มือตามความต้องการ การสร้างไดอะแกรมจากโค้ด และยูทิลิตี้ Python

## การติดตั้ง

### ติดตั้งด้วยคลิกเดียวผ่าน Skilz Marketplace

ติดตั้งทักษะนี้ทันทีจาก [Skilz Marketplace](https://skillzwave.ai/skill/SpillwaveSolutions__design-doc-mermaid__design-doc-mermaid__SKILL/):

```bash
skilz install SpillwaveSolutions_design-doc-mermaid/design-doc-mermaid
```

### การติดตั้งด้วยตนเอง

โคลนโดยตรงลงในไดเรกทอรีทักษะ Claude Code ของคุณ:

```bash
# Navigate to your skills directory
cd ~/.claude/skills

# Clone the repository
git clone https://github.com/SpillwaveSolutions/design-doc-mermaid.git
```

### ตรวจสอบการติดตั้ง

หลังการติดตั้ง ตรวจสอบว่าทักษะพร้อมใช้งาน:

```bash
# List installed skills
ls ~/.claude/skills/design-doc-mermaid

# Or ask Claude Code
# "List my installed skills"
```

## ทักษะนี้ทำอะไรได้บ้าง

**การสร้างไดอะแกรมอัจฉริยะ:**
- ไดอะแกรมกิจกรรม (ขั้นตอนการทำงาน, กระบวนการ, ตรรกะทางธุรกิจ)
- ไดอะแกรมการปรับใช้ (โครงสร้างพื้นฐานคลาวด์, K8s, ไร้เซิร์ฟเวอร์)
- ไดอะแกรมสถาปัตยกรรม (องค์ประกอบระบบ, ไมโครเซอร์วิส)
- ไดอะแกรมลำดับ (การไหลของ API, การโต้ตอบของบริการ)
- เอกสารออกแบบที่สมบูรณ์พร้อมไดอะแกรมที่ฝังอยู่

**การแปลงโค้ดเป็นไดอะแกรม:**
- แยกสถาปัตยกรรมจากแอปพลิเคชัน Spring Boot
- สร้างไดอะแกรมการปรับใช้จากไฟล์การกำหนดค่า
- สร้างไดอะแกรมลำดับจากการเรียกใช้เมธอด
- จัดทำเอกสารไปป์ไลน์ ETL และการไหลของข้อมูล

**การจัดการไดอะแกรม:**
- แยกไดอะแกรม Mermaid จากไฟล์ Markdown
- ตรวจสอบความถูกต้องของไวยากรณ์ไดอะแกรมด้วย mermaid-cli
- แปลงไดอะแกรมเป็นรูปภาพ PNG/SVG
- ประมวลผลทั้งไดเรกทอรีเป็นชุด

## เริ่มต้นอย่างรวดเร็ว

### สร้างไดอะแกรมกิจกรรม

```
User: "Create an activity diagram for user registration with email verification"
```

ทักษะนี้จะ:
1. โหลด `references/guides/diagrams/activity-diagrams.md`
2. ใช้เทมเพลตรูปแบบการลงทะเบียน
3. เพิ่มสัญลักษณ์ Unicode (🔐 สำหรับความปลอดภัย, 📧 สำหรับอีเมล, ✅ สำหรับความสำเร็จ)
4. ใช้การจัดรูปแบบที่มีคอนทราสต์สูง
5. ส่งออกไดอะแกรม Mermaid ที่สมบูรณ์

### สร้างจากโค้ด

```
User: "Here's my Spring Boot application.yml - generate a deployment diagram"
```

ทักษะนี้จะ:
1. วิเคราะห์การกำหนดค่า (แหล่งข้อมูล, แคช, ความปลอดภัย)
2. โหลด `references/guides/diagrams/deployment-diagrams.md`
3. โหลด `examples/spring-boot/README.md`
4. แมปการกำหนดค่าไปยังทรัพยากรคลาวด์
5. สร้างไดอะแกรมการปรับใช้พร้อมข้อกำหนดของทรัพยากร

### สร้างเอกสารออกแบบ

```
User: "Create an API design document for the contacts API"
```

ทักษะนี้จะ:
1. โหลด `assets/api-design-template.md`
2. โหลดคู่มือไดอะแกรมที่เกี่ยวข้อง (ลำดับ, ER, สถาปัตยกรรม)
3. สร้างเอกสารที่สมบูรณ์พร้อมไดอะแกรมที่ฝังอยู่
4. บันทึกไปยัง `docs/design/api-contacts-v1-2025-01-13.md`

## โครงสร้าง

### การจัดระเบียบแบบลำดับชั้น

```
mermaid-architect/
├── SKILL.md                          # Main orchestrator with decision tree
├── README.md                         # This file
├── CLAUDE.md                         # Claude Code instructions
│
├── references/                       # Reference materials
│   ├── mermaid-diagram-guide.md     # Legacy general guide
│   └── guides/                       # Specialized guides (load on-demand)
│       ├── diagrams/
│       │   ├── activity-diagrams.md      # ✅ Complete
│       │   ├── deployment-diagrams.md    # ✅ Complete
│       │   ├── architecture-diagrams.md  # ✅ Complete
│       │   └── sequence-diagrams.md      # ✅ Complete
│       ├── code-to-diagram/
│       │   └── README.md                 # ✅ Complete (master guide)
│       ├── unicode-symbols/
│       │   └── guide.md                  # ✅ Complete (100+ symbols)
│       └── troubleshooting.md        # ✅ Complete (28 common errors)
│
├── scripts/                          # Python utilities
│   ├── extract_mermaid.py           # ✅ Extract & validate diagrams
│   └── mermaid_to_image.py          # ✅ Convert to PNG/SVG
│
├── examples/                         # Language-specific patterns
│   ├── spring-boot/                 # ✅ Complete
│   ├── fastapi/                     # ✅ Complete
│   ├── react/                       # ✅ Complete
│   ├── python-etl/                  # ✅ Complete
│   ├── node-webapp/                 # ✅ Complete
│   └── java-webapp/                 # ✅ Complete
│
└── assets/                           # Design document templates
    ├── architecture-design-template.md
    ├── api-design-template.md
    ├── feature-design-template.md
    ├── database-design-template.md
    └── system-design-template.md
```

## คุณสมบัติหลัก

### 1. สัญลักษณ์ Unicode เชิงความหมาย

ทุกไดอะแกรมใช้สัญลักษณ์ Unicode ที่มีความหมาย:

```mermaid
graph TB
    User[👤 Client] --> Gateway[🌐 API Gateway]
    Gateway --> Auth[🔐 Auth Service]
    Gateway --> API[⚙️ API Service]
    API --> DB[(💾 Database)]
    API --> Cache[(⚡ Redis)]
    API --> Queue[📬 Message Queue]
    Queue --> Worker[⚙️ Background Worker]
```

**หมวดหมู่สัญลักษณ์:**
- โครงสร้างพื้นฐาน: ☁️ 🌐 🔌 📡 🗄️
- การประมวลผล: ⚙️ ⚡ 🔄 🚀 💨
- ข้อมูล: 💾 📦 📊 📈 🗃️
- การรับส่งข้อความ: 📨 📬 📤 📥 🐰
- ความปลอดภัย: 🔐 🔑 🛡️ 🚪 👤
- การตรวจสอบ: 📝 📊 🚨 ⚠️ ✅ ❌

### 2. การจัดรูปแบบที่มีคอนทราสต์สูง

ไดอะแกรมทั้งหมดใช้สีที่เข้าถึงได้และมีคอนทราสต์สูง - ดูรายละเอียดทั้งหมดใน SKILL.md

### 3. ยูทิลิตี้ Python

#### แยกไดอะแกรม

```bash
# List all diagrams in a file
python scripts/extract_mermaid.py document.md --list-only

# Extract to separate .mmd files
python scripts/extract_mermaid.py document.md --output-dir diagrams/

# Validate all diagrams
python scripts/extract_mermaid.py document.md --validate

# Replace diagrams with image references (for Confluence)
python scripts/extract_mermaid.py document.md --replace-with-images \
  --image-format png --output-markdown output.md
```

#### แปลงเป็นรูปภาพ

```bash
# Single file
python scripts/mermaid_to_image.py diagram.mmd output.png

# Custom theme and size
python scripts/mermaid_to_image.py diagram.mmd output.svg \
  --theme dark --background white --width 1200

# Batch convert directory
python scripts/mermaid_to_image.py diagrams/ output/ \
  --format png --recursive

# From stdin
echo "graph TD; A-->B" | python scripts/mermaid_to_image.py - output.png
```

## ข้อกำหนด

### สำหรับการสร้างไดอะแกรม
- ระบบทักษะ Claude Code (อัตโนมัติ)
- คู่มือและเทมเพลต (รวมอยู่ในทักษะนี้)

### สำหรับการตรวจสอบและแปลงรูปภาพ
```bash
# Install mermaid-cli globally
npm install -g @mermaid-js/mermaid-cli

# Verify installation
mmdc --version
```

### สำหรับสคริปต์ Python
- Python 3.7+
- ไม่จำเป็นต้องใช้แพ็คเกจเพิ่มเติม (ใช้เฉพาะไลบรารีมาตรฐาน)

## เส้นทางการเรียนรู้

### ยังใหม่กับไดอะแกรม Mermaid?

1. **เริ่มต้นด้วยไดอะแกรมกิจกรรม** - อ่าน `references/guides/diagrams/activity-diagrams.md`
2. **เรียนรู้สัญลักษณ์ Unicode** - อ่าน `references/guides/unicode-symbols/guide.md`
3. **ลองตัวอย่าง** - ใช้รูปแบบจาก `examples/spring-boot/`
4. **ตรวจสอบงานของคุณ** - รัน `python scripts/extract_mermaid.py --validate`

### ต้องการจัดทำเอกสารโค้ดที่มีอยู่?

1. **ระบุเฟรมเวิร์ก** - Spring Boot, FastAPI, React, ฯลฯ
2. **โหลดคู่มือตัวอย่าง** - อ่าน `examples/{your-framework}/README.md`
3. **จับคู่รูปแบบ** - ค้นหารูปแบบโค้ดที่คล้ายกันในตัวอย่าง
4. **สร้างไดอะแกรม** - ใช้เทมเพลตจากคู่มือ
5. **ตรวจสอบ** - ใช้สคริปต์ตรวจสอบความถูกต้อง

### กำลังสร้างเอกสารออกแบบ?

1. **เลือกประเภทเทมเพลต** - สถาปัตยกรรม, API, ฟีเจอร์, ฐานข้อมูล, หรือระบบ
2. **โหลดเทมเพลต** - อ่านจาก `assets/{type}-design-template.md`
3. **กรอกส่วนต่างๆ** - แทนที่ตัวยึดด้วยเนื้อหาจริง
4. **เพิ่มไดอะแกรม** - โหลดคู่มือไดอะแกรมตามความจำเป็นสำหรับแต่ละส่วน
5. **ใช้สัญลักษณ์** - ปรับปรุงด้วยสัญลักษณ์ Unicode ตลอดทั้งเอกสาร
6. **บันทึก** - วางใน `docs/design/` พร้อมตราประทับเวลา

## วิธีการทำงานของระบบลำดับชั้น

### แนวทางแบบดั้งเดิม (ไม่มีประสิทธิภาพ)
- โหลดเอกสารทักษะทั้งหมด (~50KB)
- AI ประมวลผลเทมเพลตและตัวอย่างทั้งหมด
- การใช้โทเค็นสูง
- เวลาตอบสนองช้า

### แนวทางแบบลำดับชั้น (มีประสิทธิภาพ)
1. **ผู้ใช้ส่งคำขอ** → AI วิเคราะห์เจตนา
2. **ต้นไม้ตัดสินใจทำงาน** → กำหนดคู่มือที่จำเป็น
3. **โหลดเฉพาะสิ่งที่จำเป็น** → อ่านคู่มือเฉพาะ (~2-5KB)
4. **สร้างผลลัพธ์** → ใช้เทมเพลตที่ตรงเป้าหมาย
5. **มีประสิทธิภาพด้านโทเค็น** → ใช้บริบทน้อยกว่า 10 เท่า

### ตัวอย่างขั้นตอนการทำงาน

**ผู้ใช้:** "สร้างไดอะแกรมการปรับใช้สำหรับการตั้งค่า Docker Compose ของฉัน"

**ต้นไม้ตัดสินใจ:**
```
1. Analyze: "deployment diagram" + "Docker Compose"
2. Determine: deployment-diagrams.md needed
3. Load: references/guides/diagrams/deployment-diagrams.md (2KB)
4. Find pattern: Docker Compose template exists
5. Generate: Using template + Unicode symbols
6. Output: Complete diagram in <30 seconds
```

**โทเค็นที่ใช้:** ~2,000 (เทียบกับ ~10,000 ในแนวทางแบบดั้งเดิม)

## สถานะความสมบูรณ์

✅ **เสร็จสมบูรณ์:**
- ตัวประสานต้นไม้ตัดสินใจแบบลำดับชั้น
- คู่มือไดอะแกรมกิจกรรมพร้อมเทมเพลต
- คู่มือไดอะแกรมการปรับใช้ (AWS, GCP, K8s, ไร้เซิร์ฟเวอร์, Docker)
- คู่มือสัญลักษณ์ Unicode (100+ สัญลักษณ์)
- สคริปต์แยก Mermaid พร้อมการตรวจสอบ
- สคริปต์แปลง Mermaid เป็นรูปภาพ
- ตัวอย่างการแปลงโค้ด Spring Boot เป็นไดอะแกรม
- เทมเพลตเอกสารออกแบบ (5 ประเภท)
- ระบบการจัดรูปแบบที่มีคอนทราสต์สูง

🚧 **กำลังดำเนินการ:**
- ตัวอย่าง FastAPI
- ตัวอย่างสถาปัตยกรรมคอมโพเนนต์ React
- ตัวอย่างไปป์ไลน์ Python ETL

📋 **วางแผนไว้:**
- คู่มือไดอะแกรมสถาปัตยกรรม
- คู่มือไดอะแกรมลำดับ
- คู่มือหลักการแปลงโค้ดเป็นไดอะแกรม
- ตัวอย่าง Node.js/Express
- ตัวอย่างเว็บแอป Java

## การมีส่วนร่วม

ในการเพิ่มคู่มือประเภทไดอะแกรมใหม่:

1. สร้างคู่มือใน `references/guides/diagrams/{type}-diagrams.md`
2. รวมสิ่งต่อไปนี้:
   - เมื่อใดควรใช้
   - ไวยากรณ์พื้นฐาน
   - รูปแบบทั่วไป (3-5 เทมเพลต)
   - ตัวอย่างสัญลักษณ์ Unicode
   - แนวทางปฏิบัติที่ดีที่สุด
3. อัปเดตต้นไม้ตัดสินใจใน `SKILL.md`
4. เพิ่มตัวอย่างพร้อมการแมปโค้ด

ในการเพิ่มตัวอย่างภาษาใหม่:

1. สร้างไดเรกทอรีใน `examples/{framework}/`
2. เพิ่ม `README.md` พร้อมด้วย:
   - ภาพรวมเฟรมเวิร์ก
   - ไดอะแกรมสถาปัตยกรรมจากโครงสร้าง
   - ไดอะแกรมการปรับใช้จากการกำหนดค่า
   - ไดอะแกรมลำดับจากโค้ด
   - ไดอะแกรมกิจกรรมจากตรรกะ
3. อัปเดตตารางการแปลงโค้ดเป็นไดอะแกรมใน `SKILL.md`

## ใบอนุญาต

ส่วนหนึ่งของ Claude Code Skills - ใบอนุญาต MIT

## ทักษะที่เกี่ยวข้อง

- **confluence** - อัปโหลดไดอะแกรมไปยัง Confluence
- **plantuml** - รูปแบบไดอะแกรมทางเลือก

## ลิงก์

- [ที่เก็บ GitHub](https://github.com/SpillwaveSolutions/design-doc-mermaid)
- [รายชื่อ Skilz Marketplace](https://skillzwave.ai/skill/SpillwaveSolutions__design-doc-mermaid__design-doc-mermaid__SKILL/)
- [เอกสารทางการ Mermaid](https://mermaid.js.org/)

---

**รุ่น:** 2.0.0
**อัปเดต:** 2025-01-13
**ดูแลโดย:** SpillwaveSolutions

## FAQ

### ทักษะนี้สามารถสร้างแผนภาพ Mermaid ประเภทใดบ้าง?

ทักษะนี้สามารถสร้างแผนภาพกิจกรรม แผนภาพการปรับใช้ แผนภาพสถาปัตยกรรม และแผนภาพลำดับ รองรับการแสดงภาพเวิร์กโฟลว์ โครงสร้างพื้นฐานคลาวด์ ส่วนประกอบของระบบ และการโต้ตอบ API

### การแปลงโค้ดเป็นแผนภาพทำงานอย่างไร?

ทักษะนี้วิเคราะห์โค้ดหรือไฟล์การกำหนดค่า (เช่น Spring Boot application.yml) และใช้รูปแบบและคำแนะนำที่กำหนดไว้ล่วงหน้าเพื่อสร้างแผนภาพ Mermaid ที่สอดคล้องกันโดยอัตโนมัติ เช่น แผนภาพการปรับใช้หรือแผนภาพลำดับ

### ฉันสามารถสร้างเอกสารการออกแบบฉบับเต็มด้วยทักษะนี้ได้หรือไม่?

ได้ ทักษะนี้รวมเทมเพลตสำหรับเอกสารการออกแบบต่างๆ (สถาปัตยกรรม, API, ฟีเจอร์, ฐานข้อมูล, ระบบ) สามารถสร้างเอกสารฉบับสมบูรณ์พร้อมแผนภาพ Mermaid ที่ฝังอยู่ตามข้อมูลที่คุณป้อนและเทมเพลตที่เลือก

### ประโยชน์ของระบบลำดับชั้นสำหรับการสร้างแผนภาพ Mermaid คืออะไร?

ระบบลำดับชั้นวิเคราะห์เจตนาของคุณอย่างมีประสิทธิภาพและโหลดเฉพาะคำแนะนำและเทมเพลตที่จำเป็น (โดยทั่วไป 2-5KB) แทนที่จะเป็นเอกสารทักษะทั้งหมด ซึ่งช่วยลดการใช้โทเค็นและเพิ่มความเร็วในการตอบสนองอย่างมาก

### มีโปรแกรมอรรถประโยชน์ภาษา Python ที่มาพร้อมกับทักษะนี้หรือไม่?

มี ทักษะนี้มีสคริปต์ Python สำหรับแยกแผนภาพ Mermaid ออกจากไฟล์ Markdown ตรวจสอบไวยากรณ์ และแปลงเป็นรูปแบบภาพ PNG หรือ SVG โปรแกรมอรรถประโยชน์เหล่านี้ยังรองรับการประมวลผลแบบกลุ่มด้วย

### ข้อกำหนดสำหรับการใช้คุณลักษณะการตรวจสอบและการแปลงภาพคืออะไร?

สำหรับการตรวจสอบแผนภาพและการแปลงภาพ คุณต้องติดตั้ง \`mermaid-cli\` แบบ global ผ่าน npm (\`npm install -g @mermaid-js/mermaid-cli\`) สคริปต์ Python ต้องใช้ Python 3.7 ขึ้นไป