GitHubのREADME.mdにシーケンス図を埋め込む

シーケンス図をテキストで描いてMarkdownに埋め込みたい

README.md のような Markdown ファイルに、シーケンス図をテキストで描いて、埋め込みたいんです。

でも、たいていは「テキストでシーケンス図を描いて、それを画像にしてアップロードして、そのURLをMarkdownに記述する」という方法でした。

• Markdownテキストでシーケンス図とフローチャートを描く - Qiita

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

もっと簡単にできないものかと調べてみると、StackOverflow に git - How to integrate UML diagrams into GitLab or GitHub - Stack Overflow がありました。

PlantUML proxy service を使う方法です。

大まかな手順

gist に テキストでシーケンス図を作る

たとえば https://gist.github.com/takke/995d474a8ad72a724c8187cf21b1e238 のようなものを作ります。

@startuml
TwitPane->MainActivity: Intent呼び出し
MainActivity->MainActivity: PermissionCheck
MainActivity->VideoEditActivity: Intent呼び出し
VideoEditActivity->VideoEditActivity: 編集
VideoEditActivity->ConvertActivity: Intent呼び出し
ConvertActivity->ConvertActivity: 変換(頑張る)
ConvertActivity-->VideoEditActivity: onActivityResult,\n結果のURI
VideoEditActivity-->MainActivity: onActivityResult,\n結果のURI
MainActivity-->TwitPane: onActivityResult,\n結果のURI
@enduml

作るときに StackEdit – In-browser Markdown editor などを使うと WYSIWYG でいい感じです。

Markdown に gist を参照するプロキシ URL を画像として埋め込む

Markdown に下記のように記述します。

![sequence dialog](http://www.plantuml.com/plantuml/proxy?src=https://gist.githubusercontent.com/takke/995d474a8ad72a724c8187cf21b1e238/raw)
https://gist.github.com/takke/995d474a8ad72a724c8187cf21b1e238

すると、

https://gist.github.com/takke/995d474a8ad72a724c8187cf21b1e238

のようにレンダリングされます。

シーケンス図を変更したいときは gist を更新するだけです。
GitHub上の任意のファイルとその raw URL の組み合わせでももちろん OK です。

とはいえ毎回プロキシURLを叩くので褒められた方法じゃないですね。あくまでもお気軽にUMLを埋め込む用途で。

以上です。