Mermaid ASCII: เรนเดอร์ไดอะแกรม Mermaid ในเทอร์มินัล

 (github.com/lukilabs)
16 คะแนน โดย GN⁺ 2026-01-30 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • beautiful-mermaid เป็นเครื่องมือความเร็วสูงที่พัฒนาด้วย TypeScript สำหรับเรนเดอร์ไดอะแกรม Mermaid เป็น SVG หรือ ASCII art
  • รองรับ ไดอะแกรม 5 ประเภท (Flowchart, State, Sequence, Class, ER) และ ทำงานได้ทั้งในเทอร์มินัลและเบราว์เซอร์
  • มี ธีมในตัว 15 แบบ และ รองรับ Shiki ทำให้สามารถนำธีม VS Code มาใช้ได้โดยตรง
  • โหมด Mono มอบการแสดงผลที่สม่ำเสมอด้วยสีเพียงสองสี และรองรับการสลับธีมแบบเรียลไทม์ผ่าน CSS custom properties
  • เป็นเครื่องมือแบบเบาและไม่มี dependency ที่เหมาะกับการ แสดงภาพการไหลของข้อมูลและโครงสร้างระบบ ในสภาพแวดล้อมการเขียนโปรแกรมที่มี AI ช่วยเหลือ

ภาพรวม

  • beautiful-mermaid เป็นเครื่องมือสำหรับเรนเดอร์ไดอะแกรม Mermaid เป็น SVG หรือข้อความ ASCII/Unicode
    • ทำงานได้โดยไม่ต้องพึ่งพา DOM และรองรับ การเรนเดอร์ความเร็วสูงมาก (มากกว่า 100 ไดอะแกรมภายใน 500ms)
    • พัฒนาโดยทีม Craft สำหรับ Craft Agents
  • พอร์ต Mermaid-ascii (โปรเจ็กต์ที่พัฒนาด้วย Go) มาเป็น TypeScript พร้อมขยายความสามารถเพิ่มเติม
    • เพิ่มการรองรับไดอะแกรม Sequence, Class และ ER
    • มีอักขระกรอบแบบ Unicode และตัวเลือกสำหรับกำหนดระยะห่างกับ padding

ความสามารถหลัก

  • ประเภทไดอะแกรมที่รองรับ: Flowchart, State, Sequence, Class, ER
  • รูปแบบเอาต์พุต: SVG (สำหรับ UI แบบ rich), ASCII/Unicode (สำหรับเทอร์มินัล)
  • ระบบธีม
    • มีธีมในตัว 15 แบบ (tokyo-night, dracula, nord, github-dark เป็นต้น)
    • โหมด Mono: ใช้เพียงสองสีคือพื้นหลัง (bg) และสีหน้า (fg) แล้วสร้างชุดสีทั้งหมดโดยอัตโนมัติ
    • โหมด Enriched: สามารถกำหนดสีเพิ่มเติมแบบเลือกได้ เช่น accent, muted, surface, border
    • รองรับ การสลับแบบเรียลไทม์บนพื้นฐานของ CSS custom properties
  • การผสานรวมกับ Shiki
    • แมปสีจากธีม VS Code มาเป็นสีของไดอะแกรมโดยอัตโนมัติ
    • ใช้ฟังก์ชัน fromShikiTheme() เพื่อดึงค่าอย่าง bg, fg, accent เป็นต้น

การติดตั้งและการใช้งาน

  • คำสั่งติดตั้ง
    • npm install beautiful-mermaid หรือ bun add beautiful-mermaid, pnpm add beautiful-mermaid
  • ตัวอย่างการเรนเดอร์ SVG 
    import { renderMermaid } from 'beautiful-mermaid'
const svg = await renderMermaid(`graph TD; A-->B;`)
  • ตัวอย่างการเรนเดอร์ ASCII 
    import { renderMermaidAscii } from 'beautiful-mermaid'
const ascii = renderMermaidAscii(`graph LR; A --> B --> C`)
  • การใช้งานบนเบราว์เซอร์
    • โหลดผ่าน CDN (unpkg, jsDelivr) ได้โดยตรงด้วยแท็ก <script>
    • เข้าถึง renderMermaid, renderMermaidAscii, THEMES เป็นต้น ได้จากอ็อบเจ็กต์โกลบอล beautifulMermaid

เอาต์พุต ASCII และตัวเลือก

  • รองรับทั้ง โหมด Unicode (ค่าเริ่มต้น) และ โหมด ASCII ล้วน
  • รายการตัวเลือก
    • useAscii: ใช้ ASCII หรือไม่
    • paddingX, paddingY: ระยะห่างระหว่างโหนด
    • boxBorderPadding: ระยะขอบภายในของโหนด
  • ตัวอย่างเอาต์พุต 
    ┌───┐     ┌───┐
│ A │────►│ B │
└───┘     └───┘

