MSAGL-JS — скилл
Официальный скилл Microsoft раскладывает графы и сети в JavaScript и TypeScript и выгружает схемы в SVG, PDF, PNG и EPS.
- 175 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Скилл дает инструкции по коду визуализации, а вспомогательный скрипт экспорта запускается локально на Node.js.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/msagl-jsОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл дает инструкции по коду визуализации, а вспомогательный скрипт экспорта запускается локально на Node.js.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл `msagljs` обучает агента работать с MSAGL-JS, JavaScript-реализацией алгоритмов автоматической раскладки графов от Microsoft. Агент рассчитывает положение вершин и маршруты ребер без просмотрщика, встраивает живые SVG- или WebGL-визуализации сетей в веб-страницы, загружает данные в форматах DOT, JSON, JGF и текстовых списков ребер, выбирает алгоритмы Sugiyama, MDS и IPSepCola и режимы прокладки ребер. Для документов скилл выгружает рисунки в SVG, PDF, PNG, EPS и PostScript и добавляет векторные схемы в LaTeX. Под каждую задачу есть справочник: ядро раскладки, встраивание в страницу, браузерные рендереры, выбор алгоритма, экспорт, пакеты и входные данные, диагностика интеграции. Примеры лежат в `skills/msagljs/examples/`, включая страницы SVG и WebGL и заготовку для LaTeX.
Для кого. Веб-разработчикам и авторам документов, которым нужна автоматическая раскладка сетей и схем с экспортом в печатные форматы.
Подходит, если
- В страницу надо встроить интерактивный граф зависимостей на SVG или WebGL.
- Данные приходят в DOT или JGF, и из них нужна размеченная схема с маршрутизированными ребрами.
- Рисунок сети для статьи нужен в EPS или PDF, и его добавляют в LaTeX.
- Выбирают между Sugiyama, MDS и IPSepCola для сети с кластерами.
Не подходит, если
- Задача вне JavaScript и TypeScript: скилл рассчитан на пакеты `@msagl/*`.
- Нужна готовая диаграмма в Mermaid или draw.io без программирования.
- Требуется офлайн-экспорт в EPS без Ghostscript.
Пример запроса к агенту
Используй скилл msagljs, чтобы встроить в страницу интерактивный граф из `network.dot` на WebGL и выгрузить версию для статьи в PDF.Ограничения
Скилл работает с JavaScript и TypeScript. Для отрисовки в SVG и WebGL нужны браузерные API. Вспомогательный скрипт статического экспорта требует Node.js 20 или новее, а для EPS и PostScript еще Ghostscript. Установка командой `gh skill install` рассчитана на GitHub CLI 2.90 или новее, а в примере используется ветка `@dev`. Скилл не заменяет документацию MSAGL-JS: детали алгоритмов лежат в приложенных справочниках и на сайте проекта.
Как отключить. Удалите папку `msagljs` из каталога скиллов агента (проектного или пользовательского, в зависимости от области установки). Пакеты `@msagl/*` в зависимостях проекта убирает менеджер пакетов.
Частые вопросы
Как установить скилл msagljs?
Выполните `gh skill install microsoft/msagljs msagljs@dev --agent github-copilot --scope project`. Область `--scope user` делает скилл доступным во всех проектах, а другой агент выбирают флагом `--agent`. Нужен GitHub CLI 2.90 или новее.
Как проверить, что скилл виден?
В активной сессии Copilot CLI выполните `/skills reload`, затем `/skills info msagljs`. Активацию можно принудить запросом вроде «Use the /msagljs skill to embed this network in the page».
Какие форматы данных читает скилл?
DOT, JSON, JGF и разделенные списки ребер. Формат подбирается по справочнику «Пакеты и входные данные».
В какие форматы можно выгрузить схему?
В SVG, PDF, PNG, EPS и PostScript. Для EPS и PostScript дополнительно нужен Ghostscript, а скрипт экспорта запускается на Node.js 20 или новее.
Что такое MSAGL-JS?
Это JavaScript-реализация алгоритмов автоматической раскладки графов Microsoft. Репозиторий выпускает Microsoft, документация лежит на `microsoft.github.io/msagljs`.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл превращает картинки, GIF, видео и 3D-модели в ASCII и строит ASCII-компоненты и GPU-фоны сайтов командой asciify-engine
Скилл помогает писать и отлаживать GLSL-шейдеры из готовых блоков, собирает зависимости в один файл и проверяет код для WebGL2.
Официальные скиллы GreenSock: учат агента правильно писать анимации на GSAP, от твинов и таймлайнов до ScrollTrigger, плагинов и React
Скилл и проверка графиков rhp учат агента делать диаграммы из HTML-элементов на SolidJS и сверять их на разных ширинах.
Скилл и MCP-сервер библиотеки Shaders: агент собирает фоны, стекло, градиенты и курсорные эффекты на WebGPU для React, Vue, Svelte, Solid и JS
Three.js Awesome Graphics Skills
threejs-awesome-graphics-agent-skills
Пакет скиллов three.js для красивой графики сцен и игр: свет, PBR, шейдеры, TSL и WebGPU, постобработка, частицы
Коротко о README
Скилл следует открытому стандарту Agent Skills: агент сопоставляет запрос с именем и описанием, а подробные справочники и скрипты загружает только при необходимости.