N2
NanToo
開発者向け

Mermaid ダイアグラムプレビュー

Mermaid記法のフローチャート・シーケンス図・ER図・ガントチャートなどをリアルタイムプレビュー。8種のプリセット、SVG/PNGダウンロード対応。入力コードの描画はブラウザ内で実行。

プリセット

259 / 20,000文字 接続線は500本以内

プレビュー

プレビューを更新しています...

Mermaid記法リファレンス

フローチャート

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" : 60
このツールについて問い合わせる →

Mermaid ダイアグラムプレビューについて

Mermaidとは

Mermaidは、テキストベースのDSL（ドメイン固有言語）から図やチャートを生成するオープンソースライブラリです。Markdownのようにシンプルなテキスト記法で、フローチャート・シーケンス図・ER図・ガントチャートなど多様なダイアグラムを描画できます。

GitHubやGitLabなど、Mermaidに対応するサービスではMarkdown内へ図を埋め込めます。ただし、サービスごとに採用するMermaidのバージョンが異なるため、新しい記法は貼り付け先で表示できない場合があります。本ツールではブラウザ内でプレビューし、SVG/PNG形式で書き出せます。

対応する図の種類

フローチャートキーワード:graph TD / flowchart用途:処理フロー、意思決定
シーケンス図キーワード:sequenceDiagram用途:API通信、システム間連携
クラス図キーワード:classDiagram用途:オブジェクト設計、継承関係
状態遷移図キーワード:stateDiagram-v2用途:状態管理、ワークフロー
ER図キーワード:erDiagram用途:データベース設計
ガントチャートキーワード:gantt用途:プロジェクト計画
円グラフキーワード:pie用途:比率の可視化
Gitグラフキーワード:gitGraph用途:ブランチ戦略の説明

フローチャートのノード形状

  • A[テキスト] — 四角形（標準）
  • A(テキスト) — 角丸四角
  • A{テキスト} — ひし形（分岐）
  • A((テキスト)) — 円
  • A>テキスト] — 非対称（フラグ）
  • A[(テキスト)] — 円筒形（データベース）

矢印は -->（実線）、-.->​（点線）、==>​（太線）で表現します。-->|ラベル| でラベルを付けられます。

Mermaidの活用シーン

  • 設計ドキュメント: アーキテクチャ図やシーケンス図をGitで管理
  • README.md: GitHubリポジトリに処理フローやデータモデルを図示
  • プレゼン資料: SVG/PNGで書き出してスライドに挿入
  • データベース設計: ER図をテキストで管理し、レビューしやすくする
  • プロジェクト管理: ガントチャートをコードで記述し、変更履歴を追跡

よくある質問

Q. 入力したコードはサーバーに送信されますか？
NanTooのサーバーへコードやファイルをアップロードせず、描画はブラウザ内で実行します。ただし、コード内で外部画像のURLを指定した場合は、表示のためブラウザからその画像の配信元へ通信します。
Q. 日本語のラベルは使えますか？
はい。ノードラベル、矢印ラベル、ER図のリレーション名など、多くのラベルで日本語を使用できます。図の種類や記法によっては引用符が必要です。
Q. GitHubのREADMEにそのまま貼れますか？
GitHubでは```mermaidのコードブロック内にMermaidコードを書くと図を表示できます。ただし、GitHub側と本ツールのMermaidバージョンが異なる場合があるため、README上でも表示を確認してください。
Q. SVGとPNGどちらでダウンロードすべきですか？
拡大や再編集を想定する場合はSVG、SVGに対応しない資料やSNSではPNGが便利です。大規模な図のPNGはブラウザで安全に処理できる上限へ縮小する場合があります。
このツールを評価
—(0件)