Mermaid ASCII: Merender diagram Mermaid di terminal

 (github.com/lukilabs)
16 poin oleh GN⁺ 2026-01-30 | 1 komentar | Bagikan ke WhatsApp
  • beautiful-mermaid adalah alat berbasis TypeScript supercepat untuk merender diagram Mermaid menjadi SVG atau ASCII art
  • Mendukung 5 jenis diagram (Flowchart, State, Sequence, Class, ER), dan berjalan baik di terminal maupun browser
  • Dengan 15 tema bawaan dan kompatibilitas Shiki, tema VS Code dapat langsung diterapkan
  • Mode Mono menyediakan representasi visual yang konsisten hanya dengan dua warna, dan mendukung pergantian tema secara real-time melalui properti kustom CSS
  • Menonjol sebagai alat ringan tanpa dependensi untuk memvisualisasikan aliran data dan struktur sistem di lingkungan pemrograman berbantuan AI

Gambaran umum

  • beautiful-mermaid adalah alat untuk merender diagram Mermaid menjadi SVG atau teks ASCII/Unicode
    • Berjalan tanpa dependensi DOM dan mendukung rendering supercepat (lebih dari 100 diagram dalam 500 ms)
    • Dikembangkan oleh tim Craft untuk Craft Agents
  • Merupakan port Mermaid-ascii (proyek berbasis Go) ke TypeScript dengan perluasan fitur
    • Menambahkan dukungan untuk diagram Sequence, Class, dan ER
    • Mencakup karakter kotak Unicode, serta pengaturan spasi dan padding

Fitur utama

  • Jenis diagram yang didukung: Flowchart, State, Sequence, Class, ER
  • Format keluaran: SVG (untuk UI kaya), ASCII/Unicode (untuk terminal)
  • Sistem tema
    • Menyediakan 15 tema bawaan (tokyo-night, dracula, nord, github-dark, dll.)
    • Mode Mono: seluruh warna diturunkan otomatis hanya dari dua warna, yaitu latar belakang (bg) dan latar depan (fg)
    • Mode Enriched: warna opsional seperti accent, muted, surface, border dapat ditentukan
    • Mendukung pergantian real-time berbasis properti kustom CSS
  • Integrasi Shiki
    • Secara otomatis memetakan warna tema VS Code ke warna diagram
    • Fungsi fromShikiTheme() dapat mengekstrak bg, fg, accent, dll.

Instalasi dan penggunaan

  • Perintah instalasi
    • npm install beautiful-mermaid atau bun add beautiful-mermaid, pnpm add beautiful-mermaid
  • Contoh rendering SVG 
    import { renderMermaid } from 'beautiful-mermaid'
const svg = await renderMermaid(`graph TD; A-->B;`)
  • Contoh rendering ASCII 
    import { renderMermaidAscii } from 'beautiful-mermaid'
const ascii = renderMermaidAscii(`graph LR; A --> B --> C`)
  • Penggunaan di browser
    • Dapat dimuat langsung melalui tag <script> via CDN (unpkg, jsDelivr)
    • Objek global beautifulMermaid menyediakan akses ke renderMermaid, renderMermaidAscii, THEMES, dll.

Keluaran ASCII dan opsi

  • Mendukung mode Unicode (default) dan mode ASCII murni
  • Opsi
    • useAscii: apakah menggunakan ASCII
    • paddingX, paddingY: jarak antar node
    • boxBorderPadding: ruang dalam node
  • Contoh keluaran 
    ┌───┐     ┌───┐
│ A │────►│ B │
└───┘     └───┘

