Simon Willison опубликовал небольшой, но точечно полезный инструмент: кастомный Markdown-рендерер, который особым образом обрабатывает блоки кода с пометкой svg. Вместо текстового листинга — сразу картинка, рядом вкладка с исходником. Можно вставить текст вручную или дать ссылку на CORS-доступный Markdown-файл или GitHub Gist.
Контекст
Уиллисон — один из наиболее практикующих публичных инженеров в пространстве LLM-инструментов. Он ведёт подробный блог о работе с языковыми моделями, разрабатывает Datasette и стабильно публикует утилиты, которые закрывают конкретные дыры в ежедневном workflow. Этот рендерер — очередной такой инструмент: маленький, но сделанный под реальную боль.
LLM-модели давно умеют генерировать SVG-код. Claude, GPT-4o, Gemini — при запросе нарисовать схему, диаграмму или иллюстрацию все они выдают валидную SVG-разметку в блоке кода. Проблема в том, что стандартные Markdown-рендеры показывают этот код как текст. Чтобы увидеть картинку, нужно копировать, вставлять куда-то ещё, обновлять — и повторять при каждой итерации. Уиллисон убрал этот лишний шаг.
В демо-примере автор загружает Markdown-файл с «пеликановыми логами» для Opus 4.8 — отсылка к известному в сообществе неформальному тесту, где модели рисуют пеликанов в SVG как демонстрацию способностей к пространственному мышлению и структурированной графической генерации.
Аналитика
Суть инструмента — не в самом рендеринге SVG (браузер умеет и так), а в том, что он встраивает визуализацию прямо в LLM-workflow. Разработчик или аналитик работает в Markdown, получает от модели диаграмму кодом, и сразу видит результат рядом с текстом — без переключения контекста. Это снижает cognitive load и ускоряет итерации.
За последний период у LLM-инструментов сложилась чёткая тенденция: лучшие из них не добавляют новых возможностей, а убирают трение из уже существующих. Anthropic и OpenAI встраивают похожую механику прямо в Canvas и Artifacts внутри своих чатов; Willison делает то же самое в виде открытого инструмента, который встраивается в собственную инфраструктуру без зависимостей.
С точки зрения agentic-систем это важно по отдельной причине. Агент, работающий с документами, часто генерирует структурированный вывод: схемы архитектур, диаграммы процессов, flowchart-ы. Если pipeline принимает Markdown — рендерер закрывает задачу «покажи это пользователю» без дополнительного кода конвертации. Для команд, строящих внутренние knowledge bases или автоматизированные отчёты, это реальная экономия на интеграционном клее.
Кейсы применения в бизнесе
B2B-SaaS стартап. Команда использует LLM для генерации технических спецификаций. Агент пишет архитектурные диаграммы в SVG прямо в документ. С рендерером инженеры видят схему сразу в wiki или экспорте — без Lucidchart, без дополнительного этапа экспорта, без подписки на ещё один инструмент.
Корпорация с legacy-инфраструктурой. Аналитический отдел получает от LLM-инструмента Markdown-отчёты с встроенными SVG-схемами процессов. Рендерер встраивается во внутренний портал: документ отображается как живой, а не как набор текстовых блоков с кодом, который никто не читает.
SMB и локальный бизнес в КР/СНГ. Небольшая команда не может позволить себе дорогие инструменты визуализации. Сценарий: попросить Claude нарисовать SVG-схему бизнес-процесса, вставить результат в рендерер, поделиться ссылкой через Gist с клиентом или партнёром. Ноль затрат, минимум инструментов.
Кейсы в личной жизни
Разработчик. Генерируешь с Claude или GPT диаграммы классов, ER-модели, flow-чарты в SVG. Вставляешь Markdown в рендерер и сразу видишь картинку. Итеративно правишь промпт — не переключаясь между вкладками. На одной задаче экономится не так много, но за неделю набегает.
Контент-мейкер. Нужны инфографики или схемы для статьи, но нет дизайнера. Просишь LLM нарисовать SVG-иллюстрацию, смотришь результат в рендерере, экспортируешь — и это готовый элемент для публикации. Качество базовых технических схем у современных моделей вполне приемлемо для статей и документации.
Студент или исследователь. Пишешь работу с диаграммами. LLM генерирует визуализацию в SVG, рендерер позволяет проверить — правильно ли модель поняла задачу, нет ли ошибок в схеме, до вставки в финальный документ. Итерация происходит прямо здесь, без лишних инструментов.
Как применить сегодня
- Открой рендерер Willison (поиск: «markdown-svg-renderer simonwillison»), вставь Markdown с блоком
```svg— сгенерируй SVG в Claude или GPT и сразу посмотри результат. - Промпт-шаблон: «Нарисуй SVG-диаграмму [процесса / архитектуры / схемы]. Верни только SVG-код в блоке кода с языком svg, без объяснений.»
- Используй GitHub Gist для хранения Markdown-файлов с SVG-диаграммами — рендерер поддерживает прямую загрузку по URL Gist.
- Для командной работы: храни технические диаграммы как Markdown + SVG в репозитории, используй рендерер как лёгкий viewer без зависимостей от Confluence или Notion.
- Если строишь agentic-pipeline с документооборотом — рассмотри аналогичную логику на своей стороне: SVG-фенс в Markdown → автоматический inline-рендер в output пользователю.