よく使う図の種類ごとに、すぐ使える実用的な Mermaid を用意しました。各サンプルは下にその場でレンダリングされます。エディターで開いて手を加えるのも、ソースをそのままドキュメントにコピーするのも自由です。アップロードは一切ありません。
ステップは四角、判断はひし形、分岐はラベル付きの矢印で表す——プロセス図の王道です。
flowchart TD
Start([User visits app]) --> A{Logged in?}
A -->|Yes| Home[Show dashboard]
A -->|No| Login[Show login form]
Login --> B{Credentials valid?}
B -->|No| Err[Show error] --> Login
B -->|Yes| Token[Issue session token] --> Homeどこが何を、どの順番で呼び出すか。実線の矢印はリクエスト、破線の矢印はレスポンスで、API や認証フローに最適です。
sequenceDiagram
participant C as Client
participant API
participant DB as Database
C->>API: POST /orders
API->>DB: INSERT order
DB-->>API: order_id
API-->>C: 201 Created鳥の足記法(crow's-foot)で多重度を表しデータベースを設計。「1人のユーザーが複数の投稿を書く」がそのまま図から読み取れます。
erDiagram
USER ||--o{ POST : writes
POST ||--o{ COMMENT : has
USER ||--o{ COMMENT : makes
POST }o--o{ TAG : "tagged with"クラス、フィールド、メソッド、そして関連。「<|--」は継承を表し、可視性マーカー(+/-)がインターフェースを示します。
classDiagram
class Animal {
+String name
+move()
}
class Dog {
+bark()
}
class Cat {
+meow()
}
Animal <|-- Dog
Animal <|-- Catある対象が取り得る状態と、状態間を遷移させるイベントを表現——注文のライフサイクル、承認フロー、プロトコルなどに。
stateDiagram-v2
[*] --> Draft
Draft --> Submitted: submit
Submitted --> UnderReview: assigned
UnderReview --> Approved: approve
UnderReview --> Rejected: reject
Rejected --> Draft: revise
Approved --> [*]数行のテキストから日付入りのタイムラインを生成。あるタスクが別のタスクの「after」に始まると書けば、図が自動でつなげてくれます。
gantt
title Sprint 24
dateFormat YYYY-MM-DD
section Dev
Feature A :a, 2026-02-02, 5d
Feature B :b, after a, 4d
section QA
Test pass :after b, 3dインデントだけで表現：最もインデントの浅い行が中心となり、深くなるほど枝になります。プレーンテキストで発想を広げましょう。
mindmap
root((Blog ideas))
Tutorials
Mermaid tips
Git workflows
Opinion
Tooling rants
Lists
Best CLIsここにあるサンプルはすべてプレーンな Mermaid テキストで、GitHub、GitLab、Obsidian がそのままレンダリングするのと同じ記法です。エディターで1つ開き、ノードを自分用に名前を付け替えて、SVG や PNG にエクスポートしましょう。
関連項目: Mermaidエディタ · GitHubに埋め込む · Mermaid vs PlantUML
はい。どのサンプルも自由にコピー・編集・再利用できます。登録もアカウントも不要で、クレジット表記も求めません。図はブラウザ内でレンダリングされるため、アップロードは一切ありません。
任意のサンプルで「エディターで開く」をクリックしてください。その Mermaid ソースがそのままライブエディターに読み込まれ、編集してすぐに再レンダリングを確認し、SVG や PNG にエクスポートできます。
はい。ソースをコピーし、README、Issue、プルリクエスト内の ```mermaid コードブロックに貼り付けてください。GitHub と GitLab は Mermaid をそのままレンダリングするため、画像は不要です。
フローチャート、シーケンス図、ER図(データベース)、UMLクラス図、状態遷移図、ガントチャート、マインドマップです。いずれも標準的な Mermaid の図の種類で、各種類にはより多くの例と記法のチートシートを備えた専用ジェネレーターへのリンクがあります。
はい——任意のサンプルをエディターで開き、SVG または PNG のエクスポートボタンを使ってください。SVG はどんなサイズでも鮮明なまま、PNG はスライドや文書に便利です。