GitHubでのMermaidとPlantUMLの表示を確認してみた

はじめに

この記事では、「GitHubでのMermaidとPlantUMLはどう表示されるか」について書いています。

MermaidがGitHub対応というのは様々な他サイトの情報で知っていましたが、「実際本当に表示されるの？ちょっと確認してみよう」となったのが記事を書いたきっかけでした。

ついでに、表示されないのですが一応PlantUMLも表示を確認してみました。

自分に向けた備忘録の意味もありますが、「GitHubでMermaidやPlantUMLがどう表示されるのか知りたい」な人の一助になれば嬉しいです。

試したこと

リポジトリのREADME.mdファイルを以下のように書き、環境があればMermaidとPlantUML両方が表示されるようなものにしました。

# README

## Mermaid

```mermaid
flowchart TD
    Start --> Run
    Run --> Stop
```

## PlantUML

```plantuml
@startuml
:Start;
:Run;
:Stop;
@enduml
```

ちなみに、両方とも描画されるような環境ですと、下の画像のような出力が得られます。

さて、このファイルをGitHubにpushしたらGitHub上でどのように表示されるのか見てみましょう

Mermaidの方はちゃんと図になっており、一方PlantUMLはテキスト表示で、事前に得た情報の通りでした。

ちなみに、私はGitHubの設定をダークモードにしているために１枚目の画像の図と色が少し違いますが（ブロックが水色でない）、デフォルトのライトモードにすると水色になります（設定で色合いを変えてくれるようですね）

おわりに

「GitHubでのMermaidとPlantUMLはどう表示されるか」について解説しました。

GitHubで表示されるのはMermaidの利点と言えそうですね。向き不向きがあると思いますがGitHubで使いたいならMarmaidで図表を書くのは良いかもしれません