Mermaid記法とは？Markdownでフローチャートを書く方法や種類を解説

最終更新日:2026/03/09

Mermaid記法とは？

Mermaid記法を使えば、専用ソフトなしでフローチャートや図を作成できます。本記事では、テキストだけで図を描く方法や活用できる場面を紹介します。

エンジニアだけでなく、業務フローを整理したい方や資料作成の効率を上げたい方にもおすすめの方法です。

Mermaid記法とは？Markdownで図を描くメリット

Mermaid記法とは、Markdownテキストを書くだけでフローチャートやグラフを自動的に作ってくれる仕組みです。

なぜ画像作成ツールではなくMermaid記法を使うと良いのか、そのメリットを以下の3点から解説します。

• 修正の容易さ：テキストの書き換えだけで図を更新できるため、メンテナンス性が高い
• 環境非依存：専用ソフトが不要で、ブラウザやテキストエディタがあればどこでも編集できる
• 共有・再利用：コードとして共有できるため、バージョン管理や他者への共有が簡単である

テキストベースで管理できるため修正が容易

Mermaid記法は、Markdownテキストの中にコードを書くことで、自動的に図やチャートを生成する記法です。保存されるのは画像ではなく文字データなので、内容を変更したいときは文字を書き換えるだけで済みます。

たとえば、業務フローの図で「承認」という部分を「確認」に変更したい場合、テキストを打ち直すだけで図全体が自動的に更新されます。PowerPointのように図形を一つずつ選んで移動させる作業は要りません。

変更履歴を管理するツール（Git）とも相性が良く、誰がいつ何を変更したのかが文字の変更として記録されます。

そのため、数名のメンバー間で資料を管理する際も、変更内容を簡単に確認できます。

特別な作図ツールが不要で環境に依存しない

Mermaid記法に対応したアプリ（メモアプリのNotionや、プログラムを書くためのVS Codeなど）があれば、高額な作図ソフト（VisioやPowerPointなど）を買う必要がありません。

「Mermaid Live Editor」というサイトを使えば、何もインストールせずにすぐ図を作れます。自分のパソコンにダウンロードする必要がないため、会社のパソコンでも自宅のパソコンでも同じように作業できます。

また、WindowsでもMacでも、タブレットでも、同じ文字ファイルを開けば同じ図が表示されます。パソコンの種類や使っているソフトに関係なく、どこでも同じように図を見たり編集したりできる点が大きなメリットです。

コピー＆ペーストで共有や再利用が簡単

作成した図は文字で書かれた指示書なので、その文字をコピーしてメールやチャットに貼り付けるだけで相手に共有できます。

SlackやTeamsといった社内チャットに貼り付ければ、受け取った相手もすぐに図を確認し、必要に応じて内容を変更できます。

ゼロから図を作り直す手間が省けるため、作業時間を短縮することが可能です。チームで資料を作るときや、複数の人で情報を共有するときに、効率性が上がるでしょう。

Mermaid記法で作成できる代表的な図の種類

Mermaid記法では、業務やプロジェクト管理でよく使う様々な図を作成できます。

ビジネスの現場や開発作業でよく使われる図について、どんな場面で役立つのかを整理して紹介します。

業務フローや処理手順を可視化するフローチャート

フローチャートは、作業の流れや手順を「四角や丸の図形（ノードと呼びます）」と「矢印」でつないで表す図です。

最初に「graph TD（上から下）」や「graph LR（左から右）」と記述し、図形同士を –> という記号で結ぶだけで描けます。

たとえば、

graph TD; A[開始] --> B[書類を確認]; B --> C[終了];

【記述例】

と書くだけで、開始から終了までの流れが図として表示されます。

条件によって進む道が分かれる場面（ひし形で表現）なども作れるため、業務の手順やコンピューターの処理の流れをわかりやすく整理できます。

システムの相互作用を時系列で表すシーケンス図

シーケンス図は、人やシステム同士がどんなやり取りをするのかを、時間の流れに沿って表す図です。

sequenceDiagram と記述し、participant で登場人物を決め、->> や –>> という記号でメッセージのやり取りを表します。

たとえば、「ユーザーログインの仕組み」など一連の流れを、縦方向の時系列で整理できます。

sequenceDiagram
    participant User as ユーザー
    participant System as ログインシステム
    participant DB as データベース

    User->>System: IDとパスワードを入力
    System->>DB: ユーザー情報を照会
    DB-->>System: 照会結果（一致）
    System-->>User: ログイン成功メッセージを表示

【記述例】

システム同士の通信の仕様書や、業務で誰がどんな役割を担当するかを整理する際に役立ちます。誰が誰に何を伝えるのかが一目でわかるため、複雑なやり取りの理解が深まります。

プロジェクトの進捗管理に役立つガントチャート

ガントチャートは、プロジェクトの作業内容、期間、進み具合を横長の帯グラフで表す図です。

gantt と記述し、作業名、状況（作業中、完了など）、開始日、期間（30日間など）を指定して書きます。

