テキストからフローチャートを描く

書いたコードがそのまま図になる

フローチャートをテキストで書くと（ノードを1行、矢印を1行という具合に）、入力しながらその場で図としてレンダリングされます。このツールが使うのは Mermaid のフローチャート記法 — mermaid.live をはじめ多くのドキュメントツールで使われているのと同じテキスト形式です。図は graph または flowchart で始まり、向きの指定、ノードと接続の並びが続きます。

このツールが担うのは1つの役割だけです。フローチャート記法を入力すると、SVG または PNG の画像が出てきます。Mermaid はシーケンス図・ガントチャート・クラス図なども描けますが、このツールはフローチャートだけに対応しています — これは機能不足ではなく、意図的なスコープの絞り込みです。描いた図をまた編集可能なコードに戻す機能もありません。画像をダウンロードしたら完了です。

図が端末から出ない理由

ここでのプライバシーは約束ではなく仕組みです。送信先のサーバーが存在しないため、アップロードという工程がそもそもありません。

• 解析とレンダリングはすべてブラウザ内で行われます。
• ページは静的ファイルとして配信され、フローチャートのテキストを伴うリクエストは送信しません。
• ソースは公開されており、誰でも読めます（MIT）。
• オフラインで動作します。これは、データが端末から出ないからこそ可能です。

ご自分で確かめるなら、入力中にブラウザの Network パネルを開いてください。テキストを運ぶリクエストは出ていません。 ソースを読む。

使い方

1. フローチャートを入力する

   テキストボックスに記法を書きます。graph または flowchart で始め、続けてノードと矢印を書きます（例: A[開始] --> B[終了]）。書き方に迷ったら「サンプルを読み込む」をクリックしてください。

2. ライブプレビューを見る

   入力が止まってから約300ミリ秒後に、図が自動的に再描画されます。対応するのはフローチャートのみで、他の図種を入力するとメッセージが表示されます。

3. 構文エラーを直す

   行が解析できない場合、推測はせずメッセージを表示します。直前に動いていたコードと見比べて修正してください。

4. 書き出す

   SVG をダウンロードすると、Illustrator や Inkscape で編集できる拡大縮小可能なベクター画像になります。PNG をダウンロードすると、資料やスライド向けのラスター画像になります。

よくある質問