サービス構成図を書くツール「Diagrams」をいじってみた
こういう感じのサービス構成図が簡単に書きたい。

何か簡単に書けるツールはないかと探したら、以下の記事が。
Python コードでアーキテクチャ図を生成できる Diagrams がめっちゃ便利！
Python使ったことないけどいじりたくなったので、とりあえずPythonのインストールから
Python3をHomebrewでインストール
python使ったことないけど、たしかHomebrewでインストールされてた記憶なので確認
python -V
しかし、そんなコマンドないです、と言われて出てこない。あれ？？
Homebrewでインストールされているパッケージ一覧を見てみる。
brew list

python -V
ではなく
python3 -V
でインストールされていることが確認できた。3系は別パッケージという扱いなのかな？？
今回の目的はpipにて使いたいgraphvizというパッケージがあるので、pipについても同様に確認。
どうやら、pipも pip3 -Vみたいな感じで3系が別名パッケージになっている。
必要パッケージのインストール
さてpython3とpip3があるのを確認できたので次の準備として、Graphvizというパッケージをインストールする。
参考： https://diagrams.mingrammer.com/docs/getting-started/installation
brew install graphviz
以上で準備完了なのでdiagramsをインストール。pipの人はpipで。pip3の人はpip3で。
pip3 install diagrams
チュートリアル
さっきのdiagrams公式にチュートリアルがのっているので動作確認がてらやってみる。
pythonファイルを作成
touch diagram.py
チュートリアルにあるコードを書く。
# diagram.py from diagrams import Diagram from diagrams.aws.compute import EC2 from diagrams.aws.database import RDS from diagrams.aws.network import ELB with Diagram("Web Service", show=False): ELB("lb") >> EC2("web") >> RDS("userdb")
これで実行してみると、
python3 diagram.py
以下のようにpngファイルが作られている。
$ ls diagram.py web_service.png
できた！
簡単な操作方法
上記コードにだいたいの基本が詰まっている。
from diagrams import Diagram
にて基本のメソッドを呼び出す。
with Diagram("Web Service", show=False):
「Web Service」の部分は任意。これでインデントを下げて要素をくっつけていく。
たとえばEC2なら、
from diagrams.aws.compute import EC2
でライブラリからインポートして、
EC2("web")
で呼び出せる。出力すると以下のような図になる。

要素同士を繋ぐには以下のようにする。
ELB("lb") >> EC2("web")

また、グループ化したい場合は
with Cluster("グループ名"):
でClusterをつくり、インデントを下げて要素をくっ付ければ良い。
importのしかた
from [PATH] imoport [NAME] のかたちで、用意されたアイコンをインポートできる。PATHはDiagramsのメニューから、以下のカテゴリーを選ぶと一覧が出てくる。

例えば、「Programming」から以下のようなフレームワークを選べる。

結構使えるものが限られるので、ないやつはCustomで用意するしかない。
Custom要素の作り方
参考： https://diagrams.mingrammer.com/docs/nodes/custom
画像をプロジェクト内に配置して、第２引数にパスを渡せば良い。
例えばcc_heart.black.pngというファイルをmy_resourcesというディレクトリに配置し、以下のように呼び出す。
# インポート from diagrams.custom import Custom # 呼び出し cc_heart = Custom("Creative Commons", "./my_resources/cc_heart.black.png")
自分のサービスのサービス構成図を作ってみた
以下のような感じで冒頭の自作サービスのサービス構成図を作ってみた。
from diagrams import Cluster, Diagram from diagrams.custom import Custom from diagrams.programming.language import JavaScript from diagrams.programming.framework import Vue from diagrams.programming.language import Nodejs from diagrams.programming.framework import Rails from diagrams.programming.language import Ruby from diagrams.onprem.database import PostgreSQL from diagrams.aws.storage import S3 from diagrams.onprem.ci import GithubActions from diagrams.onprem.vcs import Git with Diagram("Ruumarker", show=False): js = JavaScript("JavaScript") with Cluster("デザイン"): daisyui = Custom("DaisyUI", "./my_resources/daisyui.png") tailwind = Custom("Tailwind", "./my_resources/tailwind.png") with Cluster("フロントエンド"): vue = Vue("Vue.js") webpack = Custom("Webpack", "./my_resources/webpack.png") babel = Custom("Babel", "./my_resources/babel.png") with Cluster("サーバーサイド"): nodejs = Nodejs("Node.js") rails = Rails("Rails") ruby = Ruby("Ruby") rubocop = Custom("Rubocop", "./my_resources/rubocop.png") rspec = Custom("Rspec", "./my_resources/rspec.png") eslint = Custom("ESLint", "./my_resources/eslint.png") database = PostgreSQL("PostgreSQL") store = S3("AWS S3") heroku = Custom("Heroku", "./my_resources/heroku.png") with Cluster("GitHub"): ci = GithubActions("GitHubActions") git = Git("Git") eslint >> js >> vue >> webpack >> nodejs >> rails >> heroku daisyui >> tailwind >> webpack babel >> webpack rubocop >> ruby >> rails rspec >> rails rspec >> vue rails >> ci >> git rails << database rails << store
アイコンの使用許可
CustomでのアイコンはそれぞれのサービスのBranding Guidelinesなどを参考にした。大体は「フェアユース」なら許されそう。ここらへん、あまり時間を使ってないのできっちりしなければならない場合は、読み込みが必要。
Tailwind https://tailwindcss.com/brand
Webpackなど、OpenJSファンデーションのパッケージ https://openjsf.org/wp-content/uploads/sites/84/2021/01/OpenJS-Foundation-Trademark-Policy-2021-01-12.docx.pdf
Bable https://github.com/babel/babel/discussions/11731
Rubocop https://docs.rubocop.org/rubocop/about/logo.html
ESLint https://eslint.org/branding/
Heroku https://brand.heroku.com
