ไดอะแกรมบล็อก
สร้างเลย์เอาต์ที่มีโครงสร้างด้วยบล็อกจัดเรียงในคอลัมน์และแถว เหมาะสำหรับสถาปัตยกรรมระบบและภาพรวมส่วนประกอบ
ไดอะแกรมบล็อก คืออะไร?
ไดอะแกรมบล็อกแสดงระบบหรือกระบวนการโดยใช้บล็อกที่มีป้ายกำกับจัดเรียงในเลย์เอาต์ที่มีโครงสร้าง แสดงการจัดระเบียบระดับสูงของส่วนประกอบและความสัมพันธ์โดยไม่ลงรายละเอียดการใช้งาน ไดอะแกรมบล็อกใช้กันอย่างแพร่หลายในวิศวกรรม การออกแบบระบบ และเอกสารสถาปัตยกรรมเพื่อให้ภาพรวมที่ชัดเจนและเข้าถึงได้ของระบบที่ซับซ้อน
แก้ไขและดูตัวอย่าง
สร้าง ไดอะแกรมบล็อก ด้วยไวยากรณ์ Mermaid และดูการเปลี่ยนแปลงทันที
Example
Block diagram example
A Mermaid block diagram showing editor input, preview, and export tool areas.
Mermaid code
block-beta
columns 3
Editor["Mermaid Editor"]:3
Code["Code input"] Preview["Live preview"] Export["Export tools"]
PNG["PNG"] SVG["SVG"] PDF["PDF"]กรณีการใช้งานทั่วไป
สถาปัตยกรรมระบบ
ออกแบบสถาปัตยกรรมระบบระดับสูงที่แสดงส่วนประกอบหลักและความสัมพันธ์ สื่อสารการออกแบบระบบกับผู้มีส่วนได้ส่วนเสียทั้งด้านเทคนิคและไม่เทคนิค
ภาพรวมส่วนประกอบ
แสดงวิธีการจัดระเบียบส่วนประกอบซอฟต์แวร์หรือฮาร์ดแวร์ แสดงภาพเลเยอร์ โมดูล และการโต้ตอบ
โทโพโลยีเครือข่าย
แสดงเลย์เอาต์เครือข่ายด้วยเซิร์ฟเวอร์ สวิตช์ และการเชื่อมต่อ จัดทำเอกสารส่วนประกอบโครงสร้างพื้นฐานและการจัดเรียง
ภาพรวมกระบวนการ
นำเสนอขั้นตอนกระบวนการระดับสูงด้วยขั้นตอนหลักเป็นบล็อก ให้มุมมองที่เรียบง่ายของกระบวนการที่ซับซ้อน
ฟีเจอร์หลัก
เลย์เอาต์แบบคอลัมน์
จัดเรียงบล็อกในตารางด้วยจำนวนคอลัมน์ที่กำหนดได้ ควบคุมโครงสร้างภาพของไดอะแกรมอย่างแม่นยำ
บล็อกขยาย
ทำให้บล็อกขยายหลายคอลัมน์เพื่อเน้นหรือแสดงส่วนประกอบที่ครอบคลุมส่วนประกอบย่อยหลายตัว
กลุ่มซ้อน
สร้างบล็อกภายในบล็อกเพื่อแสดงความสัมพันธ์แบบบรรจุและโครงสร้างแบบลำดับชั้น
หลายรูปทรง
ใช้รูปทรงต่าง ๆ เช่น สี่เหลี่ยม กล่องมุมมน สนามกีฬา และทรงกระบอกเพื่อแสดงประเภทส่วนประกอบที่แตกต่าง
แนวทางปฏิบัติที่ดี
รักษาระดับสูง
ไดอะแกรมบล็อกควรแสดงภาพรวม หลีกเลี่ยงการรวมรายละเอียดมากเกินไป — ใช้ไดอะแกรมประเภทอื่นสำหรับรายละเอียดเฉพาะ
ใช้ขนาดที่สอดคล้อง
รักษาขนาดบล็อกให้ใกล้เคียงกันเว้นแต่ความแตกต่างของขนาดจะสื่อความหมายเกี่ยวกับความสำคัญหรือขนาด
ติดป้ายกำกับอย่างชัดเจน
ใช้ชื่อเชิงอธิบายสำหรับแต่ละบล็อก ไดอะแกรมควรเข้าใจได้โดยไม่ต้องมีเอกสารเพิ่มเติม
จัดเรียงอย่างมีตรรกะ
วางบล็อกที่เกี่ยวข้องใกล้กัน ใช้การไหลจากบนลงล่างหรือซ้ายไปขวาเพื่อแสดงทิศทางข้อมูลหรือการควบคุม
สำรวจไดอะแกรมประเภทอื่น
Flowchart
แสดงภาพกระบวนการ เวิร์กโฟลว์ และอัลกอริทึมด้วยโหนดและลูกศรทิศทาง เหมาะสำหรับกระบวนการทางธุรกิจและแผนผังการตัดสินใจ
Sequence Diagram
บันทึกการโต้ตอบระหว่างผู้กระทำหรือระบบต่าง ๆ ตามลำดับเวลา เหมาะสำหรับเอกสาร API และการออกแบบระบบ
Class Diagram
สร้างแบบจำลองระบบเชิงวัตถุด้วยคลาส แอตทริบิวต์ และความสัมพันธ์ จำเป็นสำหรับการวางแผนสถาปัตยกรรมซอฟต์แวร์
State Diagram
แสดงการเปลี่ยนสถานะในระบบหรือแอปพลิเคชัน เหมาะสำหรับการสร้างแบบจำลองสถานะวงจรชีวิตและเวิร์กโฟลว์
Gantt Chart
วางแผนและติดตามไทม์ไลน์โครงการด้วยงานและการพึ่งพา เหมาะสำหรับการจัดการโครงการและการจัดตารางเวลา
ER Diagram
ออกแบบสคีมาฐานข้อมูลด้วยเอนทิตีและความสัมพันธ์ เหมาะสำหรับการสร้างแบบจำลองและเอกสารฐานข้อมูล
User Journey
จัดทำแผนที่ประสบการณ์ผู้ใช้และการโต้ตอบข้ามจุดสัมผัส เหมาะสำหรับการออกแบบ UX และการจัดทำแผนที่การเดินทางของลูกค้า
Git Graph
แสดงภาพกลยุทธ์การแตกสาขาของ Git และประวัติคอมมิต ช่วยอธิบายเวิร์กโฟลว์การควบคุมเวอร์ชัน
แผนที่ความคิด
จัดระเบียบไอเดีย ระดมความคิด และสร้างโครงสร้างภาพแบบลำดับชั้น เหมาะสำหรับการวางแผนและจัดทำแผนที่ความรู้
แผนภูมิวงกลม
แสดงการกระจายข้อมูลตามสัดส่วนด้วยแผนภูมิวงกลม เหมาะสำหรับแสดงเปอร์เซ็นต์และการวิเคราะห์ส่วนแบ่งตลาด
ไทม์ไลน์
แสดงภาพเหตุการณ์และเหตุการณ์สำคัญตามลำดับเวลา เหมาะสำหรับประวัติโครงการและแผนงาน
บอร์ด Kanban
จัดระเบียบงานเป็นคอลัมน์ที่แสดงขั้นตอนเวิร์กโฟลว์ เหมาะสำหรับการจัดการโครงการแบบ Agile และการติดตามงาน
แผนภูมิสี่ส่วน
วางรายการบนตารางสองแกนเพื่อเปรียบเทียบและจัดลำดับความสำคัญ เหมาะสำหรับการจัดลำดับความสำคัญฟีเจอร์และการวิเคราะห์เชิงกลยุทธ์
ไดอะแกรม Sankey
แสดงภาพปริมาณการไหลระหว่างโหนดด้วยลูกศรตามสัดส่วน เหมาะสำหรับการไหลของพลังงาน การจัดสรรงบประมาณ และช่องทางการแปลง
แผนภูมิ XY
สร้างแผนภูมิแท่งและแผนภูมิเส้นด้วยแกนที่กำหนดเอง เหมาะสำหรับการแสดงภาพข้อมูลและการวิเคราะห์แนวโน้ม
ไดอะแกรมสถาปัตยกรรม
ออกแบบสถาปัตยกรรมคลาวด์และระบบด้วยไอคอนบริการและการเชื่อมต่อ เหมาะสำหรับเอกสารโครงสร้างพื้นฐาน
ไดอะแกรมแพ็กเก็ต
แสดงภาพโครงสร้างแพ็กเก็ตโปรโตคอลเครือข่ายด้วยเลย์เอาต์ฟิลด์ระดับบิต จำเป็นสำหรับเอกสารโปรโตคอลเครือข่าย