gantt
    dateFormat  YYYY-MM-DD
    title 2026年度 上期計画

    section 1月
    プロジェクト始動 :done,    2026-01-05, 5d
    要件まとめ       :active,  2026-01-12, 10d

    section 2月
    システム設計     :         2026-02-02, 15d
    中間レビュー     :milestone, 2026-02-20, 0d

【記述例】

日付や期間の数字を変更するだけで図全体が自動で更新されるため、予定が変わったときの修正が簡単です。

プロジェクトの予定を管理する手間が減り、いつ何の作業をするのかがひと目でわかるようになります。

データベース設計や構造を整理するER図・クラス図

ER図（データの関係を表す図）は、データを保管するテーブル同士の関係性を表す図です。

たとえば「お客様」という表と「注文」という表の間に「1人のお客様が複数の注文をする」という関係があることを線と記号で表現できます。

erDiagram
    CUSTOMER ||--o{ ORDER : "注文する"
    CUSTOMER {
        string name "顧客名"
        string email "メールアドレス"}
    ORDER {
        int orderNumber "注文番号"
        date orderDate "2026-01-27"}

【記述例】

クラス図は、プログラムの構造を「設計図」として整理するための図です。 システムに登場するオブジェクト（部品）が、どのようなデータ（属性）を持ち、どのような動作（メソッド）をするのか、また部品同士がどのような関係（親子関係や依存関係など）にあるのかを定義します。

erDiagram や classDiagram と記述し、||–o{ のような記号で関係性を書くことで、データやシステムの設計図を文字で管理できます。

classDiagram
    direction LR
    Smartphone <|-- iPhone : "継承（親子）"
    Smartphone *-- Battery : "構成要素"

    class Smartphone {
        +string modelName
        +powerOn()
    }
    class Battery {
        +int capacity
    }

【記述例】

設計を変更する際も文字を書き換えるだけで対応でき、常に最新の状態を保ちやすくなります。

Mermaid記法の基本的な書き方とルール

実際にMermaid記法を書くための基本的な知識を解説します。

図を作るための共通ルールとして、以下の要素を押さえておきましょう。

• 宣言 (Code Block)：mermaid でコードブロックを開始し、図の種類（graphなど）を宣言する
• 記述 (Syntax)：ノードの形状（[]や()）や、矢印の種類（–>）で関係性を記述する
• 調整 (Direction)：図の方向（TB:上から下、LR:左から右）を指定してレイアウトを整える

コードブロックでの宣言と基本構文

ドキュメント作成時に図を描く際は、まず「ここから図を書く」という合図を送ります。

キーボードの左上にあるバッククォートを3つ「“`」並べ、その直後に「mermaid」と半角で入力してください。これが図の開始地点となります。

次に、描きたい図の種類を指定します。たとえばフローチャートなら「graph」、手順を表す図なら「sequenceDiagram」と一行目に記します。この指定により、システムが「これから描くのはフローチャートだ」と正しく認識します。

また、行の先頭に「%%」を置くと、その行はメモ書き（コメント）扱いになります。このメモは実際の図には表示されません。

自分自身や共同編集者のために、図の意図や修正予定を日本語で残しておく際に役立ちます。このように、特定の枠組みの中にルールに沿った単語を並べていくことで、複雑な図が自動で生成されます。

ノードの形状や線の種類・矢印の指定方法

図の中で使う箱（ノード）の形は、文字を囲む括弧の種類で決まります。たとえば、 [ ]で囲むと標準的な四角形、 ( )なら端が丸い形、{ }なら判断基準を示すひし形に変わります。

箱と箱をつなぐ線の表現も豊富です。通常の動きは実線の「–>」で、補足説明や予備の経路は点線の「-.->」で書き分けます。特に強調したい重要な流れには、二重線の太い矢印「==>」を使うと視覚的に目立つでしょう。

また、線の上に文字を載せて、何のための移動かを説明できます。「– 内容 –>」や「|内容|」という書き方を挟むことで、線の役割を具体的に示せます。

すると、矢印が何を運んでいるのか、あるいはどのような条件で次の工程に進むのかが、見る側に正確に伝わります。

このように形と線の組み合わせを変えるだけで、情報の優先順位や流れの意味を細かく整理できます。

図の方向やレイアウトの調整テクニック

図全体の流れる向きは、開始行のキーワードで制御します。「TD」や「TB」と書くと上から下へ、「LR」なら左から右へ流れる配置になります。

スマホ画面で見せるなら縦長の「TD」、パソコンの横長画面なら「LR」といった使い分けが効果的です。

また、関連する作業を一つの枠でまとめたいときは「subgraph」という機能を使います。これは、複数の工程を一つのグループとして囲い、境界線で区切る仕組みです。部署ごとの役割分担や、システムの内側と外側の境界をはっきりさせたい時に重宝します。

配置が意図せず崩れて見づらい場合は、要素を記述する順番を入れ替えてみてください。上にある記述ほど優先的に配置される性質があるため、書く順序を変えるだけで、線が重ならずスッキリとした見た目に改善されます。

特殊なソフトを使わなくても、文字の向きと順番を整えるだけで読みやすい図が完成します。

ChatGPTを活用したMermaid記法の自動生成

自分で文字を書くのが難しい場合でも、AI（人工知能）のChatGPTを使えば簡単に図を作成できます。

AIを活用するメリットとして、以下の2つの方法を紹介します。

• テキスト指示：「〇〇のフローチャートを作って」と指示するだけでコードを生成させる方法
• 資料からの変換：既存の文章や箇条書きのメモを読み込ませて、自動的に図解化させる方法

自然言語の指示でコードを出力させる方法

ChatGPTなどのAIを使えば、自分で一から文字を書かなくても、「〇〇のフローチャートをMermaid記法で書いて」とお願いするだけで図を作れます。

たとえば「お客様からの問い合わせ対応のフローチャートをMermaid記法で書いて」と入力すれば、問い合わせを受けてから回答するまでの流れを、文字の指示として出力してくれます。

どんな手順が必要か、誰が何をするのかといった具体的な情報をプロンプトに書き込むことで、より正確な内容が出力されます。

出力された文字をコピーして、Mermaid記法が使えるアプリやサイトに貼り付けるだけで図が完成する手軽さが魅力です。

既存のテキストや資料から図を生成する応用

文章で書かれた業務マニュアルや作業手順書をChatGPTにアップロードし、「以下の内容をMermaid記法のフローチャートで記述してください」とプロンプトで入力することで、すでにある資料を図に変換できます。

たとえば「1. 申請書を受け取る、2. 内容を確認する、3. 承認する」という箇条書きを渡せば、それぞれの手順を図形として並べたフローチャートが生成されます。

PDFファイルやURLを読み込ませて、その内容を要約した図（やり取りを表すシーケンス図や、状態の変化を表すステータス図など）を作ってもらう応用方法もあります。

複雑なロジックや長い文章の資料を、短時間でわかりやすい図に変換することが可能です。

Mermaid記法を利用できる主なツールと環境

作成したMermaid記法を表示したり編集したりするための具体的なツールを紹介します。
使っている環境に合わせて選べるよう、以下の2つに分けてツールを紹介します。

• エディタ・アプリ：VS Code、Notion、GitHubなど、普段の作業環境で利用できるツール
• ブラウザツール：インストール不要で、即座にプレビューや画像保存ができる「Mermaid Live Editor」

VS CodeやNotionなどの対応エディタ

エンジニアに人気のソフト「VS Code」では、拡張機能（Markdown Preview Mermaid Supportなど）を入れることで、文字を書きながらリアルタイムで図を確認できます。文字を書くとすぐに図が更新されるため、試しながら作業を進められます。

引用：Visual Studio Code

メモやドキュメントを管理するツール「Notion」では、コードブロックを作成してから記述してください。「/mermaid」と入力すればブロックを作成できます。会議の記録やタスク管理のページに直接フローチャートを埋め込めるため、情報をまとめて管理できます。

引用：Notion

プログラムを共有・管理するサイト「GitHub」や「GitLab」でも、Markdownファイルの中にMermaid記法を書くと、自動的に図として表示されます。

ブラウザですぐ使えるMermaid Live Editor

「Mermaid Live Editor」は、Mermaid記法を作った公式チームが提供しているインターネット上のツールで、何もインストールせずに使えます。

画面が左右に分かれていて、左側にテキストを入力すると、右側にリアルタイムで図が表示される仕組みです。書いた内容がすぐに反映されるため、初めて使う方でも試しながら覚えられます。

作成した図を画像ファイル（PNGやSVGなどの形式）としてパソコンに保存したり、他の人と共有するためのURLを発行したりできる便利な機能もあります。

チームのメンバーにアドレスを送れば、同じ図を見てもらえます。会議資料やプレゼンテーションに図を入れたいときにも、画像として保存できるため便利です。

まとめ

Mermaid記法は、文字を書くだけでフローチャートや様々な図を自動的に作成できる仕組みです。専用ソフトを買わなくても使えて、修正や共有が簡単なため、資料作成の効率が大きく上がります。

ChatGPTを使えば、専門知識がなくても普通の言葉でお願いするだけで図を作れます。VS CodeやNotion、Mermaid Live Editorなど、自分の環境に合ったツールを選んで、業務の流れやプロジェクトの予定をわかりやすく整理してみてください。

アイスマイリーでは、生成AI のサービス比較と企業一覧を無料配布しています。課題や目的に応じたサービスを比較検討できますので、ぜひこの機会にお問い合わせください。

AIsmiley編集部

株式会社アイスマイリーが運営するAIポータルメディア「AIsmiley」は、AIの専門家によるコンテンツ配信とプロダクト紹介を行うWebメディアです。AI資格を保有した編集部がDX推進の事例や人工知能ソリューションの活用方法、ニュース、トレンド情報を発信しています。

・Facebookでも発信しています @AIsmiley.inc
・Xもフォローください @AIsmiley_inc
・Youtubeのチャンネル登録もお願いいたします@aismiley
メルマガに登録する