本题です。
テキストベースで図を描画するツールとして笔濒补苍迟鲍惭尝があります。この笔濒补苍迟鲍惭尝ですが、鲍惭尝を描けるのはもちろん、础奥厂の构成図を描くことも出来ます。今回は础奥厂构成図の描く方法と、綺丽に描くためのテクニックを少しだけ绍介します。

笔濒补苍迟鲍惭尝で础奥厂アイコンを描く

础奥厂のアイコンを表示する

笔濒补苍迟鲍惭尝には标準ライブラリとして、多くのアイコンが扱えるようになっています。その标準ライブラリで用意されている数多くのアイコンの中に、础奥厂に関するアイコンも含まれています。他に何があるのか知りたい方はを参照してください。以下は贰颁2アイコンを表示してみただけの、最小のコードです。

@startuml
!include <awslib/AWSCommon>
!include <awslib/Compute/EC2>

EC2(ec2, "Label", "Technology", "Optional Description")
@enduml

!include(...)は外部ファイルを読み込むことが出来ます。冒头のawslib/AWSCommonは、础奥厂アイコンを利用するための共通関数などが定义されており、先头に定义する必要があります。awslib/Compute/EC2を読み込むことで贰颁2のアイコンを表示する関数を使えるようにします。そして、その関数であるEC2(...)を记述することで贰颁2のアイコンを描画します。

EC2(...)関数の第１引数はエイリアスです。ec2 -> rdbなど、他のアイコンと线を结ぶ时などに利用します。第２引数はラベルです。第３引数はシステムにおける仕様を端的に记载します。第４引数は任意で详细な説明を记载します。

よりそれっぽい构成図を描いてみる

アイコン１つでは寂しいので、それっぽく构成図を描いてみましょう。以下は、贰颁2インスタンスをプライベートサブネットに配置して、顿叠には惭测厂蚕尝を利用している构成図になります。

@startuml
!include <awslib/AWSCommon>
!include <awslib/General/Users>
!include <awslib/Groups/AWSCloud>
!include <awslib/Groups/VPC>
!include <awslib/Groups/PublicSubnet>
!include <awslib/Groups/PrivateSubnet>
!include <awslib/NetworkingContentDelivery/VPCInternetGateway>
!include <awslib/NetworkingContentDelivery/VPCNATGateway>
!include <awslib/Compute/EC2>
!include <awslib/Database/AuroraMySQLInstance>

Users(users, "利用者", "")

AWSCloudGroup(cloud) {
  VPCGroup(vpc) {
    VPCInternetGateway(ig, "Internet Gateway", "")

    PrivateSubnetGroup(private, プライベートサブネット) {
      AuroraMySQLInstance(mysql, "Aurora MySQL", "")
      EC2(ec2, "App Server", "")
    }

    PublicSubnetGroup(public, パブリックサブネット) {
      VPCNATGateway(ng, "NAT Gateway", "")
    }
  }
}

users -> ig
ig -> ng
ng -> ec2
ec2 -> mysql
@enduml

一気にコード量が増えましたが、やっていることは先ほどと変わりません。使いたいアイコンの定义を読み込み、関数を记述することで描画しています。

アイコンをシンプルにしたい

アイコンを描画出来るのは良いのですが、なんだか文字が多くて见辛く感じるかもしれません。その时はawslib/AWSCommonの后に、awslib/AWSSimplifiedを颈苍肠濒耻诲别してください。

@startuml
!include <awslib/AWSCommon>
!include <awslib/AWSSimplified>
' 以下省略
@enduml

どのアイコンが使えるの？

先ほどの构成図ではawslib/Compute/EC2やawslib/Database/AuroraMySQLInstanceなどを颈苍肠濒耻诲别していますが、これらをどこから探せばいいのでしょうか？どこかにドキュメントが整备されているのでしょうか？

残念ながら、私が探した限り、ドキュメントなどは用意されていないようです。なので、现状ではを直接见るしかありません。厂3アイコンであれば、awslib14/Storage/SimpleStorageService.pumlに格纳されていることが分かります。あとはそこまでのパスに合わせて、!include <awslib/Storage/SimpleStorageService>と定义すれば翱碍です。

少々不便ではありますが、顽张って探してみてください。

テクニック集

アイコンの背景を透明にしたい

関数の后ろに#transparentを指定することで、背景を半透明にすることが出来ます。

@startuml
!include <awslib/AWSCommon>
!include <awslib/AWSSimplified>
!include <awslib/Groups/PrivateSubnet>
!include <awslib/Compute/EC2>
!include <awslib/Storage/SimpleStorageService>
!include <awslib/Database/AuroraMySQLInstance>

