PlantUML スタイル調整(色・線の太さ)、配置調整、注釈調整、リンク設定

PlantUMLで表現するときに役立つ、便利な指定方法を紹介します。

スタイル調整(色・線の太さ)、配置調整、注釈調整、リンク設定について取り上げます。

スタイル調整(色・線の太さ)

「rectangleの背景色」「線の色・太さ」を変更する例です。

@startuml

rectangle "aaa" as a
rectangle "bbb" as b #f0f
rectangle "ccc" as c #green
rectangle "ddd" as d
rectangle "eee" as e
rectangle "fff" as f

a --> b : default
a -[#f0f]--> c : 16進数で指定
a -[#green]---> d : カラー名称で指定
a -[#green,thickness=4]----> e : 太さ変更
a -[#green,thickness=8]-----> f #text:green : テキストの色も変更


@enduml
810-design-uml-style-position-note-link_01.png

配置調整

デフォルト(上から下へ)

@startuml

rectangle "aaa" as a
rectangle "bbb" as b
rectangle "ccc" as c

a --> b
b --> c

@enduml
810-design-uml-style-position-note-link_02_01.png

デフォルト変更(左から右へ)

@startuml
left to right direction

rectangle "aaa" as a
rectangle "bbb" as b
rectangle "ccc" as c

a --> b
b --> c

@enduml
810-design-uml-style-position-note-link_02_02.png

hiddenで個別調整

@startuml

rectangle "aaa" as a
rectangle "bbb" as b
rectangle "ccc" as c
rectangle "ddd" as d
rectangle "eee" as e
rectangle "fff" as f

a -[hidden]-> b

b -[hidden]-> c

c -[hidden]-> d
c -[hidden]-> e
c -[hidden]-> f

@enduml
810-design-uml-style-position-note-link_02_03.png

上下左右を調整

@startuml

rectangle "aaa" as a
rectangle "bbb" as b
rectangle "ccc" as c
rectangle "ddd" as d
rectangle "eee" as e

' leftでもOK
a -l-> b

' rightでもOK
a -r-> c

' upでもOK
a -u-> d

' downでもOK
a -d-> e

@enduml
810-design-uml-style-position-note-link_02_04.png

注釈調整

@startuml

rectangle "aaa" as a
note left
  コメントa
end note

rectangle "bbb" as b
note right
  コメントb
end note

rectangle "ccc" as c
note top
  コメントc
end note

rectangle "ddd" as d
note bottom
  コメントd
end note

' ofで指定
note bottom of a #pink
  コメントa
end note

' ofで指定
note bottom of b #pink
  コメントb

  <size:24>スタイル調整</size>
  強調 → **あああ**
  下線 → __あああ__
  打ち消し線 → --あああ--
end note

@enduml
810-design-uml-style-position-note-link_03.png

リンク設定

クリックしてWebページに飛ばすように設定できます。

@startuml

' リンク指定方法1
rectangle "jump to google" as google [[https://www.google.com/]]
rectangle "jump to yahoo" as yahoo [[https://www.yahoo.co.jp/]]

note as note1
  ' リンク指定方法2
  [[https://www.google.com/]]

  ' リンク指定方法3
  [[https://www.google.com/ jump to google]]
end note

@enduml
810-design-uml-style-position-note-link_04.png
【エンジニア向け】仕事を見つける方法

転職する

転職エージェントを活用する

転職サイトの場合、自身でサイト上から企業を探す必要があります。 一方「レバテックキャリア」 などの転職エージェントの場合、エージェントが企業を紹介してくれます。エージェントが間に入ることにより、日程調整や、条件交渉などもサポートしてくれます。

転職ドラフトを活用する

転職ドラフト」は、 企業がITエンジニアをドラフトという形で指名するサービスです。年収が最初に提示されるなどのメリットがあります。 ただ、初回登録時にレジュメ作成が必要で、すでにエンジニア経験が豊富にあるエンジニア向けのサービスかと思います。 レジュメ作成が手間ですが、自身のキャリアを見直す機会になり、他の仕事探しにも役立つはずです。

エンジニア転職保証のあるスクールを活用する

ある程度、開発経験のあるかたであれば、独学で必要なスキルを身につけることができるはずです。ただ、別業種からエンジニアに転職したい場合など、1から独学で学ぶのはハードルが高いです。そういった方は、スクールの活用を検討しても良いと思います。 「TechAcademy」は、エンジニア転職保証コースを提供しています。給付金制度の対象講座として認定されているため、金銭面の負担も抑えることができます。

フリーランスとして活動する

レバテックフリーランス」「ITプロパートナーズ」「ギークスジョブ」は、フリーランスエージェントサービスです。 エージェントによって、支払いサイトなど細かい違いはありますが、まずは良い案件を見つけることが重要です。 登録自体は無料なので、複数エージェントに登録して、より多くの案件を紹介してもらうのがおすすめです。

logo
わくわくBank.
技術系の記事を中心に、役に立つと思ったこと、整理したい情報などを掲載しています。