Mermaid エディター — テキストから図を描いて書き出し

Mermaid ライブエディター

数行のテキストからフローチャート、シーケンス図、ガントチャートなどを作成できます。左側に Mermaid コードを書き、右側で図の更新を確認し、文書、スライド、Markdown 用に SVG や PNG を書き出します。GitHub、GitLab、Notion、メモアプリでも Mermaid コードを直接表示できます。

ブラウザ内で動作 — 入力した内容はアップロードされません

Mermaid を読み込み中…

使い方

「テンプレートを挿入」から図の種類を選ぶか、既存の Mermaid コードを貼り付けます。
左側のコードを編集します。入力を止めるとプレビューが再描画され、構文エラーは下に表示されます。
テーマを選び、SVG または PNG をダウンロードするか、SVG コードをコピーします。

オプションの説明

図の種類: フローチャート、シーケンス、クラス、状態、ER 図、ガントチャート、円グラフ、マインドマップのテンプレートがあります。タイムライン、象限図、Git グラフなど他の種類も直接書けます。
テーマ: 既定、ニュートラル、ダーク、フォレストのテーマがあります。ニュートラルは白黒に近く、印刷にも向いています。
書き出し: SVG は拡大しても劣化しないベクター形式です。PNG は 2 倍のサイズで背景色付きに書き出され、チャットアプリやスライドに使えます。

フローチャート早見表

flowchart LR
    A[Rectangle] --> B(Rounded)
    B --> C{Decision}
    C -->|Yes| D[(Database)]
    C -.->|No| E((Circle))

TD：上から下、LR：左から右
-->：実線矢印、-.->：点線、==>：太線、-->|text|：ラベル付き

よくある質問

Mermaid コードを GitHub に貼り付けられますか？

はい。Markdown ファイル、Issue、コメントで mermaid のコードブロックに入れると、GitHub が図を表示します。GitLab、Notion、Obsidian、Typora も対応しています。

コードはアップロードされますか？

いいえ。Mermaid の描画はブラウザ内で行われ、コードも図も端末の外に出ません。

ノード内の Markdown 書式が動かないのはなぜですか？

PNG の書き出しに対応するため、ノードのラベルは SVG のテキストとして描画されます。そのため HTML タグや一部のリッチテキスト書式には対応しません。

プライバシー

このツールはすべてブラウザ内で動作します。ファイルやテキストはお使いの端末上で処理され、当サイトのサーバーにアップロードされることはありません。