excalidraw

Name: excalidraw
Author: agents365-ai

github.com/agents365-aiデザイン・UI974.6k 回インストール2 週間前に更新

リポジトリ

excalidraw について

Excalidraw の図を生成し、PNG または SVG に書き出すスキルです。図の計画、描画、確認を支援し、SVG には Kroki、PNG にはローカル CLI を使います。

主な機能

01.excalidraw JSON の生成
02Kroki による SVG 書き出し
03ローカルでの PNG・SVG 書き出し
04描画結果の確認と修正
05コミュニティのベクター図形ライブラリの利用

活用シーン

01複数の要素が連携するシステムの可視化
02プロセスや判断ツリーの説明
03アーキテクチャの比較

インストール

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

$npx skills add https://github.com/agents365-ai/365-skills --skill excalidraw

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

同梱ファイルreferences/schema-reference.mdscripts/excalidraw_lib.py

詳細

Excalidraw 図

概要

.excalidraw JSON ファイルを生成し、PNG／SVG にエクスポートします。

エクスポート方法は 2 つあります：

Kroki API（curl） — インストール不要、SVG のみ出力
excalidraw-brute-export-cli — Firefox ベースのローカル実行、PNG と SVG に対応

対応形式： PNG（ローカル CLI のみ）、SVG（どちらの方法にも対応）。PDF には対応していません。

使用するタイミング

明示的なトリガー： ユーザーが「画图」、「diagram」、「visualize」、「flowchart」、「draw」、「架构图」、「流程图」と言った場合

先回りして使用するトリガー：

3 つ以上のコンポーネントが連携するシステムを説明する場合
複数の手順からなるプロセスや判断ツリーを説明する場合
アーキテクチャやアプローチを並べて比較する場合

使用を控える場合： 簡単なリストや表で十分な場合、またはユーザーとのやり取りが手短な質疑応答の場合

使用しない場合 — 他のツールに切り替えます：

仕上がりが洗練された正確な図、厳密な UML、ブランド化されたベンダーアイコン → drawio。
Git で管理する図をテキストから自動レイアウトで作成する場合 → mermaid（一般）または plantuml（UML）。
無限キャンバスのホワイトボードや、プログラムによるフリーハンドの描画 → tldraw。

前提条件

オプション A：Kroki API（推奨 — インストール不要、SVG のみ）

# Just needs curl (pre-installed on macOS/Linux/Windows Git Bash)
curl --version

追加のセットアップは不要です。SVG は https://kroki.io 経由でレンダリングされます。

オプション B：ローカル CLI（PNG に必要）

CLI は Firefox（Chromium ではありません）を使用します。確認してインストールしてください：

npm install -g excalidraw-brute-export-cli
npx playwright install firefox

macOS のパッチ（初回のみ、必須）：

CLI_MAIN=$(npm root -g)/excalidraw-brute-export-cli/src/main.js
sed -i '' 's/keyboard.press("Control+O")/keyboard.press("Meta+O")/' "$CLI_MAIN"
sed -i '' 's/keyboard.press("Control+Shift+E")/keyboard.press("Meta+Shift+E")/' "$CLI_MAIN"

Windows／Linux： パッチは不要です。

ワークフロー

依存関係を確認 — SVG には Kroki（curl）を使用し、PNG にはローカル CLI を使用します
計画 — 視覚的な比喩を選び（関係性とレイアウトの対応表を参照）、図の種類とカラーパレットを決めます
生成 — .excalidraw JSON ファイルを作成します（大きな図はセクションごとに作成します）
エクスポート — Kroki または CLI のコマンドを実行します
レンダリングを確認 — エクスポートした PNG を表示して欠陥を修正し、再エクスポートします（レンダリングの確認を参照）
レビューを繰り返す — 画像をユーザーに見せ、要望に応じて .excalidraw を最小限修正し、承認されるまで再エクスポートします（レビューの繰り返しを参照）
報告 — 出力ファイルのパスをユーザーに伝えます

デザイン原則

デフォルトのスタイル

roughness: 0 — すべての技術図で、すっきりとしたモダンな見た目にします（ユーザーが手描き風やカジュアルなスタイルを希望する場合のみ 1 を使用します）
fontFamily: 2（Helvetica） — プロフェッショナルな見た目になります。カジュアルなスケッチ風の場合のみ 1（Virgil）を、コードスニペットには 3（Cascadia）を使用します
fillStyle: "solid" — デフォルトの塗りつぶし

