Документация
Claude Code
Cursor
Создание архитектурных диаграмм
Создаёт HTML-диаграммы архитектуры системы с потоками данных, техническими компонентами и схемой деплоя. Показывает бизнес-контекст, обработку данных и структуру системы в одном наглядном документе.
Автор
Mikhail
Опубликовано 24.02.2026
0,0
4
Содержимое навыка
---
name: architecture-diagram-creator
description: Create comprehensive HTML architecture diagrams showing data flows, components, and deployment
version: 1.0.0
author: mhattingpete (adapted)
platforms: [claude-code, cursor]
license: MIT
source: https://github.com/mhattingpete/claude-skills-marketplace
---
# Architecture Diagram Creator
Create comprehensive, self-contained HTML architecture diagrams.
## Output Structure
Generate a single HTML file containing 6 components:
### 1. Business Context
- Problem being solved
- Key stakeholders
- Business objectives
### 2. Data Flow (SVG Diagram)
```svg
<!-- Color coding:
#4299e1 = data flows (blue)
#ed8936 = processing (orange)
#9f7aea = AI/ML components (purple)
#48bb78 = success/output (green)
#fc8181 = errors/alerts (red)
-->
```
### 3. Processing Pipeline
Sequential steps with inputs → outputs at each stage.
### 4. System Architecture Layers
```
┌─────────────────────────────────────────┐
│ Presentation Layer │
│ (Web UI / API / CLI) │
├─────────────────────────────────────────┤
│ Application Layer │
│ (Business Logic / Use Cases) │
├─────────────────────────────────────────┤
│ Infrastructure Layer │
│ (Database / Cache / Message Queue) │
├─────────────────────────────────────────┤
│ External Services │
│ (Third-party APIs / Clouds) │
└─────────────────────────────────────────┘
```
### 5. Features Grid
Key capabilities grouped by domain.
### 6. Deployment Information
- Environment (cloud provider, region)
- Container/orchestration setup
- Scaling strategy
- Monitoring stack
## Implementation
```html
<!DOCTYPE html>
<html>
<head>
<title>Architecture: {System Name}</title>
<style>
/* Semantic color palette */
--data: #4299e1;
--processing: #ed8936;
--ai: #9f7aea;
--success: #48bb78;
</style>
</head>
<body>
<!-- Business Context section -->
<!-- SVG Data Flow Diagram -->
<!-- Processing Pipeline -->
<!-- Architecture Layers -->
<!-- Feature Grid -->
<!-- Deployment Info -->
</body>
</html>
```
Инструкция по применению
Как использовать
/architecture-diagram-creator
Примеры:
Создай архитектурную диаграмму для нашего Django-приложения
с PostgreSQL, Redis, Celery и S3 /architecture-diagram-creator
Что описать: - Основные компоненты и их связи - Внешние сервисы - Потоки данных - Деплой-окружение
Похожие навыки
Документация
Claude Code
Cursor
Content Research Writer
Помогает писать качественный контент: проводит исследование темы, добавляет цитаты, улучшает хук, итерирует …
0,0
10
Документация
Claude Code
Cursor
Совместное создание документации
Структурированный воркфлоу для совместного написания документации: технические спецификации, RFC, ADR, предложения, руководства. …
0,0
4
Тут может быть ваша реклама
Пишите info@aisferaic.ru
Авторизуйтесь, чтобы оставить комментарий.
Комментариев: 0
Нет комментариев.