diagram-designとは｜ブランド色の図を作るスキル
「会議資料やマニュアルに図を入れたいけれど、AIに頼むと毎回どこかで見た四角と矢印になる」「自社の色に合わせて作り直すのが面倒」——図をAIに作らせようとすると、誰もがこの壁に当たります。
結論から言うと、diagram-design は、文章で書いた流れや関係を、会社の色に合わせた「図1枚のHTMLファイル」にしてくれる Claude Code のスキルです。私が架空の会社の受注から出荷までの10工程を渡したところ、約2分45秒で、担当ごとの行に工程が並ぶ図が出てきました。ただし、見やすさのために10工程が9工程に整理されていた点は、知っておく必要があります。
株式会社Fyveは、Claude Code のスキルを1本ずつ実際に入れて試し、うまくいった点もいかなかった点も記録しています。この記事では、diagram-design の使い道、入れ方、頼み方、スキルなしとの違い、安全面の確認、向かない場面を順に書きます。
diagram-designとは｜ブランド色の図を1枚のHTMLにするスキル
diagram-design は、GitHubで公開されているスキル（cathrynlavery/diagram-design、ライセンスはMIT）です。READMEの説明は「ブランドの色で、図を1つのHTML＋SVGファイルとして描くエージェントスキル。図の型は45種類」というものです。作者は、AIに図を頼むと「どれも同じ丸角の箱の図になる」ことに不満があり、その「好み」を文章にして書き込んだ、と書いています。
決まりごとはいくつかあります。強調の色は図の中で1〜2か所にしか使わない。影はつけない。線は細く。位置は4ピクセルの格子に合わせる。「いちばん良い手は、たいてい削ること」。作られるのは、ダブルクリックで開けるHTMLファイル1枚で、ブラウザだけで見られます。
GitHubのスター数は59,095、公開は2026年4月16日、最終更新は10月20日です（いずれも2026年10月21日時点、GitHubのAPIなどで確認）。
図の型は、構成図・流れ図・スイムレーン（担当ごとに行を分けた流れ図）・組織図・ガントチャート・棒グラフ・ベン図など45種類です。READMEの比較表では、Mermaid（文字で図を書く方式）や draw.io のように「あとから手で編集できる形式」ではなく、「公開する図を一発で整える」用途だと位置づけられています。READMEには、出力の質は使うモデルで変わり、同じ依頼でも描き方が毎回少し違うことがある、という弱点も書かれています。
どんな仕事に使えるか
読者の仕事で使い道が分かりやすいのは、「社内外に見せる図を、会社の色で作りたい」場面です。
- 新入社員への説明資料：受注から出荷まで、経費精算など、担当が替わる業務の流れ（今回試したもの）
- 提案書・会議資料の図：サービスの全体像や、作業の進め方（ガントチャート、段階図）
- 自社サイトやブログの図：説明記事に貼る、色の揃った図
- 組織図・役割分担表：誰がどの仕事を持つか
- 売上や費用の棒グラフ・推移グラフ：数字を見せる図
実際に頼むときは、スキルが図の型を選び、「この型で、この大きさで描く」と最初に短く宣言してから描き始めます。希望があればこの時点で直せます。READMEには、サイトのURLを渡して色とフォントを取り込む「ブランド取り込み」も紹介されていますが、今回は試していません。
入れ方（READMEの手順）
READMEには、使う環境ごとの入れ方が書かれています。Claude Code の場合は次の2通りです。
- skills CLIで入れる：
npx skills add cathrynlavery/diagram-design（Claude Code以外のCursorやCodexなどにも対応） - プラグインとして入れる：Claude Code で
/plugin marketplace add cathrynlavery/diagram-designを実行し、続けて/plugin install diagram-design@diagram-designを実行する（更新を受け取れ、書き出し用のコマンドも使える）
READMEによると、プラグイン版では /diagram-design:export-diagram（PNG・SVGへの書き出し）などのコマンドも使えます。skills CLIで入れる方法は、スキル本体だけです。
PNGへの書き出しには、同梱のスクリプトを見ると Python の playwright（ブラウザを動かすライブラリ）が必要です。HTMLで使うだけなら不要です。
今回の試験では、普段の環境を汚さないよう、リポジトリの skills/diagram-design を試験用フォルダの .claude/skills/ にコピーして使いました。npx skills add とプラグインの入れ方は試していません。フォルダ全体は約5.6MBで、見本のHTMLなどが約200ファイル入っています。
Claude Codeにこう頼む
使い方の基本は、READMEにあるとおり、ふだんの言葉で頼むだけです。たとえば「アプリの構成図を作って」「影響と手間の2軸で、今期の案件を整理して」のような頼み方が例に挙がっています。
実際に、スキル名を一度も言わずに次のように頼みました。会社の色は、別ファイル（brand.md）に書いておき、その場所を伝えています。
work/workflow.md に、うちの会社の受注から出荷までの業務の流れが書いてあります。新入社員に流れを説明するときに使いたいので、この流れを図にしてください。会社のブランドの色は work/brand.md にあります。その色に合わせて、完成したら work/ に置いてください。
実行記録の最初の動きが diagram-design スキルの呼び出しで、1回目の依頼で発動しました。「図」「ブランドの色」という言葉だけで動いたことになります。
試した結果｜架空の会社の10工程を図にした
試したのは、架空の会社（手作り家具を売る従業員12名の会社）の「受注から出荷までの業務の流れ」です。注文受付から到着確認・アフター対応まで10工程、各工程に担当と所要日数が書いてあり、補足として「在庫品は工程5・6を飛ばす」「検査で不合格なら工程5へ戻る」「未入金は7日後に自動キャンセル」の3つの例外があります。ブランドの色は、生成り（#F6F1E7）、オークブラウン（#5A3E2B）、くすんだグリーン（#6B7F5E）の3色と、文字用の濃い茶です。使ったモデルはSonnetです。
できあがったもの
約2分45秒（実測164秒）、12ターンで、HTMLファイル1枚（約12KB）ができました。
営業・経理・制作・出荷の4つの行に、工程が左から右へ並びます。担当が替わるところが縦の線で分かり、新入社員が「いま誰の仕事か」を追えます。例外の3つは、いずれも図に入りました。在庫品が製作を飛ばして梱包へ進む点線、検査の不合格で製作へ戻る点線、未入金の注記（3日後にメール、7日後に自動キャンセル）です。図の下には、在庫品は3〜5日、受注生産品は約20〜25日という出荷までの日数のカードが付きます。
色の使い方も、READMEにある決まりのとおりでした。背景は生成り、枠と矢印はオークブラウン、文字は濃い茶で、くすんだグリーンは「いちばん日数のかかる工程」1か所だけに使われました。影や派手な飾りはありません。頼んだ側は色を3つ渡しただけですが、どこに強調を置くかはスキルの決まりが決めています。
うまくいかなかった点｜10工程が9工程に減っていた
図の工程は9つでした。元の「製作指示」と「製作（木取り〜組み立て）」を1つにまとめ、「製作指示・製作（計11〜15日）」としています。「塗装・乾燥」は品質検査と合わせて「塗装・検査」になり、到着確認のアフター対応（返品・交換の受付）の内容は図に入っていません。差し戻しの矢印も、元の文書の「工程5へ戻る」ではなく、まとめたあとの「製作指示・製作」へ戻る形です。
これらは、Claude 自身が返答の中で「見やすさのため、10工程から9つに減らした」と報告してきました。黙って落としたわけではありません。ただ、「工程を1つも欠かさない図」が必要な場面（マニュアルの手順書など）では、頼むときに「10工程すべて載せて」と書き添える必要があります。この書き添えの効き方は、今回は試していません。
スキルなしとの違い｜同じ依頼をスキルなしで出した
入れると何が変わるかを見るため、スキルのない別フォルダで、同じ依頼文を同じ形式で1回出しました（実行記録にスキルの呼び出しがないことを確認済み）。
スキルなしでも、色を守った図（SVGファイル）が1分半で出てきました。10工程を縦に並べ、担当・日数・内容も入れ、受注／製作／出荷の帯、例外の3つの線も引いています。
違いは次のとおりです。
- 完全さはスキルなしが上：10工程すべてと各工程の説明文が載りました。diagram-design は9工程で、説明文は省かれました
- 読み取りやすさは diagram-design が上：担当ごとの行に分かれているので、担当の受け渡しが一目で追えます。スキルなしは縦に長く、担当は文字で書いてあるだけです
- 時間と費用は、スキルありが約1.8〜2.2倍：164秒・0.49ドルに対して、スキルなしは90秒・0.23ドル（出力の量は約2万トークンと約1.1万トークン）
- どちらも色は守れた：「ブランド色を伝えれば、色を合わせた図は作れる」点は、スキルなしでも同じでした
つまり、1回の依頼だけを見ると、diagram-design の価値は「色を守れること」ではなく、「図の型を選び、見やすい配置の決まりで描く」ことにあります。今回のような単純な流れ図では、差は大きくありません。45種類のうち swimlane（担当別の流れ図）しか試していないので、ほかの型（組織図、ガントチャート、グラフなど）で差が開くかどうかは分かりません。
同じ材料でanatomyを試した記録との違い
同じ受注から出荷までの文書で、「触って動かせる立体の図」を作る anatomy というスキルも試しています。2つは作るものが違います。
- diagram-design：止まった平面の図。資料や記事に貼る。約2分45秒・0.49ドル。工程名は図の中に入る（ただし9工程に整理）
- anatomy：レールの上を木箱が進む、動く立体の図。約11分半・1.58ドル。図の中は工程の番号だけで、工程名は下の欄に出る。10工程すべて載る
プレゼンや社内説明で「見て動かして理解してほしい」なら anatomy、「書類や記事に載せる静止した図を、会社の色で整えたい」なら diagram-design、というのが私の使い分けです。時間と費用は diagram-design のほうが小さく済みました。
安全面の確認｜何を外に送るか、何を実行するか
入れる前に、SKILL.md、付属のスクリプト、プラグインの設定を読みました。
- 外への送信：スクリプトに、外部へデータを送る処理はありません。作者のプライバシーポリシー（PRIVACY.md）も「サーバー・アカウント・計測は持たない」と書いています。唯一の通信は、できあがったHTMLをブラウザで開いたときに、Google Fonts からフォントを読み込むことです。図の中身は送られませんが、見た人のIPアドレスなどが Google に渡ります。気になる場合は、「システムフォントで、Google Fonts を使わずに」と頼めば避けられる、とスキルの文書にあります（今回は試していません）
- 実行するコマンド：同梱のPythonスクリプトは、図のHTMLを点検するもの、SVG・PNGに書き出すもの、draw.io・Mermaid・Excalidraw のファイルを読み取るものの3種類です。外部のコマンドを呼ぶ処理や、認証情報を読む処理は見当たりませんでした。
allowed-tools（スキルが使える道具の制限）の指定と、hooks（自動実行の設定）はありません - 保存される場所：頼んだときだけ、ブランドの設定を
~/.diagram-design/profiles/に保存できます。何も頼まなければ作られません - ウェブサイトの取得：「このURLの色とフォントを取り込んで」と頼んだときだけ、そのサイトのページを取得します
今回の試験で、普段の環境に入れずに済ませたのは、この確認と同じ理由です。気になる場合は、自分のプロジェクトの .claude/skills/ にだけ置く方法があります。
向かない場面
- 工程を1つも欠かしたくない手順書：今回は、工程が自動で整理されました。頼み方で防げるかは未確認です
- あとから手で直したい図：出てくるのはHTMLとSVGで、PowerPointのように箱を動かして直す形式ではありません。READMEも、毎週のように変わる文書は Mermaid のほうが向くと書いています。直すときは「ここをこう変えて」と Claude に頼み直します
- 表1枚で足りる内容：スキル自身も「3列の表で伝わるなら表にする」と書いています
- とにかく早く安く済ませたい場面：色を指定するだけなら、スキルなしでも同じ色の図は作れました（時間は約半分）
- 動く図・触れる図：静止した図専用です（動きは別途、アニメーションの指定が必要で、今回は試していません）
試せなかったこと
- 45種類の図の型のうち、swimlane 以外
- PNG・SVGへの書き出し、ダークモード版、draw.io・Mermaid・Excalidraw の取り込み
- サイトのURLからのブランド取り込み、ブランド設定の保存
- 「10工程すべて載せて」と頼み直したときの結果
npx skills addとプラグインでの導入
まとめ｜使う前のチェックリスト
- □ 欲しいのは「会社の色に揃った、見せるための静止した図」か（動く図・手で直す図なら別の手段）
- □ 会社の色を、色コードで書いたメモに用意したか（今回はこれを渡して、そのとおりに使われた）
- □ 工程やデータを1つも欠かしたくない場合は、「すべて載せて」と書き添える準備をしたか
- □ 図を開いたとき、Google Fonts への通信が起きることを了承できるか（避けたい場合はシステムフォントを頼む）
- □ 時間と費用がスキルなしの約2倍かかることを知っているか（今回の1回の結果）
- □ 最初に出る「図の型・大きさ」の宣言を見て、違えば直してもらうか
私の試した範囲では、diagram-design は「色を守る図」より「図の型と配置の決まりを持った図」を作る道具でした。簡単な流れ図なら、スキルなしでも近い図は作れます。型が多い図（組織図・ガントチャート・グラフなど）を会社の色で何度も作る人ほど、入れる価値が出てくるはずですが、そこは今回の試験では確かめていません。
関連記事
「図で説明する」のスキルは、ほかに2本を同じ架空の会社の材料で試しています。
仕事でAIを使う人が「絶対に」知っておくべき Claude Codeスキル TOP10
31本を実際に入れて、スキルなしと比べた結果つき（全28ページ）
スキルを入れても、Claude が急に賢くなるわけではありませんでした。31本を架空の会社の仕事で試し、同じ依頼をスキルなしでも検証して比べたうえで、導入する価値があった10本を仕事別にまとめています。
- 文章・スライド・図・数字・調べもの・契約書など、仕事別の10本
- 1本ごとに、スキルなしと比べた時間・費用・出来
- 実物の画面と、Claude Code にそのまま貼れる頼み方
- 外した5本の理由と、入れる前に確かめる4つのこと
メールアドレス登録で他にも様々な資料を閲覧できます
＋9PDF 18点・合計468ページ ＋ すぐ使えるzip素材 3点
どれも登録後の受け取りページから、まとめてダウンロードできます。
毎週配信の無料ニュースレター「AIネイティブ超研究」の購読特典です。メール登録後すぐ、受け取りページのご案内が届きます。そこにはこの資料に加えて、過去の特典もすべてまとめて置いてあります。あわせて、AI活用に関するお知らせやお役に立てそうなご案内をお送りすることがあります。解除はいつでも1クリック。
御社の業務に合わせたClaude Code導入支援
「AIツールを導入したが、現場で使われない」を終わらせる。
業務課題のヒアリングから設計、ハンズオン実践、運用定着まで一貫して支援します。