フローチャート作成
フローチャート作成. 処理と分岐を編集し、Mermaid・SVG・PNG に保存。 ファイルは端末内に留まり、ブラウザーで処理されます。
ツールを使うには JavaScript を有効にしてください。ファイルはブラウザー内で処理されます。
処理の流れを読みやすい手順にする
サンプルを使うか、空のノードを追加して作成します。文字は「申請を確認」「返信を送信」のような短い動作にすると読みやすくなります。開始と終了には角丸、処理には長方形、判断にはひし形、入力や出力には平行四辺形を使えます。図形は追加時にも、ノードを選択した後にも変更できます。プロパティでは文字、図形、座標を編集し、「変更を適用」で確定します。ドラッグでおおまかな位置を決め、座標入力で複数の手順を整列できます。ノードを削除すると接続も削除されるため、存在しない端点は残りません。
分岐を接続し、Mermaid の下書きを読み込む
接続フォームで始点と終点を選び、必要なラベルを付けます。判断の周辺には「はい」「いいえ」などを付けると、進む方向が明確になります。接続は画面上または一覧から選択して更新、削除できます。flowchart TB、LR、BT、RL で始まる簡単な Mermaid も読み込めます。基本の四つの図形、連続した矢印、ラベル付き矢印に対応します。サブグラフ、スタイル、クリック操作、設定指令は黙って無視せずエラーを表示します。テキスト全体を検証してからキャンバスを置き換えるため、不正な入力で現在の図は失われません。確定済みの編集は「元に戻す」で取り消せます。
画像と編集用データの両方を保存する
このエディターはブラウザー内で動作し、図の内容を変換サーバーへ送信しません。アカウントも不要です。変更は、このブラウザーとツールに対応する localStorage に保存されます。ただし、自動保存はバックアップではありません。プライベートブラウジング、サイトデータの削除、端末の変更によって下書きを復元できなくなることがあります。作業の区切りで Mermaid ファイルをダウンロードしてください。図の構造と、ノードの座標を記録するコメントが含まれます。SVG は文書や拡大印刷、PNG はスライドやメッセージに適しています。画像には編集ボタンは入りません。共有前にファイルを開いて文字と接続を確認してください。PNG が大きすぎる場合はエラーを表示するため、ノードを近づけるか SVG を使用します。 ZIP 一括書き出しでは、同じ状態の PNG、SVG、Mermaid、JSON モデルを一つのファイルにまとめます。このエディターへ戻す際は Mermaid の内容を読み込んでください。
よくある質問
書き出した後も編集できますか？
はい。ブラウザー内のモデルを引き続き編集でき、Mermaid ファイルの内容を再度読み込むこともできます。PNG や SVG は共有用とし、編集用のテキストも保管してください。
スマートフォンやキーボードでも使えますか？
狭い画面ではプロパティがキャンバスの下に表示されます。一覧からノードを選び、座標を変更できます。フォーカスしたノードは矢印キーで移動し、Shift を押すと 1 ピクセル単位になります。