Githubのwikiを書くならMarmaidでUMLを書こうという話

リポジトリのREADMEに簡単なプロジェクト概要を書くのはよくある話だけど、 細かいシステム設計をGoogle Driveで管理したり、スプシで管理したり、、、、、かなり煩雑な管理がされているプロジェクトもあったりします。

自分はGithubを使うなら集約したほうがいいので、Github wikiを利用してUMLもそこに入れたりしますが、 たまたまとあるプロジェクトをやっていた時に、ちょうどいいタイミングでGithubさんがmermaidをサポートするようになり これまで利用していたPlantUMLよりお手軽じゃあないですか！ということでご紹介いたします。

Include diagrams in your Markdown files with Mermaid

Marmaidって何って人に

いわゆるUMLをコードベースにかけるツールのことです。（自分は昔グラフィックツールでぽちぽち作ってました）

UMLとはUnified Modeling Languageの略語です。 日本語では「統一モデリング言語」と呼ばれています。 システムの振る舞いや構造をオブジェクト指向で分析したり設計したりする際、図を用いることで視覚的に把握できるようになり、効果的に表現できます。

コードベースなので、git管理すると差分も見れてさらに容量も軽いのでとってもおすすめ(OSSでいつの間にか対応増えてたりします)

https://github.com/mermaid-js/mermaid

現在(2024年)対応しているUMLは下記の通り

• フローチャート図(Flowchart)
• シーケンス図（Sequence diagram）
• ガントチャート(Gantt chart）
• クラス図(Class diagram）
• ステート図(State diagram）
• 円グラフ(Pie chart）
• Git graph
• 棒グラフ(Bar chart）
• ユーザージャーニーマップ(User Journey diagram）
• C4モデル(C4 diagram）

自分はシーケンス図をよく使うかもですが、ポジションによっては色々使えそうですね。

使い方

Githubのwikiページは前述の通りMarmaidに対応しているのでそのまま埋め込むことができます。

https://docs.github.com/ja/communities/documenting-your-project-with-wikis/adding-or-editing-wiki-pages

例えば下記のように入れるだけです。

sequenceDiagram
Alice->>John: Hello John, how are you?
loop HealthCheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!

いかがでしたでしょうか？

とりあえずお手軽に触れるので一度試してみてください。