コンテナ：ボックスよりタイポグラフィを優先する

すべてのラベルをボックスで囲むと、図がワイヤーフレームのように見えます。最もすっきりとした Excalidraw の図では、構造を表すために自由に配置したテキストと線を使い、塗りつぶしのボックスは本当にコンポーネントである要素にのみ使用します。

コンテナを使わないことをデフォルトにします — ボックスを使う理由がない限り、独立した text 要素を使用します。
次の場合にのみボックスを追加します： 要素が実際のシステムコンポーネントである、矢印がその要素に接続される、形状自体が意味を持つ（判断を示すひし形、開始／終了を示す楕円）、または領域をまとめる場合。
ボックス内のテキスト要素は約 30％未満を目指します。
タイムライン、ツリー、階層には、長方形を積み重ねるのではなく、線／コネクターと自由に配置したラベルを使います。サイズ、太さ、色によって、ボックスを使わずに階層を表現できます。

フォントサイズの階層

レベル	サイズ	用途
タイトル	28px	図のタイトル
見出し	24px	セクション／グループの見出し
ラベル	20px	主要な要素のラベル
説明	16px	補足テキスト、説明
注記	14px	注釈、細かい補足

カラーパレット

60-30-10 ルールに従います。60％を余白／ニュートラルカラー、30％をプライマリアクセント、10％をハイライトにします。

セマンティックな塗りつぶし色（strokeColor には1段階濃い色を使用）：

カテゴリ	塗りつぶし	線	用途
プライマリ／入力	`#dbeafe`	`#1e40af`	エントリーポイント、API、ユーザー向け
成功／データ	`#dcfce7`	`#166534`	データストア、成功状態
警告／判断	`#fef9c3`	`#854d0e`	判断ポイント、条件
エラー／重大	`#fee2e2`	`#991b1b`	エラー、アラート、重大な経路
外部／ストレージ	`#f3e8ff`	`#6b21a8`	外部サービス、データベース、AI/ML
プロセス／デフォルト	`#e0f2fe`	`#0369a1`	標準的なプロセスのステップ
トリガー／開始	`#fed7aa`	`#c2410c`	開始ノード、トリガー、イベント
ニュートラル／コンテナー	`#f1f5f9`	`#475569`	グループ、スイムレーン、背景

テキストの色：

レベル	色
タイトル	`#1e293b`
ラベル	`#334155`
説明	`#64748b`

ルール：新しい色を独自に追加しないでください。 このパレットから選びます。

矢印の意味

スタイル	意味
実線（`strokeStyle: "solid"`）	プライマリフロー、メイン経路
破線（`"dashed"`）	応答、非同期、コールバック
点線（`"dotted"`）	任意、参照、弱い依存関係

Excalidraw JSON の構造

ファイルの骨組み

{
  "type": "excalidraw",
  "version": 2,
  "source": "claude-code",
  "elements": [],
  "appState": { "viewBackgroundColor": "#ffffff" }
}

要素の種類

type	用途
rectangle	ボックス、コンポーネント、モジュール
ellipse	開始／終了ノード、データベース
diamond	判断ポイント
arrow	方向付きの接続
line	方向なしの接続
text	単独のラベル

image、frame、embeddable は、このスキルの対象外です。image には別途 files マップと fileId が必要で、フレーム／埋め込みはエクスポート経路で一貫して描画されません。上記の6種類のみを使用してください。これらのプリミティブから作られた既製のアイコンについては、以下のコミュニティの図形・アイコンライブラリを参照してください。

コミュニティの図形・アイコンライブラリ

単なるボックスではなく、AWS／Azure／GCP／ネットワーク／UML／BPMN の実際のアイコンが必要ですか？ Excalidraw コミュニティライブラリ（200以上の .excalidrawlib ファイル）は、ほぼすべてが上記と同じベクタープリミティブで作られているため、image 要素も files マップも使わずに、その項目をKroki とローカル CLI で描画できます。scripts/excalidraw_lib.py のヘルパーを使用してください。

# 1. Find a library (matches name / description / item names)
python scripts/excalidraw_lib.py search aws

