แผนภาพ Mermaid จากเอเจนต์ของคุณ
วาดเป็นภาพ ไม่ใช่พิมพ์ออกมาเป็นโค้ด
ขอแผนภาพจาก Claude Code หรือ Codex แล้วมันจะเขียน Mermaid: บล็อกข้อความที่เทอร์มินัลทำได้แค่พิมพ์ออกมา AgentsRoom วาดมันให้ทุกที่ที่คุณอ่านสิ่งที่เอเจนต์เขียน และเก็บโค้ดไว้ห่างแค่คลิกเดียว
มุมมองบทสนทนา ไฟล์ Markdown แผนในตรวจทานแผน โน้ต โปรเจกต์เมมโมรี่ และตั๋วใน backlog: ทุกบล็อกโค้ด mermaid จะกลายเป็นแผนภาพ ในธีมสว่างหรือธีมมืดของแอป บน macOS, Windows และ Linux ไม่ต้องติดตั้งอะไร ไม่ต้องใช้ skill ไม่ต้องมีเซิร์ฟเวอร์ MCP
```mermaid
flowchart LR
A[Login] --> B{Token valid?}
B -->|yes| C[Dashboard]
B -->|no| A
```บล็อก mermaid เดียวกัน แบบที่เทอร์มินัลพิมพ์ออกมา และแบบที่ AgentsRoom วาดให้
ถาม Claude Code ว่าคำขอหนึ่งเดินทางผ่านแอปของคุณอย่างไร หรือให้ Codex ร่างตารางของการย้ายข้อมูล (migration) แล้วคุณมักจะได้บล็อกโค้ดที่ขึ้นต้นด้วย mermaid: ผังงาน แผนภาพลำดับ (sequence) หรือแผนภาพความสัมพันธ์ระหว่างเอนทิตี (ER) ที่เขียนเป็นข้อความ เทอร์มินัลทำได้แค่พิมพ์ออกมา คุณจึงต้องอ่านลูกศรที่ทำจากขีด แล้ววาดกล่องเองในหัว
AgentsRoom อ่าน Markdown ชุดเดียวกันแล้ววาดออกมา บล็อกจะกลายเป็นแผนภาพเมื่อเลื่อนมาถึงบนจอ ปุ่มแสดงโค้ดที่ปรากฏเมื่อวางเมาส์จะเรียกซอร์สกลับมา และแสดงแผนภาพจะพากลับไปที่ภาพวาด ถ้าเอเจนต์เขียนไวยากรณ์ผิด โค้ดจะยังอยู่บนจอพร้อมหนึ่งบรรทัดบอกว่าวาดแผนภาพไม่ได้ คุณจึงไม่เสียสิ่งที่มันเขียนไปเลย
การวาดไม่ขึ้นกับ CLI: ตัวอ่าน Markdown ของแอปเป็นผู้วาดจากข้อความ แผนภาพใน README ที่ Codex เขียน ในแผนที่ Claude Code เขียน หรือในตั๋วที่เอเจนต์ตัวอื่นเขียน จะถูกวาดด้วยวิธีเดียวกัน
อะไรเปลี่ยนไปเมื่อคุณอ่านเอเจนต์
กฎเดียวกันทุกที่ที่แอปแสดง Markdown: บล็อก mermaid จะแสดงเป็นแผนภาพ
ทุกที่ที่คุณอ่านเอเจนต์
มุมมองบทสนทนา ไฟล์ Markdown ในพรีวิวไฟล์และในแท็บของไฟล์ แผนในตรวจทานแผน โน้ต โน้ตของโปรเจกต์เมมโมรี่ ตั๋วใน backlog และความคิดเห็นของตั๋ว รวมถึงคำตอบของถามแบบไม่รบกวน
วาดไปพร้อมกับที่เอเจนต์เขียน
เอเจนต์เขียนแผนภาพทีละบรรทัด AgentsRoom จะรอให้ข้อความนิ่งสักครู่ก่อนวาด และระหว่างนั้นจะคงแผนภาพที่ถูกต้องล่าสุดไว้บนจอ บล็อกจึงไม่กะพริบสลับไปมาระหว่างโค้ดกับภาพวาด
ซอร์สอยู่ห่างแค่คลิกเดียว
วางเมาส์บนแผนภาพแล้วกดแสดงโค้ดเพื่ออ่านข้อความ Mermaid ที่เป็นต้นทาง จากนั้นกดแสดงแผนภาพเพื่อกลับไป ซอร์สไม่เคยถูกแทนที่ แค่แสดงในอีกรูปแบบหนึ่ง
แผนภาพที่พังยังอ่านได้
เมื่อ Mermaid แยกวิเคราะห์ไวยากรณ์ของบล็อกไม่ได้ โค้ดจะยังอยู่บนจอพร้อมหนึ่งบรรทัดด้านล่าง: ไม่สามารถวาดแผนภาพนี้ได้ จึงแสดงโค้ดแทน คุณส่งมันกลับไปให้เอเจนต์ได้ตามที่เป็นอยู่
แผนภาพทุกแบบของ Mermaid 11
ผังงาน แผนภาพลำดับ แผนภาพคลาส แผนภาพสถานะ และแผนภาพความสัมพันธ์ระหว่างเอนทิตี แผนภูมิแกนต์ แผนที่ความคิด กราฟ git: อะไรที่ Mermaid 11 วาดได้ AgentsRoom ก็วาดได้
ไม่วาดอะไรนอกจอ
แผนภาพจะถูกจัดวางก็ต่อเมื่อเข้าใกล้หน้าจอ ทีละอัน และผลลัพธ์จะถูกเก็บไว้ บทสนทนายาวที่เต็มไปด้วยแผนภาพจึงไม่มีต้นทุนสำหรับแผนภาพที่คุณยังเลื่อนไปไม่ถึง
วิธีใช้งาน
ไม่ต้องเปิดใช้อะไร สี่ขั้นตอนจากคำถามสู่แผนภาพ
- 1
ขอแผนภาพ
จากเอเจนต์ตัวไหนก็ได้ ด้วยคำง่ายๆ: วาดขั้นตอนการเข้าสู่ระบบเป็นผังงาน Mermaid หรือแสดงการเรียก API นี้เป็นแผนภาพลำดับ โดยทั่วไปแค่พูดว่า Mermaid ก็พอให้เอเจนต์ตอบกลับมาเป็นบล็อก mermaid
- 2
อ่านในมุมมองบทสนทนา
สลับแผงของเอเจนต์เป็นมุมมองบทสนทนา: บล็อกจะปรากฏเป็นแผนภาพในคำตอบของเอเจนต์ เทอร์มินัลด้านล่างไม่เปลี่ยน และยังแสดงข้อความเหมือนเดิม
- 3
หรือเปิดไฟล์ที่มันเขียน
เมื่อเอเจนต์ใส่แผนภาพไว้ในไฟล์ Markdown (README โน้ตสถาปัตยกรรม หรือแผน) ให้เปิดจากลิงก์ไฟล์ในคำตอบของมัน จากแท็บไฟล์ในแผงด้านขวา หรือด้วย ไฟล์ > เปิดไฟล์ (Cmd O บน macOS, Ctrl O บน Windows และ Linux): พรีวิวและแท็บของไฟล์จะวาดทุกแผนภาพในไฟล์นั้น
- 4
ตรวจดูซอร์ส
วางเมาส์บนแผนภาพแล้วกดแสดงโค้ดเพื่ออ่านหรือคัดลอกข้อความ Mermaid จากนั้นกดแสดงแผนภาพเพื่อกลับไปที่ภาพวาด
สิ่งที่เทอร์มินัล GitHub และ skill ของ Mermaid ทำได้อยู่แล้ว
Claude Code และ Codex CLI ทำงานในเทอร์มินัล และเทอร์มินัลแสดงตัวอักษร ไม่ใช่ภาพวาด: บล็อก mermaid จึงแสดงเป็นซอร์ส นี่ไม่ใช่การตั้งค่าที่ CLI ขาดไป แต่เป็นธรรมชาติของเทอร์มินัล
นี่คือเหตุผลที่คนมองหา skill, ปลั๊กอิน หรือเซิร์ฟเวอร์ MCP ด้าน Mermaid สำหรับ Claude Code สิ่งเหล่านี้ช่วยให้เอเจนต์เขียนแผนภาพที่ถูกต้อง หรือส่งออกเป็นไฟล์รูปภาพ แต่การจะอ่านแผนภาพ คุณยังต้องวางโค้ดลงในที่ที่วาดมันได้: GitHub วาดบล็อก mermaid ในไฟล์ Markdown และความคิดเห็น mermaid.live วาดทุกอย่างที่คุณวาง และพรีวิว Markdown ของเอดิเตอร์ทำได้เมื่อมีส่วนขยาย Mermaid
AgentsRoom ไม่ได้มาแทนเครื่องมือเหล่านั้น มันตัดขั้นตอนคัดลอกและวางออกไปเมื่อคุณอ่านเอเจนต์อยู่แล้ว: แผนภาพถูกวาดในบทสนทนา ในแผน หรือในไฟล์ที่คุณเปิดอยู่ข้างเอเจนต์
ข้อจำกัด
- เทอร์มินัลดิบของเอเจนต์ยังแสดงซอร์สเหมือนเดิม: การวาดเกิดขึ้นในมุมมองบทสนทนาและในตัวอ่าน Markdown ไม่ใช่ในตารางตัวอักษรของเทอร์มินัล
- มุมมองบทสนทนามีให้สำหรับ CLI ที่ AgentsRoom อ่านทรานสคริปต์ได้: Claude Code, Codex, Grok Build, Mistral Vibe, oh-my-pi, Pi และ Antigravity CLI สำหรับตัวอื่น ให้เปิดไฟล์ Markdown ที่เอเจนต์เขียน
- แผนภาพใช้ธีม dark และ neutral ของ Mermaid ตามธีมสว่างหรือธีมมืดของแอป และไม่ใช้สีเน้นของคุณ
- ลิงก์ในแผนภาพจะเปิดได้เฉพาะที่อยู่ http หรือ https เหมือนลิงก์ใน Markdown ลิงก์ไปยังไฟล์ในเครื่องจะไม่ทำอะไร
- ป้ายกำกับเป็นข้อความธรรมดา: HTML และสคริปต์ในแผนภาพจะถูกลบออก และบรรทัดการตั้งค่าที่เขียนไว้ในแผนภาพก็เปลี่ยนเรื่องนี้ไม่ได้
- ไม่มีปุ่มส่งออก: หากต้องการเก็บแผนภาพเป็นไฟล์ PNG หรือ SVG ให้ขอเอเจนต์ส่งออกด้วยเครื่องมือบรรทัดคำสั่งของ Mermaid
คำถามที่พบบ่อย
Claude Code แสดงแผนภาพ Mermaid ได้ไหม?
ในเทอร์มินัลไม่ได้ Claude Code เขียนแผนภาพ Mermaid เป็นบล็อกโค้ด และเทอร์มินัลทำได้แค่พิมพ์ออกมาเป็นข้อความ รันเอเจนต์ตัวเดียวกันใน AgentsRoom แล้วสลับแผงของมันเป็นมุมมองบทสนทนา: บล็อกจะถูกวาดเป็นแผนภาพในคำตอบ และปุ่มแสดงโค้ดจะเรียกซอร์สกลับมา
จะดูพรีวิวแผนภาพ Mermaid ที่เอเจนต์เขียนไว้ในไฟล์ Markdown ได้อย่างไร?
เปิดไฟล์ใน AgentsRoom: คลิกลิงก์ไฟล์ในคำตอบของเอเจนต์ เลือกไฟล์ในแท็บไฟล์ของแผงด้านขวา หรือใช้ ไฟล์ > เปิดไฟล์ (Cmd O บน macOS, Ctrl O บน Windows และ Linux) พรีวิว Markdown และแท็บของไฟล์ถ้าคุณเปิดเป็นแท็บ จะวาดทุกบล็อก mermaid ในไฟล์
ใช้กับ Codex และ CLI ของเอเจนต์ตัวอื่นได้ไหม?
ได้ แผนภาพถูกวาดโดยตัวอ่าน Markdown ของแอปจากข้อความ ไม่ว่า CLI ตัวไหนจะเป็นผู้เขียน แผนภาพจาก Codex, Claude Code หรือเอเจนต์ตัวอื่นจึงถูกวาดแบบเดียวกันในไฟล์ แผน โน้ต และตั๋ว ส่วนมุมมองบทสนทนาซึ่งวาดคำตอบไปพร้อมกับที่มันเข้ามา รองรับ Claude Code, Codex, Grok Build, Mistral Vibe, oh-my-pi, Pi และ Antigravity CLI
ต้องมี skill ของ Mermaid หรือเซิร์ฟเวอร์ MCP ไหม?
ไม่ต้อง ถ้าแค่จะอ่านแผนภาพ skill หรือเซิร์ฟเวอร์ MCP ช่วยให้เอเจนต์เขียน Mermaid ที่ถูกต้องหรือส่งออกเป็นรูปภาพได้ AgentsRoom แค่วาดสิ่งที่เขียนไว้แล้ว ทั้งสองจึงทำงานร่วมกัน: skill ทำให้แผนภาพดีขึ้น AgentsRoom แสดงมันออกมา
วาดแผนภาพแบบไหนได้บ้าง และถ้าไวยากรณ์ผิดจะเป็นอย่างไร?
ทุกอย่างที่ Mermaid 11 วาดได้: ผังงาน แผนภาพลำดับ แผนภาพคลาส แผนภาพสถานะ และแผนภาพความสัมพันธ์ระหว่างเอนทิตี แผนภูมิแกนต์ แผนที่ความคิด กราฟ git และแบบอื่นๆ ในแคตตาล็อกของมัน บล็อกที่ Mermaid แยกวิเคราะห์ไม่ได้จะยังเป็นโค้ด พร้อมหนึ่งบรรทัดด้านล่างบอกว่าวาดแผนภาพไม่ได้ ขอให้เอเจนต์แก้: บล็อกที่แก้แล้วจะถูกวาด
คุณอาจสนใจ
มุมมองบทสนทนา
มุมมองแชทสำหรับ Claude Code, Codex และ CLI ของเอเจนต์อีกห้าตัว: เซสชันที่อ่านจากทรานสคริปต์ของ CLI เอง การเรียกใช้เครื่องมือถูกพับไว้ คำตอบแสดงสด บนเดสก์ท็อปและโทรศัพท์
ตรวจทานแผน
เอเจนต์ของคุณเสนอแผน: อ่านแผนเป็นเอกสาร แสดงความคิดเห็น แทนที่ หรือลบช่วงข้อความใดก็ได้ แล้วอนุมัติหรือส่งกลับไปในข้อความเดียว เก็บไว้ทุกเวอร์ชัน
โปรเจกต์เมมโมรี่
ให้หน่วยความจำระยะยาวแก่เอเจนต์เขียนโค้ด AI ของคุณ การตัดสินใจ สถาปัตยกรรม และข้อผิดพลาดจะคงอยู่ข้ามเซสชันและแชร์กับทุกคนในโปรเจกต์ ฟรี ไม่มีขีดจำกัด
ถามแบบไม่รบกวน
ถามเอเจนต์ AI เขียนโค้ดที่กำลังยุ่งอยู่ได้โดยไม่ขัดจังหวะมัน สำเนาแบบอ่านอย่างเดียวของบทสนทนาจะตอบในฟองที่มีแท็บ ขณะที่เทอร์มินัลของมันยังทำงานต่อ รองรับ Claude Code, Codex, Grok, GitHub Copilot CLI, OpenCode, Mistral Vibe, Antigravity CLI และ Kimi Code ทั้งจากเดสก์ท็อปและโทรศัพท์ของคุณ
อ่านแผนภาพของเอเจนต์ในแบบแผนภาพ
ดาวน์โหลด AgentsRoom สำหรับ macOS, Windows หรือ Linux ขอแผนภาพ Mermaid จากเอเจนต์ แล้วสลับแผงของมันเป็นมุมมองบทสนทนา
แอปคู่หู: ตรวจสอบเอเจนต์ของคุณได้ทุกที่
นำของคุณเอง: Claude, Codex, Antigravity CLI, หรือผู้ให้บริการ AI อื่น ๆ
ส่งข้อบกพร่องและคำขอไปยังแบ็คล็อกสาธารณะของคุณโดยตรง