Markdown で図が書ける！Mermaid記法の概要や書き方をご紹介

2024-04-17

Markdown を活用して情報をまとめる際に、図を活用して情報をまとめることで伝わりやすい情報になります。

弊社の運営する GROWI.cloud では、Draw.io や PlantUML を活用して図を作成することが可能ですが、その中でも汎用性が高く特に便利な Mermaid記法について、こちらの記事でご紹介します。

※Markdown の記法を一覧で確認したい方は「【画像で解説】Markdown 記法一覧表・チートシート」をご確認ください

Mermaid記法とは？

概要

Mermaid 記法 とは、Markdown 上のテキストで各種グラフやチャートなどのフォーマットに則った図を生成することのできる記法です。

主に、システム開発の現場で使われるフローチャートやシーケンス図などを作成することができますが、システム開発の現場以外でも活用することのできる、円グラフやマインドマップなどを作成することも可能なので、あらゆる職種の方にご利用いただくことも可能です。

Mermaid記法の特徴として、Markdown 上で簡単に図を生成することができるというメリットがあることはもちろんのこと、フォーマットが決まっているので特定の値を書き換えるだけで簡単に入力内容の修正ができることもメリットにあげることができます。

Mermaid記法の記述方法

Mermaid 記法は作成する図の種類によってフォーマットが異なります。しかし、各フォーマットに共通する内容として、「“`mermaid」と「“`」で入力内容を囲うというルールがあります。

図の種類によって異なる入力内容としては、以下の章でそれぞれご紹介するのでそちらをご確認ください。

代表的な Mermaid記法4選をご紹介

フローチャート

フローチャートとは、プロジェクトや予定の流れをまとめる際に活用することができる図のことを指します。システム開発の場では、各システムの処理の流れなどをフローでまとめる際などに主に活用するかと思います。

以下の使用イメージでは、上から下へとフローチャートを進める「flowchart TB」を記述していますが、「flowchart BT」と記述することで、下から上にフローチャートを進める図にするなど、細かなカスタマイズも可能となっています。

フローチャート内の図の形も記法によって変更でき、分岐も作成できるなど柔軟性が高い点も魅力です。

■使用イメージ

■入力内容

```mermaid
flowchart TB;
A[出発する] --> B[買出しを完了させる];
B --> C[目的地に向かう];
C -- 晴れている --> D{屋外で BBQ};
C -- 雨が降っている --> E{屋内で BBQ};
D --> F[テントの設営];
E --> G[施設の方に許可を得る];
F --> H[BBQ 開始]
G --> H[BBQ 開始]
```

ガントチャート

ガントチャートとは、プロジェクト管理や生産管理などで工程管理に用いられる表のことを指します。複数関係者でプロジェクトを進める際や、チームで何かを進める際に活用するシーンが多いかと思います。

Mermaid記法で作成したガントチャートは、特定の値を変更するだけで簡単に図内の内容を修正できるため、柔軟にガントチャートをコントロールすることができます。

■使用イメージ

■入力内容

```mermaid
gantt
    title プロジェクト進捗状況
    dateFormat  YYYY-MM-DD

    section Tanaka
    タスクA      :2024-01-01, 30d
    タスクB      :20d

    section Yamada
    タスクC      :2024-01-12  , 8d
    タスクD      : 24d

    section Sato
    タスクE      :2024-01-15  , 12d
    タスクF      : 10d

    section Suzuki
    タスクG      :2024-01-20  , 12d
    タスクH      : 18d

```

円グラフ

円グラフは、エンジニアや技術者以外の方でも特に利用する機会も多く、利用シーンもイメージしやすいグラフなのではないでしょうか。

他のツールや記法を活用し円グラフを作成する場合は、数値や割合に対して自身でグラフを調整する必要がありますが、Mermaid記法で円グラフを作成する場合は、他の Mermaid記法と同様に値を修正するだけで、簡単に図全体を修正することが可能です。

■使用イメージ

■入力内容

```mermaid
%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
pie showData
    title プロジェクトメンバーにおける年代別構成比
    "20代" : 15
    "30代" : 36
    "40代～" : 22
```

マインドマップ

マインドマップとは、主に企画をする際などにユーザーや顧客の理解に活用したり、アイデアや情報の流れを見える化するために活用する図です。

Mermaid記法でマインドマップを作成することで、図内の要素をどんどん追加していっても、図の形が変形し、見やすい図の形式を保持してくれるのが魅力です。

■使用イメージ

■入力内容

```mermaid
mindmap
  root((mindmap))
    Origins
      Long history
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid
```

まとめ

Markdown で図を作成するために便利な Mermaid記法についてご紹介しました。

今回ご紹介した代表的な記法以外にも、Mermaid記法で作成可能な図は多数ありますので、是非ご自身でお調べのうえ Markdown 上での図形作成を活用してください。

Makrdown エディタの中には、Mermaid記法に対応しているエディタと対応していないエディタがあります。Markdown で書けるエディタをご検討の際には、Mermaid記法への対応も参考にすることで、伝わりやすい情報をまとめることができますよ。

今回使用イメージとして紹介している、社内wiki GROWI.cloud では Mermaid記法にも対応をしているため、是非ご利用をご検討していただけると幸いです。

よければぜひ、公式HP をのぞいてみてください。

また、知っておくと便利なこととして、Markdownで文字を強調する方法 や Markdown で表（テーブル）を作る方法：各種カスタマイズ方法も併せて解説 もあります。