MermaidのGitgraphを使って東京メトロの路線図を書いてみた
タイトルにある通り、MermaidのGitgraphを使って、東京メトロの路線図を書いてみる。
こういう感じで、記事を書くのは、初めてなので、お手柔らかにみてもらえると嬉しいです。
Mermaidとは
マークダウン形式で色々と書くことができる。
システム開発で、必要なドキュメントを書く際などに役立つので、知っていて損はない。
今回は、Gitgraphだけだが、シーケンス図が書けたりするので、興味のある人は、見てみてください！
Gitgraphとは
概要
Gitのブランチの遷移などをマークダウンで書くことができる。
チーム開発で、ブランチ戦略とかを考えて共有する時とかに使えたりします。
サンプル
実際には、こんなイメージで書くことができます
%%{init: { 'theme': 'default' } }%%
gitGraph
commit tag: "v1.0.0"
branch develop
commit
checkout main
checkout develop
branch featureA
commit
checkout develop
merge featureA
checkout main
merge develop tag: "v1.0.1"
checkout develop
commit
branch featureB
commit
commit
commit
checkout develop
commit
branch featureC
commit
commit
checkout develop
merge featureC
checkout featureB
commit
commit
commit
checkout develop
merge featureB
checkout main
merge develop tag: "v2.0.0"
VSCodeでMermaidを書く場合
VSCodeで、Mermaidをプレビューする際には、このプラグインをインストールしておくとプレビューが表示できるので便利です！
- Markdown Preview Mermaid Support
https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid
先ほど書いたサンプルを「Markdown Preview Mermaid Support」をインストールしたVSCodeで見ることこんな感じ。
東京メトロの路線図をMermaidのGitgraphで書いていく
銀座線をサンプルに解説していきます👍
基本の形
```mermaid
gitGraph
色をつける
銀座線の路線図になるように色をつけていきます！
MermaidのGitgraphで用意されているデフォルトの色もありますが、今回は個別に指定していきます。
東京メトロのカラーコードは、こちらのサイトを参考にさせていただきました。
```mermaid
%%{ init: { 'themeVariables': { 'git0': '#ff9500' } } }%%
gitGraph
色が変わりました👏
ブランチ名を変える
何も設定しないとデフォルトのブランチ名は、「main」になっているので、ブランチ名を変えていきます！
```mermaid
%%{ init: { 'themeVariables': { 'git0': '#ff9500' },'gitGraph':{'mainBranchName': '銀座線'} } }%%
gitGraph
デフォルトのブランチ名が変わりました👏
コミットをプロットしていく
今回は、コミットを駅に見立てるため、コミットを記述していきます！
```mermaid
%%{ init: { 'themeVariables': { 'git0': '#ff9500' },'gitGraph':{'mainBranchName': '銀座線'} } }%%
gitGraph
commit
コミットが追加されました👏
コミットにプロパティをつける
何も指定せずにcommitを記述すると、自動的にidが振られます。
また、tagもつけることができます。
今回は、id：駅名、tag：東京メトロが決めている番号、にしていきます！
```mermaid
%%{ init: { 'themeVariables': { 'git0': '#ff9500' },'gitGraph':{'mainBranchName': '銀座線'} } }%%
gitGraph
commit id: "渋谷" tag: "G01"
idとtagがつきました👏
この方法で、銀座線の全ての駅名を入れていきます。
駅名も入っていて、見やすい感じになりました👏👏
東京メトロの他の線もブランチに作成したので、気になる方は参照してください。
ブランチの作成
丸ノ内線だけ、線が分岐していたので、branchを作成することで、対応しました。
途中で困ったこと
VSCodeに「Markdown Preview Mermaid Support」を入れて、プレビューを表示しながら、作成していたのですが、'gitGraph':{'mainBranchName': '丸ノ内線'}を入れて、checkoutをしようとするとプレビューがエラーで表示できなかったです。
日本語が良くないのかと丸ノ内線をMarunouchiなどに変えても同じ現象。。。
Github、Notion、Zennだと普通に表示できているので、プラグインのプレビューが良くないかも🤔
%%{init: {'themeVariables': { 'git0': '#e60012', 'git1': '#e60012' }, 'gitGraph':{'mainBranchName': '丸ノ内線'}} }%%
gitGraph
commit id: "荻窪" tag: "M01"
commit id: "南阿佐ケ谷" tag: "M02"
commit id: "新高円寺" tag: "M03"
commit id: "東高円寺" tag: "M04"
commit id: "新中野" tag: "M05"
branch SubLine
commit id: "方南町" tag: "Md03"
commit id: "中野富士見町" tag: "Md04"
commit id: "中野新橋" tag: "Md05"
checkout "丸ノ内線"
commit id: "中野坂上" tag: "M06"
commit id: "西新宿" tag: "M07"
commit id: "新宿" tag: "M08"
commit id: "新宿三丁目" tag: "M09"
commit id: "新宿御苑前" tag: "M10"
commit id: "四谷三丁目" tag: "M11"
commit id: "四ツ谷" tag: "M12"
commit id: "赤坂見附" tag: "M13"
commit id: "国会議事堂前" tag: "M14"
commit id: "霞ケ関" tag: "M15"
commit id: "銀座" tag: "M16"
commit id: "東京" tag: "M17"
commit id: "大手町" tag: "M18"
commit id: "淡路町" tag: "M19"
commit id: "御茶ノ水" tag: "M20"
commit id: "本郷三丁目" tag: "M21"
commit id: "後楽園" tag: "M22"
commit id: "茗荷谷" tag: "M23"
commit id: "新大塚" tag: "M24"
commit id: "池袋" tag: "M25"
VSCodeのプレビュー
今後やりたいこと
今回は、東京メトロの各線をそれぞれ作成したので、乗り換えが分かるようにできるといいかなと思ったりしてます👏
Gitgraphで、実現できることを色々と試そうと思ったが、単純なものになってしまったので、もっと色々と試してみようかなと思う。
補足
最初、id：東京メトロが決めている番号、tag：駅名、にしてるとtagが被って見づらかったので、被らないように逆にしました。tagを被らないように表示できる方法があれば知りたい。。。
Discussion