ASCIIダイアグラムエディター - テキスト図表をオンライン作成

ボックス、矢印、線をASCIIまたはUnicodeテキストで描画。コードコメントやドキュメントに最適 — 100%クライアントサイド、データ送信なし。

100%

200 x 100

ツールを選択してキャンバスに描画を開始

よくある質問

ASCIIダイアグラムエディターとは何ですか？

ASCIIダイアグラムエディターは、グリッドベースのキャンバス上でASCIIまたはUnicode文字を使用してボックス、線、矢印、テキストを視覚的に描画できるオンラインツールです。画像ファイルを生成するグラフィカルなダイアグラムツールとは異なり、このエディターはソースコードのコメント、READMEファイル、メール、ターミナル出力、プレーンテキストドキュメントに直接埋め込めるプレーンテキストを出力します。

このASCIIダイアグラムエディターの使い方は？

ツールバーから描画ツールを選択します：ボックス、線、矢印、テキスト、消去、フリーハンド。キャンバス上でクリック＆ドラッグして描画します。文字セットトグルでASCIIモード（+, -, |）とUnicodeモード（┌, ─, │）を切り替えます。ダイアグラムが完成したら、コピーボタンでクリップボードにコピーするか、.txtファイルとしてダウンロードします。

ダイアグラムデータは安全ですか？サーバーに送信されますか？

すべての描画・編集操作はブラウザ内で100%クライアントサイドで実行されます。ダイアグラムデータ、キャンバスの状態、ユーザー情報がサーバーに送信されることは一切ありません。ダイアグラムはブラウザのメモリと自動保存用のlocalStorageにのみ存在します。

ASCIIモードとUnicodeモードの違いは何ですか？

ASCIIモードは基本的な文字を使用します：角に+、横線に-、縦線に|。あらゆるテキストエディタやターミナルで正しく表示されます。Unicodeモードは┌、─、│などのボックス描画文字を使用し、より洗練されたプロフェッショナルなダイアグラムを作成します。Unicodeモードでは5つの線スタイル（細線、太線、二重線、破線、丸角）もサポートしています。

既存のASCIIダイアグラムをインポートできますか？

はい。インポートボタンをクリックして既存のASCIIダイアグラムを貼り付けてください。.txtファイルのアップロードも可能です。インポート後はすべての描画ツールで編集できます。

キャンバスのサイズ制限はありますか？

デフォルトのキャンバスは200列×100行（20,000セル）です。最大500列×300行（150,000セル）まで対応しています。フローチャートやネットワーク図など、ほとんどのダイアグラムにはデフォルトサイズで十分です。

エディターは作業を自動保存しますか？

はい。キャンバスの状態は編集のたびにlocalStorageに自動保存されます。ページを再訪問すると最後のダイアグラムが自動的に復元されます。永続的な保存には.txtファイルとしてエクスポートしてください。

ASCIIダイアグラムの一般的な使用例は？

ASCIIダイアグラムは幅広く使用されています：ソースコードコメント、READMEファイル、技術仕様書やRFC、ターミナル/CLIツール、メールやチャット、gitコミットやPR、プレーンテキストドキュメント。

コード例

// ASCII Diagram Drawing Primitives

function createGrid(width, height) {
  return Array.from({ length: height }, () =>
    Array.from({ length: width }, () => ' ')
  );
}

function drawBox(grid, x, y, w, h, mode = 'ascii') {
  const c = mode === 'unicode'
    ? { tl: '┌', tr: '┐', bl: '└', br: '┘', h: '─', v: '│' }
    : { tl: '+', tr: '+', bl: '+', br: '+', h: '-', v: '|' };

  grid[y][x] = c.tl;
  grid[y][x + w - 1] = c.tr;
  grid[y + h - 1][x] = c.bl;
  grid[y + h - 1][x + w - 1] = c.br;

  for (let i = x + 1; i < x + w - 1; i++) {
    grid[y][i] = c.h;
    grid[y + h - 1][i] = c.h;
  }
  for (let j = y + 1; j < y + h - 1; j++) {
    grid[j][x] = c.v;
    grid[j][x + w - 1] = c.v;
  }
}

function drawArrow(grid, x1, y1, x2, y2) {
  if (y1 === y2) {
    const [s, e] = x1 < x2 ? [x1, x2] : [x2, x1];
    for (let i = s; i <= e; i++) grid[y1][i] = '-';
    grid[y1][x2] = x2 > x1 ? '>' : '<';
  } else if (x1 === x2) {
    const [s, e] = y1 < y2 ? [y1, y2] : [y2, y1];
    for (let j = s; j <= e; j++) grid[j][x1] = '|';
    grid[y2][x1] = y2 > y1 ? 'v' : '^';
  }
}

function exportText(grid) {
  return grid.map(row => row.join('').trimEnd())
    .join('\n').replace(/\n+$/, '');
}

// Example: Simple flowchart
const grid = createGrid(30, 12);
drawBox(grid, 5, 0, 12, 3);
for (let i = 6; i < 16; i++) grid[1][i] = ' ';
grid[1][8] = 'S'; grid[1][9] = 't'; grid[1][10] = 'a';
grid[1][11] = 'r'; grid[1][12] = 't';
drawArrow(grid, 10, 3, 10, 4);
drawBox(grid, 3, 5, 16, 3);
drawArrow(grid, 10, 8, 10, 9);
drawBox(grid, 5, 10, 12, 3);
console.log(exportText(grid));