開発者 / 図
Mermaid Live Editor
Mermaidコードを入力すると、フローチャート、シーケンス図、クラス図、ガントチャート、円グラフなどがすぐに表示されます。SVGとPNGでダウンロードできます。
Mermaid Live Editor: このエディタはMermaidで図を描画します。Mermaidは、GitHub、GitLabなど多くのドキュメントツールで、テキストとして記述した図を表示するために使われているオープンソースライブラリです。strictモードで動作するため、他の人が作成したコードによってスクリプトを実行したり、クリックハンドラーを追加したりすることはできません。SVGのダウンロードはどのサイズでも鮮明です。PNGのダウンロードは、白い背景に画面上のサイズの2倍で描画されます。 サーバーへのファイルアップロードは一切なく、100%ブラウザ内でローカル実行します。
- カテゴリ
- 開発者ツール
- 実行回数
- ブラウザ内で
- コスト
- 無料 · 登録不要
- 提供状況
- すぐに使えます
完全にブラウザ内で実行します
図はブラウザ上でMermaidのstrictモードを使って描画されるため、図のコードからスクリプトを実行することはできません。同じコードをGitHub、GitLab、またはNotionのMarkdownでmermaidコードブロックに貼り付けると、そこで表示できます。
テキストで表す図
グラフィックプログラムで描いた図は、変更するたびにファイルを開き直す必要があるため、すぐに古くなります。Mermaidの図は数行のテキストで、説明対象のコードやドキュメントの隣に置けます。同じコミットで変更でき、レビューでは読みやすい差分として確認できます。
各図は種類の指定から始まります。たとえば、TD（上から下）やLR（左から右）のように方向を指定するflowchart、sequenceDiagram、classDiagram、gantt、pieなどです。ノードはラベル付きで1度だけ記述します。A[Start]のように書き、その後はA --> Bのように名前で参照します。
エクスポート
SVGはどのサイズでも線やテキストが鮮明なため、ドキュメントやスライドに適しています。PNGはチャットアプリやSVGに対応していない場所に向いています。エクスポートしたSVGを手動で編集するには、SVG editorで開いてください。
使い方
- サンプルを使うか、自分のMermaidコードを貼り付けます。
- コードを編集すると、入力中に図が再描画されます。エラーがある場合はエラーが表示されます。
- 図をSVGまたはPNGとしてダウンロードするか、コードをコピーします。
プライバシーと制限事項
図はブラウザ内で描画され、コードはこのブラウザにのみ保存されるため、次回もそのまま利用できます。
関連ツール
よくある質問
Mermaidとは何ですか？
図をテキストとして記述する方法です。A --> Bのような1行を書くと、矢印でつながった2つのボックスが描画されます。そのため、図をMarkdownファイルやコードレビューに含められ、描画ツールを使わずテキストを編集するだけで変更できます。
GitHubで図を表示するにはどうすればよいですか？
Markdownファイル、issue、プルリクエスト内で、mermaidと記したフェンス付きコードブロックにコードを入れます。3つのバッククォート、mermaidという単語、コード、3つのバッククォートの順に記述してください。GitHub、GitLab、Notionでは、その場所に図が描画されます。
図にエラーが表示されるのはなぜですか？
エラーメッセージには、Mermaidが読み取れなかった行が示されます。よくある原因は、1行目にflowchart TDなどの図の種類がないこと、閉じられていない角括弧や引用符、引用符で囲む必要がある特殊文字を含むテキストです。
どの種類の図に対応していますか？
エディタが読み込むMermaidのバージョンで利用できるすべての種類に対応しています。フローチャート、シーケンス図、クラス図、状態図、ER図、ガントチャート、円グラフ、マインドマップ、タイムライン、gitグラフなどが含まれます。サンプルでは、特によく使われる5種類を紹介しています。
無料ツール · ブラウザ内で · アカウント不要