[PlantUML]配置図のレイアウトが崩れる② 結論：矢印の長さが大事

概要

plantumを触っている最中に詰まったので、忘備録として残しておきます。

https://qiita.com/RYA234/items/65d50ab688bdb98d7ec6
の記事の続編です。

改善したいところ

UML図

受注データと売上データを線で繋げようとすると受注の枠と売上の枠の位置がずれる。
（なんで？？）

コード

@startuml
top to bottom direction
skinparam linecolor White

frame "業務フロー（改善前）" {

  frame "受注" {
    component "受注入力" as orderinput
    database "受注データ" as orderdata
    rectangle "受注伝票" as orderReport
    orderinput --> orderdata
    orderdata --> orderReport
  }

  frame "出荷指示" {
    component "出荷指示画面" as shippingOrderInput
    rectangle "出荷指示書" as shippingOrderReport
    shippingOrderInput --> orderdata
    orderdata --> shippingOrderReport
    ' ダミー用
    cloud "ダミー" as Dummy1 #white;line:white;text:white;
    shippingOrderInput -[hidden]-> Dummy1
    Dummy1 -[hidden]-> shippingOrderReport
  }

  frame "出荷" {
    component "出荷確認画面" as shippingConfirmInput
    rectangle "納品書" as DeliverySlip
    shippingConfirmInput --> DeliverySlip
    ' ダミー用
    cloud "ダミー" as Dummy2 #white;line:white;text:white;
    shippingConfirmInput -[hidden]-> Dummy2
    Dummy2 -[hidden]-> DeliverySlip
  }

  frame "売上" {
    component "売上入力" as SalesInput
    database "売上データ" as  Salesdata
    rectangle "売上伝票" as SalesSlip
    SalesInput --> Salesdata
    Salesdata --> SalesSlip
  }

  '=== 関係線 ===
  ' 今回の課題
  ' 線を引くとレイアウトがおかしくなる。
  Salesdata --> DeliverySlip
  orderdata <--> Salesdata
  shippingConfirmInput --> Salesdata
}
@enduml

修正箇所

線の長さ(-)部分を変更する

受注データ-売上データ間において-の数は1個にする
理由：階層が同じのため

納品書と売上データにおいて-の数は2個にする
理由：階層が違うため

修正後

※線のタイプをorthoにしました。
　こっちのほうがそれっぽいですしね。

UML図

コード

plantuml

@startuml
top to bottom direction
skinparam linecolor White
skinparam linetype ortho
frame "業務フロー（改善後）" {

  frame "受注" {
    component "受注入力" as orderinput
    database "受注データ" as orderdata
    rectangle "受注伝票" as orderReport
    orderinput --> orderdata
    orderdata --> orderReport
  }

  frame "出荷指示" {
    component "出荷指示画面" as shippingOrderInput
    rectangle "出荷指示書" as shippingOrderReport
    shippingOrderInput --> orderdata
    orderdata --> shippingOrderReport
    ' ダミー用
    cloud "ダミー" as Dummy1 #white;line:white;text:white;
    shippingOrderInput -[hidden]-> Dummy1
    Dummy1 -[hidden]-> shippingOrderReport
  }

  frame "出荷" {
    component "出荷確認画面" as shippingConfirmInput
    rectangle "納品書" as DeliverySlip
    shippingConfirmInput --> DeliverySlip
    ' ダミー用
    cloud "ダミー" as Dummy2 #white;line:white;text:white;
    shippingConfirmInput -[hidden]-> Dummy2
    Dummy2 -[hidden]-> DeliverySlip
  }

  frame "売上" {
    component "売上入力" as SalesInput
    database "売上データ" as  Salesdata
    rectangle "売上伝票" as SalesSlip
    SalesInput --> Salesdata
    Salesdata --> SalesSlip
  }

  '=== 関係線 ===
  ' 今回の課題
  ' 線を引くとレイアウトがおかしくなる。
+  Salesdata <-- DeliverySlip #line:red;text:red;: 納品書と売上データは階層が違うので　--にする
+  orderdata <-> Salesdata #line:blue;text:blue;:納品書と売上データは階層が同じ　-にする
+  shippingConfirmInput <--> Salesdata #line:green;text:green;:納品書と売上データは階層が違うので　--にする
}
@enduml

一言

この仕様を把握することは重要だと思います。
PlantUMLのレイアウト崩れる問題の対処方法の一つになると思います。

参考

->を-->に変更