Simon Willison сделал grok-mermaid: диаграммы Mermaid в Unicode-арт через WebAssembly

Блогер Simon Willison, известный экспериментами с ИИ-инструментами для разработки, изучал код только что открытого агента для программирования Grok CLI от xAI и нашёл в нём файл xai-grok-markdown/src/mermaid.rs, самодостаточный рендерер, который отрисовывает диаграммы Mermaid в терминале в виде Unicode box-art (символьной графики из линий и рамок). Уиллисон решил проверить, заработает ли этот код в браузере, если скомпилировать его в WebAssembly.

Вместо того чтобы переносить код вручную, он написал подробный промпт для Claude Code for Web (в записи фигурирует модель под внутренним названием Fable 5) с точными шагами: склонировать репозиторий xai-org/grok-build, изучить рендерер в mermaid.rs, разобраться, как запустить этот Rust-код отдельно от остальной кодовой базы, скомпилировать его в WebAssembly и собрать HTML-страницу-плейграунд с несколькими примерами диаграмм для проверки, код оформить в отдельной папке с указанием лицензии и со скриптами сборки в WASM.

Результат, инструмент grok-mermaid, доступный по адресу tools.simonwillison.net/grok-mermaid. Агент изолировал исходный рендерер в отдельную Rust-библиотеку с минимальными правками, заменил внешние UI-зависимости лёгкими заглушками типов и экспортировал функции через WebAssembly FFI (интерфейс вызова функций). Получившийся модуль весит около 190 килобайт и работает напрямую с памятью браузера без обращения к серверу. При этом все 148 исходных модульных тестов рендерера прошли без изменений, перенос не сломал поведение кода.

Веб-интерфейс содержит семь готовых примеров диаграмм, поддерживает редактирование с рендерингом в реальном времени, регулировку максимальной ширины вывода, копирование результата как текста и шаринг диаграмм через ссылку с закодированными данными в URL. Работа опубликована как публичный pull request simonw/tools #293 на GitHub, включающий автоматизированный набор браузерных тестов на рендеринг, загрузку примеров и обработку ошибок.

Ключевые факты

Simon Willison нашёл в открытом коде Grok CLI (xai-org/grok-build) самодостаточный Rust-рендерер диаграмм Mermaid в Unicode box-art (файл mermaid.rs)
Перенос в WebAssembly сделал не человек, а Claude Code for Web по подробному пошаговому промпту, от клонирования репозитория до сборки WASM и HTML-плейграунда
Итоговый модуль WebAssembly весит около 190 КБ и работает в браузере без сервера; все 148 исходных тестов рендерера прошли без изменений
Инструмент grok-mermaid доступен онлайн: редактор Mermaid-диаграмм с рендерингом в Unicode-арт, регулировкой ширины, копированием текста и шарингом через URL
Работа опубликована как pull request simonw/tools #293 на GitHub с собственным набором браузерных тестов

Почему это важно

История показывает практический сценарий использования ИИ-агента для программирования не как автора кода «с нуля», а как инженера по переносу: агенту дали конкретный низкоуровневый Rust-модуль из чужого проекта и попросили изолировать его, перекомпилировать в WebAssembly и обвязать веб-интерфейсом, без ручного погружения человека во внутреннее устройство кодовой базы Grok CLI. Это пример того, как автономный агент справляется с кросс-компиляцией, заглушками зависимостей и сборочными скриптами по одному текстовому заданию.

Кому это важно

Разработчикам инструментов для терминалов и Mermaid-диаграмм, инженерам, интересующимся портированием и рефакторингом кода силами ИИ-агентов, а также техническим блогерам и экспериментаторам, которые изучают open-source код агентов вроде Grok CLI в поисках переиспользуемых компонентов.

Как это применить

Инструмент открыт по адресу tools.simonwillison.net/grok-mermaid: в него можно вставить текст Mermaid-диаграммы и сразу получить рендер в виде Unicode box-art прямо в браузере, настроить максимальную ширину вывода, скопировать результат как текст или поделиться диаграммой через ссылку. Тем, кто хочет повторить подход, пригодится сам промпт-паттерн Уиллисона: дать агенту репозиторий с нужным модулем и попросить изолировать его в отдельный крейт (модуль на Rust), собрать в WebAssembly и сделать демо-страницу с примерами.

Можно ли доверять

Simon Willison, известный автор, который подробно и честно документирует свои эксперименты с ИИ-агентами для разработки, включая неудачи. Работа полностью публична: pull request simonw/tools #293 на GitHub с исходным кодом и тестами. Ключевой сигнал надёжности переноса, все 148 исходных модульных тестов рендерера прошли без изменений после адаптации под WebAssembly, то есть поведение кода не разошлось с оригиналом.

Риски и подводные камни

Совпадение результатов на исходных 148 тестах не гарантирует отсутствие расхождений в новом FFI-слое (интерфейсе вызова функций), тесты покрывали оригинальный Rust-код, а не сам механизм связки с WebAssembly и браузером. Автоматически сгенерированные агентом сборочные скрипты и лицензионные пометки стоит перепроверять вручную. Сам инструмент, демонстрационный плейграунд, а не готовый к продакшену продукт; кроме того, он собран из кода только что открытого и быстро меняющегося проекта Grok CLI, чья кодовая база может измениться в любой момент.

«Склонируй https://github.com/xai-org/grok-build во временную папку. Посмотри код в crates/codegen/xai-grok-markdown/src/mermaid.rs, который рендерит некоторые типы диаграмм как «Unicode box-drawing art» (символьную графику из линий и рамок). Разберись, как запустить этот Rust-код отдельно от остальной кодовой базы. Затем разберись, как скомпилировать его в WebAssembly, и собери grok-mermaid.html как браузерный плейграунд для проверки кода с несколькими примерами Mermaid-диаграмм. Помести свой Rust-код в отдельную папку, с соответствующей лицензионной пометкой и сборочными скриптами для получения WASM-модуля.»

— Simon Willison, промпт для Claude Code for Web