Be Converter

ASCII Art to SVGコンバーター

ASCIIアート、テキスト図、ワイヤーフレーム、等幅スケッチをブラウザ上で直接クリーンなSVGファイルに変換。

ASCII入力

このコンバーターは等幅レイアウトを保持し、文字間隔に依存するASCIIアート、フローチャート、ワイヤーフレーム、ターミナルスケッチ、シンプルなテキスト図に最適です。

リアルタイムSVGプレビュー

変換後、ここにSVGプレビューが表示されます。

エクスポートツール

SVG出力

関連ツール

ASCII ArtからPlantUMLへのコンバーター

ASCIIアートのフローチャート、ボックス＆矢印図、テキストスケッチを編集可能なPlant...

ASCII ArtからUMLへのコンバーター

ASCIIアートのクラススケッチ、テキストボックス図、軽量な構造ドラフトを、編集可能...

SVG から PNG へ変換

SVG ベクターファイルをブラウザ内で PNG 画像に変換します ブラウザ内で素早く処理で...

Compress SVG

Compress and optimize SVG files. Free SVG minifier.

GIFからSVGへのコンバーター

画像トレースを使用してGIF画像をSVGベクター形式に変換。ロゴやアイコン用にラスター...

ASCII ダイアグラムから Mermaid へのコンバーター

ASCII ダイアグラムやテキストフローチャートを、編集可能な Mermaid フローチャート...

ASCII ArtのSVG変換方法

テキスト図を再利用しやすい画像資産にしたいときは、次の流れで変換できます。

  1. 1

    ASCII図を貼り付けてください

    入力パネルにワイヤーフレーム、フローチャート、ターミナルスケッチ、またはテキストアートブロックを追加してください。

  2. 2

    タイポグラフィと間隔を調整

    フォントサイズ、パディング、テキストの色、背景を設定して、最終的なSVGを用途に合わせてください。

  3. 3

    SVGプレビューを生成

    「SVGに変換」をクリックして、プレビューパネルにベクターバージョンを即座にレンダリングしてください。

  4. 4

    結果をコピーまたはダウンロード

    SVGマークアップを直接コピーするか、他のワークフローのためにSVGとJPEGファイルをエクスポートしてください。

なぜこのASCII Art to SVGコンバーターを使うのか？

このページは、文字ベースの図のレイアウトを崩さず、持ち運びやすいベクター画像にしたいという用途に合わせて作られています。

等幅レイアウトを維持

文字間隔が保持されるため、変換後もボックス、矢印、テキストの配置が読みやすいままです。

クリーンなSVGをエクスポート

SVG出力はドキュメント、スライド、デザイン引き継ぎ、レスポンシブWebページで鮮明に表示されます。

ブラウザ上で実行

レンダリングはクライアント側で行われ、高速なワークフローを維持し、アップロードの依存を回避します。

ASCII Art to SVGについてのよくある質問

テキスト図をSVGへ変換するときによくある質問です。

どのようなASCII図が最適ですか？
このツールはフローチャート、ワイヤーフレーム、ボックス図、ターミナルモックアップ、等幅間隔に依存するテキストアートに最適です。特にレイアウトがプレーンテキストで既に読める場合に便利です。
なぜPNGではなくSVGに変換するのですか？
SVGはベクター形式であるため、クリーンにスケールし、ドキュメント、Webサイト、プレゼンテーションで鮮明に表示されます。柔軟な再利用とよりシャープなレンダリングが必要な場合、ラスター形式より優れています。
ラスター画像もダウンロードできますか？
はい。SVGエクスポートに加えて、より広く受け入れられている画像形式が必要なワークフローのためにJPEGバージョンもダウンロードできます。
このASCII to SVGコンバーターはプライベートですか？
変換はブラウザ上で直接実行されるため、レンダリングはローカルで行われ、サーバー側のアップロードパイプラインを回避します。
図の正確な間隔は維持されますか？
等幅テキストの間隔を保持するように特別に設計されており、これはASCII図の主要な要件です。フォントサイズとパディングの設定で最終結果を微調整できます。
ダイアグラムにはどの罫線文字を使うべきですか？
Unicode の罫線文字セットを使ってください：四隅には ┌ ┐ └ ┘、線には ─ │、接合部には ├ ┤ ┬ ┴ ┼、流れには -->, ==>, -> または v ^ の矢印です。等幅フォントではすべてのグリフが同じ幅になるため、枠が閉じ矢印が揃います。枠の中に … やスマートクォートなどのプロポーショナルフォントの句読点を混ぜないでください。
画像ではなく編集可能なダイアグラムが必要です。何を使えばよいですか？
ダイアグラムをコードとして編集し続けたい場合は、同じ ASCII スケッチを「ASCII Art から PlantUML へのコンバーター」で PlantUML に、または「ASCII ダイアグラムから Mermaid へのコンバーター」で Mermaid フローチャートに変換してください。どちらの出力もドキュメントエンジンにそのまま貼り付けて、編集可能な生きたダイアグラムとしてレンダリングできます。完成品の画像アセットが必要なときは、この SVG コンバーターを使ってください。

