需要が余りないと思われる記事を備忘録として残しておきます。
GWで実家に帰った際に紙の家系図が出てきました。このままでもいいのですが、データのほうがどこでも見れて管理しやすいというのがあるため、PlantUMLを使って家系図を作成したので備忘録として残しておきます。
目次[非表示]
PlantUMLを選択した理由
今回家系図を作成するにあたり下記の要件を定義しました。
- PowerPointなどの汎用ツールで編集できる形式で画像出力が可能(家系図はいろんな人が見るのが想定されるため、ツールを持ってない人が見れない、サービスが終了したことにより見れなくなることを避けるため)
- 無料で使えること(先ほど同様ですが有料のツールだと、ツールを買った人じゃないと見れないため)
- 画像の位置を揃えるのが楽であること(私が知らないだけかもしれないですが、パワーポイント/エクセル/ワードで位置を揃えるのが少し億劫であるため)
ツールを探していく中で下記の候補がありました
smartartで出力できれば一番よさそうだったのですが、smartartで作成できる組織図が家系図と少し相性が悪そうで、ベース作成には適しているように見受けられましたが、メンテナンスが大変そうに見受けられたため、除外してしまいました。
家系図ツールズはよさそうでしたが、更新が停止されているため今後のことを加味すると除外しました。
最後にPlantUMLですが、家系図に合うのはなさそうでしたが現在UMLを勉強しているのとSVG形式で出力でき、SVG形式で出力された画像はPowerpointなどで編集が可能(グループ化解除すれば編集が可能)ということで一応要件にもあっているため、選定しました。
PlantUMLの導入については下記を参照してください
捕捉になりますが、Xを調べてみると同じ事を考えている人はやはりいるみたいです。
RimWorldで複雑化する家系図の管理に不定期で悩んでたけど、親子関係に特化するならPlantUMLのオブジェクト図が自動整形もあって最高かもしれないという閃きを
— リヒト (@lichtmec) December 1, 2024
PlantUMLを使って家系図を作成する
前段が長くなってしまいましたが、PlantUMLを使って家系図を作ってみます。
今回はステートマシン図を使って家系図を作っていこうと思います。(最初に言っておきますが、そもそもUMLは家系図向けのものではないため少し無理やり作図してます)
ステートマシン図の書き方については下記サイトを参考にしました。
家族のかたまりを表現する
まず最初に家族のまとまりを表現していきます。ここではStateを使って家族のグループを作成します。
state "○○ 家" as temp_fam #90ee90{ }
上記の○○家というところに家族のまとまりのグループ名を記載します。as以降はこのグループを何という変数名に入れるかみたいなイメージです。それ以降の#の数字はこのグループの背景色を記述してます。ここでは直系家族は#90ee90で表現し、それ以外の家族は背景色を指定せずに表現することにします。
出力結果は下記のようになります。
(上記図ではアクションを記載する欄も緑色になってますが、アクション欄に内容を記載すると緑背景が解除されます)
両親を表現する
次に両親を表現していきたいと思います。
先ほどと同様にState図で表現します。先ほどと異なる点は下記2つです
- 背景色を変えて男性、女性を表現している
- アクションを記載する欄に生年月日などの情報を記述(下記コード上ではdad:となっている箇所)
state "○○ 家" as temp_fam #90ee90{ state "dad" as dad #B0C4DE dad:1900年生まれ state "mam" as mam #FFF0F5 mam:1900年生まれ }
上記コードの出力結果は下記のようになります
ご自身が残したい情報を記載してみてください。
次に両親の表現をしていきます。下記ツイートにもある通りUMLではなかなか表現しにくいところではありますが、無理やり表現してみます
今回活用したのは条件付き状態を表す<<choice>>を使って両親と兄弟を表現してみます。なるほど。いわゆるツリー構造ではないのでUMLでの表現には合わなさそうですね。
— hmsk (@hmsk) January 29, 2019
具体的な例を提示すると下記の通りになります。
@startuml fam state "○○ 家" as temp_fam #90ee90{ ' 両親を表す場所 ' --------------------------------- state "dad" as dad #B0C4DE dad:1900年生まれ state "mam" as mam #FFF0F5 mam:1900年生まれ ' --------------------------------- ' 両親と兄弟のつながりを作るChoiceを作る場所 ' --------------------------------- state fam_temp <choice> ' --------------------------------- ' 両親をchoiceとつなげる場所 ' --------------------------------- dad -> fam_temp mam -l-> fam_temp ' --------------------------------- } @enduml
このコードの出力結果は下記のとおりです。choiceに向かって両親の矢印が向かい合わせになっていることが確認できます。
兄弟を接続していく
次に兄弟を接続していきます。基本的なコードは先ほど同様で、兄弟を表すステートと作成し、choiceと接続していきます。工夫しているところでいうとchoiceと兄弟をつなぐ際に-d->という表記を行い、下方向に矢印が出るように明示的に指示をしていることです。
@startuml fam state "○○ 家" as temp_fam #90ee90{ ' 両親を表す場所 ' --------------------------------- state "dad" as dad #B0C4DE dad:1900年生まれ state "mam" as mam #FFF0F5 mam:1900年生まれ ' --------------------------------- ' 両親の子供を表す場所 ' --------------------------------- state "big bro" as big_bro #B0C4DE state "little bro" as little_bro #B0C4DE state "big sis" as big_sis #FFF0F5 state "little sis" as little_sis #FFF0F5 ' --------------------------------- ' 両親と兄弟のつながりを作るChoiceを作る場所 ' --------------------------------- state fam_temp <<choice>> ' --------------------------------- ' 両親をchoiceとつなげる場所 ' --------------------------------- dad -> fam_temp mam -l-> fam_temp ' --------------------------------- ' 両親の子供をchoiceとつなげる場所 ' --------------------------------- fam_temp -d-> big_bro fam_temp -d-> big_sis fam_temp -d-> little_bro fam_temp -d-> little_sis ' --------------------------------- } @enduml
これの出力結果は以下の通りです。徐々に家系図っぽくなってきた気がします。
一応big broが長男、little broが次男、big sisが長女、little sisが次女のイメージで作成してます
子供が別の家庭を持ったことを表現していく
最後に子供が結婚して別の家庭を持ったことを表現していきます。
今回は先ほどの例のbig broが結婚してbig bro家を形成した場合を表現してみます。
big broさんがbig bro mamさんと結婚した例を作成します。
この時○○家の記載する順番が影響するので、big bro家の記述を最初にもってきます。
具体的に言うと下記の通りです
@startuml fam state "big bro 家" as bigbro_fam #90ee90{ ' 両親を表す場所 ' --------------------------------- state "big bro" as big_bro #B0C4DE state "big bro mam" as bigbro_mam #FFF0F5 ' --------------------------------- ' 両親の子供を表す場所 ' --------------------------------- state "big bro_son" as bigbro_son #B0C4DE ' --------------------------------- ' 両親と兄弟のつながりを作るChoiceを作る場所 ' --------------------------------- state fam_bigbro <<choice>> ' --------------------------------- ' 両親をchoiceとつなげる場所 ' --------------------------------- big_bro -> fam_bigbro bigbro_mam -l-> fam_bigbro ' --------------------------------- ' 両親の子供をchoiceとつなげる場所 ' --------------------------------- fam_bigbro -d-> bigbro_son ' --------------------------------- } state "○○ 家" as temp_fam #90ee90{ ' 両親を表す場所 ' --------------------------------- state "dad" as dad #B0C4DE dad:1900年生まれ state "mam" as mam #FFF0F5 mam:1900年生まれ ' --------------------------------- ' 両親の子供を表す場所 ' --------------------------------- state "big bro" as big_bro #B0C4DE state "little bro" as little_bro #B0C4DE state "big sis" as big_sis #FFF0F5 state "little sis" as little_sis #FFF0F5 ' --------------------------------- ' 両親と兄弟のつながりを作るChoiceを作る場所 ' --------------------------------- state fam_temp <<choice>> ' --------------------------------- ' 両親をchoiceとつなげる場所 ' --------------------------------- dad -> fam_temp mam -l-> fam_temp ' --------------------------------- ' 両親の子供をchoiceとつなげる場所 ' --------------------------------- fam_temp -d-> big_bro fam_temp -d-> big_sis fam_temp -d-> little_bro fam_temp -d-> little_sis ' --------------------------------- } @enduml
これの出力結果は下記の通りになります
もし、○○家の後にbig bro家の記述をした場合は下記のような表示なってしまいます。
これでもいいかもしれませんが見栄えが悪いため、順序を変えて作成しました。(記述方法を工夫すれば記述順序によらず作成できるかもしれませんが、私の実力ではわからなかったため、いったん運用でカバーとします。ご存じの方いればご教示お願いします。)
イメージとしては最新の人から記述していけば問題なく描画することができると思います。
念のため、上記画像のソースコードは下記の通りです。
@startuml fam state "○○ 家" as temp_fam #90ee90{ ' 両親を表す場所 ' --------------------------------- state "dad" as dad #B0C4DE dad:1900年生まれ state "mam" as mam #FFF0F5 mam:1900年生まれ ' --------------------------------- ' 両親の子供を表す場所 ' --------------------------------- state "big bro" as big_bro #B0C4DE state "little bro" as little_bro #B0C4DE state "big sis" as big_sis #FFF0F5 state "little sis" as little_sis #FFF0F5 ' --------------------------------- ' 両親と兄弟のつながりを作るChoiceを作る場所 ' --------------------------------- state fam_temp <<choice>> ' --------------------------------- ' 両親をchoiceとつなげる場所 ' --------------------------------- dad -> fam_temp mam -l-> fam_temp ' --------------------------------- ' 両親の子供をchoiceとつなげる場所 ' --------------------------------- fam_temp -d-> big_bro fam_temp -d-> big_sis fam_temp -d-> little_bro fam_temp -d-> little_sis ' --------------------------------- } state "big bro 家" as bigbro_fam #90ee90{ ' 両親を表す場所 ' --------------------------------- state "big bro" as big_bro #B0C4DE state "big bro mam" as bigbro_mam #FFF0F5 ' --------------------------------- ' 両親の子供を表す場所 ' --------------------------------- state "big bro_son" as bigbro_son #B0C4DE ' --------------------------------- ' 両親と兄弟のつながりを作るChoiceを作る場所 ' --------------------------------- state fam_bigbro <<choice>> ' --------------------------------- ' 両親をchoiceとつなげる場所 ' --------------------------------- big_bro -> fam_bigbro bigbro_mam -l-> fam_bigbro ' --------------------------------- ' 両親の子供をchoiceとつなげる場所 ' --------------------------------- fam_bigbro -d-> bigbro_son ' --------------------------------- } @enduml
あとはこれを組み合わせていき家系図を作っていくだけなので、この記事としては以上とします。
(補足)power pointなどのマイクロソフト製品で編集する場合
ここではPlantUMLで作成した画像をマイクロソフト製品で編集する場合の手順を紹介します。
まず最初に画像をSVG形式で出力します。VS CODE上で cntrl+chift+Pでコマンドパレットを開いて下記エクスポートを選択します。
出力した画像をpower pointなどのマイクロソフト製品に貼り付けを行い、右クリックからのグループ解除を押下すると部品ごとに編集ができるようになります。
.png)
0 件のコメント:
コメントを投稿