Mermaid チートシート

すべてのMermaid.jsダイアグラム構文の完全クイックリファレンス。このページをブックマークして、すべてのダイアグラムタイプにすばやくアクセス。

フローチャート構文シーケンス図構文クラス図構文ステート図構文ガントチャート構文 ER図構文ジャーニーマップ構文 Gitグラフ構文マインドマップ構文円グラフ構文タイムライン構文カンバン構文象限チャート構文サンキーダイアグラム構文 XYチャート構文ブロックダイアグラム構文アーキテクチャ図構文パケットダイアグラム構文

フローチャート構文

ノードと方向矢印でプロセス、ワークフロー、アルゴリズムを視覚化。ビジネスプロセスやデシジョンツリーに最適です。

Basic top-down flow

エディタで試す

graph TD
    A[Start] --> B[End]

Decision branching

エディタで試す

graph TD
    A{Decision} -->|Yes| B[OK]
    A -->|No| C[Cancel]

Subgraph grouping

エディタで試す

graph LR
    subgraph Group
        A --> B
    end

Node shapes

エディタで試す

graph TD
    A[Rectangle] --> B(Rounded)
    B --> C{Diamond}
    C --> D((Circle))
    C --> E([Stadium])

シーケンス図構文

異なるアクターやシステム間の時系列でのインタラクションを文書化。APIドキュメントやシステム設計に最適です。

Basic message exchange

エディタで試す

sequenceDiagram
    Alice->>Bob: Hello
    Bob-->>Alice: Hi

Loop block

エディタで試す

sequenceDiagram
    loop Every minute
        Alice->>Bob: Ping
    end

Alternative flows

エディタで試す

sequenceDiagram
    alt Success
        A->>B: 200 OK
    else Error
        A->>B: 500 Error
    end

Activation boxes

エディタで試す

sequenceDiagram
    Alice->>+Bob: Request
    Bob-->>-Alice: Response

クラス図構文

クラス、属性、関係でオブジェクト指向システムをモデル化。ソフトウェアアーキテクチャ設計に不可欠です。

Class with members

エディタで試す

classDiagram
    class Animal {
        +String name
        +makeSound()
    }

Inheritance relationships

エディタで試す

classDiagram
    Animal <|-- Dog
    Animal <|-- Cat
    Animal : +String name

Cardinality notation

エディタで試す

classDiagram
    Customer "1" --> "*" Order

ステート図構文

システムやアプリケーションの状態遷移を表現。ライフサイクル状態やワークフローのモデリングに最適です。

Basic state transitions

エディタで試す

stateDiagram-v2
    [*] --> Active
    Active --> [*]

Labeled transitions

エディタで試す

stateDiagram-v2
    Idle --> Running: start
    Running --> Idle: stop

Nested composite state

エディタで試す

stateDiagram-v2
    state Active {
        [*] --> Working
        Working --> Paused
    }

ガントチャート構文

タスクと依存関係でプロジェクトのタイムラインを計画・追跡。プロジェクト管理やスケジューリングに最適です。

Basic project schedule

エディタで試す

gantt
    title Project
    dateFormat YYYY-MM-DD
    section Phase 1
    Task A :a1, 2024-01-01, 30d
    Task B :after a1, 20d

Task status markers

エディタで試す

gantt
    Task Done :done, d1, 2024-01-01, 10d
    Task Active :active, 2024-01-11, 10d
    Task Crit :crit, 2024-01-21, 10d

ER図構文

エンティティと関係でデータベーススキーマを設計。データベースモデリングやドキュメント作成に最適です。

Entity relationships

エディタで試す

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains

Entity with attributes

エディタで試す

erDiagram
    CUSTOMER {
        int id PK
        string name
        string email
    }

ジャーニーマップ構文

タッチポイント全体のユーザー体験とインタラクションをマッピング。UXデザインやカスタマージャーニーマッピングに最適です。

User experience journey

エディタで試す

journey
    title User Flow
    section Login
      Visit site: 5: User
      Enter credentials: 3: User
      Dashboard: 4: User

Onboarding satisfaction

エディタで試す

journey
    title New User Onboarding
    section Sign up
      Open homepage: 5: Visitor
      Create account: 3: Visitor
      Verify email: 2: Visitor
    section First diagram
      Choose template: 4: User
      Edit code: 5: User
      Export PNG: 5: User

Multi-actor checkout

エディタで試す

journey
    title Checkout Flow
    section Browse
      Search product: 4: Customer
      View details: 5: Customer
    section Purchase
      Add to cart: 5: Customer
      Pay: 3: Customer, Stripe
      Confirm order: 5: Customer, Stripe

Gitグラフ構文

Gitのブランチ戦略やコミット履歴を視覚化。バージョン管理ワークフローの説明に役立ちます。

Basic branch and merge

エディタで試す

gitGraph
    commit
    branch develop
    commit
    checkout main
    merge develop

Feature branch workflow

エディタで試す

