Генератор архитектурных диаграмм

Установка

unzip architecture-diagram.zip -d ~/.claude/skills/

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

По текстовому описанию системы скилл собирает диаграмму архитектуры в темной теме. Компоненты окрашиваются по типу: фронтенд, бэкенд, базы, облако, безопасность, шина сообщений и внешние системы. Группы безопасности и регионы выделяются пунктирными рамками, стрелки показывают потоки данных. Под схемой добавляются карточки с ключевыми деталями. Результат открывается в любом браузере, а в шапке есть кнопки для копирования картинки и выгрузки в PNG или PDF.

Для кого. Для разработчиков, архитекторов и техписателей, которым нужна аккуратная схема системы без графического редактора.

Пример запроса к агенту

Нарисуй архитектурную схему: фронтенд на React, API на Node.js, PostgreSQL, Redis для кэша, все в AWS за CloudFront

Ограничения

Стиль один: темная тема с моноширинным шрифтом JetBrains Mono, который подгружается с Google Fonts, поэтому без доступа к ним шрифт заменится системным. В claude.ai для загрузки скилла нужно включить выполнение кода.

Как отключить. В claude.ai выключите или удалите скилл в разделе Customize, Skills. В Claude Code удалите папку architecture-diagram из ~/.claude/skills.

Проверка безопасности

• Скилл содержит только инструкции и HTML-шаблон

Коротко о README

README предлагает три шага: установить скилл, получить текстовое описание системы и попросить Claude нарисовать схему. Даны примеры запросов для веб-приложения, бессерверной схемы в AWS и микросервисов, таблица цветов по типам компонентов и описание структуры выходного файла. Установка через загрузку архива в claude.ai, в знания проекта или распаковку в каталог скиллов Claude Code. Лицензия MIT.

SKILL.md

---
name: architecture-diagram
description: Create polished dark-themed architecture diagrams as self-contained HTML+SVG files. Use when the user asks for system, infrastructure, cloud, security, or network topology diagrams.
---

# Architecture Diagram Skill

Create professional technical architecture diagrams as self-contained HTML files with inline SVG graphics and CSS styling.

> **Version 1.1** · MIT License · Authored by [Cocoon AI](mailto:hello@cocoon-ai.com)

## Design System

### Color Palette

Use these semantic colors for component types:

| Component Type | Fill (rgba) | Stroke |
|---------------|-------------|--------|
| Frontend | `rgba(8, 51, 68, 0.4)` | `#22d3ee` (cyan-400) |
| Backend | `rgba(6, 78, 59, 0.4)` | `#34d399` (emerald-400) |
| Database | `rgba(76, 29, 149, 0.4)` | `#a78bfa` (violet-400) |
| AWS/Cloud | `rgba(120, 53, 15, 0.3)` | `#fbbf24` (amber-400) |
| Security | `rgba(136, 19, 55, 0.4)` | `#fb7185` (rose-400) |
| Message Bus | `rgba(251, 146, 60, 0.3)` | `#fb923c` (orange-400) |
| External/Generic | `rgba(30, 41, 59, 0.5)` | `#94a3b8` (slate-400) |

### Typography

Use JetBrains Mono for all text (monospace, technical aesthetic):
```html
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
```

Font sizes: 12px for component names, 9px for sublabels, 8px for annotations, 7px for tiny labels.

Похожие