YAMLで定義してNW図を作成できる drawthe.net が便利なので使ってみようと思ったのですがWebAPIが無いため毎回ブラウザ上からYAMLを入力して作図する必要がありました。
そこで、自動化できたら便利かなと思いdrawthe.netと連携するツールを作ってみました。
wrapdraw
今回作ったツールはこれです。
drawthe.netは、Javascriptで動作するので基本ブラウザからの操作が必要です。
そのため、本ツールではSelenium + chromedriver + Chromeでブラウザ操作を自動化するようにしています。
また、Flaskを使ってWebサービス化したのでAnsibleなどを使って自動的にファイルの描画及びダウンロードが出来ます。
コンテナも用意しているので、簡単に試すこともできます 🙂
使い方
今回はDockerとAnsible（2.10以上が必要）を例にします。
Dockerが起動している状態で次のコマンドでコンテナを起動します。
|
1 2 |
# docker run -itd --name wrapdraw --rm skyjokerxx/wrapdraw:latest |
コンテナが起動したか確認します。
|
1 2 3 4 |
# docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES cb19f242842a skyjokerxx/wrapdraw:latest "/bin/sh -c 'pytho..." 14 seconds ago Up 11 seconds wrapdraw |
次に以下のPlaybookを作成します。
wrapdraw_ip は環境に合わせて変更してください。
|
1 2 |
# vi playbook.yml |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
--- - name: Sample playbook hosts: localhost gather_facts: false vars: wrapdraw_ip: 172.17.0.2 tasks: - name: Render a network diagram uri: url: "http://{{ wrapdraw_ip }}:8080/api/render" method: POST body_format: form-multipart body: file: filename: sample.yml return_content: true timeout: 300 status_code: 200 register: render_image_result - copy: content: "{{ render_image_result.content }}" dest: sample_image.png |
NW図用のYAMLは、drawthe.netのサンプルを使用してみます。
次のYAMLを作成します。
|
1 2 |
# vi sample.yml |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
diagram: fill: "white" rows: 6 columns: 6 gridLines: true title: color: black fill: none logoFill: white logoUrl: "https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg" stroke: black text: "Groups" type: box cisco: &cisco color: "#004BAF" fill: "white" iconFamily: "cisco" iconFill: "#004BAF" iconStrokeWidth: .25 preserveWhite: true stroke: "#004BAF" icons: router1: {<<: *cisco, x: 0, y: 5, icon: "router"} router2: {<<: *cisco, x: 2, y: 5, icon: "router"} router3: {<<: *cisco, x: 0, y: 3, icon: "router"} router4: {<<: *cisco, x: 2, y: 3, icon: "router"} router5: {<<: *cisco, x: 3, y: 2, icon: "router"} router6: {<<: *cisco, x: 5, y: 2, icon: "router"} router7: {<<: *cisco, x: 3, y: 0, icon: "router"} router8: {<<: *cisco, x: 5, y: 0, icon: "router"} group: &group - { stroke: "black", fill: "none", color: black } groups: - { <<: *group, name: topLeft, members: [router1, router2, router3, router4] } - { <<: *group, textLocation: "topMiddle", name: topMiddle, members: [router1, router2, router3, router4] } - { <<: *group, textLocation: "topRight", name: topRight, members: [router1, router2, router3, router4] } - { <<: *group, textLocation: "bottomLeft", name: bottomLeft, members: [router1, router2, router3, router4] } - { <<: *group, textLocation: "bottomMiddle", name: bottomMiddle, members: [router1, router2, router3, router4] } - { <<: *group, textLocation: "bottomRight", name: bottomRight, members: [router1, router2, router3, router4] } - { <<: *group, textLocation: "leftTop", name: leftTop, members: [router5, router6, router7, router8] } - { <<: *group, textLocation: "leftMiddle", name: leftMiddle, members: [router5, router6, router7, router8] } - { <<: *group, textLocation: "leftBottom", name: leftBottom, members: [router5, router6, router7, router8] } - { <<: *group, textLocation: "rightTop", name: rightTop, members: [router5, router6, router7, router8] } - { <<: *group, textLocation: "rightMiddle", name: rightMiddle, members: [router5, router6, router7, router8] } - { <<: *group, textLocation: "rightBottom", name: rightBottom, members: [router5, router6, router7, router8] } |
Playbookを実行します。
|
1 2 |
# ansible-playbook playbook.yml |
sample_image.png が作成されていることを確認します。
|
1 2 3 |
# ls playbook.yml sample_image.png sample.yml venv |
drawtheはローカルでも動作するので、ローカルに構築したdrawtheとも連携可能です。
その場合は次の環境変数にローカルに構築したdrawtheサーバのURLを指定してください。
|
1 2 |
# docker run -itd --name wrapdraw --rm -e URL='http://172.17.0.3' skyjokerxx/wrapdraw:latest |
drawthe.netと連携してNW図の作成が自動化できました 🙂
これで、Ansibleでネットワーク器機の情報を取得して自動でNW図が作れないか夢見てます。
