概要

Excalidraw Skill for Claude Code は、英語のテキストプロンプトから手描き風の Excalidraw スタイル図を生成する Claude Code 用スキルです。出力は SVG と PNG でローカルに保存され、ブラウザ操作や Puppeteer、外部サーバ（MCP）を必要としない点が大きな特徴です。対応例としてフローチャート、アーキテクチャ図、ユーザージャーニーなどが挙げられており、入力した説明を即座にスケッチ化してくれます。軽量で高速、プロトタイピングやドキュメント作成、自動図生成ワークフローへの組み込みに向いたツールです。

リポジトリの統計情報

スター数: 5
フォーク数: 0
ウォッチャー数: 5
コミット数: 2
ファイル数: 8
メインの言語: JavaScript

主な特徴

テキストプロンプトを手描き風 Excalidraw 図に自動変換（SVG/PNG出力）
ローカル実行でブラウザや Puppeteer を不要にする設計
Claude Code と連携する「スキル」として利用可能
フローチャート、アーキテクチャ図など多用途な図の高速生成

技術的なポイント

本プロジェクトは「Claude Code スキル」として定義されており、自然言語で記述した図の説明を受け取って図描画を行うワークフローを提供します。README にある通り「No browser, no Puppeteer, no MCP server」と明記されているため、レンダリングはサーバサイドやヘッドレスブラウザに依存せず、直接 SVG データを生成するアプローチが採られていると推測されます。出力が SVG と PNG であることから、SVG をネイティブに組み立てるロジック（図形、線、テキスト、手描き風のパスやジッタ処理など）と、必要に応じて SVG から PNG へ変換するためのライブラリ連携（例：sharp 等）を想定できます。Claude Code 側とのインタフェースは SKILL.md に定義されているはずで、プロンプト解釈→図要素の抽象表現→レンダラへ渡す一連のパイプラインがコアです。アセットディレクトリにサンプル画像が含まれており、出力例やスタイル参照がある点も開発・検証を容易にします。軽量さとローカル完結性によりCI/CD や自動ドキュメント生成への組み込みも考えやすく、図のスタイル調整やテンプレート追加で拡張性が高い設計になっています。

プロジェクトの構成

主要なファイルとディレクトリ：

.gitignore: file
LICENSE: file
README.md: file
SKILL.md: file
assets: dir

…他 3 ファイル

まとめ

Claude Code と組み合わせて使える、ローカルで動くシンプルかつ高速な自動図生成スキル。

リポジトリ情報：

名前: excalidraw-skill
説明: 説明なし
スター数: 5
言語: JavaScript
URL: https://github.com/aref-vc/excalidraw-skill
オーナー: aref-vc
アバター: https://avatars.githubusercontent.com/u/220876421?v=4

READMEの抜粋：

Excalidraw Skill for Claude Code

A Claude Code skill that transforms any text prompt into a hand-drawn Excalidraw-style diagram, saved as SVG + PNG locally. No browser, no Puppeteer, no MCP server.

Example output

What it does

Describe a diagram in plain English and get a hand-drawn sketch rendered locally in under a second:

Flowcharts — decision trees, process flows, user journeys
Architecture diagrams — services, databases, API…

Excalidraw スキル（Claude Code 用）