ER図をgem「rails-erd」で作成してREADMEに入れ込む方法

71日目です。
個人アプリのER図をgemで作成してREADMEに入れ込んだのですが、少し躓いた点もあったので、紹介します。

そもそもER図とは

ER(Entity Relationship)は「実体関連モデル」と呼ばれている。 主にデータベースや情報システムでデータを編成するときの設計図として使われている。

カリキュラムでメルカリのクローンサイトを作成する際にも、まずチームメンバー全員でER図を作成てデータベースの関係性を把握するのに役立てました。

参考:
【図解あり】初心者向け!ER図とEER図の基本とツールの選び方 | Cacooブログ

そもそもREADMEとは

READMEとは、アプリケーションソフトなどに添付される、そのソフトに関する使用法や注意事項などが記されたファイルの名称である。 ソフトウェアの製作者側としてはユーザーに最低限読んで欲しい内容が記されており、そのためファイル名として「読んでください」という意味の「README」が用いられることが慣わしとなっている。

未経験からの転職活動で、企業の担当者様が唯一きちんと目を通してくれる場所とも言われているので、大切にすべき部分だと思います。

参考:
Readmeとは リードミー: - IT用語辞典バイナリ

ER図の作成から保存まで

macでの流れを説明します。
ターミナル
まずはgraphviz(グラフビズ)というグラフ作成ツールをHomebrewからインストールする必要があります。

brew install graphviz

次にGemfile(development以下)に記載

group :development do
  gem 'rails-erd'
end

ターミナルで下記コマンドを実行

 bundle install
bundle exec erd

これでRailsファイル内に「erd.pdf」というファイルができます。
「erd.pdf」をテキストエディタで開くと、下記のように文字化けして表示されます。

f:id:tattaka_s:20191003091851p:plain

そのため、私は下記のようにして開き、保存しました。

  1. 「erd.pdf」を右クリック
  2. 「ファインダーで開く」を選択
  3. ファインダーにて「erd.pdf」をクリック
  4. 表示されたER図をスクリーンショット(command + シフト + 5)

上記によって、下記のようなER図を保存できました。

f:id:tattaka_s:20191003093102p:plain

参考:
【Rails入門】Rails ERDでER図を自動作成しよう!オプションも網羅 | 侍エンジニア塾ブログ(Samurai Blog) - プログラミング入門者向けサイト

READMEに添付するまでの流れ

GitHubリポジトリから、issuesを選択し、右にある「New issue」を選択します。

f:id:tattaka_s:20191003093623p:plain

保存していたスクリーンショットをコメント欄にドラッグ&ドロップします。

f:id:tattaka_s:20191003094020p:plain

すると、URLを生成してくれるので、これをコピーしてREADMEに貼り付ければ完了です。 (同じ要領でGIFなども貼り付けられます。)

参考:
【GitHub】README.md に画像を表示させる簡単な方法 - Qiita


本日はチーム開発2週目の2日目でした。
ドラッグ&ドロップを使った画像アップロードに苦戦中です。
明日には解決したい。。