ビジネス / 図

フローチャート作成:Mermaidプレビューと簡単ビルダー

Mermaidテキストでフローチャートを作成し、リアルタイムでプレビューできます。処理、判断、開始・終了、入力・出力のノードを追加してラベル付きで接続したり、3つのオリジナルテンプレートから始めたりできます。

フローチャート作成:Mermaidプレビューと簡単ビルダー: Mermaidテキストでフローチャートを作成するか、ビルダーで手順、判断、接続を追加できます。入力中に図が更新されるため、例から始めてテキストをコピーしたり、フローチャートをSVGまたはPNGとしてダウンロードしたりできます。 サーバーへのファイルアップロードは一切なく、100%ブラウザ内でローカル実行します。

実行回数
ブラウザ内で
コスト
無料 · 登録不要
提供状況
すぐに使えます
フローチャート作成ローカル処理

完全にブラウザ内で実行します

シンプルな作成ツール

入力するとプレビューが更新されます。作成ツールはテキストにステートメントを追加します。設定ディレクティブ、カスタムスタイル、クリックハンドラーは無効です。

プレビューを描画中…

フローチャートの構文

Mermaidのフローチャート言語は、ノード、エッジ、ラベル付きの分岐に対応しています。このツールが対応するのはこの言語のフローチャート部分で、ビルダーは入力テキストの末尾に新しい行を追加します。公式構文:https://mermaid.js.org/syntax/flowchart.html

セキュリティとライセンス

図は、MITライセンスのオープンソースライブラリであるMermaidを使い、ブラウザ上の厳格なセキュリティモードで描画されます。ラベル内のHTML、クリック操作、設定ブロックは許可されないため、貼り付けた図からコードが実行されることはありません。公式のセキュリティ設定:https://mermaid.js.org/config/schema-docs/config-properties-securitylevel.html

使い方

  1. 処理、判断ツリー、ログインのテンプレートを選ぶか、Mermaidのフローチャートテキストを入力します。
  2. ビルダーでノードを追加し、既存のノードIDを指定して接続します。必要に応じて接続にラベルを付けます。
  3. 表示された構文エラーを修正し、SVG、PNG、またはMermaidテキストをダウンロードします。

プライバシーと制限事項

Mermaidテキストはブラウザ内でのみ処理されます。アップロードもローカルストレージへの保存も行いません。設定ディレクティブ、コールバック、画像、外部リソースは無効になっています。

関連ツール

よくある質問

ビルダーではノードにどのような名前が付けられますか?

次に未使用のN番号IDが使われます。ノードを接続するには、テキスト内のIDを入力します。ビルダーは引用符、角括弧、その他のラベル内の句読点を安全にエンコードします。

すべてのMermaid図の種類を使用できますか?

このツールで使用できるのは、フローチャートまたはグラフの構文だけです。その他の図の種類には、既存のMermaidエディターを使用してください。

エラーはどのように表示されますか?

Mermaidが行番号を提供する場合、パーサーエラーには行番号が表示されます。セキュリティエラーと入力制限エラーには、それぞれ別のメッセージが表示されます。

テンプレートは他の場所からコピーしたものですか?

いいえ。シンプルな処理フロー、判断ツリー、ログインフローは、このツール用に作成したオリジナルの短い例です。

無料ツール · ブラウザ内で · アカウント不要