このASCII to SVGコンバーターについて

このページはシンプルですが有用なワークフローを対象としています：ASCII図を別のデザインツールで作り直すことなくSVGに変換すること。テキストでUIフロー、アーキテクチャメモ、ターミナルモックアップ、軽量ワイヤーフレームをスケッチしている場合、下書きを再利用可能なベクターアセットに素早く変換できます。

ASCII図→SVGツールが役立つ場面

ASCII→SVG変換は、開発者ドキュメント、社内Wiki、スライド資料、Issueスレッド、マークダウンベースのメモ、オンボーディングガイド、技術ブログ記事で役立ちます。テキストファーストのドラフトのスピードを保ちながら、最終出力を視覚的に共有しやすくします。

より良いASCII to SVG出力のためのヒント

  • 変換前に元の図を等幅に適した構造に保ってください。
  • 十分なパディングを使用して、最終画像で矢印や端のラベルが窮屈に見えないようにしてください。
  • ドキュメントやプレゼンテーションでの読みやすさのために、コントラストのある前景色と背景色を選択してください。
  • SVGが予測可能なページの色の上に配置される場合のみ、透明な背景を使用してください。
  • チャットツールやスライドソフトで使用する簡単な画像形式が必要な場合は、JPEGをダウンロードしてください。

適用範囲と制限事項

このツールは意図的にテキストレイアウトの保持とSVGとしてのクリーンなエクスポートに焦点を当てています。図の意味を再解釈したり、ASCIIをセマンティックなフローチャートオブジェクトに自動変換したりすることはありません。この限定された範囲により、結果が予測可能で元のテキストレイアウトに忠実に保たれます。

罫線文字リファレンス

テキストダイアグラムは Unicode の罫線文字ブロックで構成されます。以下のグリフはいずれも等幅フォントでちょうど 1 列の幅を持ち、これが変換後も枠が閉じ矢印が揃う理由です。

Characters Role Typical use
┌ ┐ └ ┘ 四隅 ボックスの四隅を描きます：上に ┌────┐、下に └────┘。
─ │ 線 横線と縦線。繰り返してボックスのサイズを決めます（│ Side │）。
├ ┤ ┬ ┴ ┼ 接合部 線が交わる T 字接合と交差点。例：─┼─ や ├──┤。
--> ==> -> 矢印 水平方向の流れの矢印。==> は通常、強いステップや非同期ステップを示します。
v ^ | 縦方向の流れ ステップの落下：│ 線の下に単独の v があると「下へ」と読めます。
:: == ~~ 破線スタイル グループ化・注釈・レーン用の点線や二重線のセパレーター。

関連する ASCII ダイアグラムツール

ASCII ArtからPlantUMLへのコンバーター 同じテキストスケッチを編集可能な PlantUML ソースに変換し、どこでも再レンダリングできます。 ASCII ダイアグラムから Mermaid へのコンバーター ASCII ダイアグラムから Mermaid フローチャートを生成。GitHub、Notion、ドキュメントサイトに最適です。 ASCII ArtからUMLへのコンバーター ASCII のクラススケッチを Mermaid UML クラス図に変換して、エンジニアリングドキュメントに活用できます。