罫線図を編集

全角文字の幅を正しく扱う罫線図エディタ

このツールはUnicode罫線文字(┌┐└┘│─├┤┬┴┼)で描かれた図 — UIワイヤーフレームや簡単な構成図でよく使われる、入れ子になった矩形ボックスの集合 — を読み込み、GUI上で各ボックスを選択・移動・リサイズ・テキスト編集し、結果をプレーンテキストとして書き戻します。

このツールのグリッドモデルは、各セルをUTF-16コード単位ではなく「表示カラム」でアドレッシングします。日本語や中国語の全角文字、絵文字（ゼロ幅結合子で連結された複数コードポイントの絵文字シーケンスも含む）は、1カラムではなく正しく2グリッドカラム分を占めます。そのため、ASCII文字とCJKテキストや絵文字アイコンが混在した図を貼り付けても、最初の全角文字以降で罫線の桁が1〜2桁ズレる、といったことが起きません。

対応しているのは入れ子の矩形ボックスのみです — フリーハンドの線・矢印・円などの一般的なアスキーアートには対応していません。汎用の作図ツールが必要な場合は他をあたってください。設計資料やスクリーンショットの文字起こしから貼り付けた「ボックス+ラベル」形式のワイヤーフレームを組み替えたい場合に、このツールは向いています。

図が外部に送信されない理由

ここでのプライバシーは約束ではなく構造です。アップロード先のサーバーが存在しないため、アップロードという処理自体がありません。

• 解析・編集・描画はすべてブラウザ内で行われます。
• このページは静的ファイルとして配信され、図のテキストを含むリクエストは一切発生しません。
• 図をURLにエンコードして共有するようなリンク機能はありません。
• ソースコードは公開されており、誰でも確認できます（MIT）。
• オフラインでも動作します — これはデータが端末外に出ないからこそ実現できています。

確認したい場合は、編集中にブラウザの Network パネルを開いてみてください。図のテキストを含むリクエストが送信されていないことがわかります。 ソースコードを見る

使い方

1. 図を貼り付ける

   テキストエリアに罫線図を貼り付けるか、「サンプルを読み込む」で小さな例を試してみてください。

2. ボックスを選択して編集する

   キャンバス上のボックスをクリックするか、右側の一覧から選びます。ドラッグで移動、右下角のドラッグでリサイズ、フォームで直接テキスト編集ができます — これらはすべて、数値入力欄とテキストエリアを使ってキーボードだけでも操作できます。

3. ボックスの追加・削除

   「ボックスを追加」で空のボックスを描画するか、選択中のボックスを削除します。移動・リサイズは他のボックスとの重なりを自動回避しません — 単純な描画キャンバスと同様、後から描いたものが上に重なります。

4. 結果を書き出す

   プレーンテキストとしてコピー、.txtファイルとしてダウンロード、または「AI指示用にコピー」でAIチャットにそのまま貼り付けられるbefore/after形式の指示文を取得できます（詳細は下記）。

よくある質問