I diagrammi Mermaid dei tuoi agenti,
disegnati, non stampati come codice
Chiedi un diagramma a Claude Code o a Codex e scriverà Mermaid: un blocco di testo che un terminale può solo stampare così com'è. AgentsRoom lo disegna ovunque tu legga ciò che un agente ha scritto, e tiene il codice a un clic.
La vista conversazione, i file Markdown, i piani della Revisione dei piani, le note, Project Memory e i ticket del backlog: ogni blocco di codice mermaid diventa il suo diagramma, nel tema chiaro o scuro dell'app, su macOS, Windows e Linux. Niente da installare, nessuna skill, nessun server MCP.
```mermaid
flowchart LR
A[Login] --> B{Token valid?}
B -->|yes| C[Dashboard]
B -->|no| A
```Lo stesso blocco mermaid, come lo stampa un terminale e come lo disegna AgentsRoom.
Chiedi a Claude Code come una richiesta attraversa la tua applicazione, o a Codex di abbozzare le tabelle di una migrazione, e spesso ricevi un blocco che inizia con mermaid: un diagramma di flusso, un diagramma di sequenza o un diagramma entità-relazione, scritto come testo. Un terminale può solo stamparlo così com'è: leggi frecce fatte di trattini e disegni i riquadri nella tua testa.
AgentsRoom legge lo stesso Markdown e lo disegna. Il blocco diventa il suo diagramma quando entra nello schermo, un pulsante Mostra codice al passaggio del mouse riporta la sorgente, e Mostra diagramma torna al disegno. Se l'agente ha fatto un errore di sintassi, il codice resta sullo schermo con una riga che dice che il diagramma non è stato disegnato: non perdi mai ciò che ha scritto.
Il disegno non dipende dalla CLI: lo fa il lettore Markdown dell'app, a partire dal testo. Un diagramma in un README scritto da Codex, in un piano scritto da Claude Code o in un ticket scritto da qualsiasi altro agente viene disegnato allo stesso modo.
Cosa cambia quando leggi un agente
Una sola regola ovunque l'app mostri Markdown: un blocco mermaid viene mostrato come il suo diagramma.
Ovunque tu legga un agente
La vista conversazione, i file Markdown nell'anteprima e nelle schede dei file, i piani della Revisione dei piani, le note, le note di Project Memory, i ticket del backlog e i loro commenti, e le risposte di Domanda a parte.
Disegnato mentre l'agente scrive
Un agente scrive un diagramma riga per riga. AgentsRoom aspetta che il testo resti fermo per un momento prima di disegnare, e nel frattempo tiene sullo schermo l'ultimo diagramma valido, così il blocco non sfarfalla tra codice e disegno.
La sorgente a un clic
Passa il mouse su un diagramma e premi Mostra codice per leggere il testo Mermaid da cui proviene, poi Mostra diagramma per tornare indietro. La sorgente non viene mai sostituita, solo mostrata in modo diverso.
Un diagramma rotto resta leggibile
Quando Mermaid non riesce ad analizzare il blocco, il codice resta sullo schermo con una riga sotto: Impossibile disegnare questo diagramma: al suo posto viene mostrato il codice. Puoi restituirlo all'agente così com'è.
Tutti i diagrammi di Mermaid 11
Diagrammi di flusso, di sequenza, delle classi, degli stati ed entità-relazione, diagrammi di Gantt, mappe mentali, grafi git: tutto ciò che Mermaid 11 sa disegnare, AgentsRoom lo disegna.
Niente viene disegnato fuori dallo schermo
Un diagramma viene impaginato solo quando si avvicina allo schermo, uno alla volta, e il risultato viene conservato. Una lunga conversazione piena di diagrammi non costa nulla per quelli che non hai ancora raggiunto scorrendo.
Come usarlo
Niente da attivare. Quattro passi dalla domanda al diagramma.
- 1
Chiedi un diagramma
A qualsiasi agente, con parole semplici: disegna il flusso di login come diagramma di flusso Mermaid, oppure mostra questa chiamata API come diagramma di sequenza. Dire Mermaid di solito basta perché l'agente risponda con un blocco mermaid.
- 2
Leggilo nella vista conversazione
Passa il pannello dell'agente alla vista conversazione: il blocco appare come diagramma dentro la risposta dell'agente. Il terminale sottostante non cambia e mostra ancora il testo.
- 3
Oppure apri il file che ha scritto
Quando l'agente mette il diagramma in un file Markdown (un README, una nota di architettura, un piano), aprilo dal link al file nella sua risposta, dalla scheda File del pannello di destra o con File > Apri file (Cmd O su macOS, Ctrl O su Windows e Linux): l'anteprima e la scheda del file disegnano tutti i suoi diagrammi.
- 4
Controlla la sorgente
Passa il mouse sul diagramma e premi Mostra codice per leggere o copiare il testo Mermaid, poi Mostra diagramma per tornare al disegno.
Cosa fanno già un terminale, GitHub e le skill Mermaid
Claude Code e Codex CLI girano in un terminale, e un terminale stampa caratteri, non disegni: un blocco mermaid compare come la sua sorgente. Non è un'impostazione che manca alla CLI, è ciò che un terminale è.
Per questo si cerca una skill, un plugin o un server MCP Mermaid per Claude Code. Aiutano l'agente a scrivere un diagramma valido o a esportarlo in un file immagine. Per leggere il diagramma devi comunque incollare il suo codice da qualche parte che lo disegni: GitHub disegna i blocchi mermaid nei file Markdown e nei commenti, mermaid.live disegna tutto ciò che incolli, e l'anteprima Markdown di un editor lo fa con un'estensione Mermaid.
AgentsRoom non sostituisce questi strumenti. Elimina il copia e incolla quando stai già leggendo l'agente: il diagramma viene disegnato nella conversazione, nel piano o nel file che hai già aperto accanto all'agente.
Limiti
- Il terminale grezzo di un agente mostra ancora la sorgente: il disegno avviene nella vista conversazione e nei lettori Markdown, non dentro la griglia del terminale.
- La vista conversazione esiste per le CLI di cui AgentsRoom sa leggere la trascrizione: Claude Code, Codex, Grok Build, Mistral Vibe, oh-my-pi, Pi e Antigravity CLI. Con le altre, apri il file Markdown che l'agente ha scritto.
- I diagrammi usano i temi dark e neutral di Mermaid, abbinati al tema chiaro o scuro dell'app. Non prendono il tuo colore d'accento.
- Un link dentro un diagramma apre solo un indirizzo http o https, come un link Markdown. Un link a un file locale non fa nulla.
- Le etichette sono testo semplice: HTML e script dentro un diagramma vengono rimossi, e una riga di configurazione scritta nel diagramma non può cambiarlo.
- Non c'è un pulsante di esportazione: per conservare un diagramma come file PNG o SVG, chiedi all'agente di esportarlo con lo strumento a riga di comando di Mermaid.
Domande frequenti
Claude Code può mostrare i diagrammi Mermaid?
Non nel terminale. Claude Code scrive un diagramma Mermaid come blocco di codice, e un terminale può solo stamparlo come testo. Avvia lo stesso agente in AgentsRoom e passa il suo pannello alla vista conversazione: il blocco viene disegnato come diagramma dentro la risposta, e un pulsante Mostra codice riporta la sorgente.
Come vedo l'anteprima di un diagramma Mermaid che un agente ha scritto in un file Markdown?
Apri il file in AgentsRoom: clicca sul link al file nella risposta dell'agente, sceglilo nella scheda File del pannello di destra oppure usa File > Apri file (Cmd O su macOS, Ctrl O su Windows e Linux). L'anteprima Markdown, e la scheda del file se lo apri in una scheda, disegnano tutti i blocchi mermaid del file.
Funziona con Codex e con le altre CLI di agenti?
Sì. Il diagramma viene disegnato dal lettore Markdown dell'app a partire dal testo, qualunque sia la CLI che l'ha scritto, quindi un diagramma di Codex, di Claude Code o di qualsiasi altro agente viene disegnato allo stesso modo in file, piani, note e ticket. La vista conversazione, dove le risposte vengono disegnate man mano che arrivano, copre Claude Code, Codex, Grok Build, Mistral Vibe, oh-my-pi, Pi e Antigravity CLI.
Serve una skill o un server MCP Mermaid?
Non per leggere i diagrammi. Una skill o un server MCP può aiutare un agente a scrivere Mermaid valido o a esportarlo come immagine. AgentsRoom disegna solo ciò che è già scritto, quindi le due cose funzionano insieme: la skill migliora il diagramma, AgentsRoom lo mostra.
Quali tipi di diagrammi vengono disegnati, e se la sintassi è sbagliata?
Tutto ciò che disegna Mermaid 11: diagrammi di flusso, di sequenza, delle classi, degli stati ed entità-relazione, diagrammi di Gantt, mappe mentali, grafi git e il resto del suo catalogo. Un blocco che Mermaid non riesce ad analizzare resta come codice, con una riga sotto che dice che il diagramma non è stato disegnato. Chiedi all'agente di correggerlo: il suo blocco corretto viene disegnato.
Potrebbe interessarti anche
Vista conversazione
Una vista chat per Claude Code, Codex e altre cinque CLI di agenti: la sessione letta dalla trascrizione della CLI stessa, chiamate agli strumenti compresse, risposte in diretta, su computer e telefono.
Revisione dei piani
Il tuo agente propone un piano: leggilo come un documento, commenta, sostituisci o elimina qualsiasi passaggio, poi approvalo o rimandalo indietro in un solo messaggio. Ogni versione resta salvata.
Project Memory
Dai ai tuoi agenti di codifica AI una memoria a lungo termine. Decisioni, architettura e insidie persistono attraverso le sessioni e sono condivise con tutti nel progetto. Gratuito, illimitato.
Domanda a parte
Fai una domanda a un agente AI di codice impegnato senza interromperlo. Una copia in sola lettura della sua conversazione risponde in una bolla a schede mentre il suo terminale continua a lavorare. Claude Code, Codex, Grok, GitHub Copilot CLI, OpenCode, Mistral Vibe, Antigravity CLI e Kimi Code, dal computer o dal telefono.
Leggi i diagrammi dei tuoi agenti come diagrammi
Scarica AgentsRoom per macOS, Windows o Linux, chiedi un diagramma Mermaid a un agente e passa il suo pannello alla vista conversazione.
App companion: monitora i tuoi agenti in movimento
Usa Claude, Codex, Antigravity CLI o un altro provider IA.
Invia bug e richieste direttamente nel tuo backlog pubblico.