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는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

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
    }
  }
}

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "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는 맵이 아닌 서버 오브젝트 배열 사용.

~/.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와 조합해 10배 효율

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

excalidraw-skill