本文へスキップ

アスキー図エディタ

ASCII Diagram Editor

文字グリッド上に箱・線・矢印・ラベルを描きます。角と交差は隣接セルの有無から自動で決まり、Unicode罫線と純ASCIIを切り替えられます。

アスキー図を手で描くとき苦しいのは角です。┬が来るべき場所に┌を置くと図が微妙に狂い、あとでソースのコメントに入れると決めたら、その文字を一つずつ探して置き換えることになります。この編集器は角を選ばせません。箱がどこにあり、線がどこを走るかだけを言えば、升目ごとに四つの隣のどれが埋まっているかを見て自分でグリフを決めます。ですから線が交差すれば互いを知らないまま┼が出て、図全体を純粋なASCIIに切り替えるのは設定一つで済みます。

🔒 ブラウザの中だけで動きますasciidiagrameditordevelopertext
道具

U+2500 の罫線素片。1995 年ごろから使われているどの等幅フォントにもあります。

選んだ図形

何も選ばれていません。選択の道具に切り替えて図形をクリックしてください。

図

 
角や継ぎ目の文字を人が選ぶことはありません。箱は自分の枠がどこにあるかを、線は自分がどこを通るかを言うだけで、あとはマスごとに、自分が上下左右のどの向きへつながっているかを見て自分の字を決めます。2 本の線が交わると互いを知らないまま ┼ になるのはそのためで、純粋な ASCII への切り替えが絵じゅうの置換ではなく設定ひとつで済むのもそのためです。
ASCII の文字集合はわざと粗くしてあります。11 種類の継ぎ目も 4 つの角も、すべて + ひとつで書きます。ソースのコメント、コミットメッセージ、Makefile、1994 年のフォントを積んだターミナルまで生き延びる図のほうが、きれいでも四角になって届く図より価値があります。
やらないことが 3 つあります。斜めの線は引けません。斜めを描く罫線文字が存在しないからで、斜めにドラッグすると折れ曲がって結ばれます。障害物を避ける自動配線もありません。線は置いたところを通ります。そして箱の中で文字が折り返されることもありません。

使い方

  1. 先に箱を引き、それからつなぎます

    箱の道具でドラッグすれば箱になり、押すだけなら箱と呼べる最小の大きさになります。次に矢印の道具で箱から箱へドラッグします。端点が箱の内側に落ちれば、いちばん近い縁の升目に引き寄せられます。箱へ向かってドラッグするのはそこへ付けるという意味で、真ん中を突き抜ける線が望まれた例はないからです。

  2. 行き先に合う文字集合を選んでください

    READMEやターミナルならUnicodeの罫線素片です。ソースのコメント、コミットメッセージ、Makefileのように文字コードが確かでない場所なら、純粋なASCII、つまり - | + < > ^ v だけを使います。ASCIIの集合はわざと粗く作ってあります。11通りの継ぎ目をすべて+で書きます。無事に届く図のほうが、きれいでも四角になって届く図より優れています。

  3. ラベルは箱に直接打たず、下の欄から入れます

    箱を選んで下の欄にラベルを書くと、箱の中央に自動で置かれ、箱を動かせば付いてきます。箱より長いラベルは折り返さずに切り取られ、どれが切られたかを画面が知らせます。折り返せば図の形が変わってしまい、それはラベルのすることではないからです。

よくある質問

斜めの線を引けますか

引けませんし、それは抜けている機能でもありません。斜めを描く罫線素片が存在しないからです。あのブロックには─と│と角があるだけで、45度のものは一つもありません。縦でも横でもない向きへドラッグすると、代わりに折れ曲がってつなぎます。それが図の望んでいたもので、どちらの脚を先にするかは選べます。

箱を避けて線を回してくれますか

いいえ。障害物を避ける直交自動配線はれっきとしたアルゴリズムが要り、出来の悪いものは自分で置いた直線より劣ります。描いている最中に図を勝手に動かしてしまうからです。線は置いた場所へ行きます。

ここから渡せます

次の一手

このツールが出したものをそのまま受け取れる道具です。

アスキー表の生成

ASCII Table Generator

表を等幅のアスキー・Markdown・罫線文字の枠で描き、READMEやコメントに貼れる形にします。

ブラウザの中だけで動きます

コードの画像化

Code Screenshot

コードの断片を、構文の色分け・ウィンドウ枠・選んだテーマを付けた画像にします。

ブラウザの中だけで動きます

Markdownエディタ

Markdown Editor

Markdownをリアルタイムのプレビュー付きで書き、GFMの表とタスクリストごとHTMLに書き出します。

ブラウザの中だけで動きます

テキストアートを画像に

Text Art to Image

等幅のテキストアートを、フォント・セル寸法・色・背景・透過の有無を指定してPNGやSVGに描きます。等幅が保たれない場所に投稿しても形が崩れません。

ブラウザの中だけで動きます

今日の運勢(干支・星座)

Daily Fortune by Zodiac Animal & Star Sign

その日の日辰と干支や星座に伝わる気質を突き合わせて一日分の文を組みます(日付を種にしているので読み込み直しても引き直せず、日付が変わるまで同じ文です)。

ブラウザの中だけで動きます

相性占い(干支と日干)

Zodiac Compatibility (궁합)

二人の生年月日から干支と日の天干を取り、三合・六合・冲・怨嗔・刑・破・害のどの関係か、二つの日干の五行が相生か相剋かを、伝統的な読みとともに示します。

ブラウザの中だけで動きます