excalidraw-diagram

Name: excalidraw-diagram
Author: aiagentwithdhruv

github.com/aiagentwithdhruvデザイン・UI2071 回インストール15 週間前に更新

リポジトリ

excalidraw-diagram について

Excalidraw の図を作成するスキルです。要件の確認からレイアウト設計、JSON の生成、編集可能なファイルの提供までを案内し、色分け、入れ子、コントラスト、座標のルールを定めています。

主な機能

01図の題材と詳細度の確認
02区画、レイアウト、座標の設計
03Excalidraw 要素と JSON の生成
04配色、書体、矢印のルール
05フィードバックに応じた図の修正

活用シーン

01システム構成やフローの図示
02複雑な概念の区画整理
03既存図の配置や文言の変更

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/aiagentwithdhruv/skills --skill excalidraw-diagram

インストール後、Claude Code で/excalidraw-diagramを入力して読み込まれたか確認します。

詳細

ワークフロー

ステップ 1：リクエストを理解する

何かを生成する前に、次の点を把握してください。

どのような概念やシステムを図にするのか？
主な構成要素やセクションは何か？
それらの間にはどのような流れや関係があるのか？

リクエストが曖昧な場合（例：「Docker の図を作って」）、確認の質問を 1～2 個してください。

具体的にどの側面を扱いますか？（アーキテクチャ、ネットワーク、ボリュームなど）
どの程度詳しくしますか？（概要レベルか、内部構造まで詳しくするか）

ステップ 2：必要に応じて調査する

概念の技術的な正確さに確信がない場合は、図を作成する前に調査してください。次の点を確認します。

構成要素の名前と関係が正しいこと
階層と入れ子構造が適切であること
データフローの方向が正確であること

ステップ 3：レイアウトを計画する

JSON を書く前に、頭の中でレイアウトを組み立ててください。

主なセクションは何か？（左から右、または上から下）
どの要素がどの要素の中に入るのか？
どの矢印で何をつなぐのか？

セクションの構成案を書き留めます。

[Section A: w=170] --40px gap-- [Section B: w=170] --40px gap-- [Section C: w=640]

ステップ 4：要素を生成する

次の順に要素を作成します。

外側のボックス／コンテナー
セクションの見出しテキスト
入れ子になった要素（各セクション内で上から下へ）
矢印と矢印のラベル（最後に追加）

ステップ 5：保存して渡す

現在のディレクトリに [concept-slug].excalidraw として保存します
ユーザーがそのままコピーできるよう、完全な JSON をコードブロックで表示します
図が何を示しているのか、各色の領域が何を表すのかを簡潔に説明します
ファイルの使い方をユーザーに伝えます。

図の表示と編集方法：

excalidraw.com にアクセスします（無料で、アカウントは不要です）

方法 A：メニュー（左上のハンバーガーアイコン）をクリックし、［"Open"］を選択して、.excalidraw ファイルを選びます

方法 B：上記の JSON コードブロックをコピーし、excalidraw.com を開いて Ctrl+V / Cmd+V で貼り付けます

すべての要素を編集できます。ドラッグして移動し、ハンドルをつかんでサイズを変更し、ダブルクリックしてテキストを編集します

ステップ 6：フィードバックに対応する

ユーザーから変更の依頼があった場合：

要素を移動する場合＝その要素と、それに依存するすべての要素の x/y を更新します
テキストを変更する場合＝text フィールドと originalText フィールドの両方を更新します
領域を追加する場合＝パレットから新しい色を割り当て、間隔を一貫させます
図が複雑な場合（要素が 20 個以上）は、座標の誤りを避けるため、セクションごとに作成します

重要なルール：テキストのコントラスト

色付きの図形内のテキストは、読みやすくなければなりません。塗りつぶされた図形内のテキストには、#1e1e1e（ほぼ黒）または #343a40（濃いチャコールグレー）を使用してください。色付き領域の背景に、その領域のストロークカラーを使ったテキストを配置しないでください（例：黄色のカード上の黄色いテキストは読めません）。領域の strokeColor は、図形の枠線と矢印にのみ使用してください。

デザインの原則

色で内容を伝える： 論理的な領域ごとに色を 1 色使います。「入力」領域の要素はすべて青、「出力」領域の要素はすべて緑にします。閲覧者が文字を読む前に、構造を理解できるようにします。

入れ子構造で包含関係を示す： X が Y の中にある場合、X のボックスを一定の余白をとって Y のボックスの内側に描きます。座標は相対座標ではなく絶対座標です：child_x = parent_x + padding。

ラベルは短くする： 1 つのラベルにつき 2～5 語にします。長い説明は、フォントサイズを小さくし、控えめな色（#868e96）を使った注釈にします。

余白で構造を表す： 兄弟要素間には最低 15px の間隔を設けます。主なセクション間には最低 40px の間隔を設けます。

矢印で意図を伝える： 矢印は目的に合わせた色にします。ひと目で分からない矢印には、すべてラベルを付けます。

レイアウトシステム

JSON を記述する前に、必ず座標を計画してください。