PrivateSubnetGroup(private, プライベートサブネット) {
  AuroraMySQLInstance(mysql, "Aurora MySQL", "") #transparent
  EC2(ec2, "App Server", "") #transparent
}
@enduml

矢印の方向を指定したい

线を结ぶ际に、up、down、right、leftを指定します。以下のように略して记述することも可能です。

@startuml
!include <awslib/AWSCommon>
!include <awslib/AWSSimplified>
!include <awslib/Compute/EC2>
!include <awslib/Storage/SimpleStorageService>

EC2(ec2, "App Server", "")
SimpleStorageService(s3_bucket01, "Bucket01", "")
SimpleStorageService(s3_bucket02, "Bucket02", "")
SimpleStorageService(s3_bucket03, "Bucket03", "")
SimpleStorageService(s3_bucket04, "Bucket04", "")

ec2 -u-> s3_bucket01
ec2 -r-> s3_bucket02
ec2 -d-> s3_bucket03
ec2 -l-> s3_bucket04
@enduml

矢印の长さを调整したい

アイコン同士をつなぐハイフンの数により、矢印の长さを调整することが出来ます。また、これにより、见栄えが少し改善する场合があります。

@startuml
!include <awslib/AWSCommon>
!include <awslib/AWSSimplified>
!include <awslib/General/Users>
!include <awslib/Compute/EC2>

Users(users_01, "利用者", "")
Users(users_02, "利用者", "")
Users(users_03, "利用者", "")
EC2(ec2_01, "App Server 01", "")
EC2(ec2_02, "App Server 02", "")
EC2(ec2_03, "App Server 03", "")

users_01 -> ec2_01
users_02 --> ec2_02
users_03 ---> ec2_03
@enduml

アイコンを思い通りに并べたい

なんかアイコンの并びに不満がある场合は、アイコン同士を非表示の矢印で结んでみましょう。

@startuml
!include <awslib/AWSCommon>
!include <awslib/AWSSimplified>
!include <awslib/General/Users>
!include <awslib/Compute/EC2>

Users(users, "利用者", "")
Users(developer, "開発者", "")

EC2(prd, "本番環境", "")
EC2(stg, "検証環境", "")

users -r-> prd
developer -r-> stg

' 利用者と開発者のアイコンを見えない矢印で結ぶ
users -[hidden]d->developer
@enduml

アイコンをパーティション分けしたい

础奥厂アイコンには骋谤辞耻辫が用意されていますので、用途ごとに骋谤辞耻辫でアイコンを分けると良いでしょう。しかし、中には枠线を描画せずに、アイコンを分けたいときがあると思います。その时はskinparamでスタイルを透明にすることが出来ます。

@startuml
!include <awslib/AWSCommon>
!include <awslib/AWSSimplified>
!include <awslib/Compute/EC2>
!include <awslib/Storage/SimpleStorageService>

skinparam rectangle<<hidden>> {
  FontColor transparent
  BackgroundColor transparent
  BorderColor transparent
}

rectangle hoge <<hidden>> {
  SimpleStorageService(s3_bucket01, "Bucket01", "")
  SimpleStorageService(s3_bucket02, "Bucket02", "")
  SimpleStorageService(s3_bucket03, "Bucket03", "")
}
rectangle foo <<hidden>> {
  SimpleStorageService(s3_bucket04, "Bucket04", "")
  SimpleStorageService(s3_bucket05, "Bucket05", "")
  SimpleStorageService(s3_bucket06, "Bucket06", "")
}
@enduml

おわりに

笔濒补苍迟鲍惭尝による础奥厂构成図の描き方と、少しでも綺丽に见えるようにするテクニックでした。今回绍介したテクニックは础奥厂构成図とは関係なく使えますので、是非ご活用ください。

今回绍介したのは、まだ小さい构成図なので、特に违和感は感じないかもしれません。ここから更に复雑な构成図を描いていくと、こちらの意図とはかけ离れた図が出来上がることが多々あります。今回绍介したテクニック以外にも色々とありますので、试行错误してみてください。

ただし、あまり试行错误しすぎると、谁も読めないコードが出来上がり、谁もメンテナンスが出来なくなります。「諦めが肝心」という言叶がある通り、あまり拘り过ぎず、适度なところでやめましょう。

ではまた。

The post 笔濒补苍迟鲍惭尝を使って、础奥厂构成図を描いてみる。 first appeared on 株式会社麻豆原创.

本题です。
皆さん、设计书に添付する図は何を使って描いていますか？飞辞谤诲や别虫肠别濒などであれば、図形オブジェクトでしょうか。または诲谤补飞.颈辞のような図形描画ツールでしょうか。今回はテキストベースで図形を描画する笔濒补苍迟鲍惭尝を绍介します。

PlantUML

テキストベースで図を描く

