テキスト → フローチャート
Mermaid記法を入力するだけでリアルタイムにフロー図を自動生成。サーバー送信なし — 完全ブラウザ処理。
構文エラーがあります
概要
「テキスト → フローチャート」は、Mermaid記法と呼ばれるシンプルなテキスト形式を入力するだけで、フローチャートや相関図、シーケンス図など多様な図を自動生成するブラウザツールです。
すべての処理は Mermaid.js を使いブラウザ内で完結します。図の内容が外部サーバーに送信されることはなく、機密性の高い設計図や業務フローも安心して作成できます。
作成した図はSVG（ベクター形式）またはPNG（ビットマップ形式）として即座に保存可能。アプリのインストールは不要で、ブラウザがあれば誰でも即座に利用できます。
使い方
コードを入力
左側のテキストエリアにMermaid記法でコードを入力します。サンプルコードが最初から入力されているので参考にしてください。
リアルタイムで確認
右側のプレビューエリアに図がリアルタイムで表示されます。構文エラーがある場合はエラーメッセージが表示されます。
SVG / PNG で保存
「SVG保存」または「PNG保存」ボタンをクリックすると、作成した図をファイルとしてデバイスに保存できます。
用語集
- Mermaid.js
- テキストベースの記法からフローチャートや図を自動生成するJavaScriptライブラリ。GitHubのMarkdownでも公式サポートされています。
- フローチャート (Flowchart)
- 処理の流れや手順を図で表現したもの。Mermaidでは
graph TD（上下）やgraph LR（左右）で作成します。 - SVG (Scalable Vector Graphics)
- 解像度に依存しないベクター形式の画像フォーマット。拡大しても劣化しないため、プレゼンや印刷に最適です。
- ノード (Node)
- フローチャートの各要素（四角、丸など）のこと。Mermaid記法では
A[テキスト]のように定義します。 - エッジ (Edge)
- ノード間を結ぶ矢印や線のこと。
-->（矢印）や---（線）で表現します。 - シーケンス図 (Sequence Diagram)
- 複数の登場人物間のやり取りを時系列で表した図。Mermaidでは
sequenceDiagramで作成します。
よくある質問
- Q.日本語テキストをノードに使えますか？
- はい、Mermaid.jsは日本語を含むUnicode文字に対応しています。ノードの中に「集計処理」のような日本語テキストを記述できます。
- Q.図がはみ出して見切れる場合はどうすればよいですか？
- プレビューエリアは横スクロールに対応しています。また、graph LR（左右）をgraph TD（上下）に変えるなど、レイアウト方向を変更することで収まりやすくなります。
- Q.図はサーバーに送信されますか？
- いいえ。すべてのレンダリング処理はMermaid.jsを使いブラウザ内で完結します。入力した図の内容が外部に送信されることはありません。
- Q.SVGとPNGの違いは何ですか？
- SVGはベクター形式で拡大縮小しても劣化しません。プレゼン・印刷・Webへの埋め込みに最適です。PNGはビットマップ形式で、画像として貼り付けたい場合に便利です。
- Q.フローチャート以外の図も作れますか？
- はい。Mermaid.jsはシーケンス図（sequenceDiagram）、クラス図（classDiagram）、ガントチャート（gantt）など多くの図形式に対応しています。
- Q.保存した図を後で編集できますか？
- 現在のバージョンでは入力したコードは保存されません。後で編集したい場合は、テキストエリアのMermaidコードをコピーしてローカルに保存しておいてください。
活用シーン
システム設計書の作成
APIの呼び出しフローやDBのER図をMermaidで書いて、ドキュメントに埋め込む際に役立ちます。
議事録・業務フローの可視化
会議で決まったワークフローや承認フローを素早く図にして、チームで共有するのに便利です。
プレゼン資料への図の挿入
PowerPointで図を作るのが面倒なとき、Mermaidで素早く図を作ってPNG保存してスライドに貼り付けられます。
学習・教育資料の図式化
アルゴリズムの処理フローや歴史の年表をフローチャートで表現し、理解しやすい学習資料を作成できます。
Mermaid記法
基本フローチャート (graph)
graph TD
A[開始] --> B{条件}
B -->|はい| C[処理A]
B -->|いいえ| D[処理B]
C --> E[終了]
D --> E シーケンス図 (sequenceDiagram)
sequenceDiagram ユーザー->>サーバー: ログインリクエスト サーバー->>DB: 認証確認 DB-->>サーバー: 結果返却 サーバー-->>ユーザー: ログイン成功
ノード形状の種類
A[四角] — 長方形B(角丸) — 角丸四角C{菱形} — 条件分岐D((丸)) — 円形E>非対称] — 非対称F[(DB)] — データベースフィードバックを送信
ツールをより良くするためのご意見をお聞かせください。
現在、フィードバックの受付を一時停止しています
サーバーが混み合っているか、スパム防止のための安全装置が作動しています。しばらく経ってから再度アクセスしてください。