PlantUML Class Diagram

I made a class diagram with PlantUML followed by the previou sequence diagram.

' Write comments after single quotaion mark.

@startuml

' Color Setting
skinparam classBorderColor black
skinparam classArrowColor black
skinparam noteBorderColor black
skinparam classAttributeIconSize 0

' Class Definition
class ClassA {
  - privateMember : Integer
  + publicMember : Integer
  # protectedMember : Integer
  ~ packageMember : Integer
  + method() : void
  + {static} staticMethod() : void
  + {abstract} abstractMethod() : void
}
' Note (For Class)
note top of ClassA: Note
note right of ClassA
  Note
end note

' Interface
interface Interface
ClassA ..|> Interface
' Note（Linkに対して）
note on link: Note

' Abstract Class
abstract AbstractClass
ClassA --|> AbstractClass

' Association
ClassA -- ClassB

' Composition
ClassA --* ClassC

' Aggregation
class ClassD
ClassA --o ClassD

' Dependency
class ClassE
ClassA ..> ClassE

@enduml

Generated Diagram

PlantUML クラス図

前回のシーケンス図に続いてクラス図も作成してみました。

' コメントはシングルクオーテーションの後に記述する

@startuml

' 色設定
skinparam classBorderColor black
skinparam classArrowColor black
skinparam noteBorderColor black
skinparam classAttributeIconSize 0

' クラス定義
class ClassA {
  - privateMember : Integer
  + publicMember : Integer
  # protectedMember : Integer
  ~ packageMember : Integer
  + method() : void
  + {static} staticMethod() : void
  + {abstract} abstractMethod() : void
}
' Note（Classに対して）
note top of ClassA: Note
note right of ClassA
  Note
end note

' Interface
interface Interface
ClassA ..|> Interface
' Note（Linkに対して）
note on link: Note

' Abstract Class
abstract AbstractClass
ClassA --|> AbstractClass

' Association
ClassA -- ClassB

' Composition
ClassA --* ClassC

' Aggregation
class ClassD
ClassA --o ClassD

' Dependency
class ClassE
ClassA ..> ClassE

@enduml

生成される図

PlantUML Sequence Diagram

I made a sample sequence diagramAtom with PlantUML. Most frequently used rules are in this sample, so you should be able to make your own diagrams by modifying this sample if you forget the rules.

' Writes comments after singl quotaion mark.

@startuml

' Color Setting
skinparam actorBorderColor black
skinparam sequenceParticipantBorderColor black
skinparam sequenceLifeLineBorderColor black
skinparam sequenceArrowColor black
skinparam noteBorderColor black

' Declaire participants.
' You can define an alias usibg "as".
actor Actor as A
participant Participant as P

A -> P : Synchronous Message
activate P
A <<-- P : Return Message
deactivate P

A ->> P : Asynchronous Message
A -> A : Message to Self

' Note (For messages)
A -> P : Message
note right
 Note: note (left|right) ... end note
 (Or just "note (left|right) : ...")
end note
' Note (For participants)
note over A, P : note (left|rigght|over) of

' Text Decoration
A -> P : Multi Line\n(Line Break)
A -[#blue]> P : <font color="blue"><b>Change Style</b></font>

' Conditional Branch
alt guard condition
  A -> P : Message
else guard condition
  A -> P : Message
end

' "Message to Self" doesn't work with "Activate" well.
A ->> P : Asynchronous Message
activate P
P -> P : Message to Self
deactivate P

@enduml

Generated Diagram

PlantUML シーケンス図

AtomでPlantUMLを編集する環境が整ったので、今回はシーケンス図のサンプルを作成しました。よく使いそうな記法を網羅するようにしていますので、記法を忘れていてもこのサンプルを修正しながら図を記述していくことができると思います。

' コメントはシングルクオーテーションの後に記述する

@startuml

' 色設定
skinparam actorBorderColor black
skinparam sequenceParticipantBorderColor black
skinparam sequenceLifeLineBorderColor black
skinparam sequenceArrowColor black
skinparam noteBorderColor black

' Participantの宣言（省略可能）
' asで別名を定義できる
actor Actor as A
participant Participant as P

A -> P : Synchronous Message
activate P
A <<-- P : Return Message
deactivate P

A ->> P : Asynchronous Message
A -> A : Message to Self

' Note（Messageに対して）
A -> P : Message
note right
 Note: note (left|right) ... end note
 (Or just "note (left|right) : ...")
end note
' Note（Participantに対して）'
note over A, P : note (left|rigght|over) of

' 文字装飾
A -> P : Multi Line\n(Line Break)
A -[#blue]> P : <font color="blue"><b>Change Style</b></font>

' 条件分岐
alt guard condition
  A -> P : Message
else guard condition
  A -> P : Message
end

' Message to SelfはActivateと上手く動作しない
A ->> P : Asynchronous Message
activate P
P -> P : Message to Self
deactivate P

@enduml

生成される図

PlantUML How to Install

What is PlantUML?

• A Language (DSL) to write UML in a text format.
• Supported diagrams:
  • Sequence diagram
  • Sequence diagram
  • Use case diagram
  • Class diagram
  • Activity diagram
  • Component diagram
  • State diagram
  • Object diagram
  • Deployment diagram (Beta)
  • Timing diagram (Beta)

Try It On Website

• You can convert the UML text to PNG, SVG or ASCII art on PlantUML website.
• A URL will be issued to the converted UML and you can embed it on your website.
  • http://plantuml.com/plantuml/

Set up an environment to use PlantUML with Atom (Windows10)

1. Install Graphviz
   • Download the installer (.msi) from the followin URL.
   • http://www.graphviz.org/Download_windows.php
2. Run Atom and install the PlantUML plugin
   • Select from the menu: File -> Settings -> Install.
   • Search for "plantuml-viewer" and install it.
3. Change the Settings of PlantUML Plugin
   • Select from the menu: File -> Settings -> Packages -> plantuml-viewer -> Settings.
     • Charset: UTF-8
     • Graphviz Dot Executable: C:\Program Files (x86)\Graphviz2.38\bin\dot.exe (When you installed Graphviz with default settings.)

PlantUML インストール方法

これまでUMLを記述するのには、仕事でも個人でもastah* communityを利用していました。astah* communityはバージョン7.0から商用利用不可となりましたが、私のUMLの用途はシステムの概要を説明するために簡単なクラス図とシーケンス図を使っていただけでしたので、有料版を購入するほどのものでもありません。そこでその代替となるツールを探してみることにしました。

Qiitaで人気そうなのはテキストでUMLを記述できるPlantUMLというツールでした。少し使ってみたところ、記法はシンプルで覚えやすく、テキストのために差分比較もでき、Atomのプラグインを利用することでリアルタイムプレビューもできるため、中々使いやすいと感じました。大規模の図では探したい場所をテキスト中から探すのにが大変になるかもしれませんが、私の用途では全く困らなそうです。

以下では、PlantUMLのインストール方法を簡単にご紹介しています。

PlantUML

• UMLをテキストで記述するための言語（DSL）
• 対応しているUMLのダイアグラム
  • シーケンス図
  • ユースケース図
  • クラス図
  • アクティビティ図
  • コンポーネント図
  • ステートマシン図
  • オブジェクト図
  • 配置図（ベータ版）
  • タイミング図（ベータ版）

Webサイトで簡単に試す

• 公式WebサイトでPNG, SVG, アスキーアートに変換できます。
• 変換したUMLにはURLが発行されWebサイトに埋め込むこともできます。
  • http://plantuml.com/plantuml/

Atomでの編集環境を構築する（Windows10）

1. Graphvizをインストールする

   • 下記のURLからインストーラ（.msi）をダウンロードします。
   • http://www.graphviz.org/Download_windows.php

2. Atomを起動してPlantUMLプラグインをインストールする

   • メニューから File -> Settings -> Install を選択します。
   • 「plantuml-viewer」を検索してインストールします。

3. PlantUMLプラグインの設定を更新する

   • メニューから File -> Settings -> Packages -> plantuml-viewer -> Settings を選択します。
     • Charset: UTF-8
     • Graphviz Dot Executable: C:\Program Files (x86)\Graphviz2.38\bin\dot.exe （Graphvizをデフォルト設定のままインストールした場合）

Assign Zone Apex Domain to AWS ELB (ALB)

What is zone apex?

Zone apex means a simplest domain, which is not a sub domain. For example, if we own a domain "example.com", "www.example.com" is not a zone apex, but "example.com" is a zone apex.

CNAME can not be configured to zone apex

If we use a DNS server outside AWS instead of using Route53, which is a DNS service from AWS, we need to configure the domain name of ELB(ALB) as CNAME record of the domain. However, this configuration may not work correctly because it violates the specification written in RFC1912.

Use an alias record of Route 53

Consequently we can't use outside DNS servers in this case, and have to use the function provided by Route53 which is called "alias record". Alias records can be configured like CNAME records, and behave like A records. (Route53 will resolve the IP address of the CNAME record and return the IP address as an A record response.)

Reference

• http://tech.blog.aerie.jp/entry/2014/09/09/162135