/ Annuaire / Playground / Architecture Diagram Generator
● Communauté Cocoon-AI ⚡ Instantané

Architecture Diagram Generator

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

Démo en direct

Aperçu en pratique

architecture-diagram-generator-skill.replay ▶ prêt
0/0

Installer

Choisissez votre 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"
      ]
    }
  }
}

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

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

Cursor utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

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

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "Edit Configuration".

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

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

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

Continue utilise un tableau d'objets serveur plutôt qu'une map.

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

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

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

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : Architecture Diagram Generator

Get started with Architecture Diagram Generator

Quand l'utiliser : When you want to bring Architecture Diagram Generator into your Claude workflow.

Déroulement
  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.✓ Copié

Résultat : Claude can interact with Architecture Diagram Generator directly from your IDE.

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills