/ Каталог / Песочница / Architecture Diagram Generator
● Сообщество Cocoon-AI ⚡ Сразу

Architecture Diagram Generator

автор Cocoon-AI · Cocoon-AI/architecture-diagram-generator

Claude skill that generates beautiful dark-themed system architecture diagrams as standalone HTML/SVG.

Claude skill that generates beautiful dark-themed system architecture diagrams as standalone HTML/SVG.

Живое демо

Как выглядит на практике

architecture-diagram-generator-skill.replay ▶ готово
0/0

Установка

Выберите клиент

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "architecture-diagram-generator-skill": {
      "command": "npx",
      "args": [
        "-y",
        "architecture-diagram-generator-skill"
      ]
    }
  }
}

Откройте Claude Desktop → Settings → Developer → Edit Config. Перезапустите после сохранения.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "architecture-diagram-generator-skill": {
      "command": "npx",
      "args": [
        "-y",
        "architecture-diagram-generator-skill"
      ]
    }
  }
}

Cursor использует ту же схему mcpServers, что и Claude Desktop. Конфиг проекта приоритетнее глобального.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "architecture-diagram-generator-skill": {
      "command": "npx",
      "args": [
        "-y",
        "architecture-diagram-generator-skill"
      ]
    }
  }
}

Щёлкните значок MCP Servers на боковой панели Cline, затем "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "architecture-diagram-generator-skill": {
      "command": "npx",
      "args": [
        "-y",
        "architecture-diagram-generator-skill"
      ]
    }
  }
}

Тот же формат, что и Claude Desktop. Перезапустите Windsurf для применения.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "architecture-diagram-generator-skill",
      "command": "npx",
      "args": [
        "-y",
        "architecture-diagram-generator-skill"
      ]
    }
  ]
}

Continue использует массив объектов серверов, а не map.

~/.config/zed/settings.json
{
  "context_servers": {
    "architecture-diagram-generator-skill": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "architecture-diagram-generator-skill"
        ]
      }
    }
  }
}

Добавьте в context_servers. Zed перезагружается автоматически.

claude mcp add architecture-diagram-generator-skill -- npx -y architecture-diagram-generator-skill

Однострочная команда. Проверить: claude mcp list. Удалить: claude mcp remove.

Сценарии использования

Реальные сценарии: Architecture Diagram Generator

Get started with Architecture Diagram Generator

Когда использовать: When you want to bring Architecture Diagram Generator into your Claude workflow.

Поток
  1. Install the skill in your client (see Install tab).
  2. Authenticate or configure required tokens.
  3. Ask Claude to use the new tools.
    Use Architecture Diagram Generator to help me with a task.✓ Скопировано

Итог: Claude can interact with Architecture Diagram Generator directly from your IDE.

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills