/ 디렉터리 / 플레이그라운드 / excalidraw-skill
● 커뮤니티 Agents365-ai ⚡ 바로 사용

excalidraw-skill

제작: Agents365-ai · Agents365-ai/excalidraw-skill

Claude Code skill for turning natural-language system descriptions into hand-drawn Excalidraw diagrams — SVG/PNG/editable .excalidraw export.

Agents365-ai's Excalidraw skill auto-detects when a discussion needs a diagram (3+ components, multi-tier systems, workflows) and generates the right one: flowchart, architecture, sequence, mind map, or swimlane. Export via Kroki API (no install) or local excalidraw-brute-export-cli with Firefox. Editable .excalidraw files open directly on excalidraw.com.

왜 쓰나요

핵심 기능

라이브 데모

실제 사용 모습

excalidraw-skill.replay ▶ 준비됨
0/0

설치

작성자 저장소 · Claude Skills 공식 문서

사용 사례

실전 활용법: 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.

흐름
  1. 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
  2. Tweak and re-export
    Add Redis in front of the product service and regenerate.✓ 복사됨
    → Updated diagram with Redis inserted, layout re-balanced
  3. 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.

흐름
  1. 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
  2. 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.

문제 해결

자주 발생하는 오류와 해결

Wrong trigger keywords — Claude writes Mermaid instead

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

대안

excalidraw-skill 다른 것과 비교

대안언제 쓰나단점/장점
Mermaid via markdownYour docs already render Mermaid natively (GitHub, etc.)No hand-drawn aesthetic, less layout control
drawio via desktop appYou want click-heavy manual layoutNot agent-driven

더 보기

리소스

📖 GitHub에서 공식 README 읽기

🐙 열린 이슈 보기

🔍 400+ MCP 서버 및 Skills 전체 보기