พิมพ์ลูกศรเช่น User -> API -> Database แล้วได้ไดอะแกรมสถาปัตยกรรมหรือโฟลว์ที่จัดวางให้แล้ว ยุบกลุ่มเพื่อดูภาพรวม ใส่หมายเลขขั้นตอนเพื่อดูโฟลว์ละเอียด
ลากกล่องเพื่อย้าย ดับเบิลคลิกเพื่อเปลี่ยนชื่อหรือเพิ่มกล่อง ลากจุดบนกล่องเพื่อเชื่อมต่อ Ctrl+Z เพื่อเลิกทำ
ไม่มีการอัปโหลดใดๆ ไดอะแกรมอยู่ในเบราว์เซอร์ของคุณและในลิงก์ที่คุณเลือกแชร์
บนเครื่องมือไวต์บอร์ด คุณต้องวาดทุกกล่องทุกลูกศรแล้วจัดเรียงเอง ที่นี่คุณพิมพ์ว่าอะไรคุยกับอะไร บรรทัดละหนึ่งลูกศร แล้วระบบจัดวางให้เอง รวมบริการที่เกี่ยวข้องเป็นกลุ่มแล้วยุบเป็นกล่องเดียวเมื่ออยากเห็นภาพรวม เปิดอีกครั้งเพื่อดูรายละเอียด
Excalidraw เป็นไวต์บอร์ดอิสระที่คุณวางทุกรูปทรงและลูกศรเอง ที่นี่ข้อความคือไดอะแกรมและจัดวางอัตโนมัติ การเพิ่มบริการจึงเป็นแค่หนึ่งบรรทัด ไม่ต้องวาดและจัดกล่องใหม่ ถ้าต้องการภาพร่างอิสระ Excalidraw ยังเหมาะกว่า
ใส่กล่องที่เกี่ยวข้องในกลุ่มด้วย ชื่อ { ... } ปุ่มภาพรวมจะยุบทุกกลุ่มเป็นกล่องเดียวและรวมลูกศร ปุ่มรายละเอียดจะเปิดกลับ และยุบทีละกลุ่มจากหัวกลุ่มได้
ไม่ ไดอะแกรมวาดในเบราว์เซอร์และเก็บในพื้นที่จัดเก็บภายในของเบราว์เซอร์ ลิงก์แชร์พกไดอะแกรมไว้ในตัวลิงก์หลังเครื่องหมาย # ซึ่งเบราว์เซอร์ไม่เคยส่งไปยังเซิร์ฟเวอร์
วางตรง ๆ ไม่ได้ เพราะไม่มีการนำเข้าจาก Mermaid บรรทัดธรรมดาอย่าง A -> B ใช้ได้ แต่มีสามจุดที่ต่างกัน ให้ลบบรรทัดหัว graph TD ไม่เช่นนั้นจะกลายเป็นกล่อง แล้วเขียน direction: down แทน ลบป้ายของ Mermaid ในวงเล็บเหลี่ยมออก เพราะที่นี่ข้อความใน [ ] ถูกอ่านเป็นแท็กรูปทรงและสี และ --> ที่นี่วาดลูกศรเส้นประสำหรับการเรียกแบบอะซิงโครนัส ขณะที่ใน Mermaid เป็นลูกศรปกติ ใช้ -> สำหรับลูกศรเส้นทึบ
A -> B: ข้อความ ใส่ป้ายบนลูกศร A --> B วาดลูกศรเส้นประ A <-> B ลูกศรสองทาง และ A <- B ชี้ย้อนกลับ ชื่อ [db, blue] กำหนดรูปทรงและสี รูปทรงมี service, db, cache, queue, actor, client, storage, external, decision, terminal และ note บรรทัด title: ตั้งชื่อไดอะแกรม direction: down จัดวางจากบนลงล่าง และบรรทัดที่ขึ้นต้นด้วย # หรือ // เป็นคอมเมนต์ หนึ่งไดอะแกรมรองรับได้สูงสุด 300 กล่อง 600 ลูกศร และข้อความ 20,000 ตัวอักษร