Diagramy Mermaid od Twoich agentów,
narysowane, a nie wyświetlone jako kod
Poproś Claude Code albo Codex o diagram, a napisze go w Mermaid: jako blok tekstu, który terminal może tylko wyświetlić. AgentsRoom rysuje go wszędzie tam, gdzie czytasz to, co napisał agent, a kod zostaje o jedno kliknięcie dalej.
Widok rozmowy, pliki Markdown, plany w przeglądzie planu, notatki, Project Memory i zgłoszenia z backlogu: każdy blok kodu mermaid staje się swoim diagramem, w jasnym lub ciemnym motywie aplikacji, na macOS, Windows i Linux. Nic do instalowania, żadnej umiejętności, żadnego serwera MCP.
```mermaid
flowchart LR
A[Login] --> B{Token valid?}
B -->|yes| C[Dashboard]
B -->|no| A
```Ten sam blok mermaid: tak, jak wyświetla go terminal, i tak, jak rysuje go AgentsRoom.
Zapytaj Claude Code, jak żądanie przechodzi przez Twoją aplikację, albo poproś Codex o szkic tabel migracji, a często dostaniesz blok kodu zaczynający się od mermaid: diagram przepływu, diagram sekwencji albo diagram encji i relacji, zapisany jako tekst. Terminal może go tylko wyświetlić tak, jak jest, więc czytasz strzałki z myślników i rysujesz prostokąty w głowie.
AgentsRoom czyta ten sam Markdown i go rysuje. Blok zmienia się w diagram, gdy pojawia się na ekranie, przycisk Pokaż kod po najechaniu kursorem przywraca źródło, a Pokaż diagram wraca do rysunku. Jeśli agent popełnił błąd składni, kod zostaje na ekranie z jedną linijką informującą, że diagramu nie udało się narysować, więc nigdy nie tracisz tego, co napisał.
Rysowanie nie zależy od CLI: robi to czytnik Markdown w aplikacji, na podstawie tekstu. Diagram w README napisanym przez Codex, w planie napisanym przez Claude Code albo w zgłoszeniu napisanym przez dowolnego innego agenta jest rysowany tak samo.
Co się zmienia, gdy czytasz agenta
Jedna zasada wszędzie tam, gdzie aplikacja pokazuje Markdown: blok mermaid jest wyświetlany jako diagram.
Wszędzie, gdzie czytasz agenta
Widok rozmowy, pliki Markdown w podglądzie pliku i w kartach plików, plany w przeglądzie planu, notatki, notatki Project Memory, zgłoszenia z backlogu i ich komentarze oraz odpowiedzi z Zapytaj bez przerywania.
Rysowane, gdy agent pisze
Agent pisze diagram linijka po linijce. AgentsRoom czeka, aż tekst na chwilę się ustabilizuje, zanim zacznie rysować, a w międzyczasie trzyma na ekranie ostatni poprawny diagram, więc blok nie miga między kodem a rysunkiem.
Źródło o jedno kliknięcie
Najedź kursorem na diagram i kliknij Pokaż kod, aby przeczytać tekst Mermaid, z którego powstał, a potem Pokaż diagram, aby wrócić. Źródło nigdy nie jest zastępowane, tylko inaczej pokazywane.
Uszkodzony diagram pozostaje czytelny
Gdy Mermaid nie potrafi przeanalizować składni bloku, kod zostaje na ekranie z jedną linijką pod spodem: Nie udało się narysować tego diagramu: zamiast niego wyświetlany jest kod. Możesz go oddać agentowi bez zmian.
Każdy diagram Mermaid 11
Diagramy przepływu, sekwencji, klas, stanów oraz encji i relacji, wykresy Gantta, mapy myśli, grafy git: wszystko, co potrafi narysować Mermaid 11, rysuje też AgentsRoom.
Nic nie jest rysowane poza ekranem
Układ diagramu jest obliczany dopiero wtedy, gdy zbliża się on do ekranu, po jednym naraz, a wynik jest zachowywany. Długa rozmowa pełna diagramów nic nie kosztuje w przypadku diagramów, do których jeszcze nie przewinięto widoku.
Jak z tego korzystać
Nic do włączania. Cztery kroki od pytania do diagramu.
- 1
Poproś o diagram
Poproś dowolnego agenta prostymi słowami: narysuj proces logowania jako diagram przepływu Mermaid albo pokaż to wywołanie API jako diagram sekwencji. Słowo Mermaid zwykle wystarcza, żeby agent odpowiedział blokiem mermaid.
- 2
Przeczytaj go w widoku rozmowy
Przełącz panel agenta na widok rozmowy: blok pojawia się jako diagram w odpowiedzi agenta. Terminal pod spodem się nie zmienia i nadal pokazuje tekst.
- 3
Albo otwórz plik, który napisał
Gdy agent umieści diagram w pliku Markdown (README, notatce o architekturze, planie), otwórz go z linku do pliku w jego odpowiedzi, z zakładki Pliki w prawym panelu albo przez Plik > Otwórz plik (Cmd O na macOS, Ctrl O na Windows i Linux): podgląd i karta pliku rysują każdy diagram, który się w nim znajduje.
- 4
Sprawdź źródło
Najedź kursorem na diagram i kliknij Pokaż kod, aby przeczytać lub skopiować tekst Mermaid, a potem Pokaż diagram, aby wrócić do rysunku.
Co już robią terminal, GitHub i umiejętności Mermaid
Claude Code i Codex CLI działają w terminalu, a terminal wyświetla znaki, nie rysunki: blok mermaid pojawia się w nim jako źródło. To nie brakujące ustawienie CLI, tak po prostu działa terminal.
Dlatego ludzie szukają umiejętności (skilla), wtyczki albo serwera MCP do Mermaid dla Claude Code. Pomagają one agentowi napisać poprawny diagram albo wyeksportować go do obrazu. Żeby przeczytać diagram, i tak wklejasz jego kod gdzieś, gdzie zostanie narysowany: GitHub rysuje bloki mermaid w plikach Markdown i komentarzach, mermaid.live rysuje wszystko, co do niego wkleisz, a podgląd Markdown w edytorze robi to z rozszerzeniem Mermaid.
AgentsRoom nie zastępuje tych narzędzi. Usuwa kopiowanie i wklejanie, gdy i tak czytasz agenta: diagram jest rysowany w rozmowie, planie albo pliku, który masz już otwarty obok agenta.
Ograniczenia
- Surowy terminal agenta nadal pokazuje źródło: rysowanie odbywa się w widoku rozmowy i w czytnikach Markdown, nie w siatce terminala.
- Widok rozmowy istnieje dla tych CLI, których transkrypt AgentsRoom potrafi odczytać: Claude Code, Codex, Grok Build, Mistral Vibe, oh-my-pi, Pi i Antigravity CLI. W pozostałych otwórz plik Markdown, który napisał agent.
- Diagramy używają motywów dark i neutral z Mermaid, dopasowanych do jasnego lub ciemnego motywu aplikacji. Nie przejmują Twojego koloru akcentu.
- Link w diagramie otwiera tylko adres http lub https, tak jak link w Markdown. Link do lokalnego pliku nic nie robi.
- Etykiety to zwykły tekst: HTML i skrypty w diagramie są usuwane, a linia konfiguracji zapisana w diagramie nie może tego zmienić.
- Nie ma przycisku eksportu: żeby zachować diagram jako plik PNG lub SVG, poproś agenta, aby wyeksportował go narzędziem wiersza poleceń Mermaid.
Najczęściej zadawane pytania
Czy Claude Code potrafi wyświetlać diagramy Mermaid?
Nie w terminalu. Claude Code zapisuje diagram Mermaid jako blok kodu, a terminal może go wyświetlić tylko jako tekst. Uruchom tego samego agenta w AgentsRoom i przełącz jego panel na widok rozmowy: blok zostaje narysowany jako diagram w odpowiedzi, a przycisk Pokaż kod przywraca źródło.
Jak zobaczyć podgląd diagramu Mermaid, który agent zapisał w pliku Markdown?
Otwórz plik w AgentsRoom: kliknij link do pliku w odpowiedzi agenta, wybierz go w zakładce Pliki w prawym panelu albo użyj Plik > Otwórz plik (Cmd O na macOS, Ctrl O na Windows i Linux). Podgląd Markdown, a także karta pliku, jeśli otworzysz go w karcie, rysują każdy blok mermaid z pliku.
Czy to działa z Codex i innymi CLI agentów?
Tak. Diagram rysuje czytnik Markdown w aplikacji na podstawie tekstu, niezależnie od tego, które CLI go napisało, więc diagram od Codex, Claude Code czy dowolnego innego agenta jest rysowany tak samo w plikach, planach, notatkach i zgłoszeniach. Widok rozmowy, w którym odpowiedzi są rysowane na bieżąco, obsługuje Claude Code, Codex, Grok Build, Mistral Vibe, oh-my-pi, Pi i Antigravity CLI.
Czy potrzebuję umiejętności Mermaid albo serwera MCP?
Nie do czytania diagramów. Umiejętność albo serwer MCP może pomóc agentowi napisać poprawny kod Mermaid albo wyeksportować go do obrazu. AgentsRoom tylko rysuje to, co już zostało napisane, więc jedno uzupełnia drugie: umiejętność poprawia diagram, AgentsRoom go pokazuje.
Jakie typy diagramów są rysowane i co, jeśli składnia jest błędna?
Wszystko, co rysuje Mermaid 11: diagramy przepływu, sekwencji, klas, stanów oraz encji i relacji, wykresy Gantta, mapy myśli, grafy git i resztę jego katalogu. Blok, którego składni Mermaid nie potrafi przeanalizować, zostaje kodem, z jedną linijką pod spodem informującą, że diagramu nie udało się narysować. Poproś agenta o poprawkę: jego poprawiony blok zostanie narysowany.
Może Cię też zainteresować
Widok rozmowy
Widok czatu dla Claude Code, Codex i pięciu innych CLI agentów: sesja odczytana z transkryptu samego CLI, zwinięte wywołania narzędzi, odpowiedzi na żywo, na komputerze i telefonie.
Przegląd planu
Twój agent proponuje plan: przeczytaj go jak dokument, skomentuj, zastąp lub usuń dowolny fragment, a potem zatwierdź plan albo odeślij go jedną wiadomością. Każda wersja zostaje zachowana.
Project Memory
Daj swoim agentom kodującym AI pamięć długoterminową. Decyzje, architektura i pułapki utrzymują się między sesjami i są dzielone z wszystkimi w projekcie. Darmowe, bez limitu.
Zapytaj bez przerywania
Zadaj pytanie zajętemu agentowi AI do kodowania, nie przerywając mu. Kopia jego rozmowy tylko do odczytu odpowiada w bąblu z kartami, a jego terminal pracuje dalej. Claude Code, Codex, Grok, GitHub Copilot CLI, OpenCode, Mistral Vibe, Antigravity CLI i Kimi Code, z komputera lub telefonu.
Czytaj diagramy swoich agentów jako diagramy
Pobierz AgentsRoom na macOS, Windows lub Linux, poproś agenta o diagram Mermaid i przełącz jego panel na widok rozmowy.
Aplikacja towarzysząca: monitoruj agentów w podróży
Użyj Claude, Codex, Antigravity CLI lub innego dostawcy AI.
Wysyłaj bugi i prośby bezpośrednio do swojego publicznego backlogu.