ディレクトリマップの作り方・使い方

フォルダ・ファイルのノードを矢印でつないで、ディレクトリマップ／サイト構成図を作るためのガイドです。

基本の使い方（5ステップ）

1. サンプルを読み込む：右上のサンプルを押すと、ツリーの例が画面中央に出ます。まずはこれを編集するのが早いです。
2. フォルダ・ファイルを追加：ツールバーでフォルダ／ファイルを選び、キャンバスをクリックして配置。ダブルクリックで名前を編集できます。
3. 矢印でつなぐ：コネクタツールを選び、あるノードから別のノードへドラッグ。同じ親から出た線は自動で枝分かれします。
4. 見た目を整える：矢印は直角／直線・片方向／双方向／なしをアイコンで切替。色は色相環から選択。空きスペースをドラッグで範囲選択できます。
5. 書き出す：PNG画像、またはJSONで保存。JSONは読み込みで復元でき、内容は自動保存されます。

ツールバーの見かた

• ノード：フォルダ📁／ファイル📄／付箋／四角・円・ひし形
• 矢印：コネクタでノード間をドラッグ。形（直線／直角）と端（→ 片方向／↔ 双方向／— なし）を切替
• 色：色相環アイコンをクリックしてパレットから選択（未選択時はテーマ既定色）
• ズーム：−／＋、表示%クリックで100%に戻す
• アクション：削除・PNG書き出し・JSON保存・JSON読み込み・全消去
• サンプル：右端。ツリーの例を読み込む

ショートカット一覧

※ Windows／Linux では ⌘ を Ctrl に読み替えてください。

よくある質問

無料で使えますか？

はい。完全無料・登録不要で、ブラウザだけで使えます。

作った内容は保存されますか？

内容はお使いのブラウザ（localStorage）に自動保存されます。JSONで書き出して保存・共有し、あとから読み込んで復元することもできます。

矢印を直角や双方向にできますか？

できます。ツールバーの矢印アイコンで、直角（枝分かれ）／直線、片方向／双方向／矢印なしを切り替えられます。ほぼ揃った親子の矢印は自動でまっすぐに整列します。

複数のノードをまとめて操作できますか？

空きスペースをドラッグすると範囲選択できます。Shift＋クリックで選択の追加、⌘+C / ⌘+V でコピー＆ペースト、選択したノードはまとめて移動できます。

ダークモードはありますか？

あります（初期状態はダークモード）。ヘッダー右上の☀／🌙ボタンでライト／ダークを切り替えられます。

画面の移動や拡大縮小はどうしますか？

マウスホイール（トラックパッドの2本指スクロール）でキャンバスを移動、⌘/Ctrl＋ホイールで拡大縮小します。