ミニゲーム: ダイアグラムメーカー

概要

ダイアグラムメーカーは、MiniExp ユーティリティカテゴリに収録された draw.io 互換の図表制作ツールです。 1200×720 ピクセルのキャンバス上でノードとコネクタを配置し、PNG/JPG/BMP への画像書き出しや draw.io XML の読み書きに対応します。作図操作はミニゲーム EXP とも連動しており、画面下部のフッターに現在の獲得量が表示されます。

画面構成

タイトルバー: 現在のファイル名と未保存マーク（*）、および「新規」「開く」「保存」「書き出し」の各ボタンが並びます。書き出しは PNG/JPG/BMP を選べるドロップダウン式です。
ツールパレット: 左端に縦配置されており、「選択」「四角」「楕円」「テキスト」「コネクタ」「削除」の 6 種類のツールを切り替えられます。
キャンバス: 中央の SVG ベースの作業領域です。グリッドの表示とスナップ挙動はフッターから切り替えられます。
プロパティパネル: 右側に表示され、選択中のノード 1 件に対して位置・サイズ・色・文字属性を編集できます。複数選択時は入力欄が無効化されます。
フッター: 左側にズームスライダー（25〜200%）、グリッド表示とスナップのトグル、右側に Undo/Redo ボタンと EXP 表示が並びます。

ファイル操作

新規: 未保存の変更がある場合は確認ダイアログのあと、空の図面を初期レイヤー込みで再生成します。
開く: .drawio / .dio / .xml のほか、埋め込みデータを含む PNG/JPG/BMP から draw.io XML を抽出して読み込めます。
保存: 現在の図面を draw.io 互換 XML としてダウンロードします。保存後は未保存マークが消え、ローカルストレージへ状態が書き戻されます。
書き出し: 現在のキャンバスを描画して PNG/JPG/BMP のいずれかをダウンロードします（JPG/BMP の背景は白で塗りつぶされます）。

ファイル名・ズーム・グリッド/スナップ設定・直近の図面はローカルストレージに保持され、次回起動時に復元されます。さらに、未保存の変更が続く場合は 60 秒ごとに自動保存スロット（最大 5 件）へスナップショットを記録します。

ツールの使い方

選択: ノードをクリックすると選択され、ドラッグで移動できます。Shift クリックや範囲選択は未実装です。
四角 / 楕円: キャンバスをクリックした位置に 160×90 ピクセルのノードが追加されます。矩形は角丸 6px、楕円は中心半径で描画されます。
テキスト: 160×60 ピクセルのテキストノードを追加します。文字列はプロパティパネルのテキスト欄から編集します。
コネクタ: 始点ノードをクリックしたあと、終点ノードをクリックすると矢印付きの直線コネクタが生成されます。ドラッグ中は点線プレビューが表示されます。
削除: 対象ノードまたはコネクタをクリックすると、その要素と接続関係を削除します。

プロパティ編集

単一ノードが選択されているときは、プロパティパネルから次の項目を更新できます。

X / Y: 左上座標（グリッドスナップ有効時は 10px 単位に丸められます）。
幅 / 高さ: ノードサイズ。最小値は 10px です。
塗り / 線 / 線幅: 塗りつぶし色、枠線色、線幅。
文字色 / 文字サイズ / テキスト: 文字スタイルと本文。値を変更すると即座にキャンバスへ反映され、履歴にも記録されます。

プロパティを変更した場合は未保存フラグが立ち、自動保存の対象になります。

補助機能とショートカット

ズームスライダーで 25〜200% の拡大率を切り替えられます。倍率表示はフッター左側に反映されます。
グリッド表示とスナップは独立して切り替え可能です。スナップを無効にするとドラッグ・追加時の丸め処理がなくなります。
Undo/Redo は最大 100 ステップの履歴を保持し、ショートカット Ctrl+Z / Ctrl+Shift+Z（または Ctrl+Y）も利用できます。
Delete キーで選択中の要素を削除できます。
システムのライト/ダークテーマに追従して配色が自動調整されます。

EXP の獲得

ダイアグラムメーカーは操作内容に応じて EXP を付与します。付与額には 5 秒のクールダウンがあり、同じ操作の連打で増殖しないよう制御されています。

アクション	EXP	備考
ツール起動（初期表示）	+5	起動直後に付与されます。
ノード編集	+2	追加・移動・削除などの形状操作。
コネクタ編集	+2	追加や接続の更新。
外部ファイル読込	+8	draw.io XML / 画像からのインポート。
XML 保存	+10	「保存」で出力した際に加算。
画像書き出し	+6	PNG/JPG/BMP のいずれかをエクスポート。

既知の制限

レイヤーの追加・並べ替え UI は未実装ですが、インポートした図面のレイヤー属性は維持されます。
複数選択やドラッグ選択はサポートしていません。必要に応じてノードを個別に編集してください。
コネクタのポイント編集や曲線化、矢印スタイル変更は行えません。