Mermaid記法のフローチャート・シーケンス図・ER図・ガントチャートなどをリアルタイムプレビュー。8種のプリセット、SVG/PNGダウンロード対応。ブラウザ内完結でサーバー送信なし。
プリセット
フローチャート
graph TD
A[四角] --> B(角丸)
B --> C{ひし形}
C -->|Yes| D[結果]シーケンス図
sequenceDiagram
Alice->>Bob: Hello
Bob-->>Alice: Hi!ER図
erDiagram
USER ||--o{ ORDER : "注文"
ORDER ||--|{ ITEM : "含む"円グラフ
pie title タイトル
"項目A" : 40
"項目B" : 60Mermaidは、テキストベースのDSL（ドメイン固有言語）から図やチャートを生成するオープンソースライブラリです。Markdownのようにシンプルなテキスト記法で、フローチャート・シーケンス図・ER図・ガントチャートなど多様なダイアグラムを描画できます。
GitHubのMarkdownやGitLab、Notion、Obsidianなど多くのプラットフォームでネイティブサポートされており、ドキュメント内に図を埋め込むデファクトスタンダードとなっています。本ツールではブラウザ内でリアルタイムにプレビューし、SVG/PNG形式で書き出せます。
| 種類 | キーワード | 用途 |
|---|---|---|
| フローチャート | graph TD / flowchart | 処理フロー、意思決定 |
| シーケンス図 | sequenceDiagram | API通信、システム間連携 |
| クラス図 | classDiagram | オブジェクト設計、継承関係 |
| 状態遷移図 | stateDiagram-v2 | 状態管理、ワークフロー |
| ER図 | erDiagram | データベース設計 |
| ガントチャート | gantt | プロジェクト計画 |
| 円グラフ | pie | 比率の可視化 |
| Gitグラフ | gitgraph | ブランチ戦略の説明 |
A[テキスト] — 四角形（標準）A(テキスト) — 角丸四角A{テキスト} — ひし形（分岐）A((テキスト)) — 円A>テキスト] — 非対称（フラグ）A[(テキスト)] — 円筒形（データベース）矢印は -->（実線）、-.->（点線）、==>（太線）で表現します。-->|ラベル| でラベルを付けられます。