ノード配列と親子関係で表すマインドマップ
このツールは，一つのマインドマップをMindmapNodeオブジェクトの配列として保持します．各ノードにはid，表示文字列text，親を示すparentId，作業領域上のx・y座標，枠線と接続線に使うcolorがあります．独立したchildren配列は持たず，あるノードの子は「parentIdがそのノードのidと一致する要素」を配列から探して求めます．
初期状態にはルートを含む6個のサンプルノードがあり，選択中のノードはrootです．
ルートノードだけはparentIdがnullで，削除できません．ルート以外を削除すると，再帰的に子を検索して対象ノードとすべての子孫を配列から除き，選択をルートへ戻します．削除前の確認画面や元に戻す操作はありません．子孫を残したまま親だけ削除する機能，別の親へ付け替えて階層を変更する機能，複数ノードを同時選択する機能も備えていません．
編集中の配列はReactの状態としてページのメモリに置かれます．localStorageやIndexedDBへの自動保存，サーバー保存，変更履歴，JSON・OPMLの入出力は実装していません．したがって，画像を書き出さずに再読み込みやページ移動をすると，作成内容を編集可能な状態で復元できません．
子・兄弟ノードの追加，文字編集，色変更
子ノードを追加すると，選択した親の右へ200ピクセル離れた位置に新しいノードを置きます．同じ親の既存の子数を使って上下位置を80ピクセル単位でずらし，新しいノードを選択して文字編集を始めます．ルート直下の子にはカラープリセットを順番に割り当て，それより深い子には親の色を引き継ぎます．これは追加直後の配置規則であり，他のノードとの重なりを検出して避ける処理ではありません．
兄弟ノードは，選択中ノードと同じ親を持ち，選択中ノードの80ピクセル下へ作られます．親を持たないルートには兄弟を追加できません．ノード文字は右側の入力欄から直接変更でき，ノードをダブルクリックした場合はノード内の入力欄で編集できます．入力を確定したときに空文字なら「空のノード」という文字列へ置き換えます．
色は7種類のプリセットから選び，選択中ノードの枠と，そのノードへ入る接続線へ適用します．親の色を変更しても，既存の子孫すべてへ自動伝播するわけではありません．共同編集者のカーソル表示，コメント，アクセス権限，変更の競合解決といった共同編集機能はありません．折りたたみや展開状態も管理しないため，配列内の全ノードを常に描画対象とします．
2000×2000のHTMLノードとSVG接続線
描画対象は幅2000ピクセル，高さ2000ピクセルの固定領域です．各ノードは絶対配置したHTMLのdiv要素として描き，親子を結ぶ線だけを同じ大きさのSVGレイヤーへ描きます．Canvasへノードを描き直す構成ではありません．接続線は三次ベジェ曲線で，親座標から右へ85ピクセル，子座標から左へ85ピクセルの点を端点として計算し，中間の制御点でS字状につなぎます．
端点はノードの実測幅から算出するのではなく固定値を使うため，長い文字でノードの表示幅や高さが変わると，線が枠の中央へ厳密に接続しない場合があります．ノードのドラッグ移動では，マウスを押した位置からの移動量を現在のズーム率で割り，x・y座標を更新します．左端と上端は20ピクセル未満にならないよう制限しますが，右端と下端には上限を設けていないため，ノードを2000×2000の領域外へ移せる場合があります．
操作画面で見える枠は高さ550ピクセルで，はみ出した部分を隠します．背景の点模様は表示位置に合わせて移動しますが，作業領域そのものが無限に拡張されるわけではありません．マウス用イベントでドラッグを実装しており，タッチ専用の移動処理やモバイル端末での操作性は保証していません．
自動配置，ズーム，パン，キーボード操作
自動配置は，ルートを座標［150, 240］へ置き，各階層を右へ220ピクセルずつ進めます．末端ノードには65ピクセルの高さ予算を割り当て，子を持つノードは子孫の高さ予算を合計します．その値を使って兄弟の上下位置を順に決める再帰処理です．単純な階層配置を一度計算する機能であり，文字サイズ，接続線，作業領域の右端までを考慮した一般的な衝突回避や最適配置ではありません．
深い階層や多数のノードでは，領域外にはみ出したり，見づらい配置になったりする可能性があります．
ズームは50%から180%まで10%刻みで変更します．パンはノード以外の背景をマウスでドラッグして，描画対象全体へtranslateを適用します．リセット操作はズームを100%，パンを［0, 0］へ戻します．ズームやパンは表示変換であり，ノードが持つ2000×2000上の座標値は変えません．自動配置後は表示位置を［50, 40］へ移します．
キーボードでは，Tabが選択中ノードへの子追加，Enterが兄弟追加，DeleteまたはBackspaceが削除です．ルート選択中のEnterは，ルートに親がないため何も追加しません．ルートをDeleteまたはBackspaceで削除しようとすると，削除できない旨を通知します．ノード文字の編集中，またはinput・textareaにフォーカスがある間は，これらのショートカットを処理しません．
PNG・SVG画像を作るhtml-to-imageの処理
画像保存では，html-to-imageのtoPngまたはtoSvgへ2000×2000の描画対象DOMを渡します．画面上のズームやパンが画像へ混ざらないよう，処理前にズームを100%，パンを［0, 0］へ一時的に戻し，requestAnimationFrameを二回待ってから画像化します．
背景色には濃い紺色を指定します．生成したデータURLをダウンロード用リンクへ設定し，mindmap.pngまたはmindmap.svgという名前で保存操作を開始した後，元のズームとパンへ戻します．
SVG保存も，ツールがノードを純粋なSVG図形へ組み替える処理ではありません．html-to-imageがHTMLノード，CSS，接続線，フォントを含むDOM表示をSVG形式のデータURLへ変換します．その結果はブラウザや利用フォントに依存し，純粋なベクター要素だけで構成されること，他のSVG編集ソフトで各ノードを再編集できること，拡大してもすべての要素が無劣化であることを保証しません．
画像生成中はPNG・SVG両方の保存ボタンを無効にし，処理中表示へ切り替えます．成功時は保存メッセージ，例外時は失敗メッセージを画面に出します．2000×2000のDOM全体を一度に画像化するため，ノード数，ブラウザのメモリ，フォントやスタイルの読み込み状態によっては時間がかかったり，生成に失敗したりする場合があります．
利用目的と編集データを失わないための確認点
このエディタは，中心テーマから子項目を増やし，アイデア，授業内容，企画の論点などを親子関係として一時的に整理する用途を想定しています．ドラッグはノードの表示座標を変える操作であり，ドラッグ先のノードへ親子関係を付け替える操作ではありません．自動配置後にも個別の座標を調整できますが，再度自動配置すると階層計算による位置へ置き直されます．
現在の機能範囲には，自動保存，元に戻す・やり直す履歴，編集用ファイルの保存と読み込み，JSON・OPML入出力，共同編集，ノード折りたたみ，検索，印刷用の改ページ調整は含まれません．PNG・SVGは完成時点の見た目を共有するための画像であり，このツールへ読み戻して編集を続けるためのプロジェクトファイルではありません．
特にノード削除は子孫も含めて即時に反映されるため，削除前に対象を確認する必要があります．
ノード操作と画像生成はページ上のJavaScriptで実行し，入力したマップをサーバーへ保存する機能は設けていません．ただし，それだけでページ全体の外部通信がないこと，情報が常に保護されること，あらゆるブラウザで同じ画像になることを保証するものではありません．重要な構想を扱う場合は，必要な段階ごとに画像を保存し，保存ファイルが開けることと文字・線が期待どおり描かれていることを確認してください．