作りたいものを書く - tAROの試行錯誤

今作りたいと思っているものをブログに書こうとしたら、構成図を書く必要が出てきました。そこでまずは描画について調べて試したことを書くことにします。 PowerPointはじめ、GUIの描画ツールは色々あるのですが、そこまで本格的に書くのはしんどいのでテキストで書いていい感じに描画してくれるものを探します。 AWSの構成図をPythonで書けたらいいと思ってaws 構成図描画 pythonでGoogle検索して最上位に出てきたDiagramsというライブラリが良さそうです。AWSの構成図をpythonで簡単に書けそうです。

diagrams.mingrammer.com

GettingStartedを見ると、GraphVizが必要とのことです。私の開発環境のMacの場合はbrew install graphvizでインストールできるようです。Homebrewはよくわからずにインストールしたはずなので早速上記コマンドでGraphvizをインストールします。その後、python3 -m pip install diagramsでDiagramsのインストール完了です。

早速QuickStartに書いてある以下のコードを実行して動作確認をします。

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")

ここでサンプルコードをdiagrams.pyとして実行したら以下のエラーが発生しました。

Traceback (most recent call last):
  File "diagrams.py", line 1, in <module>
    from diagrams import Diagram
  File "diagrams.py", line 1, in <module>
    from diagrams import Diagram
ImportError: cannot import name 'Diagram' from partially initialized module 'diagrams' (most likely due to a circular import) (diagrams.py)

インストールに失敗したかと思いましたが、冷静になってエラーを見てみると、most likely due to a circular importと書いてあり、most likelyなことをやっていることに思い当たりました。ファイル名(diagrams.py)がインポートするモジュール(diagrams)と同じというものすごく初歩的なミスです。こんな恥ずかしいミスもこのブログには書いておきます。

早速ファイル名をQuickStart通りにdiagram.py(末尾のsを削除)に変更して実行すると、web_service.pngというファイル名で、以下の画像ができていました。大成功です。

f:id:tARO:20210110220330p:plain

ようやく準備ができたので、作りたいものを書いてみます。作りたいものは、カメラなどのデバイスをAWSとつないでAWS上でゴニョゴニョするというもので、AWSの部分はDiagramsで問題なく書けそうです(Diagrams-nodes-aws)。しかし、問題はデバイスの方で、Diagramsにどんなものが用意されているのか、Genericにあるものをとりあえず全部書いてみます。

from diagrams import Diagram, Cluster
from diagrams.generic.blank import Blank
from diagrams.generic.compute import Rack
from diagrams.generic.database import SQL
from diagrams.generic.device import Mobile, Tablet
from diagrams.generic.network import Firewall, Router, Subnet, Switch, VPN
from diagrams.generic.os import Android, Centos, IOS, LinuxGeneral, Suse, Ubuntu, Windows
from diagrams.generic.place import Datacenter
from diagrams.generic.storage import Storage
from diagrams.generic.virtualization import Virtualbox, Vmware, XEN

with Diagram("Generic", show=True):
  with Cluster("Blank"):
    blank = Blank("Blank")
  with Cluster("Compute"):
    rack = Rack("Rack")
  with Cluster("Database"):
    sql = SQL("SQL")
  with Cluster("Device"):
    mobile = Mobile("Mobile")
    tablet = Tablet("Tablet")
  with Cluster("Network"):
    firewall = Firewall("Firewall")
    router = Router("Router")
    subnet = Subnet("Subnet")
    switch = Switch("Switch")
    vpn = VPN("VPN")
  with Cluster("OS"):
    android = Android("Android")
    centos = Centos("Centos")
    ios = IOS("IOS")
    linuxgeneral = LinuxGeneral("LinuxGeneral")
    suse = Suse("Suse")
    ubuntu = Ubuntu("Ubuntu")
    windows = Windows("Windows")
  with Cluster("Place"):
    datacenter = Datacenter("Datacenter")
  with Cluster("Storage"):
    storage = Storage("Storagte")
  with Cluster("Virtualization"):
    virtualbox = Virtualbox("Virtualbox")
    vmware = Vmware("Vmware")
    xen = XEN("XEN")

ものすごく縦長になりました。 f:id:tARO:20210110220428p:plain

Diagram("Generic", show=True)の引数にdirection="TB"を追加すると、ものすごく横長になりました。 f:id:tARO:20210110220454p:plain

deviceにはMobileとTabletしかありません。カメラを構成図に入れようと思ったら、Diagramsにないアイコンを追加する必要がありそうです。

困った時の公式ドキュメントです。Examplesを見てみると、一番下にRabbitMQ Consumers with Custom Nodesとあり、Custom Nodesという言葉がいい感じです。サンプルコードを見てみると、ネットからpngファイルをローカルにダウンロードして、それをそのままCustomノードとして使えるようです。

ということで、独自アイコンの追加の仕方がわかったので必要なアイコンを探します。困った時のいらすとやから使えそうなアイコンを探してみようと思います。

早速アクセスしてみると、トップページのONE PIECEのイラストが気になります。カメラなどデバイスの画像を探しにきたのにONE PIECEのイラストが気になります。ONE PIECEなんて15年近く読んでないのにONE PIECEのイラストが気になります。

練習にルフィの絵を書いてみます。

from urllib.request import urlretrieve
from diagrams import Cluster, Diagram
from diagrams.custom import Custom

luffy_url = "https://1.bp.blogspot.com/-tVeC6En4e_E/X96mhDTzJNI/AAAAAAABdBo/jlD_jvZvMuk3qUcNjA_XORrA4w3lhPkdQCNcBGAsYHQ/s1048/onepiece01_luffy.png"
luffy_icon = "luffy.png"
urlretrieve(luffy_url, luffy_icon)

with Diagram("ONE PIECE", filename="onepiece", show=True):
  luffy = Custom("モンキー・D・ルフィ", luffy_icon)