Ringkasan API

  • renderMermaid(text, options?): merender diagram Mermaid menjadi SVG
    • Opsi: bg, fg, accent, muted, surface, border, font, transparent
  • renderMermaidAscii(text, options?): merender menjadi teks ASCII/Unicode
  • fromShikiTheme(theme): mengekstrak warna dari tema Shiki
  • THEMES: objek 15 tema bawaan
  • DEFAULTS: warna default (#FFFFFF, #27272A)

Lisensi dan pembuatan

  • Lisensi MIT
  • Dibuat oleh tim Craft
  • Mesin ASCII berbasis: mermaid-ascii karya Alexander Grooff

Makna teknis

  • Di lingkungan asisten coding AI, diagram dapat langsung divisualisasikan di terminal atau antarmuka chat
  • Dengan struktur ringan, cepat, dan tanpa dependensi, alat ini juga sangat berguna di tool CLI maupun lingkungan server
  • Ekstensibilitas dan kompatibilitas tema meningkatkan pengalaman pengembang

Bacaan terkait

1 komentar

 
GN⁺ 2026-01-30
Opini Hacker News

  • Proyek berbasis pustaka Go mermaid-ascii buatan Alexander Grooff ini benar-benar keren
    Namun, ditemukan bug di mana edge "start" tidak dirender
    Pengujian dilakukan di agents.craft.do/mermaid

  • Saya kurang paham kenapa diagram ASCII kembali mendapat perhatian belakangan ini
    Mermaid dan PlantUML juga sudah berbasis teks, dan kebanyakan pengguna menginginkan diagram standar yang enak dilihat manusia, bukan mesin
    ASCII terbatas pada karakter yang bisa dicetak, jadi daya ekspresinya lebih rendah dan juga sulit distandardisasi

    • Tergantung konteks. Misalnya, di lingkungan seperti README atau output CLI yang tidak bisa merender Mermaid, ASCII adalah pilihan terbaik dari sisi keterbacaan
    • Diagram ASCII bisa dimasukkan ke dalam komentar kode. Ini juga terlihat bagus di alat berbasis terminal seperti Claude Code
    • Daripada mengatakan “ASCII tidak berguna”, dalam workflow yang berpusat pada teks (misalnya Org Mode, pengelolaan repositori Git), justru ini berguna
      Karena tidak perlu pengelolaan file gambar atau konfigurasi rumit seperti Git LFS
    • Kelebihannya adalah tidak memerlukan renderer. Bahkan di dalam dokumen Markdown atau source code, bentuk yang sudah “terender” bisa langsung dibaca
    • Banyak developer dan agen coding yang terutama memakai Markdown dan lingkungan CLI, jadi pendekatan ASCII seperti ini terasa alami

  • Saya sangat suka diagram ASCII
    Daya tariknya adalah tampil sama kerennya baik dilihat dengan cat di terminal maupun dirender di situs web
    Dengan font monospaced yang bagus, tampilannya juga rapi secara visual
    Saya juga merekomendasikan aplikasi pembuat diagram ASCII bernama Monodraw

    • ^Unicode
    • Saya terutama suka karena diagram bisa diletakkan di bagian atas source code

  • Renderer Mermaid ASCII yang sebenarnya diambil dari proyek AlexanderGrooff/mermaid-ascii
    Proyek ini mengonversinya ke TypeScript dan menambahkan tema sendiri

    • Sebenarnya mungkin cukup membundel mermaid-ascii sebagai WASM
      Algoritme utamanya hampir merupakan konversi 1:1, jadi kemungkinan Claude bisa mem-porting ke TS dalam waktu kurang dari satu jam
      Anda bisa membandingkan kode Go dan kode TS
    • Terima kasih atas kreditnya
    • Karena berbasis Go, bahkan tidak perlu lelucon soal manajemen paket. Saya berencana mengintegrasikannya ke debugger saya
    • Ada yang menyoroti apakah AI hanya menyalin seluruh proyek lalu mengganti namanya saja
    • Tautan asli sudah diperbaiki. Pengirim tampaknya mengunggahnya dengan niat baik

  • Mermaid memang sedang mendapat perhatian, tetapi Kroki(kroki.io) mendukung format diagram yang jauh lebih beragam
    Termasuk hampir semua diagram berbasis teks seperti BlockDiag, BPMN, C4, D2, DBML, Excalidraw, GraphViz, dan lainnya
    Editor Markdown saya, KeenWrite(keenwrite.com), mengintegrasikan Kroki sebagai layanan, sehingga saat format baru ditambahkan, format itu langsung bisa digunakan otomatis
    Karena Mermaid memakai <foreignObject>, rendering-nya sulit dilakukan di sebagian besar pustaka

    • Membandingkan MermaidJS dan Kroki itu mirip seperti membandingkan PDF.js dan Adobe Acrobat
      MermaidJS berjalan cepat dan lokal di dalam halaman web, tetapi Kroki bergantung pada layanan eksternal
      Jika tidak membutuhkan diagram yang kompleks, Mermaid adalah pilihan yang lebih sederhana
    • Dulu saya pernah membuat alat bernama phart untuk merender NetworkX DAG ke ASCII
      Ada berbagai contoh output seperti graf catur di contoh README
    • Awalnya saya mengira desain Kroki kurang bagus karena bayangan dan distorsi font yang terlalu kuat, tetapi belakangan saya sadar itu hanya salah paham
      Meski begitu, saya tetap merasa gaya default Mermaid lebih rapi
      Sebagai catatan, KeenWrite terlihat cukup bagus

  • Ada juga alat Diagon yang mengubah teks menjadi diagram ASCII
    Saya juga punya daftar alat teks→diagram yang saya susun, meski alat untuk konversi teks→ASCII tidak banyak

    • Ada yang berterima kasih karena ini daftar yang bagus

  • Untuk menjalankan demo live, sepertinya perlu mengunduh platform agen AI
    Agak disayangkan karena saya ingin langsung mencobanya tanpa instalasi

    • Akan bagus jika para developer membuat demo klien-saja berbasis GitHub Pages
      Dari struktur proyeknya, itu tampak sangat memungkinkan

  • Ada fitur “Subgraph Direction Override”, sehingga arah subgraf bisa diatur berbeda
    Dengan ini, dimungkinkan untuk meniru diagram swim lane yang sebelumnya tidak didukung Mermaid

  • Selkie buatan saya adalah proyek eksperimen yang mengimplementasikan parser dan renderer Mermaid sepenuhnya dalam Rust
    Awalnya dipakai untuk menguji sejauh mana Claude Code bisa digunakan, dan hasilnya mengejutkan
    Bisa langsung dijalankan di Playground
    Jika mendukung terminal Kitty, diagram bahkan bisa ditampilkan langsung di terminal
    Saya akan segera menulis seluruh prosesnya di blog

  • Proyek ini benar-benar keren, dan sinerginya dengan Claude Code juga mengesankan
    Saya pernah membuat proyek serupa, tetapi alih-alih ASCII, saya fokus pada penjelajahan kode interaktif
    Saya merancangnya untuk membantu pemahaman manusia, menggunakan D2, dan dukungan Mermaid juga sedang disiapkan
    Saya ingin mendengar pendapat apakah interaktivitas untuk manusia lebih bernilai, atau apakah konteks agen yang lebih penting
    Tautan proyek