GitHub、Markdown構文でフローチャートやクラス図、ガントチャートなどのダイアグラムを表示できる「Mermaid」をサポート開始

GitHubは、Markdown構文で記述するとダイアグラムを表示できる「mermaid」のサポートを発表しました。

You can now embed diagrams directly into your Markdown files, Issues and PR comments using Mermaid. Learn more - https://t.co/gfmNOp3HeJ

— GitHub (@github) February 14, 2022

Markdown構文とは、テキストを簡単な記号で修飾することにより、HTMLを記述するよりも手軽にハイパーリンクや見出しなどを記述できる記法です（このPubickeyの本文も、ふだんはMarkdown構文で書いています）。

GitHubではIssueやプルリクエストのコメントなどさまざまな場所でマークダウン構文が使えるため、外部ドキュメントへのリンクなどを気軽に入力し、見やすく表示できます。

今回、このMarkdown構文を用いて図が記述できる「Mermaid」と呼ばれる記法が追加されました。

Mermaid記法を用いるとテキストを基に、フローチャート、シーケンス図、クラス図、ステート図、ER図、ガントチャート、パイチャート、ユーザージャーニーなどの図が自動的に生成され表示されます。

例えば、次のように記述すると、自動的に下記の図に変換して表示してくれます。

graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

これによりテキストの入力だけでビジュアルな表現を埋め込めるようになるため、より分かりやすいコメントやドキュメントを手軽に作れるようになることが期待されます。