LoginSignup
101
110

More than 5 years have passed since last update.

Markdownでシーケンス図を書いてGithubのREADME.mdに埋め込む

Last updated at Posted at 2016-03-25

Markdownで図を書く方法が予想外に快適だったので共有しなければならない。と使命感にかられました。

まずシーケンス図

めっちゃストックされてる以下を参照しつつ書いてみる

Markdownテキストでシーケンス図とフローチャートを描く
http://qiita.com/ka215/items/a709665cb34c505ccf1f

StackEditでシーケンス図を書く
https://stackedit.io/

```sequence
Frontend->Backend:get or post
Backend->Redis:get
Redis->Redis:get model
Redis-->MySQL:get model (When data is not found on Redis)
Redis-->Backend:mohdel
Backend-->Frontend:json
Frontend->Frontend:build DOM

するとこんな素敵なシーケンス図ができるのですかさずスクリーンショットをとる。

setupguide_structure_image.png

README.mdに埋め込む

  • スクリーンショットをプロジェクトのリポジトリにプッシュする
  • github上のリポジトリから画像のURLを取得する
  • Readme.mdに埋め込む (GithubのUI上から直接修正すると楽)
Readme.md
.
.
![overview image](https://github.com/hogehogehoge_project/overview.png?raw=true)
.
.

ついでに図のMarkdownも下の方にはっつけておけばメンテナンス性も完璧。

101
110
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
101
110