에이전트의 Mermaid 다이어그램을,
코드로 출력하지 않고 그림으로
Claude Code나 Codex에 다이어그램을 요청하면 Mermaid로 씁니다. 터미널은 이 텍스트 블록을 출력만 할 수 있습니다. AgentsRoom은 에이전트가 쓴 내용을 읽는 모든 곳에서 이를 그리고, 코드는 클릭 한 번이면 볼 수 있게 둡니다.
대화 보기, Markdown 파일, 계획 리뷰의 계획, 노트, 프로젝트 메모리, 백로그 티켓: 모든 mermaid 코드 블록이 다이어그램이 되며, 앱의 라이트 또는 다크 테마에 맞춰 macOS, Windows, Linux에서 표시됩니다. 설치할 것도 없고, 스킬도 MCP 서버도 필요 없습니다.
```mermaid
flowchart LR
A[Login] --> B{Token valid?}
B -->|yes| C[Dashboard]
B -->|no| A
```같은 mermaid 블록을 터미널이 출력한 모습과 AgentsRoom이 그린 모습으로.
Claude Code에 요청이 앱 안에서 어떻게 흐르는지 묻거나, Codex에 마이그레이션의 테이블 구조를 그려 달라고 하면, mermaid로 시작하는 코드 블록을 받는 경우가 많습니다. 흐름도, 시퀀스 다이어그램, ER 다이어그램이 텍스트로 쓰여 있습니다. 터미널은 이를 출력만 할 수 있어서, 하이픈으로 된 화살표를 읽으며 상자는 머릿속으로 그려야 합니다.
AgentsRoom은 같은 Markdown을 읽고 그것을 그립니다. 블록은 화면에 들어오면 다이어그램으로 바뀌고, 마우스를 올리면 나타나는 코드 보기 버튼이 소스를 다시 보여 주며, 다이어그램 보기를 누르면 그림으로 돌아갑니다. 에이전트가 문법 오류를 냈다면 다이어그램을 그릴 수 없었다는 한 줄과 함께 코드가 화면에 남으므로, 에이전트가 쓴 내용을 잃는 일은 없습니다.
그리기는 CLI에 의존하지 않습니다. 앱의 Markdown 리더가 텍스트를 바탕으로 그립니다. Codex가 쓴 README의 다이어그램이든, Claude Code가 쓴 계획의 다이어그램이든, 다른 어떤 에이전트가 쓴 티켓의 다이어그램이든 똑같이 그려집니다.
에이전트를 읽을 때 달라지는 점
앱이 Markdown을 보여 주는 모든 곳에 규칙은 하나: mermaid 블록은 다이어그램으로 표시됩니다.
에이전트를 읽는 모든 곳에서
대화 보기, 파일 미리보기와 파일 탭의 Markdown 파일, 계획 리뷰의 계획, 노트, 프로젝트 메모리 노트, 백로그 티켓과 그 댓글, 그리고 따로 질문하기의 답변.
에이전트가 쓰는 동안 그리기
에이전트는 다이어그램을 한 줄씩 씁니다. AgentsRoom은 텍스트가 잠시 멈출 때까지 기다렸다가 그리고, 그동안 마지막으로 유효했던 다이어그램을 화면에 유지하므로 블록이 코드와 그림 사이에서 깜빡이지 않습니다.
클릭 한 번이면 보이는 소스
다이어그램에 마우스를 올리고 코드 보기를 누르면 그 바탕이 된 Mermaid 텍스트를 읽을 수 있고, 다이어그램 보기를 누르면 돌아갑니다. 소스는 절대 바뀌지 않고, 보여 주는 방식만 달라집니다.
깨진 다이어그램도 읽을 수 있게
Mermaid가 블록을 파싱하지 못하면 코드가 화면에 남고, 그 아래에 한 줄이 표시됩니다: 이 다이어그램을 그릴 수 없어 대신 코드를 표시합니다. 그대로 에이전트에게 돌려줄 수 있습니다.
Mermaid 11의 모든 다이어그램
흐름도, 시퀀스 다이어그램, 클래스 다이어그램, 상태 다이어그램, ER 다이어그램, 간트 차트, 마인드맵, git 그래프: Mermaid 11이 그릴 수 있는 것은 AgentsRoom도 그립니다.
화면 밖은 그리지 않음
다이어그램은 화면에 가까워졌을 때만 한 번에 하나씩 레이아웃되고, 그 결과는 보관됩니다. 다이어그램이 가득한 긴 대화라도 아직 스크롤하지 않은 다이어그램에는 비용이 들지 않습니다.
사용 방법
켤 것은 없습니다. 질문에서 다이어그램까지 네 단계.
- 1
다이어그램 요청하기
어떤 에이전트에게든 평범한 말로 요청하세요. 예: 로그인 흐름을 Mermaid 흐름도로 그려 줘, 또는 이 API 호출을 시퀀스 다이어그램으로 보여 줘. 대개 Mermaid라고만 말해도 에이전트가 mermaid 블록으로 답합니다.
- 2
대화 보기에서 읽기
에이전트 패널을 대화 보기로 전환하세요. 블록이 에이전트의 답변 안에 다이어그램으로 나타납니다. 그 아래의 터미널은 바뀌지 않고 계속 텍스트를 보여 줍니다.
- 3
또는 에이전트가 쓴 파일 열기
에이전트가 다이어그램을 Markdown 파일(README, 아키텍처 노트, 계획)에 넣었다면, 답변 속 파일 링크나 오른쪽 패널의 '파일' 탭에서, 또는 파일 > 파일 열기(macOS는 Cmd O, Windows와 Linux는 Ctrl O)로 여세요. 미리보기와 파일 탭이 그 안의 모든 다이어그램을 그립니다.
- 4
소스 확인하기
다이어그램에 마우스를 올리고 코드 보기를 눌러 Mermaid 텍스트를 읽거나 복사한 다음, 다이어그램 보기를 눌러 그림으로 돌아가세요.
터미널, GitHub, Mermaid 스킬이 이미 하는 일
Claude Code와 Codex CLI는 터미널에서 실행되고, 터미널은 그림이 아니라 문자를 출력합니다. mermaid 블록은 소스 그대로 보입니다. CLI에 설정이 빠진 것이 아니라, 터미널이란 원래 그런 것입니다.
그래서 사람들은 Claude Code용 Mermaid 스킬, 플러그인, MCP 서버를 찾습니다. 이런 도구는 에이전트가 올바른 다이어그램을 쓰거나 이미지 파일로 내보내도록 돕습니다. 그래도 다이어그램을 읽으려면 그 코드를 그려 주는 곳에 붙여 넣어야 합니다: GitHub는 Markdown 파일과 댓글의 mermaid 블록을 그리고, mermaid.live는 붙여 넣은 것은 무엇이든 그리며, 편집기의 Markdown 미리보기는 Mermaid 확장으로 그립니다.
AgentsRoom은 이런 도구를 대체하지 않습니다. 어차피 에이전트를 읽고 있을 때의 복사와 붙여넣기를 없앨 뿐입니다: 다이어그램은 대화, 계획, 또는 에이전트 옆에 이미 열어 둔 파일 안에 그려집니다.
제한 사항
- 에이전트의 원본 터미널은 여전히 소스를 보여 줍니다. 그리기는 대화 보기와 Markdown 리더에서 이루어지며, 터미널 그리드 안에서는 이루어지지 않습니다.
- 대화 보기는 AgentsRoom이 트랜스크립트를 읽을 수 있는 CLI에서 쓸 수 있습니다: Claude Code, Codex, Grok Build, Mistral Vibe, oh-my-pi, Pi, Antigravity CLI. 다른 CLI에서는 에이전트가 쓴 Markdown 파일을 여세요.
- 다이어그램은 Mermaid의 dark 테마와 neutral 테마를 사용하며, 앱의 라이트 또는 다크 테마에 맞춰집니다. 강조 색상은 적용되지 않습니다.
- 다이어그램 안의 링크는 Markdown 링크처럼 http 또는 https 주소만 엽니다. 로컬 파일로 가는 링크는 아무 동작도 하지 않습니다.
- 레이블은 일반 텍스트입니다: 다이어그램 안의 HTML과 스크립트는 제거되며, 다이어그램에 쓴 설정 줄로도 이를 바꿀 수 없습니다.
- 내보내기 버튼은 없습니다. 다이어그램을 PNG나 SVG 파일로 보관하려면 Mermaid 명령줄 도구로 내보내 달라고 에이전트에게 요청하세요.
자주 묻는 질문
Claude Code는 Mermaid 다이어그램을 렌더링할 수 있나요?
터미널에서는 안 됩니다. Claude Code는 Mermaid 다이어그램을 코드 블록으로 쓰고, 터미널은 그것을 텍스트로 출력할 수밖에 없습니다. 같은 에이전트를 AgentsRoom에서 실행하고 패널을 대화 보기로 전환하세요: 블록이 답변 안에 다이어그램으로 그려지고, 코드 보기 버튼이 소스를 다시 보여 줍니다.
에이전트가 Markdown 파일에 쓴 Mermaid 다이어그램은 어떻게 미리 보나요?
AgentsRoom에서 파일을 여세요: 에이전트 답변의 파일 링크를 클릭하거나, 오른쪽 패널의 '파일' 탭에서 고르거나, 파일 > 파일 열기(macOS는 Cmd O, Windows와 Linux는 Ctrl O)를 사용하세요. Markdown 미리보기와, 탭으로 열었다면 파일 탭이 파일의 모든 mermaid 블록을 그립니다.
Codex와 다른 에이전트 CLI에서도 작동하나요?
네. 어떤 CLI가 썼든 앱의 Markdown 리더가 텍스트로 다이어그램을 그리므로, Codex, Claude Code, 다른 어떤 에이전트의 다이어그램이든 파일, 계획, 노트, 티켓에서 똑같이 그려집니다. 답변이 도착하는 대로 그려지는 대화 보기는 Claude Code, Codex, Grok Build, Mistral Vibe, oh-my-pi, Pi, Antigravity CLI를 지원합니다.
Mermaid 스킬이나 MCP 서버가 필요한가요?
다이어그램을 읽는 데는 필요 없습니다. 스킬이나 MCP 서버는 에이전트가 올바른 Mermaid를 쓰거나 이미지로 내보내는 데 도움이 될 수 있습니다. AgentsRoom은 이미 쓰인 것을 그릴 뿐이므로 둘은 함께 쓸 수 있습니다: 스킬은 다이어그램을 개선하고, AgentsRoom은 그것을 보여 줍니다.
어떤 다이어그램 유형을 그리며, 문법이 틀리면 어떻게 되나요?
Mermaid 11이 그리는 모든 것입니다: 흐름도, 시퀀스 다이어그램, 클래스 다이어그램, 상태 다이어그램, ER 다이어그램, 간트 차트, 마인드맵, git 그래프와 그 밖의 전체 카탈로그. Mermaid가 파싱하지 못한 블록은 코드로 남고, 그 아래에 다이어그램을 그릴 수 없었다는 한 줄이 표시됩니다. 에이전트에게 고쳐 달라고 하세요: 수정된 블록이 그려집니다.
이런 것도 좋아할 수 있습니다
대화 보기
Claude Code, Codex 외 에이전트 CLI 5개를 위한 채팅 보기: CLI 자체의 트랜스크립트에서 읽은 세션, 접힌 도구 호출, 실시간 답변을 데스크톱과 휴대폰에서.
계획 리뷰
에이전트가 계획을 제안하면 문서처럼 읽고, 어느 부분이든 댓글을 달거나 바꾸거나 삭제한 뒤, 메시지 하나로 승인하거나 되돌려 보내세요. 모든 버전이 보관됩니다.
프로젝트 메모리
AI 코딩 에이전트에게 장기 메모리를 제공합니다. 결정, 아키텍처 및 함정이 세션 간에 지속되며 프로젝트의 모든 사람과 공유됩니다. 무료, 무제한.
따로 질문하기
바쁜 AI 코딩 에이전트를 방해하지 않고 질문하세요. 대화의 읽기 전용 사본이 탭이 있는 버블에서 답하는 동안 터미널은 계속 작업합니다. Claude Code, Codex, Grok, GitHub Copilot CLI, OpenCode, Mistral Vibe, Antigravity CLI, Kimi Code 지원, 데스크톱에서도 휴대폰에서도 쓸 수 있습니다.
에이전트의 다이어그램을 다이어그램으로 읽으세요
macOS, Windows, Linux용 AgentsRoom을 다운로드하고, 에이전트에게 Mermaid 다이어그램을 요청한 뒤 패널을 대화 보기로 전환하세요.
컴패니언 앱: 이동 중에도 에이전트를 모니터링
Claude, Codex, Antigravity CLI 또는 다른 AI 공급자를 사용하세요.
버그와 요청을 공개 백로그로 바로 보내세요.