GitHubでmermaid記法が使えるようになったのでアーキテクチャーの図を書いてみた

#GitHub

#mermaid

リルオッサ

2022.02.17

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Include diagrams in your Markdown files with Mermaidのブログにもある通り、GitHubでmermaid記法を用いてMarkdownで図を書けるようになったので試してみました。

はじめに

今回はアーキテクチャの中身の話については触れていません。
よく見かけるアーキテクチャーの図をmermaid記法を用いて記述してみて、その結果を記したものになります

書いてみるもの

図といえば、アーキテクチャーの図をよく見かけるなと思い、mermaid記法で書いてみるとどうなるか試してみました。

今回は、iOSプロジェクトで馴染みのありそうなこちらの４点をピックアップしてみました。

Cocoa MVC
MVP
MVVM
VIPEP

図にも色々な種類がありますが、今回はFlowcharts - Basic Syntaxを用いて表現してみました。詳しい説明はこちらのリンクをご確認下さい。

Mermaid記法を使用する際は、始まりにバッグクォート3つにmermaidと付けて、終わりにバッククォート3つ付け、その中に記述することで使用出来ます。

こんな感じです。

アーキテクチャの図

Cocoa MVC

Appleが提唱したでお馴染みCocoa MVCです。気になる方はModel-View-Controller

mermaid記法

flowchart LR
    id1(View) -- User action --> id2(Controller) -- Update -->  id1
    id2(Controller) -- Update --> id3(Model) -- Notify --> id2

ちなみにflowchartのLRを反対にすることでフローチャートの流れを右から左にすることが出来ます。

出力

MVP(Passive View)

画面の描画処理とプレゼンテーション・ロジックを分離するアーキテクチャーです。MVPにするととてもテストが書きやすくなりました。

mermaid記法

flowchart LR
    id3(View) -- User actions --> id2 -- Update UI --> id3(View)
    id1(Model) -- Model Changed --> id2(Presenter) -- Update model --> id1

出力

MVVM

UIとロジックを疎結合にすることで作業分担が容易になり、責務が分離されて変更箇所も小さくすることで生産性の向上につながるアーキテクチャーで、SwiftUIではMVVMを導入しやすくなりましたね。

mermaid記法

flowchart LR
    subgraph Data Binding
    id1(View) -- Owns --> id2(ViewModel) -. Update .-> id1
    end
    id2 -- Owns -->  id3(Model) -. Update .-> id2

出力

VIPER

クリーンアーキテクチャの派生のアーキテクチャーで、View Interactor Presenter Entity Routerの頭文字を取ってVIPERです。日本語訳すると、マムシです。怖いですね。

iOS Project Architecture: Using VIPERにVIPERへの想いが綴られていました。

mermaid記法

flowchart LR
    id1(View) -- Owns and sends user actions --> id2(Presenter)  id1
    id3(Router) -. UIKit independent mediator .-> id2(Presenter)
    id2 -- Owns and asks for updates --> id4(Interactor) -. Notifies .-> id2
    id4 -. Knows about .-> id5(Entity)