PlantUMLでAWSサービスを含む図を作る

Fri, 15 Dec 2017 00:00:00 +0000

プレゼンテーション資料をMarkdown形式で書いていて、図を入れたいが図はどうやって用意しようか、となりました。

せっかくテキストエディタでプレゼンを作れるようにしているのに、図を描くのにテキストエディタでなくドローツールを開くのは面倒だな、テキストで図を描ければ、ソースコードとして管理できるから似たような図を量産するのも楽だし、バージョン管理で変更点もわかりやすい。

ということで探したところ、Plantuml が見つかりました。日本語のマニュアルもあるし、評判もいいみたい。

インストールしようとしたところ、図を1,2個作るだけならオンラインでできるようです。試すだけならハードルはとても低い。

マニュアルを参考にして作ったのがこちら

@startuml [Github] as github [さくらVPS] as vps [local machine] as localmachine :ユーザー: <.... github :1) pull :ユーザー: ....> localmachine :2) Sculpinで変換 :ユーザー: ....> vps :3) upload(scp) :ユーザー: ....> github :4) push :訪問者: .left.> vps:閲覧 @enduml

変換した図がこれ

要素の順序や線の向きなど、細かく指定する方法もあるみたいですが、それをやりだすと大変そう。「まあ大体わかればいいか」というレベルで済むなら、驚くほど簡単でした。

# png でも svg でも作れるので、svg で問題ない環境なら svg もいいですね。WordPress ではまだ大変みたいなので png で貼っておきます

PlantUML で AWS の構成図を描く

UML で使えるアイコンはもちろん広く用意されているのですが、サービスのアイコンについても利用者が作って公開しているようです。AWS のサービスを表す図を公開している milo-minderbinder/AWS-PlantUML を見つけたので、これを使ってみました。

Github 上のライブラリを、前記のオンラインエディタから参照できるので、こちらも簡単です。使いたいコンポーネントを AWS-PlantUML から探して、include するだけで使えるようになります。

Plantuml on akky@サイボウズラボ・ブログ

PlantUMLでAWSサービスを含む図を作る

PlantUML で AWS の構成図を描く