Mermaid를 Unicode 박스 아트로 변환하기 (grok-mermaid)
요약
본 기사는 Grok CLI 코딩 에이전지에서 발견된 Mermaid 다이어그램 렌더러를 WebAssembly(Wasm)로 포팅하여 브라우저 환경에서 사용하는 과정을 소개합니다. Claude Code for web (Fable 5)을 활용해 구현한 이 도구는 터미널 기반의 Mermaid 다이어그램을 웹에서도 시각적으로 확인할 수 있게 합니다.
핵심 포인트
- Mermaid 다이어그램을 WebAssembly로 변환하여 브라우저에서 사용 가능하게 함.
- Claude Code for web (Fable 5)를 활용한 실질적인 개발 사례 제시.
- 터미널 기반의 코딩 에이전지 기능을 웹 환경으로 확장하는 방법론 공유.
2026년 7월 16일
새롭게 오픈 소스로 공개된 Grok CLI 코딩 에이전지의 코드베이스를 탐색하던 중, Rust로 작성된 'Mermaid 다이어그램을 위한 독립형 터미널 렌더러'인 xai-grok-markdown/src/mermaid.rs 파일을 발견했습니다.
이를 WebAssembly를 통해 브라우저에서 사용해 보는 것이 재미있을 것 같아 시도해 보았습니다. Claude Code for web (Fable 5)에 입력한 프롬프트와 그 결과로 생성된 도구의 모습은 다음과 같습니다:
![Screenshot of a Mermaid diagram editor showing source code and rendered flowchart. The code reads: graph TD Start[Request received] --> Auth{Authenticated?} Auth -->|yes| Rate{Rate limit OK?} Auth -->|no| R401[401 Unauthorized] Rate -->|yes| H(Handle request) Rate -->|no| R429[429 Too Many Requests] H -.-> Log[Audit log] H ==> Resp[200 OK]. Below the code are controls labeled Max width: Fit output panel, Copy as text, and Copy link to this diagram. The rendered flowchart on a dark background flows top-down: Request received leads to Authenticated?, which branches yes to Rate limit OK? and no to 401 Unauthorized. Rate limit OK? branches yes to Handle request and no to 429 Too Many Requests. Handle request connects with a dotted arrow to Audit log and a thick arrow to 200 OK.](https://static.simonwillison.net/static/2026/grok-mermaid-wasm.png)
최근 기사
- 새로운 GPT-5.6 패밀리: Luna, Terra, Sol - 2026년 7월 9일
- sqlite-utils 4.0, 이제 데이터베이스 스키마 마이그레이션 기능 추가 - 2026년 7월 7일
- sqlite-utils 4.0rc2, 주로 Claude Fable에 의해 작성됨 (약 $149.25) - 2026년 7월 5일
AI 자동 생성 콘텐츠
본 콘텐츠는 RSS: Simon Willison's Weblog의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기0