원문: https://simonwillison.net/2026/Jul/16/grok-mermaid/ 도구: https://tools.simonwillison.net/grok-mermaid
번역 전문
새롭게 오픈소스로 공개된 Grok CLI 코딩 에이전트의 코드베이스를 탐색하던 중, Rust로 작성된 '자체 완결형 Mermaid 다이어그램 터미널 렌더러'인 xai-grok-markdown/src/mermaid.rs를 발견했습니다.
이 코드를 WebAssembly를 통해 브라우저에서 실행해보면 재미있겠다고 생각했습니다. Claude Code for web (Fable 5)에서 실행한 프롬프트를 통해 완성된 도구는 아래에서 확인할 수 있습니다:
도구 바로 가기: https://tools.simonwillison.net/grok-mermaid
이 도구는 Mermaid 다이어그램 소스 코드를 입력하면, xAI의 Grok CLI에 내장된 Rust Mermaid 렌더러 로직을 WebAssembly로 컴파일하여 브라우저에서 직접 Unicode 박스 드로잉 문자(box-drawing characters) 기반의 다이어그램으로 변환해줍니다.
배경: Grok CLI와 Mermaid 렌더러
xAI가 오픈소스로 공개한 grok-build 코드베이스에는 844,530줄의 Rust 코드가 포함되어 있습니다. 그 중 xai-grok-markdown 크레이트에는 터미널에서 Mermaid 다이어그램을 유니코드 박스 드로잉 문자로 표현하는 렌더러가 구현되어 있었습니다.
Simon은 이 Rust 코드를 WebAssembly(WASM)로 컴파일하고, Claude Code for web(Fable 5)을 활용해 웹 인터페이스를 구축함으로써 브라우저에서 직접 Mermaid → Unicode ASCII 아트 변환을 가능하게 했습니다.
핵심 요약 (20줄)
- Simon Willison이 2026-07-16 발행한 단편 도구 포스트
- xAI의 오픈소스 Grok CLI 코드베이스 탐색 중 발견한 Mermaid 터미널 렌더러를 브라우저용으로 포팅
- Rust로 작성된 xai-grok-markdown/src/mermaid.rs가 원본 소스
- 이 Rust 코드를 WebAssembly(WASM)로 컴파일해 브라우저에서 실행 가능하게 만듦
- Claude Code for web (Fable 5)을 사용해 웹 인터페이스 자동 생성
- 완성된 도구: https://tools.simonwillison.net/grok-mermaid
- Mermaid 다이어그램 소스를 입력하면 Unicode 박스 드로잉 아트로 변환
- flowchart, sequenceDiagram 등 Mermaid의 주요 차트 유형 지원
- Copy as text 버튼으로 결과물을 텍스트로 복사 가능
- Copy link to this diagram 기능으로 다이어그램 링크 공유 가능
- 배경: Grok CLI는 전날(7/15) 개인 디렉토리 전체를 GCS 버킷에 업로드하는 문제로 큰 논란
- xAI는 해당 기능 비활성화 및 저장된 데이터 삭제 약속 후 Apache 2.0으로 코드 전면 오픈소스화
- grok-build 전체 코드베이스는 Rust 코드 844,530줄 규모
- Grok CLI 코드에는 타 에이전트(Codex, OpenCode)의 도구 구현체를 포팅한 코드도 포함
- mermaid.rs는 Unicode 박스 드로잉 문자만으로 여러 Mermaid 차트 유형을 터미널에 렌더링하는 독립 모듈
- Simon은 이 종류의 소규모 창의적 WebAssembly 실험을 자주 수행하며 새 기술 탐색 방식으로 활용
- Fable 5(Claude Code)로 단일 프롬프트 실행만으로 완성한 웹 도구임을 강조
- 도구 소스: https://github.com/simonw/tools/pull/293
- 태그: tools, rust, webassembly, mermaid, grok, xai
- 결론: Rust 오픈소스 코드 → WASM 컴파일 → 웹 도구화의 빠른 실험 사례; AI 코딩 에이전트가 탐색-포팅-UI구현을 원스톱으로 가능하게 함