gitGraph
    commit
    branch feature
    commit
    commit
    checkout main
    merge feature
    commit

マインドマップ構文

アイデアの整理、ブレインストーミング、階層的なビジュアル構造の作成に。計画立案やナレッジマネジメントに最適です。

Central topic with branches

エディタで試す

mindmap
  root((Central))
    Topic A
      Detail 1
      Detail 2
    Topic B
      Detail 3

Project planning mindmap

エディタで試す

mindmap
  root((Launch Plan))
    Engineering
      Backend API
      Frontend UI
      Testing
    Marketing
      Landing page
      Social media
    Operations
      Support docs
      Pricing

Node shapes and icons

エディタで試す

mindmap
  root((Mermaid))
    ::icon(fa fa-book)
    Origins
      Long history
      Popularisation
    [Square]
      (Rounded)
      ((Circle))
    {{Hexagon}}

円グラフ構文

円形チャートでデータの比率分布を表示。パーセンテージやマーケットシェアの分析に最適です。

Budget distribution

エディタで試す

pie title Budget
    "Engineering" : 45
    "Marketing" : 25
    "Operations" : 30

Browser market share

エディタで試す

pie showData title Browser Share 2026
    "Chrome" : 64.2
    "Safari" : 18.5
    "Edge" : 5.3
    "Firefox" : 3.1
    "Other" : 8.9

Time allocation

エディタで試す

pie title How I Spend My Day
    "Sleep" : 8
    "Work" : 9
    "Meals" : 2
    "Exercise" : 1
    "Free time" : 4

タイムライン構文

時間軸に沿ってイベントやマイルストーンを視覚化。プロジェクト履歴やロードマップの表示に最適です。

Chronological events

エディタで試す

timeline
    title History
    2020 : Event A
    2021 : Event B
         : Event C
    2022 : Event D

Product roadmap by section

エディタで試す

timeline
    title Product Roadmap
    section 2024
      Q1 : Beta launch
      Q2 : Public release
    section 2025
      Q1 : Mobile apps
      Q2 : Enterprise plan
      Q3 : API v2
    section 2026
      Q1 : AI assistant
      Q2 : Marketplace

Personal study plan

エディタで試す

timeline
    title Mermaid Study Plan
    Week 1 : Read syntax docs
           : Try flowcharts
    Week 2 : Sequence diagrams
           : Class diagrams
    Week 3 : Gantt and timeline
    Week 4 : Build a real project

カンバン構文

ワークフローの段階ごとにタスクを列に整理。アジャイルプロジェクト管理やタスク追跡に最適です。

Task board columns

エディタで試す

kanban
  Todo
    Task 1
    Task 2
  In Progress
    Task 3
  Done
    Task 4

Sprint board with metadata

エディタで試す

kanban
  Backlog
    [Auth flow]@{ assigned: 'alice', priority: 'High' }
    [Onboarding tour]@{ assigned: 'bob', priority: 'Low' }
  In Progress
    [Payments]@{ assigned: 'carol', priority: 'High' }
  Review
    [Settings page]@{ assigned: 'dan', priority: 'Medium' }
  Done
    [Landing redesign]@{ assigned: 'erin', priority: 'High' }

Bug triage board

エディタで試す

kanban
  Reported
    Login 500 error
    Slow PDF export
  Triaged
    Mobile menu glitch
  Fixing
    Dark mode contrast
  Verified
    Empty state typo

象限チャート構文

2軸グリッド上に項目をプロットして比較・優先順位付け。機能の優先順位付けや戦略分析に最適です。

Priority matrix

エディタで試す

quadrantChart
    title Priority Matrix
    x-axis Low Effort --> High Effort
    y-axis Low Impact --> High Impact
    quadrant-1 Plan
    quadrant-2 Do First
    quadrant-3 Delegate
    quadrant-4 Eliminate
    Item A: [0.3, 0.8]
    Item B: [0.7, 0.2]

Reach vs engagement

エディタで試す

quadrantChart
    title Reach and Engagement
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 Stars
    quadrant-2 Hidden Gems
    quadrant-3 Filler
    quadrant-4 Volume Plays
    Campaign A: [0.7, 0.8]
    Campaign B: [0.3, 0.7]
    Campaign C: [0.2, 0.2]
    Campaign D: [0.8, 0.3]

Styled quadrant chart

エディタで試す

quadrantChart
    title Tech Choices
    x-axis Hard --> Easy
    y-axis Slow --> Fast
    quadrant-1 Adopt
    quadrant-2 Trial
    quadrant-3 Hold
    quadrant-4 Assess
    Vue: [0.8, 0.7] radius: 12, color: #41b883
    React: [0.7, 0.7] radius: 12, color: #61dafb
    Svelte: [0.6, 0.85] radius: 10, color: #ff3e00

サンキーダイアグラム構文

ノード間のフロー量を比例矢印で視覚化。エネルギーフロー、予算配分、コンバージョンファネルに最適です。

Flow quantities between nodes

エディタで試す

sankey-beta

