READMEを言語バッジやER図で豪華にする

この記事のゴール

Githubで新規プロジェクトを作ると、いい感じのバッジなどが着いたテンプレートのREADMEが勝手に作られるようにする

Markdownにバッジをつける

サンプル（私のSNSへのボタン）

言語などは↓のスクショみたくもできる

README.mdに書かずともGithubならなんの言語で構成されてるかくらいはわかりますが
テスト済みかどうか、ライセンスはどうか、など
様々ないい感じのかっこいい情報をバッジで載せられます。

とりあえずこちらを参照ください

バッジの作り方

正直いろんな記事がすでにありますが、ちょっと使い方わかりにくかったりしたので分かりやすくまとめようと思います。

1. まずはアイコンを取得

今回はvimのバッジを作ってみましょう。
以下のサイトで欲しいアイコンを検索します

名前部分のコピーボタンを押すと
vimという文字がコピーされました。

2. URLつくる

作成する画像のURLは

https://img.shields.io/badge/{バッジ左の文字}-{バッジ右の文字}-{色}.svg?logo={ロゴ名}

です。?以降のGETリクエストパラメータは複数あり、全量はこちら
よって今回は、左の文字なし、「Vim」、緑、vimのロゴにしたいので

https://img.shields.io/badge/-Vim-019733.svg?logo=vim

とします。出来上がったものがこちら（Qiitaにimgタグ入れてます）

<img src="https://img.shields.io/badge/-Vim-019733.svg?logo=vim&style=flat">

3. いい感じにレイアウトする

基本的に、

• クリックしてURL遷移させたいもの：aタグの中にimgタグ
• ただバッジがあればいいもの：imgタグ

です。あとはこれらをテーブルに入れてあげましょう

License	Env

↑のソース.html

<table>
  <!-- ヘッダ -->
  <tr>
    <td>License</td>
    <td>Env</td>
  </tr>
  <!-- ボディ -->
  <tr>
    <td>
      <a href="./LICENSE">
        <img src="http://img.shields.io/badge/license-MIT-blue.svg?style=flat">
      </a>
    </td>
    <td>
      <img src="https://img.shields.io/badge/-Docker-EEE.svg?logo=docker&style=flat">
      <br>
      <img src="https://img.shields.io/badge/-k8s-EEE.svg?logo=kubernetes&style=flat">
    </td>
  </tr>
</table>

また、各SNSのバッジはこんなふうになります。
Qiitaみたいにロゴがないものは、DATA URLとして画像本体の文字列をぶちこんでます。
以下をコピペして自分用にカスタムしてみてください。

<table>
  <tr>
    <!-- Follow -->
    <td>
      <div>
        <!-- Twitter -->
        <div>
          <a href="https://twitter.com/serna37serna37">
            <img src="https://img.shields.io/twitter/url/https/twitter.com/cloudposse.svg?style=social&label=Follow%20%40serna37serna37">
          </a>
        </div>
        <!-- Github -->
        <div>
          <a href="https://github.com/serna37">
            <img src="https://img.shields.io/badge/--FFFFFF?style=social&logo=github&label=Follow%20serna37">
          </a>
        </div>
        <!-- Qiita -->
        <div>
          <a href="https://qiita.com/neras_1215">
            <img src="https://img.shields.io/badge/--FFFFFF?style=social&logo=data:image/vnd.microsoft.icon;base64,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&label=Follow%20neras_1215">
          </a>
        </div>
      </div>
    </td>
  </tr>
</table>

ER図を書く

いろんなやり方がありますが、画像を挿入するのも良いですが
Markdownで書いたER図だと、変更があるたびにスクショを撮り直さなくて良いので
READMEが設計書みたくなって便利です。

こんなふうにMermaid記法でER図をかけます。
（Mermaidは他にもいろいろは図が書けますし、PlantUMLでもOK）

Mermaid記法をライブプレビューできる神サイトがあります。

ここで作ったものをコピペしましょう。このサイト上に保存はできない(?)と思います。
どうせREADMEにいれたいだけだからよし。

コマンドや一覧表、Gifなどを入れる

ビルドコマンド、インストールコマンド、リリース用コマンドや

使っている様子のGifを載せたり

使い方を書いたり

APIであればIF一覧を書いたり

テンプレートにする

ここまで作るのは大変ですよね。
なのであらかじめ作っておいたものをテンプレートとし
新規リポジトリ作成時に、ちょっと修正するだけで済むようにしましょう。

