C4 model คืออะไร
แนะนำ C4 model สำหรับสถาปัตยกรรมซอฟต์แวร์แบบสั้น ๆ: สี่ระดับ คำศัพท์ที่ใช้ และ ArchLens เปลี่ยนเป็นไดอะแกรมที่ทีมแก้ไขด้วยกันได้อย่างไร
แนวคิด
C4 model คือวิธีอธิบายสถาปัตยกรรมของระบบซอฟต์แวร์ด้วยไดอะแกรมไม่กี่ภาพในระดับรายละเอียดต่างกัน เหมือนการซูมแผนที่ คิดค้นโดย Simon Brown และมีเอกสารที่ c4model.com
C4 ตั้งใจให้เรียบง่าย มีองค์ประกอบไม่กี่ชนิด: person (ผู้ใช้), software system, container และ component เชื่อมกันด้วย relationship ที่บอกว่าอะไรคุยกับอะไรและคุยอย่างไร ไม่ได้บังคับรูปทรงหรือสี ขอแค่ทุกไดอะแกรมมีขอบเขตชัด มีชื่อ มีคำอธิบายสัญลักษณ์ และทุกเส้นมีป้ายกำกับ
เพราะแต่ละระดับคือการซูมเข้าไปในองค์ประกอบหนึ่งของระดับบน ผู้อ่านจึงเริ่มจากภาพใหญ่ แล้วลงลึกเฉพาะส่วนที่ต้องการ
สี่ระดับ
| ระดับ | แสดง | ผู้อ่านหลัก |
|---|---|---|
| 1. System Context | ระบบของคุณเป็นกล่องเดียว ผู้ใช้ และระบบอื่นที่เกี่ยวข้อง | ทุกคน ทั้งสายเทคนิคและไม่ใช่ |
| 2. Container | ส่วนที่รันหรือ deploy แยกกันภายในระบบ: เว็บ แอปมือถือ service ฐานข้อมูล คิว ที่เก็บไฟล์ และการสื่อสารระหว่างกัน | นักพัฒนา สถาปนิก ทีมปฏิบัติการ |
| 3. Component | ส่วนประกอบหลักภายใน container หนึ่ง และหน้าที่ของแต่ละส่วน | นักพัฒนาที่ดูแล container นั้น |
| 4. Code | การเขียนโค้ดของ component หนึ่ง (คลาส ฟังก์ชัน ตาราง) | มักสร้างจากโค้ดเมื่อจำเป็น |
Container ใน C4 ไม่ใช่ Docker container แต่คือสิ่งที่ต้องรันอยู่เพื่อให้ระบบทำงาน เช่น single-page app, API, ฐานข้อมูล หรือ serverless function
C4 ยังมีไดอะแกรมเสริม: system landscape (หลายระบบพร้อมกัน), dynamic (ลำดับการคุยกันในสถานการณ์หนึ่ง) และ deployment (container รันอยู่ที่ไหน)
ArchLens วาด C4 อย่างไร
ArchLens วาดระดับ 1 ถึง 3 เป็นมุมมองของ โมเดล เดียวที่ใช้ร่วมกันใน workspace สร้างวัตถุครั้งเดียว วางบนไดอะแกรมกี่อันก็ได้ เปลี่ยนชื่อที่เดียว ทุกไดอะแกรมเปลี่ยนตาม
| ระดับ C4 | ใน ArchLens | เพิ่มได้ |
|---|---|---|
| System Context | มุมมอง Context ของไดอะแกรม | Person, Software System (ทำเครื่องหมาย external ได้) |
| Container | ดับเบิลคลิกระบบเพื่อเปิด container ข้างใน | Container, Store (ฐานข้อมูล คิว หรือที่เก็บไฟล์) |
| Component | ดับเบิลคลิก container เพื่อเปิด component ข้างใน | Component |
| Code | ไม่ได้วาด แต่ Store อธิบายตารางและคอลัมน์ได้ มี ER diagram และส่งออก SQL | ตาราง คอลัมน์ คีย์ |
| Dynamic diagram | Flows: ลำดับขั้นบนเส้นเชื่อมที่วาดไว้ เล่นซ้ำบนไดอะแกรม หรือดูเป็น sequence diagram | ขั้นตอน ขั้นตอนขนาน โน้ต |
- เส้นเชื่อมแบบรวบ: เมื่อ container ของระบบ A เรียก container ของระบบ B มุมมอง Context จะแสดงเส้นระหว่าง A กับ B ให้เอง
- ทุกวัตถุมี เทคโนโลยี (พร้อมโลโก้) สถานะ (live, future, deprecated, removed) แท็ก และคำอธิบาย โมเดลเดียวจึงแสดงได้ทั้งสถาปัตยกรรมวันนี้และที่วางแผนไว้
- ส่งออกเป็นข้อความ: คัดลอกมุมมองใดก็ได้เป็น Mermaid C4 หรือ PlantUML C4 และส่งออกทั้งไดอะแกรมเป็น Structurizr DSL
วาดไดอะแกรม C4 แรก
- สมัครด้วย Google หรือ GitHub แล้วสร้าง workspace
- ที่หน้า Diagrams เลือก New board จะเริ่มที่ระดับ Context
- เพิ่มผู้ใช้ (P) และระบบ (S) แล้วลากจากจุดเชื่อมของวัตถุหนึ่งไปอีกวัตถุหนึ่ง ดับเบิลคลิกเส้นเพื่อใส่ป้ายกำกับ
- ดับเบิลคลิกระบบของคุณเพื่อเปิดระดับ Container แล้วเพิ่มแอป service และ store
- เชิญทีมจาก Settings แล้วแก้ไขพร้อมกันแบบสด แชร์ลิงก์อ่านอย่างเดียว หรือฝังในวิกิเมื่อพร้อม
มีโมเดลเป็น Structurizr DSL อยู่แล้ว? นำเข้าได้เลย อยากอธิบายเป็นคำพูด? ให้ผู้ช่วย AI วาดลง draft ให้คุณตรวจ