Los diagramas Mermaid de tus agentes,
dibujados, no mostrados como código
Pide un diagrama a Claude Code o a Codex y escribirá Mermaid: un bloque de texto que un terminal solo sabe mostrar tal cual. AgentsRoom lo dibuja allí donde lees lo que ha escrito un agente, y deja el código a un clic.
La vista de conversación, los archivos Markdown, los planes de la Revisión de planes, las notas, Project Memory y los tickets del backlog: cada bloque de código mermaid se convierte en su diagrama, con el tema claro u oscuro de la app, en macOS, Windows y Linux. Nada que instalar, ni skill ni servidor MCP.
```mermaid
flowchart LR
A[Login] --> B{Token valid?}
B -->|yes| C[Dashboard]
B -->|no| A
```El mismo bloque mermaid, tal como lo muestra un terminal y tal como lo dibuja AgentsRoom.
Pregunta a Claude Code cómo recorre una petición tu aplicación, o pide a Codex que esboce las tablas de una migración, y a menudo recibirás un bloque que empieza por mermaid: un diagrama de flujo, un diagrama de secuencia o un diagrama entidad-relación, escrito como texto. Un terminal solo puede mostrarlo tal cual: lees flechas hechas de guiones y dibujas las cajas en tu cabeza.
AgentsRoom lee el mismo Markdown y lo dibuja. El bloque se convierte en su diagrama cuando aparece en pantalla, un botón Ver código al pasar el ratón recupera la fuente, y Ver diagrama vuelve al dibujo. Si el agente cometió un error de sintaxis, el código sigue en pantalla con una línea que dice que el diagrama no se pudo dibujar: nunca pierdes lo que escribió.
El dibujo no depende de la CLI: lo hace el lector Markdown de la app, a partir del texto. Un diagrama en un README escrito por Codex, en un plan escrito por Claude Code o en un ticket escrito por cualquier otro agente se dibuja de la misma forma.
Qué cambia cuando lees a un agente
Una sola regla allí donde la app muestra Markdown: un bloque mermaid se muestra como su diagrama.
Allí donde lees a un agente
La vista de conversación, los archivos Markdown en la vista previa y en las pestañas de archivo, los planes de la Revisión de planes, las notas, las notas de Project Memory, los tickets del backlog y sus comentarios, y las respuestas de Pregunta aparte.
Dibujado mientras el agente escribe
Un agente escribe un diagrama línea a línea. AgentsRoom espera a que el texto se quede quieto un momento antes de dibujar, y mientras tanto mantiene en pantalla el último diagrama válido, así el bloque no parpadea entre código y dibujo.
La fuente a un clic
Pasa el ratón sobre un diagrama y pulsa Ver código para leer el texto Mermaid del que sale, y luego Ver diagrama para volver. La fuente nunca se sustituye, solo se muestra de otra forma.
Un diagrama roto sigue siendo legible
Cuando Mermaid no puede analizar el bloque, el código sigue en pantalla con una línea debajo: No se pudo dibujar este diagrama: se muestra su código en su lugar. Puedes devolvérselo al agente tal cual.
Todos los diagramas de Mermaid 11
Diagramas de flujo, de secuencia, de clases, de estados y entidad-relación, diagramas de Gantt, mapas mentales, grafos de git: todo lo que Mermaid 11 sabe dibujar, AgentsRoom lo dibuja.
Nada se dibuja fuera de la pantalla
Un diagrama solo se maqueta cuando se acerca a la pantalla, de uno en uno, y el resultado se guarda. Una conversación larga llena de diagramas no cuesta nada por los que todavía no has alcanzado al desplazarte.
Cómo usarlo
Nada que activar. Cuatro pasos de la pregunta al diagrama.
- 1
Pide un diagrama
A cualquier agente, con palabras sencillas: dibuja el flujo de inicio de sesión como diagrama de flujo Mermaid, o muestra esta llamada a la API como diagrama de secuencia. Decir Mermaid suele bastar para que el agente responda con un bloque mermaid.
- 2
Léelo en la vista de conversación
Cambia el panel del agente a la vista de conversación: el bloque aparece como diagrama dentro de la respuesta del agente. El terminal de debajo no cambia y sigue mostrando el texto.
- 3
O abre el archivo que escribió
Cuando el agente pone el diagrama en un archivo Markdown (un README, una nota de arquitectura, un plan), ábrelo desde el enlace al archivo en su respuesta, desde la pestaña Archivos del panel derecho o con Archivo > Abrir archivo (Cmd O en macOS, Ctrl O en Windows y Linux): la vista previa y la pestaña de archivo dibujan todos sus diagramas.
- 4
Revisa la fuente
Pasa el ratón sobre el diagrama y pulsa Ver código para leer o copiar el texto Mermaid, y luego Ver diagrama para volver al dibujo.
Lo que ya hacen un terminal, GitHub y las skills de Mermaid
Claude Code y Codex CLI se ejecutan en un terminal, y un terminal muestra caracteres, no dibujos: un bloque mermaid aparece como su fuente. No es un ajuste que le falte a la CLI, es lo que es un terminal.
Por eso la gente busca una skill, un plugin o un servidor MCP de Mermaid para Claude Code. Ayudan al agente a escribir un diagrama válido o a exportarlo a un archivo de imagen. Para leer el diagrama todavía tienes que pegar su código en algún sitio que lo dibuje: GitHub dibuja los bloques mermaid de los archivos Markdown y de los comentarios, mermaid.live dibuja todo lo que pegas, y la vista previa de Markdown de un editor lo hace con una extensión de Mermaid.
AgentsRoom no sustituye esas herramientas. Elimina el copiar y pegar cuando de todos modos estás leyendo al agente: el diagrama se dibuja en la conversación, el plan o el archivo que ya tienes abierto junto al agente.
Límites
- El terminal en bruto de un agente sigue mostrando la fuente: el dibujo se hace en la vista de conversación y en los lectores Markdown, no dentro de la cuadrícula del terminal.
- La vista de conversación existe para las CLI cuya transcripción AgentsRoom sabe leer: Claude Code, Codex, Grok Build, Mistral Vibe, oh-my-pi, Pi y Antigravity CLI. Con las demás, abre el archivo Markdown que escribió el agente.
- Los diagramas usan los temas dark y neutral de Mermaid, acordes con el tema claro u oscuro de la app. No toman tu color de acento.
- Un enlace dentro de un diagrama solo abre una dirección http o https, como un enlace Markdown. Un enlace a un archivo local no hace nada.
- Las etiquetas son texto plano: el HTML y los scripts de un diagrama se eliminan, y una línea de configuración escrita en el diagrama no puede cambiarlo.
- No hay botón de exportación: para guardar un diagrama como archivo PNG o SVG, pide al agente que lo exporte con la herramienta de línea de comandos de Mermaid.
Preguntas frecuentes
¿Puede Claude Code mostrar diagramas Mermaid?
No en el terminal. Claude Code escribe un diagrama Mermaid como un bloque de código, y un terminal solo puede mostrarlo como texto. Ejecuta el mismo agente en AgentsRoom y cambia su panel a la vista de conversación: el bloque se dibuja como diagrama dentro de la respuesta, y un botón Ver código recupera la fuente.
¿Cómo previsualizo un diagrama Mermaid que un agente escribió en un archivo Markdown?
Abre el archivo en AgentsRoom: haz clic en el enlace al archivo en la respuesta del agente, elígelo en la pestaña Archivos del panel derecho o usa Archivo > Abrir archivo (Cmd O en macOS, Ctrl O en Windows y Linux). La vista previa de Markdown, y la pestaña de archivo si lo abres en una pestaña, dibujan todos los bloques mermaid del archivo.
¿Funciona con Codex y otras CLI de agentes?
Sí. El diagrama lo dibuja el lector Markdown de la app a partir del texto, sea cual sea la CLI que lo escribió, así que un diagrama de Codex, de Claude Code o de cualquier otro agente se dibuja igual en archivos, planes, notas y tickets. La vista de conversación, donde las respuestas se dibujan a medida que llegan, cubre Claude Code, Codex, Grok Build, Mistral Vibe, oh-my-pi, Pi y Antigravity CLI.
¿Necesito una skill o un servidor MCP de Mermaid?
No para leer los diagramas. Una skill o un servidor MCP puede ayudar a un agente a escribir Mermaid válido o a exportarlo como imagen. AgentsRoom solo dibuja lo que ya está escrito, así que ambos se complementan: la skill mejora el diagrama, AgentsRoom lo muestra.
¿Qué tipos de diagramas se dibujan, y qué pasa si la sintaxis es incorrecta?
Todo lo que dibuja Mermaid 11: diagramas de flujo, de secuencia, de clases, de estados y entidad-relación, diagramas de Gantt, mapas mentales, grafos de git y el resto de su catálogo. Un bloque que Mermaid no puede analizar se queda como código, con una línea debajo que dice que el diagrama no se pudo dibujar. Pide al agente que lo corrija: su bloque corregido se dibuja.
También te puede interesar
Vista de conversación
Una vista de chat para Claude Code, Codex y otras cinco CLI de agentes: la sesión leída de la propia transcripción de la CLI, llamadas a herramientas plegadas, respuestas en directo, en el ordenador y en el móvil.
Revisión de planes
Tu agente propone un plan: léelo como un documento, comenta, reemplaza o elimina cualquier pasaje y luego apruébalo o devuélvelo en un solo mensaje. Se conservan todas las versiones.
Project Memory
Dale a tus agentes de codificación de IA una memoria a largo plazo. Las decisiones, la arquitectura y las trampas persisten a través de las sesiones y se comparten con todos en el proyecto. Gratis, ilimitado.
Pregunta aparte
Pregúntale algo a un agente de código IA ocupado sin interrumpirlo. Una copia en solo lectura de su conversación responde en una burbuja con pestañas mientras su terminal sigue trabajando. Claude Code, Codex, Grok, GitHub Copilot CLI, OpenCode, Mistral Vibe, Antigravity CLI y Kimi Code, desde el ordenador o el móvil.
Lee los diagramas de tus agentes como diagramas
Descarga AgentsRoom para macOS, Windows o Linux, pide un diagrama Mermaid a un agente y cambia su panel a la vista de conversación.
App complementaria: supervisa tus agentes en movimiento
Usa Claude, Codex, Antigravity CLI u otro proveedor de IA.
Envía bugs y peticiones directamente a tu backlog público.