Zenn
🧜‍♀️

【VSCode・Mermaid.js】ER図もVSCodeとgitで管理がしたい！

2021/03/13に公開
JavaScript
VS Code
Markdown
ER 図
Mermaid
tech

前置き

ER図に変更があったらしいけどどこが変わったのかパッと見分からない！
ER図を変更したいけど変更点をまとめたりするのがめんどくさい！
ちょっと前の変更とその前の変更の差分が見たい！

あるあると思った方は今すぐ高評価と→のサポートをお願いします！

...という冗談はさておき。
こちらの記事はそんな思いで何か良い解決方法は無いかと色々とGoogle検索をして色々と試した結果の備忘録となります。
全部の作業に2時間程度しか使っていないのでその程度の深みでしかない事を予めご了承ください。
気が向いたら更に調査を進めて見ようと思います。

結論

Mermaid.jsをうまいことVSCodeで使ってgitで管理してみたら素晴らしい体験だった
https://mermaid-js.github.io/mermaid/#/

使用例

erDiagram

user ||--o{ post : owns
post ||--o{ updoot : has
user }|--o{ updoot : does

user {
  number id
  string username
  string email
  string password
}

post {
  number id
  string title
  string text
  number points
  number voteStatus
}

updoot {
  number userId
  number postId
  number value
}

これが

これになる

GraphQLのスキーマを書くような感覚でER図の作成が出きました！
drawSQLやMySQL Workbenchなどといった専門のツールと違ってデータベース連携はありませんが、お馴染みのgitやVSCodeで管理が出来るのがメリットですね。

そもそもMermaid.jsとは

マークダウンに近しい構文でダイアグラムやフローチャートが作れるツールです。
ER Diagram（ER図）は2021年3月13日時点でプレビュー版が利用可能になっています。
こちらのライブエディタを触ってみるのが一番直感的にどういうものなのかが理解できると思います。
https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZXJEaWFncmFtXG5cbnVzZXIgfHwtLW97IHBvc3QgOiBvd25zXG5wb3N0IHx8LS1veyB1cGRvb3QgOiBoYXNcbnVzZXIgfXwtLW97IHVwZG9vdCA6IGhhc1xuXG51c2VyIHtcbm51bWJlciBpZFxuc3RyaW5nIHVzZXJuYW1lXG5zdHJpbmcgZW1haWxcbnN0cmluZyBwYXNzd29yZFxufVxuXG5wb3N0IHtcbm51bWJlciBpZFxuc3RyaW5nIHRpdGxlXG5zdHJpbmcgdGV4dFxubnVtYmVyIHBvaW50c1xubnVtYmVyIHZvdGVTdGF0dXNcbn1cblxudXBkb290IHtcbm51bWJlciB1c2VySWRcbm51bWJlciBwb3N0SWRcbm51bWJlciB2YWx1ZVxufSIsIm1lcm1haWQiOnsidGhlbWUiOiJmb3Jlc3QifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0
ER Diagram 機能 公式ドキュメント
https://mermaid-js.github.io/mermaid/#/entityRelationshipDiagram

どうやって使うの？

基本的には上記ライブエディタで完結できるようになっています。

ライブエディタ特有の便利な機能：

  • 変更点を1分おきに保存してくれて、それらを過去10回分辿れる
  • 簡単に画像を保存できる
  • 簡単に共有用のリンクを作成できる

今回はgitで変更点を管理するという目的のため、VSCodeでのMermaid.jsの導入の仕方を色々と見ていった際の雑多なメモ書きをまとめてみました。

Tips集（雑ですみません）

// .vscode/extensions.json
{
	"recommendations": [
		"bpruitt-goddard.mermaid-markdown-syntax-highlighting",
		"vstirbu.vscode-mermaid-preview",
		"DavidAnson.vscode-markdownlint",
		"yzhang.markdown-all-in-one"
	],
	"unwantedRecommendations": []
}
  • mermaid-cliを使うと画像化がコマンドラインで出来るのでscriptsに追加
// package.json
{
	"version": "1.0.0",
	"main": "index.js",
	"license": "MIT",
	"scripts": {
		"gen:er": "mmdc -t forest -i mermaid.md -o er.png"
	},
	"devDependencies": {
		"@mermaid-js/mermaid-cli": "^8.9.1"
	}
}
  • 問題：VSCode拡張のMarkdown Preview Mermaid Supportが便利だけど見辛い！
    VS CodeでDarkテーマを使っているとどうしても見辛くなります。何かしらのLightテーマを使うとある程度見やすくなります。
    「Lightテーマなんか使いたくねぇよ！いちいち切り替えるのも面倒なんだよ！」
    そんな方は以下の設定ファイルを作成すると一部のワークスペースでだけLightテーマにする事ができますのでer図用のリポジトリを作ってそこでだけLightテーマで作業するのも一つの手だと思います。
// .vscode/settings.json
{
	"workbench.colorTheme": "GitHub Plus"
}

まとめ

  • Mermaid.jsはER図をコードで管理できる！
  • コードで管理が出来るという事はgitで誰がどんな変更をしたのかが見れる！
  • gitが使えるということは誰がやらかしたのかが延々に記録に残る！怖っ！

https://mermaid-js.github.io/mermaid/#/

以上です。
プレビュー版なので関連する拡張機能も含めてまだまだ発展途上感が強いと思いますがお馴染みのVSCodeとgitの操作が出来るので未来感があって良いですね。
機会があったら別のツールなども調べてみようと思います。

Discussion