UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates (エヌズクリエイツ) 株式会社 フロントエンドエンジニアの齋藤 (@31mskz10) です。

文章の中に図を入れたいと思ったことはありませんか？
複雑なシステム構成や業務フローを分かりやすく説明したり、アイデアをビジュアルで表現したりするためにも、図はあって困ることはありません。

しかし、図の作成は時間がかかったり、デザインスキルが必要だと思われがちです。
そんな悩みを解決してくれるのが、Mermaid記法です。

Mermaid記法とは？

Mermaidは、テキストベースで図を作成するための記法です。
シンプルなコードを書くだけで、フローチャートやシーケンス図、ガントチャートなど、さまざまな図を生成できます。

Mermaid記法のメリット

Mermaid記法には、主に下記のメリットがあります。

簡単な記述

専用の作図ツールを操作する必要がなく、テキストエディタでコードを書くだけで図を作成できる。
初心者でも比較的簡単に習得できる。

バージョン管理のしやすさ

図がテキストデータのため、Gitなどのバージョン管理システムで変更履歴を管理するのが簡単です。

Markdownとの親和性

多くのMarkdownエディタやプラットフォームがMermaidに対応しており、技術ドキュメントやブログ記事などに図を組み込むことができます。

Mermaid記法の基本例

ここからは、いくつかMermaid記法の例を紹介します。

フローチャート

まずはよく使われるフローチャートです。
コードを見ると単純に矢印で項目をつないでいるだけのように見えます。

Mermaid記法を初めて見る人でも、『Aの「資料請求」からBの「内容を確認」に向かって矢印が進んでいるんだろうな』と分かるのではないでしょうか？

graph TD
    A[資料請求] --> B{内容を確認}
    B -->|承認| C[契約]
    B -->|却下| D[見送り]
    C --> E[サービス開始]

シーケンス図

次はオブジェクト間のメッセージのやり取りを時系列で示すシーケンス図です。

sequenceDiagram
    participant User
    participant System
    User->>System: ログイン要求
    System-->>User: ログイン成功

クラス図

システムのクラスとその関係性を示すクラス図も作成できます。

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

    Animal <|-- Dog

まとめ

Mermaid記法は、デザインツールを使わなくても、テキストを書くだけで簡単に図を作成できます。
特にエンジニアやドキュメントを作成する機会の多い方にとっては、思考を整理し、情報を分かりやすく伝える上で大きな助けになります。

文章だけでは伝わりにくい複雑な関係性やフローも、Mermaid記法を使えば簡単に図にできます。
次のドキュメント作成の際に、一度試してみてはいかがでしょうか。

---

UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

興味のある方は、カジュアル面談しますので気軽にお問い合わせください！