AI
diagram-design 使い方ガイド｜導入・依頼・評価の手順
diagram-designの使い方を、Claude CodeやCodexへの導入から解説します。図の選び方、依頼文、ブランド設定、HTML・SVG・PNGへの書き出し、Mermaidとの使い分け、社内導入前の評価項目まで、初稿の生成から確認・修正を含む総作業時間で判断するためのガイドです。
はじめに
結論から言えば、diagram-designの使い方を評価する際は、初稿の生成から内容確認、修正までにかかった総作業時間を比べます。 作図操作を減らせても、内容の確認や修正には時間がかかるためです。
Claude CodeやCodexに文章で依頼し、ブランドに合わせた図をHTML、SVG、PNGで作る仕組みが、diagram-designです。 diagram-designはオープンソースのスキルで、企画書や提案資料の図を繰り返し作る事業責任者に向いています。 SEO記事のカバー画像やスライドに載せる図など、用途に合わせたサイズで視覚素材を作る場合にも使えます。 導入時には、元情報の正しさ、修正方法、社外秘情報の扱いも確認します。
diagram-designの使い方で資料作成はどう変わるか
資料作成では、箱を描くだけでなく、残す情報や強調する箇所、ブランドカラーの使い方も決めなければなりません。 担当者が個別に決めると、同じ会社の資料でも見た目や情報量が揃わなくなります。
diagram-designを使えば、文章で依頼した内容を基に、図の構造と見た目をまとめて作れます。 図の種類、配置、配色を毎回一から決める作業が減り、担当者は内容確認に時間を回せます。 企画書、業務フロー、顧客説明資料を何度も更新する部門では、作業時間を減らせる可能性があります。
公式リポジトリでは、39種類の図、明暗を含む表示パターン、HTML、SVG、PNGへの出力、Webサイトから色や書体を取り込むブランド設定が案内されています。
ただし、初稿を早く作れても、内容の正しさまで保証されるわけではありません。 業務の順序、責任者、数値、システム間の関係は、元資料を把握している担当者が確認します。 作図を任せる範囲と担当者が確認する範囲を分けておけば、修正時の担当も明確になります。
伝えたい内容から図の種類を選ぶ
図を選ぶ前に、業務の順序、組織の役割、事業の位置づけ、システムの関係など、読者に何を伝えるのかを決めます。 図の名称だけで選ぼうとすると、候補を絞りにくいためです。
| 読者に伝えたいこと | 向く図 | 事業での用途 |
|---|---|---|
| 作業の順序と分岐 | フローチャート | 申請、受注、問い合わせ対応の整理 |
| 部門ごとの担当範囲 | スイムレーン | 引き継ぎ漏れや承認点の確認 |
| 要素間のつながり | アーキテクチャ図 | サービス構成や外部連携の説明 |
| 時間に沿ったやり取り | シーケンス図 | 顧客、画面、社内処理の関係整理 |
| 優先度や位置づけ | 四象限、マトリクス | 施策評価や商品構成の比較 |
図の種類が合っていても、一枚に情報を詰め込むほど読みにくくなります。 経営会議向けなら判断に必要な要素に絞り、運用担当者向けなら例外処理や担当部署まで残します。 同じ情報を扱う場合でも、読者によって必要な情報量は異なります。
Claude CodeやCodexにdiagram-designを導入する
作る図を決めたら、diagram-designを導入する環境を選びます。 公式リポジトリをマーケットプレイスとして登録し、diagram-designプラグインを追加します。 組織の端末へ展開する前に、少人数の検証環境で導入と更新の手順を確認してください。
Claude Codeでは、次の2行を実行します。
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design
Codexでは、次のコマンドを使います。
codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-design
利用者ごとに配置が異なると、導入後の環境にも差が生じます。 Claude Codeの公式文書によると、スキルは個人、プロジェクト、プラグインなど複数の範囲に配置でき、プラグイン由来のスキルには名前空間が付きます。 会社で更新や利用者を管理する場合は、個人導入とプロジェクト共有のどちらを採用するか、担当者が先に決めます。
diagram-designはMITライセンスで公開され、利用、変更、配布などが認められています。 ただし、著作権表示と許諾表示を含める条件があり、無保証です。 社内利用や成果物への組み込みでは、用途に応じてdiagram-designのLICENSE↗を確認します。
ブランド設定と具体的な依頼文で手戻りを減らす
導入直後に作った図が、会社の資料に合うとは限りません。 WebサイトのURLを指定して初期設定を依頼すると、diagram-designは背景色、文字色、アクセント色、見出しと本文の書体候補を抽出します。 利用者は適用前に差分を確認できます。
ブランド設定の依頼文は、たとえば次の内容から始められます。
自社サイトを基にdiagram-designのブランド設定を提案してください。
適用前に、背景、本文、補助文字、強調色、見出し書体の候補を一覧で示してください。
自動抽出した結果だけで、会社の資料に使う設定を確定するのは難しいでしょう。 diagram-designでは、公開サイトにない指定色、利用許諾が限られる書体、資料専用の余白規則までは判断できません。
広報やデザインの担当者が、抽出結果をブランドガイドと照合します。 担当者が承認した値をプロファイルとして保存すれば、案件ごとのばらつきを減らせます。
ブランド設定を揃えても、「見やすくして」とだけ依頼すると、作成者の意図と異なる図になることがあります。 依頼を受けた側には、どの情報を省くべきか判断できないためです。
図解の依頼文には、目的、読者、入力情報、残す要素、出力形式、確認事項を明記します。
営業会議で、受注から請求までの部門間の引き継ぎを確認する図を作ってください。
読者は営業、業務、経理の責任者です。
添付した業務手順だけを根拠にし、不明点は推測せず質問してください。
担当部門、承認、差し戻しを残し、例外処理は注記に分けてください。
16:9の投影資料向けに作り、まずHTMLで確認できる状態にしてください。
承認後にSVGとPNGを書き出してください。
初稿が出たら、見た目を調整する前に担当者が内容を確認します。
- 元資料にない工程や数値が加わっていないか
- 矢印の向きと責任部署が正しいか
- 強調色が一つの意味で使われているか
- 会議室の画面でも文字を読めるか
- SVGで再編集するか、PNGで固定して配るか
問題が見つかったら、変更する対象と内容を指定します。 「もっときれいに」と伝えるより、「経理の列を右端へ移す」「差し戻し経路だけ強調色にする」と指定したほうが、変更後も確認しやすくなります。
Mermaidや手作業とは修正方法で使い分ける
図の作成方法は、作成時の操作だけでなく、納品後に誰がどの方法で修正するかを基準に選びます。 すべての図をdiagram-designで作る必要はありません。
| 選択肢 | 向く場面 | 判断前に確かめる点 |
|---|---|---|
| diagram-design | ブランドに合わせた図を対話で作り、複数形式へ出したい | AIが作った内容を誰が確認するか |
| Mermaid | 図の定義を文章として保存し、更新履歴を管理したい | 利用先が記法と描画に対応するか |
| draw.ioなどの手作業 | 担当者が細部を直接動かし続けたい | 作成時間とテンプレート管理を許容できるか |
更新頻度と見た目の統一を重視する場合は、diagram-designが候補です。 テキスト定義を開発文書と一緒に管理する場合はMermaid、担当者が細部を直接調整する一枚物には手作業が向きます。
Markdownに似たテキスト定義から図を描画し、修正しやすくするツールが、Mermaidです。
diagram-designには、Mermaidのソースを取り込んで描き直す機能も案内されています。 情報の構成をMermaidで管理し、対外資料だけdiagram-designで見た目を整える使い方もできます。
社内導入は総作業時間で評価する
社内導入前の評価では、実際に使う一種類の資料を試します。 機能が揃っていても、社内の確認工程まで短くなるとは限りません。 時間、修正回数、内容の誤り、ブランド適合、再利用性を現在の作り方と比較します。
毎月更新する業務フローや営業説明図を試せば、翌月の再利用まで確認できます。 同じ条件で確かめる項目は、次のとおりです。
- 元資料を渡してから初稿を確認できるまでの時間
- 承認までに必要だった修正の回数と内容
- 事実誤認、欠落、読みにくさの有無
- ブランド担当者が直した箇所
- 翌月の更新で再利用できた設定と指示
社外秘の資料を使う場合は、導入担当者がClaude CodeやCodexの契約、データ処理、アクセス権、保存先を自社の規程と照合します。
まとめ
結論として、比較する対象は初稿の生成速度だけではありません。 内容確認や修正を含む総作業時間を比べます。 総作業時間が減り、担当者が品質基準を共有できた場合は、SEO記事のカバー画像やスライド用の図を含め、対象資料を一種類ずつ増やせます。