今回の豪華なREADMEや、ライセンスファイルなど
テンプレートにしたいファイルを作成したリポジトリを作成します。

Githubの設定欄で、テンプレートリポジトリのチェックボックスをオンにすればOKです。

この状態で、次回から新規リポジトリを作成する際にテンプレートとするリポジトリを指定することで、豪華READMEを引き継げます。
テンプレートを複数種類作っておくのも良いですね。

私はとりあえずよく使う言語バッジの表を作っておきました。
冒頭のスクショです。新規リポジトリ作成後に、使うやつ意外消すだけでOKなので楽。

ソース.html

# doc-template
#### App Profile
<!-- Badges -->
<table>
  <tr>
    <td>License</td>
    <td>Env</td>
    <td>Lang</td>
    <td>DB</td>
    <td>Editor</td>
  </tr>
  <tr>
    <td>
      <a href="./LICENSE">
        <img src="http://img.shields.io/badge/license-MIT-blue.svg?style=flat">
      </a>
    </td>
    <td>
      <img src="https://img.shields.io/badge/-Docker-EEE.svg?logo=docker&style=flat">
      <img src="https://img.shields.io/badge/-k8s-EEE.svg?logo=kubernetes&style=flat">
      <br>
      <img src="https://img.shields.io/badge/-shell-555.svg?logo=shell&style=flat">
      <img src="https://img.shields.io/badge/-zsh-555.svg?logo=&style=flat">
    </td>
    <td>
      <img src="https://img.shields.io/badge/-HTML5-333.svg?logo=html5&style=flat">
      <img src="https://img.shields.io/badge/-CSS3-1572B6.svg?logo=css3&style=flat">
      <br>
      <img src="https://img.shields.io/badge/-JavaScript-276DC3.svg?logo=javascript&style=flat">
      <img src="https://img.shields.io/badge/-Node.js-555.svg?logo=nodedotjs&style=flat">
      <img src="https://img.shields.io/badge/-TypeScript-555.svg?logo=typescript&style=flat">
      <img src="https://img.shields.io/badge/-React-555.svg?logo=react&style=flat">
      <br>
      <img src="https://img.shields.io/badge/-Python-F9DC3E.svg?logo=python&style=flat">
      <img src="https://img.shields.io/badge/-Flask-000000.svg?logo=flask&style=flat">
      <img src="https://img.shields.io/badge/-pandas-%23150458.svg?logo=pandas&style=flat">
      <img src="https://img.shields.io/badge/-selenium-555.svg?logo=selenium&style=flat">
      <br>
      <img src="https://img.shields.io/badge/-Go-555.svg?logo=go&style=flat">
      <img src="https://img.shields.io/badge/-Gin-555.svg?logo=go&style=flat">
      <img src="https://img.shields.io/badge/-Gorm-555.svg?logo=go&style=flat">
      <br>
      <img src="https://img.shields.io/badge/-Java-F80000.svg?logo=&style=flat">
      <img src="https://img.shields.io/badge/-Spring-555.svg?logo=spring&style=flat">
      <img src="https://img.shields.io/badge/-SpringBoot-555.svg?logo=springboot&style=flat">
      <img src="https://img.shields.io/badge/-MyBatis-000000.svg?logo=&style=flat">
      <br>
      <img src="https://img.shields.io/badge/-C-00599C.svg?logo=c&style=flat">
      <img src="https://img.shields.io/badge/-C++-00599C.svg?logo=cplusplus&style=flat">
      <img src="https://img.shields.io/badge/-Rust-555.svg?logo=rust&style=flat">
    </td>
    <td>
      <img src="https://img.shields.io/badge/sqlite-%2307405e.svg?logo=sqlite&style=flat">
      <img src="https://img.shields.io/badge/-PostgreSQL-555.svg?logo=postgresql&style=flat">
      <img src="https://img.shields.io/badge/-MySQL-000000.svg?logo=mysql&style=flat">
    </td>
    <td>
      <img src="https://img.shields.io/badge/-Vim-019733.svg?logo=vim&style=flat">
    </td>
  </tr>
</table>

最後に

README.mdはGithub上で直接編集する方がすぐプレビューできて楽です。
Qiitaでもいい。
私の作ったWeb上のMarkdownエディタはこちら

(データ保存はlocalStorageで、ダウンロードやアップロードも可能。)
(localStorageにしかないので端末間共有などはしません)