kdnakt blog

hello there.

VS CodeのRemote - Containers拡張とDiagramsを利用してクラウド構成図を書く

久しぶりにクラウド構成図を書く機会があり、『Diagrams』を思い出したので、最近知ったVS CodeのRemote - Containers拡張との組み合わせを試してみた。

 

 

[Diagramsとは]

DiagramsはPythonコードでクラウド構成図を作成できるライブラリである。

概要はtadaさんやよしたくさんが紹介してくれている。

sadayoshi-tada.hatenablog.com

yoshitaku-jp.hatenablog.com

 

[Remote - Containersを使う動機]

Diagramsをインストールするにはいくつか方法があるが、例えば以下のコマンドを利用できる。

pip install diagrams

 

このとき、手元のマシンには諸事情によりpipやpyenvだのが色々インストールされており、ライブラリの管理がほとんどできていない状態だった。

そこにDiagramsを新たに追加して、依存関係が問題を起こしたりしたらたまらない、何かクリーンな環境が欲しい……と考えていたところ、 VS CodeのRemote - ContainersでPythonを利用できるとの記事を見つけた。

kic-yuuki.hatenablog.com

 

Remote - Containersについては、以前『試して理解 Linuxのしくみ』の実験プログラムを動かすために触ったことがあったので、今回もこの方法を採用することにした。

 

[Diagramsを動かすためのDockerfileなど]

色々試した結果、以下のようなDockerfileでRemote - Containersと組み合わせてDiagramsを利用することができた。

FROM python:3
USER root

RUN apt-get update
RUN apt-get -y install locales && \
    localedef -f UTF-8 -i ja_JP ja_JP.UTF-8
ENV LANG ja_JP.UTF-8
ENV LANGUAGE ja_JP:ja
ENV LC_ALL ja_JP.UTF-8
ENV TZ JST-9
ENV TERM xterm

RUN apt-get install -y vim less
RUN pip install --upgrade pip
RUN pip install --upgrade setuptools

# project specific settings
RUN apt-get -y install graphviz
RUN pip install diagrams

 

参考にしたのは以下の記事である。

qiita.com

 

本命のDiagramsのインストールに加えて、構成図を描画するために必要なgraphvizというソフトウェアも合わせてインストールしている。

RUN apt-get -y install graphviz
RUN pip install diagrams

graphvizのインストールを行わない場合、以下のようなエラーが発生して構成図を出力できないので注意が必要だ。

Traceback (most recent call last):
  File "simple.py", line 7, in 
    ELB("lb") >> EC2("web") >> RDS("userdb")
  File "/usr/local/lib/python3.8/site-packages/diagrams/__init__.py", line 139, in __exit__
    self.render()
  File "/usr/local/lib/python3.8/site-packages/diagrams/__init__.py", line 174, in render
    self.dot.render(format=self.outformat, view=self.show)
  File "/usr/local/lib/python3.8/site-packages/graphviz/files.py", line 207, in render
    rendered = backend.render(self._engine, format, filepath,
  File "/usr/local/lib/python3.8/site-packages/graphviz/backend.py", line 206, in render
    run(cmd, capture_output=True, cwd=cwd, check=True, quiet=quiet)
  File "/usr/local/lib/python3.8/site-packages/graphviz/backend.py", line 162, in run
    raise ExecutableNotFound(cmd)
graphviz.backend.ExecutableNotFound: failed to execute ['dot', '-Tpng', '-O', 'web_service'], make sure the Graphviz executables are on your systems' PATH

 

また、Remote - Containersの設定として、devcontainer.jsonextensionsは以下のようにpythonとgitの拡張機能を追加した。

// .devcontainer/devcontainer.json
{
	"name": "Docker from Docker",
	"dockerFile": "Dockerfile",
	"mounts": [ "source=/var/run/docker.sock,target=/var/run/docker-host.sock,type=bind" ],
	"settings": { 
		"terminal.integrated.shell.linux": "/bin/bash"
	},
	"extensions": [
		"ms-azuretools.vscode-docker",
		"ms-python.python",
		"editorconfig.editorconfig",
		"donjayamanne.githistory",
		"eamodio.gitlens"
	]
}

 

[VS Code上でクラウド構成図を書く]

ここまでの準備ができたら、以下の内容でsimple.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")

 

ターミナル上でpython simple.pyを実行すると、下の画像(web_service.png)が出力された。ファイル名は、Diagramクラスの引数をスネークケースにしたものが使われるらしい。

f:id:kidani_a:20200626020023p:plain

 

ちゃんと入力補完などの機能も使えるので、Diagramsで利用可能なアイコンの一覧が頭に入っていなくてもある程度までは作図ができる。

f:id:kidani_a:20200710005203p:plain

 

ただ、2020年7月現在、Diagramsで利用可能なアイコンの画像の一覧はなく、issueが出されている状態である。

github.com

 

実際にいくつか構成図を作ってみたが、目的のアイコンがどこにあるかを調べるには、やはりVS Codeの自動補完だけではなかなか難しい。

いくつか試してみて、そこそこ有効だった方法として、以下を挙げておく。

 

[まとめ]

  • VS CodeでDockerを利用してDiagramsでクラウド構成図を書いた
  • Diagrams本体に加えてGraphvizというソフトも必要なので忘れずにインストールしよう
  • Diagramsのアイコンを探す良い方法が欲しいので、issueにupvoteしていただけると!
  • 今回利用したコードは以下のリポジトリにまとめてある

github.com