Architecture Diagram Generator (Claude Skill) — 安裝 & 即時演示

即時演示

實際使用效果

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 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "architecture-diagram-generator-skill": {
      "command": "npx",
      "args": [
        "-y",
        "architecture-diagram-generator-skill"
      ]
    }
  }
}

點擊 Cline 側欄中的 MCP Servers 圖示，然後選 "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 使用伺服器物件陣列，而非映射。

~/.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.

步驟

Install the skill in your client (see Install tab).
Authenticate or configure required tokens.
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.

Architecture Diagram Generator