Mermaidコード入力
0 / 50,000 文字
プレビュー
ドラッグ/スワイプで移動 | Ctrl+ホイールでズーム | ダブルクリックでフィット
読み込み中…
このツールは、テキスト形式で図を描ける「Mermaid（マーメイド）記法」をブラウザ上でリアルタイムにプレビューし、画像として保存できる無料のエディタです。
このツールでできること
- リアルタイムプレビュー: 入力したMermaid記法の内容が即座に図として表示されます。
- 豊富なテンプレート: フローチャート、シーケンス図、ガントチャートなどの雛形をワンクリックで呼び出せます。
- 画像書き出し（PNG）: 作成した図をPNG形式でダウンロードし、そのまま資料やスライドに活用できます。
- Markdown対応: GitHubやNotionに貼り付け可能なMarkdown形式でのコードコピーが可能です。
- 直感的な操作: プレビュー画面のズームやドラッグによる移動に対応しており、複雑な図でも細部まで確認できます。
Mermaid記法の基礎知識
Mermaid（マーメイド）記法とは、特定のルールに従ってテキストを入力することで、フローチャートやグラフなどの図を自動生成する仕組みです。
通常の画像編集ソフトとは異なり、マウスで線を引く必要がありません。「A –> B」のようにテキストで関係性を記述するだけで、誰でも美しく整った図を作成できるのが最大の特徴です。エンジニアの仕様書作成だけでなく、非エンジニアの業務フロー図作成にも広く利用されています。
AIで効率的にフロー図を作成する
Mermaid記法は非常に便利ですが、複雑な図になればなるほど、自分でコードを書くのが手間になる場合があります。その際は、GeminiなどのAIを活用するのが効率的です。
- AIに指示を出す: 「以下の業務工程をMermaid記法のフローチャートにして」と伝え、自分の業務手順やマニュアルの内容をAIに送信します。
- コードをコピー: AIが生成したMermaidコードをコピーします。
- 本ツールに貼り付け: 当ツールの入力エリアに貼り付けるだけで、一瞬で図解が完成します。
「マニュアルの文章をそのまま投げて図解化する」「箇条書きのメモからシーケンス図を作る」といった使い方ができるため、手書きよりも圧倒的に早く資料を完成させることができます。
このツールが役立つときはどんなとき？（ユースケース）
- システム設計のドキュメント作成: シーケンス図やクラス図を素早く作成し、設計書に反映したいとき。
- 業務フローの可視化: 複雑な業務手順を整理し、チームで共有するためのフローチャートが必要なとき。
- プロジェクトの進捗管理: ガントチャートを作成して、スケジュールの全体像を把握したいとき。
- プレゼン資料の図解作成: 記号や矢印の配置に時間をかけず、論理的で綺麗な図を資料に挿入したいとき。
ツールの使いかた
- テンプレートを選択する: 上部のセレクトボックスから、作成したい図の種類（フローチャート、シーケンス図など）を選びます。
- コードを編集する: 左側の入力エリアにMermaid記法を記述します。AIから取得したコードを貼り付けるのも効果的です。
- 表示を調整する: 配色テーマを変更したり、プレビューエリアをズーム・ドラッグして見やすい位置に調整します。
- 保存・コピーする: 図が完成したら「PNG画像をダウンロード」をクリックして保存するか、コードをコピーして各ドキュメントツールに貼り付けます。