Source,Target,Value
A,X,5
A,Y,3
B,X,2
B,Y,8

Marketing funnel breakdown

エディタで試す

sankey-beta

Visitors,Signups,1200
Visitors,Bounce,3800
Signups,Trial,800
Signups,Free Plan,400
Trial,Paid,250
Trial,Churn,550

Energy flow diagram

エディタで試す

sankey-beta

Solar,Grid,40
Wind,Grid,30
Coal,Grid,80
Grid,Residential,50
Grid,Industrial,80
Grid,Losses,20

XYチャート構文

カスタマイズ可能な軸を持つ棒グラフと折れ線グラフを作成。データ視覚化やトレンド分析に最適です。

Bar and line chart

エディタで試す

xychart-beta
    title "Sales"
    x-axis [Jan, Feb, Mar, Apr]
    y-axis "Revenue" 0 --> 100
    bar [30, 50, 70, 90]
    line [30, 50, 70, 90]

Quarterly bar chart

エディタで試す

xychart-beta
    title "Quarterly Revenue (USD k)"
    x-axis ["Q1", "Q2", "Q3", "Q4"]
    y-axis "Revenue" 0 --> 250
    bar [120, 145, 180, 220]

Multi-line growth comparison

エディタで試す

xychart-beta
    title "Active Users"
    x-axis [Jan, Feb, Mar, Apr, May, Jun]
    y-axis "Users (k)" 0 --> 50
    line [10, 14, 18, 25, 33, 42]
    line [8, 11, 15, 20, 24, 28]

Horizontal bar chart

エディタで試す

xychart-beta horizontal
    title "Programming Language Popularity"
    x-axis "Share (%)" 0 --> 30
    y-axis [JavaScript, Python, Java, C#, Go]
    bar [25, 22, 14, 8, 5]

ブロックダイアグラム構文

行と列に配置されたブロックで構造化レイアウトを構築。システムアーキテクチャやコンポーネント概要に最適です。

Columnar block layout

エディタで試す

block-beta
columns 3
  a["A"]:3
  b["B"] c["C"] d["D"]

Block shapes and arrows

エディタで試す

block-beta
columns 4
  a["Input"] b("Process") c{{"Decision"}} d[("Storage")]
  a --> b
  b --> c
  c --> d

System architecture blocks

エディタで試す

block-beta
columns 3
  Web["Web App"]:3
  space:3
  API["REST API"] Auth["Auth Service"] DB[("Postgres")]
  Web --> API
  API --> Auth
  API --> DB

アーキテクチャ図構文

サービスアイコンと接続を使用してクラウドやシステムアーキテクチャを設計。インフラストラクチャドキュメントに最適です。

Cloud service topology

エディタで試す

architecture-beta
    group api(cloud)[API]
    service web(internet)[Web] in api
    service db(database)[DB]
    web:R --> L:db

Three-tier web app

エディタで試す

architecture-beta
    group public(cloud)[Public Network]
    group private(cloud)[Private VPC]

    service cdn(internet)[CDN] in public
    service lb(server)[Load Balancer] in public
    service web(server)[Web Tier] in private
    service api(server)[API Tier] in private
    service db(database)[Postgres] in private
    service cache(disk)[Redis] in private

    cdn:R --> L:lb
    lb:R --> L:web
    web:R --> L:api
    api:R --> L:db
    api:B --> T:cache

Event-driven microservices

エディタで試す

architecture-beta
    service gw(internet)[API Gateway]
    service queue(server)[Event Bus]
    service orders(server)[Orders]
    service billing(server)[Billing]
    service notify(server)[Notifications]
    service db(database)[Shared DB]

    gw:R --> L:orders
    orders:R --> L:queue
    queue:T --> B:billing
    queue:B --> T:notify
    orders:B --> T:db

パケットダイアグラム構文

ネットワークプロトコルのパケット構造とビットレベルのフィールドレイアウトを視覚化。ネットワークプロトコルドキュメントに最適です。

Network packet field layout

エディタで試す

packet-beta
  0-15: "Source Port"
  16-31: "Dest Port"
  32-63: "Sequence Number"

TCP header layout

エディタで試す

packet-beta
title TCP Header
  0-15: "Source Port"
  16-31: "Destination Port"
  32-63: "Sequence Number"
  64-95: "Acknowledgment Number"
  96-99: "Data Offset"
  100-105: "Reserved"
  106-111: "Flags"
  112-127: "Window"
  128-143: "Checksum"
  144-159: "Urgent Pointer"

IPv4 header layout

エディタで試す

packet-beta
title IPv4 Header
  0-3: "Version"
  4-7: "IHL"
  8-15: "Type of Service"
  16-31: "Total Length"
  32-47: "Identification"
  48-50: "Flags"
  51-63: "Fragment Offset"
  64-71: "TTL"
  72-79: "Protocol"
  80-95: "Header Checksum"
  96-127: "Source IP Address"
  128-159: "Destination IP Address"

エディタで試す