xAI открыла исходный код Grok CLI — своего coding agent'а. Внутри разработчики нашли файл xai-grok-markdown/src/mermaid.rs: самодостаточный Rust-рендерер для Mermaid-диаграмм, который выводит блок-схемы в Unicode-арт прямо в терминале. Simon Willison взял этот компонент, скомпилировал его в WebAssembly и получил работающий браузерный инструмент — весь glue-код он написал с помощью Claude Fable 5 в Claude Code.
Контекст
Mermaid — текстовый язык разметки для диаграмм. Flowchart, sequence diagram, class diagram — всё это описывается как код и рендерится в графику. Формат встроен в GitHub, Notion, Obsidian, Confluence и стал де-факто стандартом документирования архитектуры. Обычный путь рендеринга — JS-библиотека в браузере или внешний API для PNG-экспорта.
Терминальный рендерер решает другую задачу: вывести схему как Unicode box art прямо в консоли. Без браузера, без сети, без зависимостей. Это нужно в SSH-сессиях, CI/CD-пайплайнах, offline-окружениях, plain-text документации. Grok CLI включал именно такой компонент — написан на Rust, компактно, без внешних библиотек.
xAI открыла Grok CLI в июле 2026-го. Это продолжение более широкого тренда: крупные AI-компании выкладывают кодовые базы своих инструментов, давая разработчикам возможность изучать архитектуру coding agent'ов изнутри — не только через публичные API, но и на уровне исходного кода.
Аналитика
Здесь интересен не сам Mermaid-рендерер, а паттерн работы с ним. Simon Willison нашёл production-компонент внутри чужого открытого репозитория, скомпилировал Rust в WebAssembly и с помощью Claude Fable 5 собрал из этого полноценный браузерный инструмент. Открытые кодовые базы AI-инструментов становятся слоем переиспользуемых компонентов — не алгоритмов из учебника, а боевого кода, проверенного в production.
WebAssembly как рантайм для Rust-компонентов — зрелая технология, но порог входа падает прямо сейчас. LLM умеют читать Rust, понимать WASM-toolchain и дописывать JS glue-код. Раньше такой эксперимент требовал опыта в системном программировании. Сейчас — умения сформулировать задачу для Claude.
Второй угол: это сигнал о качестве кода внутри AI-компаний. По мере того как всё больше AI-инструментов открывают исходный код, разработчики получают доступ к библиотеке проверенных компонентов — от парсеров до рендереров. Подход «сначала смотришь в открытые AI-репозитории, потом в npm/crates.io» становится рабочим.
Кейсы применения в бизнесе
B2B-SaaS стартап с developer tools: если продукт включает CLI для разработчиков, Mermaid-рендерер в WebAssembly встраивается как опция вывода архитектурных схем прямо в терминале. Пользователи получают диаграммы без браузера, без CDN, без сетевых зависимостей — особенно ценно для enterprise-клиентов с закрытыми сетями или строгим compliance.
Корпорация с legacy-документацией: Mermaid широко используется для описания data-flow и интеграций в больших системах. WASM-рендерер встраивается во внутренний портал или статический сайт документации без отдельного сервиса. Меньше инфраструктуры — меньше точек отказа. Особенно актуально, когда внешние SaaS под запретом из соображений безопасности.
IT-команда в КР/СНГ: многие команды в Бишкеке уже используют Mermaid в Notion или GitHub для описания бизнес-процессов. Браузерный рендерер на основе WASM позволяет встроить предпросмотр диаграмм во внутренние инструменты без подключения к внешним API и без трат на сторонние сервисы — важно при ограниченном бюджете на инфраструктуру.
Кейсы в личной жизни
Разработчик: открой репозиторий Grok CLI, найди mermaid.rs и попробуй собрать WASM-версию с помощью Claude Code. Это практический эксперимент с тремя технологиями одновременно: Rust, WebAssembly, LLM-ассистированная разработка. Результат — рабочий инструмент, а не абстрактный туториал.
Технический писатель / контент-мейкер: браузерный Mermaid-рендерер позволяет быстро создавать текстовые схемы для статей, README и туториалов — без Figma, без экспорта изображений. Схема как Unicode-текст не теряет качество при копировании и отлично читается в plain-text публикациях и Telegram.
Студент / фрилансер: Mermaid-диаграммы в README — стандарт оформления проектов на GitHub. Умение рендерить их в терминале и браузере, понимание WASM-pipeline — это заметно в портфолио и выделяет среди кандидатов, которые рисуют схемы только в Figma.
Как применить сегодня
- Найди репозиторий Grok CLI на GitHub (поиск: «xai grok cli» или «xai-grok-markdown») — изучи структуру, как устроен coding agent изнутри.
- Открой
xai-grok-markdown/src/mermaid.rs— посмотри, как реализован самодостаточный рендерер на Rust без внешних зависимостей. - Если знаком с Rust: скомпилируй в WASM с помощью
wasm-pack, попроси Claude написать JS-обёртку для браузерной интеграции. - Если не знаком с Rust: открой Claude Code, загрузи файл
mermaid.rsи задай запрос: «Скомпилируй этот Rust-модуль в WebAssembly и создай минимальную HTML-страницу с JS-интеграцией». - Интегрируй готовый WASM-компонент во внутренний портал документации или CLI-инструмент команды — рендерер диаграмм без внешних API и без зависимости от сети.