สรุป API

  • renderMermaid(text, options?): เรนเดอร์ไดอะแกรม Mermaid เป็น SVG
    • ตัวเลือก: bg, fg, accent, muted, surface, border, font, transparent
  • renderMermaidAscii(text, options?): เรนเดอร์เป็นข้อความ ASCII/Unicode
  • fromShikiTheme(theme): ดึงค่าสีจากธีม Shiki
  • THEMES: อ็อบเจ็กต์ธีมในตัว 15 แบบ
  • DEFAULTS: ค่าสีเริ่มต้น (#FFFFFF, #27272A)

ไลเซนส์และผู้พัฒนา

  • MIT License
  • พัฒนาโดยทีม Craft
  • เอนจิน ASCII อ้างอิงจาก: mermaid-ascii ของ Alexander Grooff

นัยสำคัญทางเทคนิค

  • ในสภาพแวดล้อม AI coding assistant สามารถ แสดงไดอะแกรมได้ทันทีภายในเทอร์มินัลหรืออินเทอร์เฟซแชต
  • ด้วยโครงสร้างแบบ เบา เร็ว และไม่มี dependency จึงเหมาะกับทั้งเครื่องมือ CLI และสภาพแวดล้อมเซิร์ฟเวอร์
  • ความยืดหยุ่นและความเข้ากันได้ของระบบธีม ช่วยยกระดับประสบการณ์ของนักพัฒนา

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2026-01-30
ความเห็นจาก Hacker News

  • โปรเจ็กต์ที่สร้างบนไลบรารี Go mermaid-ascii ของ Alexander Grooff นั้นเจ๋งมาก
    แต่พบ บั๊กที่ edge "start" ไม่ถูกเรนเดอร์
    ทดสอบที่ agents.craft.do/mermaid

  • ไม่ค่อยเข้าใจว่าทำไมช่วงนี้ ไดอะแกรม ASCII ถึงกลับมาได้รับความสนใจอีกครั้ง
    Mermaid กับ PlantUML ก็เป็นแบบ text-based อยู่แล้ว และผู้ใช้ส่วนใหญ่ก็ต้องการไดอะแกรมมาตรฐานที่มนุษย์อ่านง่ายมากกว่าที่เครื่องอ่านง่าย
    ASCII ถูกจำกัดอยู่แค่ตัวอักษรที่พิมพ์ได้ ทำให้ความสามารถในการแสดงผลต่ำกว่าและทำให้การทำมาตรฐานยากด้วย

    • มันขึ้นอยู่กับบริบท เช่น ใน README หรือ output ของ CLI ที่ไม่สามารถเรนเดอร์ Mermaid ได้ ASCII คือทางเลือกที่ดีที่สุดในแง่ของ ความอ่านง่าย
    • สามารถใส่ไดอะแกรม ASCII ลงในคอมเมนต์ของโค้ดได้ และยังดูได้ดีในเครื่องมือแบบเทอร์มินัลอย่าง Claude Code
    • แทนที่จะบอกว่า “ASCII ไร้ประโยชน์” มันกลับมีประโยชน์มากใน workflow ที่เน้นข้อความ (เช่น Org Mode, การจัดการ Git repository)
      เพราะไม่ต้องยุ่งกับการจัดการไฟล์ภาพหรือการตั้งค่าซับซ้อนอย่าง Git LFS
    • ข้อดีคือไม่ต้องมี renderer ก็อ่านในรูปแบบที่ “เรนเดอร์แล้ว” ได้ทันทีทั้งในเอกสาร Markdown และในซอร์สโค้ด
    • นักพัฒนาจำนวนมากและ coding agent ต่างก็ใช้งาน Markdown และสภาพแวดล้อม CLI เป็นหลัก ดังนั้นแนวทาง ASCII แบบนี้จึงดูเป็นธรรมชาติ

  • ฉันชอบ ไดอะแกรม ASCII มากจริงๆ
    ไม่ว่าจะดูด้วย cat ในเทอร์มินัลหรือให้เว็บไซต์เรนเดอร์ ก็ดูดีเหมือนกันหมด นี่แหละเสน่ห์ของมัน
    ขอแค่มี monospaced font ดีๆ ก็จะดูสะอาดตาในเชิงภาพด้วย
    ขอแนะนำแอปทำไดอะแกรม ASCII ชื่อ Monodraw

    • ^Unicode
    • ชอบเป็นพิเศษตรงที่สามารถใส่ไดอะแกรมไว้ด้านบนของซอร์สโค้ดได้

  • ตัว Mermaid ASCII renderer จริงๆ ยกมาจากโปรเจ็กต์ AlexanderGrooff/mermaid-ascii
    โปรเจ็กต์นี้แค่ แปลงมันเป็น TypeScript และเพิ่มธีมของตัวเองเข้าไป

    • เอาจริงๆ แค่นำ mermaid-ascii ไป bundle เป็น WASM ก็น่าจะพอแล้ว
      อัลกอริทึมหลักแทบจะถูกแปลงมาแบบ 1:1 ดังนั้น Claude น่าจะใช้เวลาไม่ถึงชั่วโมงในการพอร์ตเป็น TS
      ลองเทียบ โค้ด Go กับ โค้ด TS ได้
    • ขอบคุณที่ให้เครดิต
    • เพราะเป็น Go-based เลยไม่ต้องเล่นมุกเรื่อง package management ด้วยซ้ำ ฉันวางแผนจะรวมมันเข้ากับ debugger ของฉัน
    • มีคนชี้ว่า AI อาจจะก็อปทั้งโปรเจ็กต์แล้วแค่เปลี่ยนชื่อหรือเปล่า
    • มีการแก้ลิงก์ต้นฉบับแล้ว และดูเหมือนว่าผู้ส่งโพสต์ขึ้นมาด้วยเจตนาดี

  • ถึง Mermaid จะกำลังได้รับความสนใจ แต่ Kroki(kroki.io) รองรับฟอร์แมตไดอะแกรมได้หลากหลายกว่ามาก
    รวมถึง BlockDiag, BPMN, C4, D2, DBML, Excalidraw, GraphViz และแทบทุกไดอะแกรมแบบ text-based
    Markdown editor ของฉัน KeenWrite(keenwrite.com) รวม Kroki เป็นบริการไว้แล้ว ดังนั้นเมื่อมีฟอร์แมตใหม่เพิ่มเข้ามาก็ใช้งานได้อัตโนมัติ
    Mermaid ใช้ <foreignObject> จึงทำให้ไลบรารีส่วนใหญ่เรนเดอร์ได้ยาก

    • การเปรียบเทียบ MermaidJS กับ Kroki ก็คล้ายกับการเปรียบเทียบ PDF.js กับ Adobe Acrobat
      MermaidJS ทำงานได้เร็วและรันแบบ local ภายในหน้าเว็บ แต่ Kroki ต้องพึ่งพาบริการภายนอก
      ถ้าไม่ได้ต้องการไดอะแกรมซับซ้อนมาก Mermaid ก็เป็นตัวเลือกที่ง่ายกว่า
    • ก่อนหน้านี้ฉันเคยสร้างเครื่องมือชื่อ phart เพื่อ เรนเดอร์ NetworkX DAG เป็น ASCII
      ใน ตัวอย่าง README มีตัวอย่างผลลัพธ์หลายแบบ เช่น chess graph
    • ตอนแรกคิดว่าดีไซน์ของ Kroki ไม่ค่อยโอเคเพราะมี เงาและการบิดเพี้ยนของฟอนต์ มากเกินไป แต่ภายหลังก็รู้ว่าเข้าใจผิด
      ถึงอย่างนั้นก็ยังรู้สึกว่าสไตล์เริ่มต้นของ Mermaid ดูสะอาดกว่า
      อนึ่ง KeenWrite ก็ดูน่าสนใจมาก

  • ยังมีเครื่องมือ Diagon สำหรับแปลงข้อความเป็นไดอะแกรม ASCII ด้วย
    ฉันยังมี รายการเครื่องมือ text→diagram ที่รวบรวมไว้ แต่เครื่องมือแปลง text→ASCII ยังมีไม่มากนัก

    • มีคนขอบคุณว่าเป็นลิสต์ที่ดีมาก

  • ดูเหมือนว่าถ้าจะรันไลฟ์เดโม ต้อง ดาวน์โหลดแพลตฟอร์ม AI agent ก่อน
    เสียดายที่ยังลองใช้ได้ทันทีโดยไม่ต้องติดตั้งไม่ได้

    • คงจะดีถ้านักพัฒนาทำ เดโมแบบ client-only บน GitHub Pages
      จากโครงสร้างของโปรเจ็กต์ก็ดูเป็นไปได้อยู่แล้ว

  • มีฟีเจอร์ “Subgraph Direction Override” ที่ให้ ตั้งค่าทิศทางของ subgraph ให้ต่างออกไป ได้
    ทำให้สามารถเลียนแบบ ไดอะแกรม swim lane ที่ Mermaid ยังไม่รองรับได้

  • Selkie ที่ฉันสร้างเป็นโปรเจ็กต์ทดลองซึ่ง ทำ Mermaid parser และ renderer ขึ้นใหม่ทั้งหมดด้วย Rust
    เดิมทีทำไว้เพื่อทดสอบว่า Claude Code ทำอะไรได้มากแค่ไหน แต่ผลลัพธ์น่าทึ่งมาก
    ลองได้ทันทีใน Playground
    ถ้ารองรับ Kitty terminal ก็สามารถแสดงไดอะแกรมออกในเทอร์มินัลได้โดยตรง
    เร็วๆ นี้ฉันจะเขียนบล็อกเล่ากระบวนการทั้งหมด

  • โปรเจ็กต์นี้เจ๋งมาก และ การทำงานร่วมกับ Claude Code ก็น่าประทับใจ
    ฉันเองก็ทำโปรเจ็กต์คล้ายกัน แต่โฟกัสที่ การสำรวจโค้ดแบบอินเทอร์แอ็กทีฟ แทน ASCII
    ออกแบบมาเพื่อช่วยให้มนุษย์เข้าใจได้ดีขึ้น ใช้ D2 และกำลังเตรียมรองรับ Mermaid ด้วย
    อยากฟังความเห็นว่า ความอินเทอร์แอ็กทีฟ เพื่อมนุษย์มีคุณค่ามากกว่า หรือว่า บริบทสำหรับ agent สำคัญกว่า
    ลิงก์โปรเจ็กต์