excalidraw-skill MCP — Сценарии использования, Установка & Живое демо

Зачем использовать

Ключевые функции

Five diagram modes with specialized layout rules (flowchart, architecture, sequence, mind map, swimlane)
Auto-invokes when Claude detects architecture-worthy discussions
Three export paths: Kroki (curl, zero-install), local CLI (PNG/SVG), editable .excalidraw
Accepts Chinese or English natural-language input
Hand-drawn aesthetic avoids the sterile-looking AI diagram problem

Живое демо

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

excalidraw-skill.replay ▶ готово

0/0

Установка

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

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "excalidraw-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/excalidraw-skill",
        "~/.claude/skills/excalidraw-skill"
      ],
      "_inferred": true
    }
  }
}

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

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "excalidraw-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/excalidraw-skill",
        "~/.claude/skills/excalidraw-skill"
      ],
      "_inferred": true
    }
  }
}

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

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "excalidraw-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/excalidraw-skill",
        "~/.claude/skills/excalidraw-skill"
      ],
      "_inferred": true
    }
  }
}

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

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "excalidraw-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/excalidraw-skill",
        "~/.claude/skills/excalidraw-skill"
      ],
      "_inferred": true
    }
  }
}

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

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "excalidraw-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/excalidraw-skill",
        "~/.claude/skills/excalidraw-skill"
      ]
    }
  ]
}

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

~/.config/zed/settings.json

{
  "context_servers": {
    "excalidraw-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/Agents365-ai/excalidraw-skill",
          "~/.claude/skills/excalidraw-skill"
        ]
      }
    }
  }
}

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

claude mcp add excalidraw-skill -- git clone https://github.com/Agents365-ai/excalidraw-skill ~/.claude/skills/excalidraw-skill

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

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

Реальные сценарии: excalidraw-skill

Sketch a microservices architecture diagram from a prose description

👤 Engineers writing design docs ⏱ ~10 min beginner

Когда использовать: You're writing an RFC and want a diagram without opening a separate tool.

Предварительные требования

Skill cloned to ~/.claude/skills/excalidraw-skill — git clone https://github.com/Agents365-ai/excalidraw-skill ~/.claude/skills/excalidraw-skill
Network access to kroki.io (zero-install path) — No setup if outbound HTTPS works

Поток

Describe the system

Use the excalidraw skill — draw a microservices e-commerce architecture with clients, API gateway, 4 services, RabbitMQ, and per-service databases.✓ Скопировано

→ Claude generates layout + exports an SVG via Kroki
Tweak and re-export

Add Redis in front of the product service and regenerate.✓ Скопировано

→ Updated diagram with Redis inserted, layout re-balanced
Save editable version

Save as .excalidraw so I can edit it on excalidraw.com.✓ Скопировано

→ File saved to CWD

Итог: A hand-drawn-style architecture diagram in your doc in under 5 minutes.

Подводные камни

Diagram is cluttered for 10+ components — Ask Claude to group by tier first; the skill has layout rules for that

Сочетать с: filesystem

Generate a sequence diagram from an API interaction you just debugged

👤 Backend engineers documenting flows for teammates ⏱ ~10 min beginner

Когда использовать: You finally figured out the 5-service OAuth dance and want to document it.

Поток

Paste the log or describe the flow

Excalidraw skill — sequence diagram: user → frontend → auth service → identity provider → callback → session.✓ Скопировано

→ Sequence diagram with correct arrows and return messages
Refine

Add the error path when the IdP returns 401.✓ Скопировано

→ Alternative flow rendered distinctly

Итог: A sequence diagram you can drop into the PR description.

Комбинации

Сочетайте с другими MCP — эффект x10

excalidraw-skill + filesystem

Save generated diagrams directly into your docs folder

Generate the architecture diagram and save it to docs/architecture/v2.svg.✓ Скопировано

excalidraw-skill + github

Attach the diagram to a PR by committing it alongside the spec

Create the diagram, commit to docs/, and reference it in the PR body.✓ Скопировано

Инструменты

Что предоставляет этот MCP

Инструмент	Входные данные	Когда вызывать	Стоимость
generate_flowchart	process description	Process has decision points and sequential steps	0 via Kroki, 0 local
generate_architecture	components + relationships	System has tiers or service boundaries	0
generate_sequence	actors + messages	Documenting a time-ordered interaction	0
export_png	diagram ID	Need rasterized image for docs that don't support SVG	0 (requires local CLI)

Стоимость и лимиты

Во что обходится

Квота API: Kroki has no explicit quota but don't hammer it
Токенов на вызов: Diagram specs are compact (<2k tokens typically)
Деньги: Free — skills are local files. Kroki is free.
Совет: Use Kroki for one-offs, install excalidraw-brute-export-cli only if you need offline.

Безопасность

Права, секреты, радиус поражения

Хранение учётных данных: No credentials — pure prompts

Исходящий трафик: Kroki path sends your diagram spec to kroki.io. Local CLI path sends nothing.

If your diagrams leak system internals, use the local CLI path instead of Kroki.

Устранение неполадок

Частые ошибки и исправления

Skill not invoked when you ask for a diagram

Mention 'excalidraw' or 'diagram' explicitly; or verify the clone exists.

Проверить: ls ~/.claude/skills/excalidraw-skill/SKILL.md

SKILL.md frontmatter wrong

Re-clone; the frontmatter drives auto-activation.

Проверить: head ~/.claude/skills/excalidraw-skill/SKILL.md

Wrong trigger keywords — Claude writes Mermaid instead

Say 'excalidraw' explicitly; 'draw a diagram' alone can pick other tools.

Альтернативы

excalidraw-skill в сравнении

Альтернатива	Когда использовать	Компромисс
Mermaid via markdown	Your docs already render Mermaid natively (GitHub, etc.)	No hand-drawn aesthetic, less layout control
drawio via desktop app	You want click-heavy manual layout	Not agent-driven

Ещё

Ресурсы

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

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

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