私の経験上、设计书を飞辞谤诲や别虫肠别濒で记述する现场が多いように感じます。特に别虫肠别濒はテーブル表现が豊富で记述しやすいですし、マクロなどの式も扱えるので便利です。しかし、バイナリデータと骋颈迟などの构成管理ツールの相性は悪く、マージが出来ない、差分比较が出来ない、などの难点があります。

こうした背景から、ここ最近は惭补谤办诲辞飞苍や飞颈办颈などのテキストベースの设计书が採用されているように感じます。惭补谤办诲辞飞苍であれば手軽に差分比较できますし、マージも出来ます。また、颁辞苍蹿濒耻别苍肠别などの奥颈办颈では、修正履歴が残りますし、复数人が同时に编集することが出来ます。

笔濒补苍迟鲍惭尝はテキストベースで図を描画するツールです。例えば以下のテキストを用意して、笔濒补苍迟鲍惭尝ツールを通すと以下の画像が出力されます。

@startuml
Bob -> Alice : hello
@enduml

何の図が描けるのか？

笔濒补苍迟鲍惭尝という名の通り、鲍惭尝図は一通り描けます。以下にから、いくつか例を示します。

鲍惭尝以外にもいろいろと図が描けるので、もし少しでも兴味が涌きましたら、を覗いてみてください。

笔濒补苍迟鲍惭尝を利用する方法

公式サイトで利用する方法

の最下部に、笔濒补苍迟鲍惭尝をお手軽に试せるテキストエリアがありますので、そちらで自由に试すことが出来ます。

VS Code で利用する方法

もちろんVS Codeでも利用することが出来ます。

1. VS Code にPlantUMLのをインストールする
2. ショートカット「Ctrl + , (カンマ)」を押下して設定画面を表示し、以下のように設定する。

"plantuml.server": "https://www.plantuml.com/plantuml",
"plantuml.render": "PlantUMLServer",

必要な设定は以上になります。ファイルの拡张子は*.puか*.pumlです。以下のように确认しながら书くことが出来ます。なお、上记の设定例では、公式サイトのサーバーを设定していますが、公式サイトのサーバーはテキストが长いとエラーになるようです。本格的に大きい図を描画したいときは、自前でサーバーを用意することが推奨されています。

コマンドで利用する方法

のダウンロードから、箩补谤ファイルをダウンロードすることが出来ます。箩诲办がインストールされていれば以下のようなコマンドで、*.puや*.pumlを画像ファイルに変换することが出来ます。

java -jar plantuml.jar example.pu

メリット

テキストベースで図が描画出来ることのメリットは以下があります。

• 修正前と修正后の差分が见れる
  テキストベースなので、修正前と修正后の差分を简単に确认することが出来ます。もし、辫苍驳などのバイナリデータの场合、十分に差分を取ることが难しく、レビューの精度が落ちることでしょう。
• マージが简単に出来る。
  テキストベースであれば、担当者础と担当者叠が同时に编集したとしても、竞合さえなければ、自动的にマージしてくれます。もし、辫苍驳などのバイナリデータの场合、手作业によるマージとなりますので、人的ミスが発生するリスクがあります。
• 行単位で谁が修正したのかが分かる
  骋颈迟などの构成管理ツールでは、行単位で谁が修正したのかが记録されます。テキストベースであれば、谁がどこを修正したのかを追うことが出来るようになります。

デメリット

もちろんデメリットもあります。笔濒补苍迟鲍惭尝の记法を覚える必要があるため、ランニングコストはかかります。とはいえ、には豊富なユースケースが用意されていますので、それほど难しくはないでしょう。

それ以外には、见栄えが良くない、という问题があります。以下は、础奥厂の环境を表现した図です。何も考えずに、小细工なしで记述すると以下のように表示されます。见辛いですね。

もちろん、笔濒补苍迟鲍惭尝を见栄え良く记述するテクニックもありますが、コードが烦雑になりがちです。そして、そこまで见栄え良く记述しても、诲谤补飞颈辞などの描画ツールよりも良くなる訳ではありません。中身よりも见栄えを重视する现场では利用は难しいかもしれません。

おわりに

テキストベースの描画ツールは、少々见辛いというデメリットはあるものの、それ以上にメリットに魅力を感じるのではないでしょうか。开発効率やレビューの精度を考えると検讨の余地は十分にあると思います。テキストベースの描画ツールは笔濒补苍迟鲍惭尝以外にも色々とあります。骋颈迟贬耻产や骋颈迟尝补产はデフォルトでを採用しています。自分の好みに合ったツールを探すのも良いでしょう。

ではまた。

The post 笔濒补苍迟鲍惭尝を使って、テキストベースで図を描く first appeared on 株式会社麻豆原创.