AntV Infographic adalah framework open source yang mengubah teks biasa menjadi infografis live yang bisa diedit di dalam aplikasi web. Alih-alih menunggu model AI menyelesaikan seluruh respons lalu menggambar grafik, framework ini me-render secara progresif: saat potongan teks tiba, infografis ikut diperbarui di layar. Itu membuatnya cocok untuk fitur AI di mana pengguna menyaksikan jawaban berubah menjadi visual secara real time.
Poin Penting
AntV Infographic me-render infografis dari sintaks teks, jadi model AI bisa menghasilkan visual hanya dengan menghasilkan teks.
Parser-nya yang toleran terhadap kesalahan me-render secara progresif, sehingga streaming output AI terasa live, bukan tertunda.
Ia dibekali sekitar 200 template bawaan, renderer SVG, tema, dan editor visual bawaan.
Intinya tidak terikat satu framework, dengan wrapper untuk React, Vue, dan bahkan Plotly Dash.
Proyek ini berasal dari tim visualisasi AntV milik Alibaba, berlisensi MIT, dan memiliki 7.070 bintang di GitHub per 5 November 2026.
Masalah yang Diselesaikan
Model AI jago menghasilkan teks, dan jauh lebih lemah dalam menghasilkan grafik jadi. Minta infografis ke model, dan biasanya kamu dapat satu dari dua hasil yang mengecewakan: gambar statis yang tidak bisa diedit, atau tumpukan kode grafik yang harus kamu sambungkan sendiri. Keduanya merusak alur aplikasi yang ingin menunjukkan, bukan sekadar menceritakan.
AntV Infographic mengambil jalan ketiga. AI menulis sintaks teks yang ringkas dan berbasis indentasi untuk mendeskripsikan infografis: tata letaknya, item datanya, bentuknya, ikonnya, dan konektornya. Framework ini mem-parsing teks tersebut dan me-render-nya sebagai SVG di browser. Karena sintaksnya berupa teks, ia cocok dengan apa yang memang dikuasai language model. Karena output-nya SVG, ia tetap tajam di ukuran apa pun dan tetap bisa diedit setelahnya.
Cara Kerja Streaming-nya
Cerita streaming-nya sederhana, dan layak dijelaskan secara tepat. Infographic sendiri tidak mengklaim sebagai transport streaming. Aplikasimu menerima potongan output AI lewat cara streaming yang sudah kamu pakai, misalnya server-sent events atau websocket dari backend-mu sendiri. Pada setiap potongan, kamu menambahkan teks ke buffer lalu memanggil render lagi dengan seluruh buffer sejauh ini.
Pola itu berhasil karena parser sintaksnya toleran terhadap kesalahan. Deskripsi infografis yang baru setengah jadi tetap ter-parsing sejauh yang bisa dipahami, sehingga grafik yang terlihat tumbuh dan mengoreksi dirinya sendiri seiring teks tambahan tiba, alih-alih gagal karena input belum lengkap atau menunggu token terakhir. README resminya mendemonstrasikan persis loop ini: kumpulkan potongan dalam buffer, lalu render buffer itu pada setiap pembaruan.
Memulainya cukup satu instalasi paket dan beberapa baris kode. Jalankan npm install @antv/infographic dari terminalmu.
Kamu membuat instance yang mengarah ke elemen container, lalu me-render string sintaks ke dalamnya. Dari sana, pemanggilan render yang sama menangani gambar pertama maupun setiap pembaruan streaming.
Yang Kamu Dapat Langsung dari Kotaknya
Angka utamanya adalah pustaka template: sekitar 200 template infografis bawaan, komponen item data, dan tata letak, mencakup bentuk umum seperti daftar, linimasa, perbandingan, proses, dan panah. Memilih template berarti AI tidak perlu menemukan tata letak dari nol. Ia mengisi struktur yang sudah terbukti, sehingga output tetap konsisten dan lebih jarang rusak.
Rendering bawaan memakai SVG, dan itu penting karena dua alasan praktis. Pertama, grafik tetap tajam tanpa kehilangan kualitas, jadi infografis yang sama terlihat bagus di layar ponsel maupun slide presentasi. Kedua, output SVG bisa dibuka dan disempurnakan di tool desain seperti Figma atau Illustrator, sehingga grafik hasil generate adalah titik awal, bukan jalan buntu.
Di sekitar inti itu ada tiga fitur yang membuatnya terasa lengkap, bukan eksperimental. Sistem tema menawarkan gaya termasuk tampilan hand-drawn, gradien, dan pola. Editor bawaan memungkinkan pengguna menyempurnakan infografis hasil generate secara visual setelah AI menyelesaikan bagiannya. Dan agent skill untuk Claude Code dan Codex membantu coding agent menghasilkan sintaks yang valid sejak awal.
Filosofi desain di baliknya dinyatakan lugas di dokumentasi resmi: kesederhanaan di atas kerumitan, kejelasan di atas pamer, dan profesional sekaligus indah. Komposisi tipikalnya kira-kira 60 persen grafik dan 40 persen teks, dibangun dari judul, deskripsi, item data, bentuk, ikon, dan konektor seperti panah dan garis.
AntV Infographic Sekilas
Aspek | Detail |
|---|---|
Lisensi | MIT |
Bahasa | TypeScript |
Bintang GitHub | 7.070, per 5 November 2026 |
Fork GitHub | 564, per 5 November 2026 |
Template | Sekitar 200 template, komponen, dan tata letak bawaan |
Output | SVG sebagai bawaan |
Streaming | Rendering progresif dari buffer teks yang terus bertambah |
Editor | Editor visual bawaan untuk edit setelah generate |
Framework | Inti tidak terikat framework, plus integrasi React, Vue, dan Dash |
Posisinya di Stack Frontend
Intinya dipasang ke elemen DOM, jadi tidak menguncimu ke satu framework. Ekosistem di sekelilingnya mencakup pilihan umum: infographic-for-react untuk aplikasi React dan markstream-vue untuk aplikasi Vue 3 yang me-streaming markdown. Sintaks yang sama bahkan muncul di luar frontend JavaScript, lewat feffery-infographic, komponen Plotly Dash yang memungkinkan developer Python me-render infografis AntV dengan sintaks teks yang sama.
Untuk pengembangan sehari-hari, tersedia juga dukungan editor. Ekstensi VS Code menambahkan syntax highlighting dan pratinjau markdown live untuk blok kode infographic, plus editor visual di sidebar dengan ekspor, sehingga kamu bisa mengutak-atik template tanpa meninggalkan editor. Situs resminya di infographic.antv.vision mengumpulkan dokumentasi, galeri template, dan live editor untuk mencoba sintaks sebelum kamu menggunakannya.
Ini juga contoh bagus makna open source dalam praktiknya: toolkit visualisasi dari tim dengan rekam jejak panjang di grafik dan chart, diterbitkan di bawah MIT, sehingga siapa pun bisa memeriksa, memakai, dan mengembangkannya.
Siapa yang Sebaiknya Mencobanya
AntV Infographic cocok untuk tim yang menambahkan jawaban visual ke produk AI: chatbot yang menjelaskan sebuah proses, dashboard yang merangkum laporan, aplikasi belajar yang mengubah pelajaran menjadi diagram, atau tool internal yang mengubah dinding teks menjadi sesuatu yang bisa dipahami pembaca sekilas. Kalau AI-mu sudah me-streaming teks, menambahkan infografis live hanya selangkah dari sana.
Ia kurang cocok untuk pekerjaan yang butuh desain cetak sempurna hingga piksel terakhir atau ilustrasi yang dibuat khusus. Sistem template menukar sebagian kebebasan dengan keandalan, dan tukar itu memang intinya: grafik yang konsisten, bisa diedit, dan enak dilihat, yang dihasilkan saat itu juga, bukan karya seni sekali jadi.
Coba dulu ini: buka live editor di situs resmi, pilih template yang paling dekat dengan kebutuhanmu, dan perhatikan betapa sedikit sintaks yang dibutuhkan untuk mendeskripsikannya. Lalu bayangkan sintaks itu datang dari fitur AI-mu, satu potongan streaming demi satu potongan. Itulah seluruh idenya, dan begitu kamu melihatnya bergerak, idenya langsung terasa nyata.
FAQ
Apakah AntV Infographic gratis dipakai?
Ya. Ia open source di bawah lisensi MIT, jadi bisa dipakai untuk proyek pribadi maupun komersial.
Apakah bisa dipakai dengan React dan Vue?
Ya. Intinya tidak terikat framework dan dipasang ke elemen DOM, dan tersedia wrapper khusus untuk React dan Vue.
Bisakah ia me-render output AI sebelum model selesai?
Ya, itu fitur andalannya. Tambahkan setiap potongan yang masuk ke buffer lalu render ulang buffer itu, dan parser yang toleran terhadap kesalahan akan menggambar sintaks valid apa pun yang bisa dipahami sejauh ini.
Apakah output-nya bisa diedit setelah di-generate?
Ya. Output di-render sebagai SVG sebagai bawaan, dan editor visual bawaan memungkinkan pengguna menyesuaikan infografis hasil generate tanpa me-regenerate-nya.
Dari mana proyek ini berasal?
Ia berasal dari tim visualisasi AntV, tim yang sama di balik pustaka visualisasi open source yang sudah dikenal, dan repositorinya berada di bawah organisasi antvis di GitHub.