# 2. List its items (index, name, element count; flags any image-based item)
python scripts/excalidraw_lib.py items slobodan/aws-serverless.excalidrawlib

# 3. Build your base scene first, then drop an item in at (x, y). IDs are
#    namespaced and coordinates translated, so it merges without collisions:
python scripts/excalidraw_lib.py merge scene.excalidraw \
    slobodan/aws-serverless.excalidrawlib 0 455 257 --scale 0.9 --prefix lambda

ルール：

ベクターのみ。 merge は image 要素を含む項目を拒否します（エクスポート経路では描画されません）。items はそれらを事前に通知します。
控えめに使用してください。 アイコンはラベル付きノードにすぎません。デザインシステムの余白、ラベル、矢印の意味を維持してください。アイコンは図を引き立てるものであり、図の代わりにはなりません。
矢印はライブラリのグループにバインドされません。コネクターは、端から端までの points を明示して描画してください（バインディングは静的エクスポートにはいずれにしても影響しません）。
ライブラリのライセンスは MIT です。謝辞の表示は歓迎されますが、必須ではありません。
その後もレンダリングを確認する手順を実行してください。アイコンのバウンディングボックスはさまざまなので、配置と余白を確認します。

要素のサイズ

ラベルのテキストが切り詰められないよう、テキストに基づいて要素の幅を計算します。

Latin text:  width = max(160, charCount * 9)
CJK text:   width = max(160, charCount * 18)
Mixed text:  estimate each character individually, sum up

高さ：1行のラベルには 60 を使用し、行が増えるごとに 24 を加えます。

単独の text は自動で折り返されません。複数行の単独ラベルでは、手動で \n の改行を挿入してください。16px の場合、1行あたりラテン文字は約30文字以下、CJK 文字は約15文字以下を目安にし、行ごとに高さを 24 加えます（containerId で図形内に配置されたテキストはコンテナーの幅に合わせて自動的に折り返されるため、\n を追加するのではなく、コンテナーのサイズを調整してください）。

必須プロパティ（すべての要素）

{
  "id": "auth_service",
  "type": "rectangle",
  "x": 100, "y": 100,
  "width": 160, "height": 60,
  "angle": 0,
  "strokeColor": "#1e40af",
  "backgroundColor": "#dbeafe",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "roughness": 0,
  "opacity": 100,
  "seed": 100001,
  "boundElements": [
    { "id": "arrow_to_db", "type": "arrow" },
    { "id": "label_auth", "type": "text" }
  ]
}

ランダムな文字列ではなく、説明的な文字列 ID（例："api_gateway"、"arrow_gw_to_auth"）を使用してください。

各要素には、一意の seed（整数）を割り当てます。セクションごとに名前空間を分けます：100xxx、200xxx、300xxx。

JSON フィールドのルール

boundElements：空の場合は null を使用し、[] は使用しないでください
updated：常に 1 を使用し、タイムスタンプは使用しないでください
含めないでください：frameId、index、versionNonce、rawText
矢印の points：必ず [0, 0] から開始してください
seed：要素ごとに異なる正の整数を指定してください

プロパティ値

次の値のみを使用してください。すべて Kroki とローカル CLI でのレンダリングを確認済みです。

プロパティ	有効な値
`fillStyle`	`"solid"`、`"hachure"`、`"cross-hatch"`、`"zigzag"`
`strokeStyle`	`"solid"`（または省略）、`"dashed"`、`"dotted"`
`fontFamily`	`1`（Virgil、手描き風）、`2`（Helvetica）、`3`（Cascadia、コード用）
`textAlign`	`"left"`、`"center"`、`"right"`
`verticalAlign`	`"top"`、`"middle"`、`"bottom"`
`startArrowhead` / `endArrowhead`	`null`、`"arrow"`、`"triangle"`、`"bar"`、`"dot"`、`"circle"`、`"diamond"`、`"crowfoot_many"`

矢印のデフォルトは endArrowhead: "arrow" および startArrowhead: null です。標準の一方向矢印では、両方を省略してください。UML の継承には "triangle"、コンポジションには "diamond"、ER 図のカーディナリティには "crowfoot_many" を使用してください。

コピーして使えるテンプレートや、プロパティ／矢印先端の全カタログが必要ですか？ references/schema-reference.md をご覧ください。要素テンプレート（コンポーネント＋ラベル、バインドされた矢印、矢印ラベル、スイムレーン領域、マインドマップのコネクター）と、確認済みのプロパティ値がすべて記載されています。

図形内のテキスト（包含テキスト）

テキストを図形内に配置する場合は、双方向にバインドしてください。

{
  "id": "label_auth",
  "type": "text",
  "text": "Auth Service",
  "fontSize": 20,
  "fontFamily": 2,
  "textAlign": "center",
  "verticalAlign": "middle",
  "strokeColor": "#1e293b",
  "containerId": "auth_service"
}

重要：テキストの strokeColor は文字色です。 テキスト色パレットから濃い色を選び、必ず明示的に設定してください。省略しないでください。テキストの strokeColor を省略すると、テキストが見えなくなり、図形の背景に溶け込むことがあります。

親図形の boundElements にテキストを含めてください。

"boundElements": [{ "id": "label_auth", "type": "text" }]

矢印のバインド（双方向）

矢印は図形にバインドし、図形側からもバインドされた矢印を参照する必要があります。

{
  "id": "arrow_gw_to_auth",
  "type": "arrow",
  "points": [[0, 0], [200, 0]],
  "startBinding": { "elementId": "api_gateway", "gap": 5, "focus": 0 },
  "endBinding": { "elementId": "auth_service", "gap": 5, "focus": 0 }
}

api_gateway と auth_service の両方で、boundElements に次の内容を含めてください。

"boundElements": [{ "id": "arrow_gw_to_auth", "type": "arrow" }]

端点は図形の境界に届くようにしてください。 startBinding／endBinding（およびその gap）が影響するのは excalidraw.com 上でのインタラクティブな編集のみです。Kroki またはローカル CLI からエクスポートする際に、線がクリップされることはありません。エクスポーターは points をそのまま描画します。そのため、端点は図形の端から端へ届くように計算してください。矢印の x／y を始点の図形の境界（対象側の辺）に設定し、最後のポイントを対象の図形の境界に設定します。中心から中心へのポイントを指定すると、線が両方の図形をまっすぐ貫通して描画されます。

矢印ラベル

矢印にラベルを付けるには、図形内のテキストと同じように text 要素を矢印にバインドします。ラベルの containerId に矢印の ID を設定し、ラベルを矢印の boundElements に追加してください。すると Excalidraw がラベルを矢印の中央に配置し、テキストの背後にある線をマスクするため、取り消し線のようにならず読みやすくなります。

{
  "id": "arrow_valid_to_grant",
  "type": "arrow",
  "points": [[0, 0], [0, 120]],
  "boundElements": [{ "id": "lbl_yes", "type": "text" }]
}

{
  "id": "lbl_yes",
  "type": "text",
  "text": "Yes",
  "fontSize": 14,
  "width": 36,
  "strokeColor": "#1e293b",
  "containerId": "arrow_valid_to_grant"
}

重要：ラベルの width は矢印の長さではなく、テキストに合う幅（charCount * 9）にしてください。 Excalidraw はラベルのバウンディングボックス全体の背後にある線をマスクします。矢印と同じ幅のラベルを使うと、矢印全体がマスクされ、線が消えてテキストだけが浮いて見えます。ラベルの幅は小さくしてください。

矢印の経路

L 字型（エルボー）矢印 — 3 点以上の直交ルーティング：

"points": [[0, 0], [100, 0], [100, 150]]

エルボー矢印 — 自動の直角ルーティング：

{
  "type": "arrow",
  "points": [[0, 0], [0, -50], [200, -50], [200, 0]],
  "elbowed": true
}

曲線矢印 — 中継点を使用した滑らかなルーティング：

{
  "type": "arrow",
  "points": [[0, 0], [50, -40], [200, 0]],
  "roundness": { "type": 2 }
}

グループ化

関連する要素は groupIds を共有します。ネストされたグループの ID は、内側のグループから順に記述してください。

"groupIds": ["inner_group", "outer_group"]

図のパターン

図の種類ごとに、適切な視覚パターンを選択してください。

関係性に応じたレイアウトの対応表

図の種類を決める前に、アイデア内の関係性に合った視覚的なメタファーを選びます。図の種類のラベルよりも、レイアウトに大きく影響します。

アイデア内の関係性	視覚的なメタファー	作成方法
1 対多（ブロードキャスト、ディスパッチ）	ファンアウト	1 つのノードから、外側に放射状に矢印を伸ばす
多対 1（集約、統合）	収束	複数の入力から、1 つのノードに矢印を集める
親から子（階層）	ツリー	幹と枝の線、自由配置のテキスト
繰り返すサイクル（ループ、フィードバック）	サイクル	ノードを輪状に配置し、開始点に戻る曲線矢印を使う
入力 → 変換 → 出力	組立ライン	手順を左から右に並べたパイプライン
A 対 B（比較）	横並び	共通の基準線上に、2 つの列を並行して配置する
前後、フェーズの区切り	間隔	グループ間に余白または破線の区切りを設ける
曖昧／重複する状態	クラウド	楕円を重ね、明確な境界線は設けない

間隔の基準

状況	間隔
ラベル付き矢印の間隔（図形間）	150–200px
ラベルなし矢印の間隔	100–120px
列の間隔（ラベル付き矢印）	400px（ボックス 220px + 間隔 180px）
列の間隔（ラベルなし矢印）	340px（ボックス 220px + 間隔 120px）
行の間隔	280–350px（ボックス 150px + 間隔 130–200px）
ゾーン／コンテナのパディング	子要素の周囲に 50–60px
ゾーン／コンテナの不透明度	25–40
要素間の最小間隔	40px

フローチャート（LR または TB）

開始／終了には楕円、判断にはひし形、処理には長方形を使います
水平方向の間隔は 200px、垂直方向の間隔は 150px にします
判断分岐では、「Yes」は前方へ、「No」は下方へ進めます
ステップ数は 3～10（最大 15）にします

アーキテクチャ／システム図

列の間隔は上記の表に従います。接続にラベルがある場合は、ラベル付き矢印の間隔を使います
関連するサービスは、破線の Neutral コンテナ（不透明度：30、パディング：50px）にまとめます
ゲートウェイ／エントリーポイントは左または上に、データベースは右または下に配置します
エンティティ数は 3～8（最大 12）にします

シーケンス図

参加者間は 200px の間隔を空けます（上部に長方形を配置）
垂直のライフラインには破線を使います
メッセージには水平の矢印を使い、垂直方向に 60px の間隔を空けます
実線の矢印はリクエスト、破線の矢印はレスポンスを表します

マインドマップ

中央ノード：最大サイズ（200x100）、Trigger カラー
レベル 1：150x70、中央を囲む放射状の配置、Primary カラー
レベル 2：120x50、Process カラー
レベル 3：90x40、Neutral カラー
接続には矢印ではなく線を使います
分岐は 4～6 個（最大 8 個）、各分岐のサブトピックは 2～4 個にします
レベル 1 の分岐は、中心 (cx, cy) の周囲に半径 R ≈ 280 の円を描くように配置します。分岐 i の数を n とすると、angle = 2π·i/n、x = cx + R·cos(angle)、y = cy + R·sin(angle) です。均等に配置することで、場当たり的な配置で発生する線の交差や絡まりを防げます。

スイムレーン

レーンの境界には、大きな透明の長方形（Neutral の塗りつぶし、"dashed" の線、不透明度：30）を使います
レーンのラベルは、レーンの左上に独立したテキストとして配置します（長方形には紐付けません）。フォントサイズは 28px です
レーン内の要素は左から右に流れるように配置します
引き継ぎを表す矢印はレーンを横断します

セクションごとの構築

要素が 10 個以上ある図では、JSON 全体を一度に生成しないでください。セクションごとに作成します。

最初にすべてのセクションを計画する — 要素 ID、位置、セクションをまたぐバインディングを列挙します
セクション 1 を記述する — 初期要素を含むファイルを作成します
セクション 2 を追加する — ファイルを読み込み、新しい要素を elements 配列に追加します
繰り返す — すべてのセクションが完成するまで続けます
最終確認を行う — すべての boundElements と startBinding／endBinding の参照に一貫性があることを確認します

セクションごとに要素のシードの名前空間を分け（100xxx、200xxx、300xxx）、衝突を避けます。

エクスポート

オプション A：Kroki API（SVG のみ — インストール不要）

# SVG via Kroki API
curl -s -X POST https://kroki.io/excalidraw/svg \
  -H "Content-Type: text/plain" \
  --data-binary "@diagram.excalidraw" \
  -o diagram.svg

# Via local Kroki Docker (offline)
curl -s -X POST http://localhost:8000/excalidraw/svg \
  -H "Content-Type: text/plain" \
  --data-binary "@diagram.excalidraw" \
  -o diagram.svg

オプション B：ローカル CLI（PNG + SVG）

# PNG at 2x scale, with background baked in (recommended)
excalidraw-brute-export-cli -i diagram.excalidraw -o diagram.png -f png -s 2 -b true

# PNG at 1x scale
excalidraw-brute-export-cli -i diagram.excalidraw -o diagram.png -f png -s 1 -b true

# SVG
excalidraw-brute-export-cli -i diagram.excalidraw -o diagram.svg -f svg -s 1 -b true

必須フラグ： -f（形式：png または svg）と -s（スケール：1、2、または 3）。

オプションのフラグ： -b true を指定すると、viewBackgroundColor が画像に反映されます。デフォルトでは背景は透明です。そのため、透明な背景にしたい場合は -b を省略するか（または -b false を渡します）。-d true を指定するとダークモードでエクスポートされます。-e true を指定するとシーンが埋め込まれ、PNG／SVG を excalidraw.com で編集可能な図として再度開けるようになります。（長形式のオプションも使用できます：--background、--dark-mode、--embed-scene、--format、--scale、--input、--output。）

レンダリングの確認

図の良し悪しは JSON からは判断できません。 JSON が完璧に見えても、画像ではテキストが切れていたり、ボックスが重なっていたり、矢印が図形を突き抜けていたりすることがあります。エクスポートしたら、結果を確認して修正してください。これが最も効果の高い手順です。

PNG にレンダリングします（画像は表示できる形式である必要があります。ユーザーが最終的に SVG を希望していても、SVG ではなく PNG を使用します）。
```
excalidraw-brute-export-cli -i diagram.excalidraw -o /tmp/check.png -f png -s 2 -b true
```
/tmp/check.png を表示します（Claude は PNG を直接読み取れます）。目視での監査にはローカル CLI が必要です。Kroki のみ（SVG）の場合は、以下の構造チェックを行ってください。

画像を監査します：

確認項目	修正方法
テキストが図形内で切れている／はみ出している	図形の幅を広げる（`max(160, charCount * 9)`、CJK の場合は×2）か、`\n` で事前に折り返します
ボックスやラベルが重なっている	Spacing Reference を使って間隔を調整します（40px 以上）
矢印が図形をまっすぐ突き抜けている	始点と終点を中心ではなく、図形の境界に移動します
矢印が見えず、ラベルだけが表示されている	ラベルの `width` を縮めてテキストに合わせます
要素がキャンバスから外れている、または接続されずに浮いている	位置を調整する／接続します
同型性テスト：すべてのテキストを頭の中で削除しても、構造だけで意図が伝わりますか？	伝わらない場合、問題はラベルではなくレイアウトです。構成を見直してください

JSON を修正して再エクスポートします。 問題がなくなるまで繰り返します。通常は 1～3 回です。要素が 2～3 個の単純な図の場合のみ省略できます。

レビューループ

レンダリングの確認では不具合を修正し、レビューループではユーザーの希望を反映します。レンダリングに問題がないことを確認したら、図を提示してフィードバックを受け取り、各リクエストに対して 最小限の .excalidraw 編集を行って再エクスポートします。

ユーザーのリクエスト	編集操作
ラベルを変更する	`text`（またはバインドされたラベル要素）を編集します
色を変更する	要素の `backgroundColor`／`strokeColor` を更新します
要素を追加／削除する	要素を追加または削除します（`boundElements`／バインディング参照も修正します）
移動／サイズ変更	`x`／`y`／`width`／`height` を更新します
構成変更／経路変更	パターンの間隔と経路のルールを適用し直すか、再生成します

各回で同じ diagram.excalidraw／出力ファイルを上書きします。v1、v2、…のようなファイルは作成しないでください。
編集のたびに レンダリングの確認を再実行します（変更によって新たに切れや重なりが生じることがあります）。
安全策： 5 回繰り返したら、ユーザーに excalidraw.com で微調整することを提案します。出力では矢印のバインディングが維持されるため、完全に編集可能な状態で開けます。

アンチパターン

大きな背景／ゾーンの長方形には、決して text を配置しないでください。 Excalidraw では図形の中央にテキストが配置され、内包された要素と重なります。代わりに、ゾーンの上部に配置した独立した text 要素を使用してください。

ゾーンをまたぐ矢印は避けてください。 長い斜めの矢印は、視覚的にごちゃついた図になります。矢印はゾーン内、またはゾーンの端に沿って引いてください。ゾーンをまたぐ接続が避けられない場合は、外周に沿って引いてください。

矢印ラベルは控えめに使用してください。 ラベルを矢印にバインドし（矢印ラベルを参照）、線がテキストを貫通するのではなく、テキストの背後で隠れるようにしてください。ただし、ラベルの width は矢印の長さではなく、テキストに合わせてください。ラベルは12文字以下にし、接続された図形の間に120px以上の空間を確保してください。接続の意味が文脈から明らかな場合は、ラベルを省略してください。

ほかの要素を含むコンテナーに、塗りつぶした背景を使用しないでください。 ゾーン／コンテナーの長方形には opacity: 30（または25～40の範囲）を設定し、内包された要素が見えるようにしてください。

テキスト要素には、必ず strokeColor を明示的に設定してください。 テキストの strokeColor は、描画されるテキストの色です。省略すると、テキストが親図形の背景色を継承して見えなくなる場合があります。テキストカラーパレットから #1e293b（タイトル）、#334155（ラベル）、または #64748b（説明）を使用してください。

よくある間違い

間違い	修正方法
Kroki が HTTP 400 を返す	`-H "Content-Type: text/plain"` を送信してください（`application/json` は使用しないでください。Kroki はこれを `{"diagram_source": ...}` ラッパーとして読み取り、拒否します）。また、`"type": "excalidraw"` と `"elements"` 配列を含む有効な JSON であることを確認してください
Kroki が SVG しか出力しない	PNG にはローカル CLI（`excalidraw-brute-export-cli`）を使用してください
「Missing required flag」エラーでエクスポートに失敗する	常に `-f png` と `-s 2` を指定してください
「Executable doesn't exist」エラーでエクスポートに失敗する	`npx playwright install firefox` を実行してください
macOS：ファイル選択ダイアログの待機中にタイムアウトする	上記の macOS Meta パッチを適用してください
矢印の `points` が原点を基準にしていない	`points` は常に `[0,0]` から始まります
要素に `id` がない	要素ごとに説明的な文字列 ID を使用してください
要素が重なっている	間隔の参考表を使用してください。最小間隔は40pxです
excalidraw.com で矢印を操作できない	バインドされたすべての矢印／テキストを参照する `boundElements` を図形に追加してください
矢印／線が図形をまっすぐ貫通する	中心ではなく、図形の境界上に端点を設定してください。バインドしても静的エクスポートではクリッピングされません
矢印が見えず、ラベルだけが表示される	バインドされたラベルの `width` が矢印全体に及んで線を隠しています。ラベルの `width` はテキストに合わせて設定してください（`charCount * 9`）
エクスポートした PNG／SVG に背景がない	CLI のエクスポートはデフォルトで透明です。`viewBackgroundColor` を適用するには `-b true` を指定してください
テキストが図形内で中央揃えにならない	テキストに `containerId` を設定し、図形の `boundElements` にもテキストを追加してください
すべてのテキストが同じサイズ	フォントサイズの階層を使用してください：28 → 24 → 20 → 16 → 14
図が単調に見える	パレットの意味に沿った色を適用し、60-30-10 のルールに従ってください
テキストが見えない／背景と同じ色	テキスト要素には常に暗い色（`#1e293b`、`#334155`、または `#64748b`）の `strokeColor` を設定してください
ゾーン／コンテナー内でテキストが重なる	テキストをゾーンの長方形にバインドしないでください。上部に独立したテキストを配置してください
図形内のテキストが途中で切れる	幅の計算式 `max(160, charCount * 9)` を使用し、CJK の場合は2倍にしてください
`boundElements: []` が問題を引き起こす	空の boundElements には `null` を使用し、`[]` は決して使用しないでください

Markdown 対応

ログインしてコメント

基本情報

作者: agents365-ai
リポジトリ: agents365-ai/365-skills
カテゴリ: デザイン・UI
インストール数: 4,607
GitHub スター: 97

問題を報告