主なセクションを特定します（左から右、または上から下）
各セクションに固定幅と開始位置の x 座標を割り当てます
間隔を計算します：主なセクション間は 40～60px、兄弟要素間は 15～25px
セクション内では上から下に配置します：next_y = current_y + current_height + gap

パディングのルール：

外枠から内側のラベルまで：上方向に 8～10px オフセット
外枠から入れ子の枠まで：すべての辺で 10～15px オフセット
兄弟要素間：10～15px の間隔

テキスト幅のコツ： テキスト幅を親枠の幅に設定します。textAlign: "center" の場合、テキストは自動的に中央揃えになります。

矢印ラベル： 矢印の中間点の y 座標より 20～25px 上に、矢印と幅および x 座標を合わせて、独立したテキスト要素として配置します。

座標計算の例：

Section A: x=30,  w=170  -> right edge = 200
Gap:                        40px
Section B: x=240, w=170  -> right edge = 410
Gap:                        40px
Section C: x=450, w=600  -> right edge = 1050

カラーシステム

ゾーン	用途	strokeColor	backgroundColor
青	入力、ソース、外部サービス	`#1971c2`	`#e7f5ff`
黄	処理、変換	`#f59f00`	`#fff9db`
緑	出力、コンテナー、成功	`#2f9e44`	`#d3f9d8`
紫	共有レイヤー、インフラストラクチャ	`#862e9c`	`#f3d9fa`
赤	ホスト OS、警告、エラー	`#c92a2a`	`#ffe3e3`
グレー	ハードウェア、中立的なコンテナー	`#495057`	`#f8f9fa`

入れ子の要素では、塗りつぶしの濃さを変えます。

外側：最も薄くします（例：#d3f9d8）
内側：中程度にします（例：#8ce99a）
さらに内側：薄めの中程度にします（例：#b2f2bb）

タイポグラフィのスケール

役割	fontSize	fontFamily
図のタイトル	32-36	1（Virgil）
セクション見出し	20-24	1
要素ラベル	16-18	1
注釈	14-15	1
小さな注記	12-13	1
コードラベル	14-16	3（Cascadia）

テキスト幅は親枠の幅にします。パディングとして、テキストの x/y 座標を枠の x/y 座標から約 8～10px オフセットします。

要素のスキーマ

すべての要素に、以下の基本フィールドが必要です。省略しないでください。

基本フィールド（すべての型）

{
  "id": "unique-string",
  "type": "rectangle|ellipse|diamond|arrow|line|text|freedraw",
  "x": 0, "y": 0,
  "width": 100, "height": 50,
  "angle": 0,
  "strokeColor": "#1e1e1e",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid",
  "roughness": 1,
  "opacity": 100,
  "groupIds": [],
  "frameId": null,
  "roundness": null,
  "boundElements": [],
  "updated": 1,
  "link": null,
  "locked": false
}

テキストフィールド（基本フィールドに追加）

{
  "text": "Label text",
  "fontSize": 16,
  "fontFamily": 1,
  "textAlign": "center",
  "verticalAlign": "top",
  "containerId": null,
  "originalText": "Label text",
  "lineHeight": 1.25
}

矢印フィールド（基本フィールドに追加）

{
  "points": [[0, 0], [100, 0]],
  "lastCommittedPoint": null,
  "startBinding": null,
  "endBinding": null,
  "startArrowhead": null,
  "endArrowhead": "arrow"
}

主な値

fontFamily: 1 = Virgil（手書き風、デフォルト）、2 = Helvetica、3 = Cascadia（等幅）
roughness: 0 = 滑らか、1 = やや粗い（Excalidraw のデフォルトの質感）、2 = とても粗い
fillStyle: すっきりした図には "solid"、従来の Excalidraw のハッチングには "hachure"
roundness: null = 角を丸めない、{"type": 3} = 角丸の長方形、{"type": 2} = 曲線の矢印
strokeStyle: "solid"、"dashed"（任意の接続）、"dotted"

よく使うパターン

ラベル付きの枠

[Rect: x, y, w, h]
[Title text: x, y+10, w, fontSize=18]
[Subtitle: x, y+38, w, fontSize=14, strokeColor=#868e96]

入れ子のコンテナー

[Host rect: x=0, y=0, w=640, h=500]
[Host label: x=0, y=10, w=640]
[Item 1: x=15, y=50, w=190, h=200]
[Item 2: x=225, y=50, w=190, h=200]
[Item 3: x=435, y=50, w=190, h=200]

ラベル付きの矢印

[Arrow: x=start_x, y=mid_y, width=gap_width, points=[[0,0],[gap_width,0]]]
[Label: x=start_x, y=mid_y-25, width=gap_width, textAlign=center]

JSON ラッパー

すべての図で、以下のひな形を使用します。

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [ ... ],
  "appState": {
    "gridSize": null,
    "viewBackgroundColor": "#ffffff"
  },
  "files": {}
}

Markdown 対応

ログインしてコメント

基本情報

作者: aiagentwithdhruv
リポジトリ: aiagentwithdhruv/skills
カテゴリ: デザイン・UI
インストール数: 71
GitHub スター: 20

問題を報告