/ Verzeichnis / Playground / Architecture Diagram Generator
● Community Cocoon-AI ⚡ Sofort

Architecture Diagram Generator

von 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.

Live-Demo

In der Praxis

architecture-diagram-generator-skill.replay ▶ bereit
0/0

Installieren

Wählen Sie Ihren Client

~/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"
      ]
    }
  }
}

Öffne Claude Desktop → Settings → Developer → Edit Config. Nach dem Speichern neu starten.

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

Cursor nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die globale.

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

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "Edit Configuration".

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

Gleiche Struktur wie Claude Desktop. Windsurf neu starten zum Übernehmen.

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

Continue nutzt ein Array von Serverobjekten statt einer Map.

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

In context_servers hinzufügen. Zed lädt beim Speichern neu.

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

Einzeiler. Prüfen mit claude mcp list. Entfernen mit claude mcp remove.

Anwendungsfälle

Praxisnahe Nutzung: Architecture Diagram Generator

Get started with Architecture Diagram Generator

Wann einsetzen: When you want to bring Architecture Diagram Generator into your Claude workflow.

Ablauf
  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.✓ Kopiert

Ergebnis: Claude can interact with Architecture Diagram Generator directly from your IDE.

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen