アプリトップへ戻る

キーボードショートカット図 生成

キーボード（JIS / JIS-Mac / US / Mac、矢印・テンキー付き）上に押すキーや操作手順を図示します。盤面クリックで keymap 記法（Mermaid 外部ダイアグラム）が自動生成される双方向エディタです。

キーをクリックするか記法を入力すると、ここに図が表示されます。

使い方
  1. ハイライトモードでキーをクリックすると強調の ON / OFF。
  2. ラベルモードでキーをクリックして注釈文字を入力（空で削除）。
  3. 実キー：現在モードは、押している間だけキーが光ります（キーボードテスター風。離すと消えます。組み合わせを残したいときは「記憶」「手順」を使用）。
  4. 実キー：記憶モードは、押したキーが消えずに累積します（「すべて解除」でクリア）。
  5. 実キー：手順モードは、1 押下ごとに手順（番号バッジ）が増えます。手順→アニメ化を押すと、記録した手順がそのままコマ送りアニメ（シーン記法）に変換されます。一部の OS / ブラウザ固有ショートカットは抑止できない場合があります。
  6. 色チップで 4 グループを色分けでき、凡例欄でラベルを付けると 1 枚で複数ショートカットを比較できます。コンパクトでテンキー/矢印を隠せます。
  7. 記法をコピーで Markdown 用のコードブロックを、共有 URL をコピーでこの図を再現するリンクを取得できます。
  8. テーマはページが OS のライト/ダークに自動追従し、プレビューと出力（PNG / SVG）の配色は「テーマ」で選べます。
  9. シーン記法（アニメ）: chord: 行を縦に並べる（間に sleep: 行で消灯ポーズを挟める）と、文書順のコマ送りアニメになります。例: chord: Win+C "コピー" → sleep: 1000 → chord: Win+V "ペースト" で「コピー → 間 → ペースト」。キーのコマの長さは直近の sleep 値に追従します。アニメは SVG に埋め込まれるため、書き出した SVG でも再生されます（PNG は静止画）。
  10. キーへのコメント: chord: Win+C "コピー" のように引用符で書くと、そのステップの最後のキーに注釈が付きます。アニメではそのコマの点灯中だけ表示され、静的バッジ（chord 1 行）では常時表示です。常に表示したい注釈は label: 行を使います。
  11. アニメを手動でコマ撮り: 「実キー：記憶」や盤面クリックで 1 コマ分のキーを強調 →「sleep（コマ追加）」でそのコマを記録（強調は自動でクリアされます）→ 次のキー…を繰り返すと動きを 1 コマずつ作れます。何も強調せずに「sleep（コマ追加）」を押すとポーズ（空コマ）になります。各コマの長さは sleep（ミリ秒、既定 1000）です。
  12. 手順（チョード）は記法で chord: Ctrl+K -> Ctrl+S と書くと番号バッジ付きで表示。
  13. キー名は Ctrl / Shift / Alt / Win / Enter / Esc / A–Z / F1–F12 など。別名（cmd, opt, control…）も可。
  14. PNG / SVG でダウンロードできます。処理はすべてブラウザ上で完結します。
モード
色
記法リファレンス
キー意味例
layout配列（jis / macjis / us / mac）layout: mac
highlight押すキーを強調（空白 / + 区切り）。highlight2〜4 で色分けhighlight: Ctrl Shift 4
legend色グループの凡例（/ 区切りで 1〜4）legend: コピー / ペースト
compactテンキー/矢印を隠すcompact: true
theme配色（auto / light / dark）。プレビューと出力に反映theme: dark
chord順に押す操作（1 行なら番号バッジ）。複数行ならコマ送りアニメ（シーン記法）。"…" で最後のキーにコメントchord: Win+C "コピー"
sleep: 1000
chord: Win+V "ペースト"
sleepアニメの消灯ポーズ（ミリ秒）。以降のキーのコマの長さもこの値に追従sleep: 1000
labelキーへの注釈label: 4 "範囲指定"
caption図のキャプションcaption: "保存"