Les diagrammes Mermaid de vos agents,
dessinés, pas affichés en code
Demandez un diagramme à Claude Code ou à Codex : il écrit du Mermaid, un bloc de texte qu'un terminal ne sait qu'afficher tel quel. AgentsRoom le dessine partout où vous lisez ce qu'un agent a écrit, et garde le code à un clic.
La vue conversation, les fichiers Markdown, les plans de la relecture de plan, les notes, Project Memory et les tickets du backlog : chaque bloc de code mermaid devient son diagramme, dans le thème clair ou sombre de l'app, sur macOS, Windows et Linux. Rien à installer, ni skill, ni serveur MCP.
```mermaid
flowchart LR
A[Login] --> B{Token valid?}
B -->|yes| C[Dashboard]
B -->|no| A
```Le même bloc mermaid, tel qu'un terminal l'affiche et tel qu'AgentsRoom le dessine.
Demandez à Claude Code comment une requête traverse votre application, ou à Codex d'esquisser les tables d'une migration, et vous recevez souvent un bloc qui commence par mermaid : un organigramme, un diagramme de séquence ou un diagramme entité-relation, écrit en texte. Un terminal ne peut que l'afficher tel quel : vous lisez des flèches faites de tirets et vous dessinez les boîtes dans votre tête.
AgentsRoom lit le même Markdown et le dessine. Le bloc devient son diagramme quand il arrive à l'écran, un bouton Voir le code au survol ramène la source, et Voir le diagramme revient au dessin. Si l'agent a fait une erreur de syntaxe, le code reste affiché avec une ligne qui dit que le diagramme n'a pas pu être dessiné : vous ne perdez jamais ce qu'il a écrit.
Le dessin ne dépend pas du CLI : c'est le lecteur Markdown de l'app qui le fait, à partir du texte. Un diagramme dans un README écrit par Codex, dans un plan écrit par Claude Code ou dans un ticket écrit par n'importe quel autre agent est dessiné de la même façon.
Ce qui change quand vous lisez un agent
Une seule règle partout où l'app affiche du Markdown : un bloc mermaid s'affiche en diagramme.
Partout où vous lisez un agent
La vue conversation, les fichiers Markdown dans l'aperçu et dans les onglets de fichier, les plans de la relecture de plan, les notes, les notes de Project Memory, les tickets du backlog et leurs commentaires, et les réponses des questions en aparté.
Dessiné pendant que l'agent écrit
Un agent écrit un diagramme ligne par ligne. AgentsRoom attend que le texte se stabilise un instant avant de dessiner, et garde le dernier diagramme valide à l'écran entre-temps : le bloc ne clignote pas entre code et dessin.
La source à un clic
Survolez un diagramme et cliquez sur Voir le code pour lire le texte Mermaid dont il vient, puis sur Voir le diagramme pour revenir. La source n'est jamais remplacée, seulement montrée autrement.
Un diagramme cassé reste lisible
Quand Mermaid ne sait pas lire le bloc, le code reste affiché avec une ligne en dessous : Ce diagramme n'a pas pu être dessiné : son code est affiché à la place. Vous pouvez le renvoyer tel quel à l'agent.
Tous les diagrammes de Mermaid 11
Organigrammes, diagrammes de séquence, de classes, d'états et entité-relation, diagrammes de Gantt, cartes mentales, graphes git : tout ce que Mermaid 11 sait dessiner, AgentsRoom le dessine.
Rien n'est dessiné hors de l'écran
Un diagramme n'est mis en page qu'à l'approche de l'écran, un à la fois, et le résultat est gardé. Une longue conversation pleine de diagrammes ne coûte rien pour ceux jusqu'où vous n'avez pas encore défilé.
Comment s'en servir
Rien à activer. Quatre étapes de la question au diagramme.
- 1
Demandez un diagramme
À n'importe quel agent, en mots simples : dessine le parcours de connexion en organigramme Mermaid, ou montre cet appel d'API en diagramme de séquence. Dire Mermaid suffit en général pour que l'agent réponde avec un bloc mermaid.
- 2
Lisez-le dans la vue conversation
Passez le panneau de l'agent en vue conversation : le bloc apparaît en diagramme dans la réponse de l'agent. Le terminal en dessous ne change pas et affiche toujours le texte.
- 3
Ou ouvrez le fichier qu'il a écrit
Quand l'agent met le diagramme dans un fichier Markdown (un README, une note d'architecture, un plan), ouvrez-le depuis le lien du fichier dans sa réponse, depuis l'onglet Fichiers du panneau de droite ou avec Fichier > Ouvrir un fichier (Cmd O sur macOS, Ctrl O sur Windows et Linux) : l'aperçu et l'onglet de fichier dessinent tous ses diagrammes.
- 4
Vérifiez la source
Survolez le diagramme et cliquez sur Voir le code pour lire ou copier le texte Mermaid, puis sur Voir le diagramme pour revenir au dessin.
Ce que font déjà un terminal, GitHub et les skills Mermaid
Claude Code et Codex CLI tournent dans un terminal, et un terminal affiche des caractères, pas des dessins : un bloc mermaid s'y montre sous forme de source. Ce n'est pas un réglage qui manque au CLI, c'est la nature d'un terminal.
C'est pour ça qu'on cherche un skill, un plugin ou un serveur MCP Mermaid pour Claude Code. Ils aident l'agent à écrire un diagramme valide ou à l'exporter en image. Pour lire le diagramme, il faut encore coller son code dans un outil qui le dessine : GitHub dessine les blocs mermaid des fichiers Markdown et des commentaires, mermaid.live dessine tout ce qu'on y colle, et l'aperçu Markdown d'un éditeur le fait avec une extension Mermaid.
AgentsRoom ne remplace pas ces outils. Il supprime le copier-coller quand vous lisez l'agent de toute façon : le diagramme est dessiné dans la conversation, le plan ou le fichier que vous avez déjà ouvert à côté de l'agent.
Limites
- Le terminal brut d'un agent affiche toujours la source : le dessin se fait dans la vue conversation et dans les lecteurs Markdown, pas dans la grille du terminal.
- La vue conversation existe pour les CLI dont AgentsRoom sait lire la transcription : Claude Code, Codex, Grok Build, Mistral Vibe, oh-my-pi, Pi et Antigravity CLI. Avec les autres, ouvrez le fichier Markdown que l'agent a écrit.
- Les diagrammes utilisent les thèmes dark et neutral de Mermaid, accordés au thème clair ou sombre de l'app. Ils ne prennent pas votre couleur d'accent.
- Un lien dans un diagramme n'ouvre qu'une adresse http ou https, comme un lien Markdown. Un lien vers un fichier local ne fait rien.
- Les libellés sont du texte simple : le HTML et les scripts d'un diagramme sont retirés, et une ligne de configuration écrite dans le diagramme ne peut pas changer ça.
- Il n'y a pas de bouton d'export : pour garder un diagramme en PNG ou en SVG, demandez à l'agent de l'exporter avec l'outil en ligne de commande de Mermaid.
Questions fréquentes
Claude Code sait-il afficher les diagrammes Mermaid ?
Pas dans le terminal. Claude Code écrit un diagramme Mermaid dans un bloc de code, et un terminal ne peut que l'afficher en texte. Lancez le même agent dans AgentsRoom et passez son panneau en vue conversation : le bloc est dessiné en diagramme dans la réponse, et un bouton Voir le code ramène la source.
Comment prévisualiser un diagramme Mermaid qu'un agent a écrit dans un fichier Markdown ?
Ouvrez le fichier dans AgentsRoom : cliquez sur le lien du fichier dans la réponse de l'agent, choisissez-le dans l'onglet Fichiers du panneau de droite, ou passez par Fichier > Ouvrir un fichier (Cmd O sur macOS, Ctrl O sur Windows et Linux). L'aperçu Markdown, et l'onglet de fichier si vous l'ouvrez dans un onglet, dessinent tous les blocs mermaid du fichier.
Est-ce que ça marche avec Codex et les autres CLI d'agents ?
Oui. Le diagramme est dessiné par le lecteur Markdown de l'app à partir du texte, quel que soit le CLI qui l'a écrit : un diagramme de Codex, de Claude Code ou de n'importe quel autre agent est dessiné de la même façon dans les fichiers, les plans, les notes et les tickets. La vue conversation, où les réponses sont dessinées à mesure qu'elles arrivent, couvre Claude Code, Codex, Grok Build, Mistral Vibe, oh-my-pi, Pi et Antigravity CLI.
Faut-il un skill ou un serveur MCP Mermaid ?
Pas pour lire les diagrammes. Un skill ou un serveur MCP peut aider un agent à écrire du Mermaid valide ou à l'exporter en image. AgentsRoom ne fait que dessiner ce qui est déjà écrit : les deux vont ensemble, le skill améliore le diagramme, AgentsRoom le montre.
Quels types de diagrammes sont dessinés, et si la syntaxe est fausse ?
Tout ce que dessine Mermaid 11 : organigrammes, diagrammes de séquence, de classes, d'états et entité-relation, diagrammes de Gantt, cartes mentales, graphes git et le reste de son catalogue. Un bloc que Mermaid ne sait pas lire reste en code, avec une ligne en dessous qui dit que le diagramme n'a pas pu être dessiné. Demandez à l'agent de le corriger : son bloc corrigé est dessiné.
Vous pourriez aussi aimer
Vue conversation
Une vue chat pour Claude Code, Codex et cinq autres CLI d'agents : la session lue dans le transcript du CLI, appels d'outils repliés, réponses en direct, sur ordinateur et téléphone.
Relecture de plan
Votre agent propose un plan : lisez-le comme un document, commentez, remplacez ou supprimez un passage, puis approuvez-le ou renvoyez-le en un seul message.
Project Memory
Donnez une mémoire longue à vos agents de code IA. Décisions, architecture et pièges survivent aux sessions et sont partagés avec toute l'équipe. Gratuit, sans limite.
Question en aparté
Posez une question à un agent IA occupé sans l'interrompre. Une copie en lecture seule de sa conversation répond dans une bulle à onglets pendant que son terminal continue. Claude Code, Codex, Grok, GitHub Copilot CLI, OpenCode, Mistral Vibe, Antigravity CLI et Kimi Code, depuis l'ordinateur ou le téléphone.
Lisez les diagrammes de vos agents en diagrammes
Téléchargez AgentsRoom pour macOS, Windows ou Linux, demandez un diagramme Mermaid à un agent et passez son panneau en vue conversation.
App companion : suivez vos agents en déplacement
Utilisez Claude, Codex, Antigravity CLI ou un autre fournisseur IA.
Remontez bugs et demandes directement dans votre backlog public.