Diagram Mermaid dari agen Anda,
digambar, bukan dicetak sebagai kode
Minta diagram ke Claude Code atau Codex dan ia menulis Mermaid: blok teks yang hanya bisa dicetak oleh terminal. AgentsRoom menggambarnya di mana pun Anda membaca tulisan agen, dan menyimpan kodenya sejauh satu klik.
Tampilan percakapan, file Markdown, rencana di Tinjauan rencana, catatan, Project Memory, dan tiket backlog: setiap blok kode mermaid menjadi diagramnya, dalam tema terang atau gelap aplikasi, di macOS, Windows, dan Linux. Tidak ada yang perlu dipasang, tanpa skill, tanpa server MCP.
```mermaid
flowchart LR
A[Login] --> B{Token valid?}
B -->|yes| C[Dashboard]
B -->|no| A
```Blok mermaid yang sama, seperti yang dicetak terminal dan seperti yang digambar AgentsRoom.
Tanyakan ke Claude Code bagaimana sebuah request melewati aplikasi Anda, atau minta Codex membuat sketsa tabel sebuah migrasi, dan Anda sering mendapat blok kode yang diawali mermaid: diagram alir (flowchart), diagram sekuens, atau diagram entitas-relasi, yang ditulis sebagai teks. Terminal hanya bisa mencetaknya, jadi Anda membaca panah yang terbuat dari tanda hubung dan menggambar kotaknya di kepala.
AgentsRoom membaca Markdown yang sama lalu menggambarnya. Blok berubah menjadi diagram saat digulir masuk ke layar, tombol Tampilkan kode yang muncul saat kursor diarahkan mengembalikan sumbernya, dan Tampilkan diagram kembali ke gambar. Jika agen membuat kesalahan sintaks, kodenya tetap di layar dengan satu baris yang menyatakan diagram tidak dapat digambar, jadi Anda tidak pernah kehilangan apa yang ditulisnya.
Penggambarannya tidak bergantung pada CLI: pembaca Markdown aplikasi yang melakukannya, dari teks. Diagram di README yang ditulis Codex, di rencana yang ditulis Claude Code, atau di tiket yang ditulis agen lain mana pun digambar dengan cara yang sama.
Apa yang berubah saat Anda membaca agen
Satu aturan di mana pun aplikasi menampilkan Markdown: blok mermaid ditampilkan sebagai diagramnya.
Di mana pun Anda membaca agen
Tampilan percakapan, file Markdown di pratinjau file dan di tab file, rencana di Tinjauan rencana, catatan, catatan Project Memory, tiket backlog beserta komentarnya, dan jawaban Tanya tanpa mengganggu.
Digambar selagi agen menulis
Agen menulis diagram baris demi baris. AgentsRoom menunggu teks diam sejenak sebelum menggambar, dan sementara itu mempertahankan diagram valid terakhir di layar, sehingga blok tidak berkedip bolak-balik antara kode dan gambar.
Sumbernya sejauh satu klik
Arahkan kursor ke diagram dan tekan Tampilkan kode untuk membaca teks Mermaid asalnya, lalu Tampilkan diagram untuk kembali. Sumbernya tidak pernah diganti, hanya ditampilkan dengan cara lain.
Diagram yang rusak tetap terbaca
Saat Mermaid tidak dapat mengurai sintaks blok, kodenya tetap di layar dengan satu baris di bawahnya: Diagram ini tidak dapat digambar: kodenya ditampilkan sebagai gantinya. Anda bisa mengembalikannya apa adanya ke agen.
Setiap diagram Mermaid 11
Diagram alir, diagram sekuens, kelas, state, dan entitas-relasi, bagan Gantt, peta pikiran, grafik git: apa pun yang bisa digambar Mermaid 11, AgentsRoom menggambarnya.
Tidak ada yang digambar di luar layar
Diagram baru ditata saat mendekati layar, satu per satu, dan hasilnya disimpan. Percakapan panjang yang penuh diagram tidak membebani apa pun untuk diagram yang belum Anda gulir.
Cara menggunakannya
Tidak ada yang perlu diaktifkan. Empat langkah dari pertanyaan ke diagram.
- 1
Minta diagram
Ke agen mana pun, dengan kata-kata sederhana: gambar alur login sebagai diagram alir Mermaid, atau tunjukkan panggilan API ini sebagai diagram sekuens. Menyebut Mermaid biasanya cukup agar agen menjawab dengan blok mermaid.
- 2
Baca di Tampilan percakapan
Alihkan panel agen ke Tampilan percakapan: blok muncul sebagai diagram di dalam jawaban agen. Terminal di baliknya tidak berubah dan tetap menampilkan teks.
- 3
Atau buka file yang ditulisnya
Saat agen menaruh diagram di file Markdown (README, catatan arsitektur, rencana), buka dari tautan file di jawabannya, dari tab File di panel kanan, atau dengan File > Buka File (Cmd O di macOS, Ctrl O di Windows dan Linux): pratinjau dan tab file menggambar setiap diagram di dalamnya.
- 4
Periksa sumbernya
Arahkan kursor ke diagram dan tekan Tampilkan kode untuk membaca atau menyalin teks Mermaid, lalu Tampilkan diagram untuk kembali ke gambar.
Apa yang sudah dilakukan terminal, GitHub, dan skill Mermaid
Claude Code dan Codex CLI berjalan di terminal, dan terminal mencetak karakter, bukan gambar: blok mermaid tampil sebagai sumbernya. Itu bukan pengaturan yang kurang di CLI, memang begitulah terminal.
Karena itu orang mencari skill, plugin, atau server MCP Mermaid untuk Claude Code. Semua itu membantu agen menulis diagram yang valid atau mengekspornya ke file gambar. Untuk membaca diagramnya, Anda tetap harus menempelkan kodenya di tempat yang bisa menggambarnya: GitHub menggambar blok mermaid di file Markdown dan komentar, mermaid.live menggambar apa pun yang Anda tempel, dan pratinjau Markdown sebuah editor melakukannya dengan ekstensi Mermaid.
AgentsRoom tidak menggantikan alat-alat itu. Ia menghapus langkah salin-tempel saat Anda memang sedang membaca agen: diagram digambar di percakapan, rencana, atau file yang sudah Anda buka di samping agen.
Batasan
- Terminal mentah agen tetap menampilkan sumbernya: penggambaran terjadi di Tampilan percakapan dan di pembaca Markdown, bukan di dalam grid terminal.
- Tampilan percakapan tersedia untuk CLI yang transkripnya bisa dibaca AgentsRoom: Claude Code, Codex, Grok Build, Mistral Vibe, oh-my-pi, Pi, dan Antigravity CLI. Untuk yang lain, buka file Markdown yang ditulis agen.
- Diagram memakai tema dark dan neutral Mermaid, disesuaikan dengan tema terang atau gelap aplikasi. Diagram tidak mengikuti warna aksen Anda.
- Tautan di dalam diagram hanya membuka alamat http atau https, seperti tautan Markdown. Tautan ke file lokal tidak melakukan apa-apa.
- Label berupa teks biasa: HTML dan skrip di dalam diagram dihapus, dan baris konfigurasi yang ditulis di diagram tidak dapat mengubahnya.
- Tidak ada tombol ekspor: untuk menyimpan diagram sebagai file PNG atau SVG, minta agen mengekspornya dengan alat baris perintah Mermaid.
Pertanyaan yang sering diajukan
Bisakah Claude Code menampilkan diagram Mermaid?
Tidak di terminal. Claude Code menulis diagram Mermaid sebagai blok kode, dan terminal hanya bisa mencetaknya sebagai teks. Jalankan agen yang sama di AgentsRoom dan alihkan panelnya ke Tampilan percakapan: blok digambar sebagai diagram di dalam jawaban, dan tombol Tampilkan kode mengembalikan sumbernya.
Bagaimana cara melihat pratinjau diagram Mermaid yang ditulis agen di file Markdown?
Buka file di AgentsRoom: klik tautan file di jawaban agen, pilih di tab File pada panel kanan, atau gunakan File > Buka File (Cmd O di macOS, Ctrl O di Windows dan Linux). Pratinjau Markdown, dan tab file jika Anda membukanya sebagai tab, menggambar setiap blok mermaid di file itu.
Apakah ini bekerja dengan Codex dan CLI agen lainnya?
Ya. Diagram digambar oleh pembaca Markdown aplikasi dari teks, apa pun CLI yang menulisnya, jadi diagram dari Codex, Claude Code, atau agen lain mana pun digambar dengan cara yang sama di file, rencana, catatan, dan tiket. Tampilan percakapan, tempat jawaban digambar begitu tiba, mendukung Claude Code, Codex, Grok Build, Mistral Vibe, oh-my-pi, Pi, dan Antigravity CLI.
Apakah saya perlu skill Mermaid atau server MCP?
Tidak untuk membaca diagram. Skill atau server MCP dapat membantu agen menulis Mermaid yang valid atau mengekspornya ke gambar. AgentsRoom hanya menggambar apa yang sudah ditulis, jadi keduanya saling melengkapi: skill memperbaiki diagram, AgentsRoom menampilkannya.
Jenis diagram apa saja yang digambar, dan bagaimana jika sintaksnya salah?
Semua yang digambar Mermaid 11: diagram alir, diagram sekuens, kelas, state, dan entitas-relasi, bagan Gantt, peta pikiran, grafik git, dan sisa katalognya. Blok yang tidak dapat diurai Mermaid tetap sebagai kode, dengan satu baris di bawahnya yang menyatakan diagram tidak dapat digambar. Minta agen memperbaikinya: blok yang sudah diperbaiki akan digambar.
Anda mungkin juga suka
Tampilan percakapan
Tampilan chat untuk Claude Code, Codex, dan lima CLI agen lainnya: sesi dibaca dari transkrip milik CLI itu sendiri, panggilan alat dilipat, jawaban langsung, di desktop dan ponsel.
Tinjauan rencana
Agen Anda mengusulkan rencana: baca seperti dokumen, komentari, ganti, atau hapus bagian mana pun, lalu setujui atau kirim balik dalam satu pesan. Setiap versi disimpan.
Project Memory
Berikan agen pemrograman AI Anda memori jangka panjang. Keputusan, arsitektur, dan jebakan bertahan di seluruh sesi dan dibagikan kepada semua orang di proyek. Gratis, tanpa batas.
Tanya tanpa mengganggu
Tanyai agen AI coding yang sedang sibuk tanpa mengganggunya. Salinan baca-saja dari percakapannya menjawab di gelembung bertab sementara terminalnya terus bekerja. Claude Code, Codex, Grok, GitHub Copilot CLI, OpenCode, Mistral Vibe, Antigravity CLI dan Kimi Code, dari desktop atau ponsel Anda.
Baca diagram agen Anda sebagai diagram
Unduh AgentsRoom untuk macOS, Windows, atau Linux, minta diagram Mermaid ke agen, lalu alihkan panelnya ke Tampilan percakapan.
Aplikasi pendamping: pantau agen Anda saat bepergian
Gunakan Claude, Codex, Antigravity CLI, atau penyedia AI lainnya.
Kirim bug dan permintaan langsung ke backlog publik Anda.