13. 応用例: Grpahviz等で家系図を#
13.1. 仮想敵な一族の家系図#
13.1.1. blockdaig#
blockdiagでの仮想的な一族の家系図を作成してみます。グループと婚姻関係を表すコンポーネントを 導入しています。
図 13.1 blockdiag での家系図#
同じ一族の家系図をgraphvizで描画してみます。
図 13.2 graphviz例#
図 13.3 graphviz例(digraph and neato)#
PlantUMLのコンポーネント図（あるいは配置図？）を使った作例です。 婚姻関係を表現するために、rectangle を導入しています。夫婦と婚姻関係を表現するために、 表示ラベルが空白(" ")のインタフェースコンポーネントを導入しています。
図 13.4 plantUMLによる作例#
13.2. Caroline Bouvier Kennedyの家系図#
Graphviz ギャラリー:家系図 にある 家系図の一例。 婚姻関係に rank=same の条件を追加しました。
図 13.5 Colors and forms symbolize following * Blue box - man * Red ellipse - woman * Blue line - Father/Child relation * Red line - Mother/Child relation * Green line - Spouse relation * Orange line - Ancestors (other) children * Violet line - (other) spouse#
13.2.1. neato#
同じグラフをレイアウトエンジンを neato として描いてみます。
図 13.6 Colors and forms symbolize following#
ケネディ家の家系図をPlantUML化してみます。
![@startuml
'skinparam linetype ortho
'left to right direction
top to bottom direction
person I5 #pink;line:red [
Caroline Bouvier Kennedy
b. 27.11.1957 New York
<img:_static/165px-Caroline_Kennedy.png>
]
person I6 #cyan;line:blue [
John Fitzgerald Kennedy Jr.
b. 25.11.1960 Washington
d. 16.7.1999
over the Atlantic Ocean,
near Aquinnah, MA, USA
<img:_static/180px-JFKJr2.png>
]
person I7 #cyan;line:blue [
Patrick Bouvier Kennedy
b. 7.8.1963
d. 9.8.1963
]
rectangle B89 as " "{
person I8 #cyan;line:blue [Joseph Patrick Kennedy
b. 6.9.1888 East Boston
d. 16.11.1969 Hyannis Port
<img:_static/1025901671.png>
]
() F89 as " " #green
person I9 #pink;line:red [
"Rose Elizabeth Fitzgerald
b. 22.7.1890 Boston
d. 22.1.1995 Hyannis Port
<img:_static/Rose_kennedy.jpeg>
]
}
person I10 #cyan;line:blue [Joseph Patrick Kennedy Jr
b. 1915
d. 1944
]
person I11 #pink;line:red ["Rosemary Kennedy
b. 13.9.1918
d. 7.1.2005
<img:_static/rosemary.png>
]
person I12 #pink;line:red ["Kathleen Kennedy
b. 1920
d. 1948
]
person I13 #pink;line:red ["Eunice Mary Kennedy
b. 10.7.1921 Brookline
]
person I15 #cyan;line:blue [
Aristotle Onassis
]
rectangle B34 as " " {
person I3 #cyan;line:blue [
John Vernou Bouvier III
b. 1891
d. 1957
<img:_static/BE037819.png>
]
() F34 as " " #green
person I4 #pink;line:red [
Janet Norton Lee
b. 2.10.1877
d. 3.1.1968
<img:_static/n48862003257_1275276_1366.png>
]
}
rectangle B12 as " " {
person I1 #cyan;line:blue [
John Fitzgerald Kennedy
b. 29.5.1917 Brookline
d. 22.11.1963 Dallas
<img:_static/kennedyface.png>
]
() F12 as " " #green
person I2 #pink;line:red [
Jaqueline Lee Bouvier
b. 28.7.1929 Southampton
d. 19.5.1994 New York City
<img:_static/jacqueline-kennedy-onassis.png>
]
}
I1 -right[#green,thickness=4]- F12
F12 -right[#green,thickness=4]- I2
F12 -[#purple]-- I5
F12 -[#purple]-- I6
F12 -[#purple]-- I7
I2 -right[#violet,thickness=4]- I15
I8 -right[#green,thickness=4]- F89
F89 -right[#green,thickness=4]- I9
F89 -[#purple]-- I1
F89 -[#purple]-- I11
F89 -[#purple]-- I10
F89 -[#purple]-- I12
F89 -[#purple]-- I13
I3 -right[#green,thickness=4]- F34
F34 -right[#green,thickness=4]- I4
F34 -[#purple]-- I2
@enduml](_images/plantuml-20400374b9ef9227b29c483c141a22133951741b.svg)
図 13.7 ケネディ家の家系図(using PlantUML)#
13.3. UNIX Family 'Tree'#
13.3.1. オリジナル(Graphviz)のUnix Family Tree#
13.3.2. PlantUMLでのUnix Tree 図#
![@startuml
'left to right direction
'top to bottom direction
scale 2.0
'skinparam componentStyle rectangle
'skinparam componentBackgroundColor lightblue
skinparam component{
Style rectangle
BackgroundColor lightblue
text red
}
["5th Edition"] --> ["6th Edition"]
["5th Edition"] --> ["PWB 1.0"]
["PWB 1.0"] --> ["PWB 1.2"]
["PWB 1.0"] --> ["USG 1.0"]
["PWB 1.2"] --> ["PWB 2.0"]
["PWB 2.0"] --> ["Unix/TS 3.0"]
["6th Edition"] --> ["LSX"]
["6th Edition"] --> ["1 BSD"]
["6th Edition"] --> ["Mini Unix"]
["6th Edition"] --> ["Wollongong"]
["6th Edition"] --> ["Interdata"]
["1 BSD"] --> ["2 BSD"]
["2 BSD"] --> ["2.8 BSD"]
["Interdata"] --> ["Unix/TS 3.0"]
["Interdata"] --> ["PWB 2.0"]
["Interdata"] --> ["7th Edition"]
["7th Edition"] --> ["8th Edition"]
["7th Edition"] --> ["32V"]
["7th Edition"] --> ["V7M"]
["7th Edition"] --> ["Ultrix-11"]
["7th Edition"] --> ["Xenix"]
["7th Edition"] --> ["UniPlus+"]
["8th Edition"] --> ["9th Edition"]
["32V"] --> ["3 BSD"]
["V7M"] --> ["Ultrix-11"]
["2.8 BSD"] --> ["Ultrix-11"]
["2.8 BSD"] --> ["2.9 BSD"]
["3 BSD"] --> ["4 BSD"]
["4 BSD"] --> ["4.1 BSD"]
["4.1 BSD"] --> ["4.2 BSD"]
["4.1 BSD"] --> ["2.8 BSD"]
["4.1 BSD"] --> ["8th Edition"]
["4.2 BSD"] --> ["4.3 BSD"]
["4.2 BSD"] --> ["Ultrix-32"]
["USG 1.0"] --> ["CB Unix 1"]
["USG 1.0"] --> ["USG 2.0"]
["CB Unix 1"] --> ["CB Unix 2"]
["CB Unix 2"] --> ["CB Unix 3"]
["CB Unix 3"] --> ["Unix/TS++"]
["CB Unix 3"] --> ["PDP-11 Sys V"]
["USG 2.0"] --> ["USG 3.0"]
["USG 3.0"] --> ["Unix/TS 3.0"]
["Unix/TS 1.0"] --> ["Unix/TS 3.0"]
["Unix/TS 3.0"] --> ["TS 4.0"]
["Unix/TS++"] --> ["TS 4.0"]
["CB Unix 3"] --> ["TS 4.0"]
["TS 4.0"] --> ["System V.0"]
["System V.0"] --> ["System V.2"]
["System V.2"] --> ["System V.3"]
@enduml](_images/plantuml-d0c215b51b27482856779a1f701e6f96ab7605f5.svg)
図 13.8 "courtesy Ian Darwin and Geoff Collyer, Softquad Inc."#
13.4. Other Example#
stack overflow: Family tree layout with Dot/GraphViz の回答からの例。 graphvizの処理系によって結果が異なる。
図 13.9 original#
これを少し書き換えてみた結果、Abraham-Monaの位置がうまくコントロールできません。
図 13.10 変更版#
図 13.11 ネットで提案された改善例#
PlantUMLで書き換えてみた結果、
![@startuml
skinparam componentStyle rectangle
' skinparam linetype ortho
rectangle Generation00 as " " {
[Abraham] #cyan
[Mona] #pink
() AbrahamAndMona as " " #black
Abraham -r- AbrahamAndMona
AbrahamAndMona -r- Mona
}
rectangle Generation01 as " " {
[Clancy] #cyan
()ClancyAndJackeline as " " #black
[Jackeline] #pink
Clancy -r- ClancyAndJackeline
ClancyAndJackeline -r- Jackeline
}
[Herb] #cyan
rectangle Generation10 as " "{
[Homer] #cyan
()HomerAndMarge as " " #black
[Marge] $pink
Homer -r- HomerAndMarge
HomerAndMarge -r- Marge
}
AbrahamAndMona -- Herb
AbrahamAndMona -- Homer
[Patty] #pink
[Selma] #pink
ClancyAndJackeline -- Marge
ClancyAndJackeline -- Patty
ClancyAndJackeline -- Selma
[Bart] #cyan
[Lisa] #pink
[Maggie] #pink
HomerAndMarge -- Bart
HomerAndMarge -- Lisa
HomerAndMarge -- Maggie
[Ling] #cyan
Selma -- Ling
@enduml](_images/plantuml-38fb5380009e1ba267bccd09d018cb7f35be2bf1.svg)
図 13.12 PlantUML版#
![@startuml
skinparam componentStyle rectangle
skinparam linetype ortho
skinparam component {
BackgroundColor<<Male>> lightblue
BackgroundColor<<Female>> pink
BorderColor<<Male>> blue
BorderColor<<Female>> red
}
skinparam interface{
BackgroundColor black
FontSize 1
}
[Abraham] <<Male>>
[Mona] <<Female>>
[Herb] <<Male>>
[Homer] <<Male>>
[Clancy] <<Male>>
[Jackeline] <<Female>>
[Marge] <<Female>>
[Patty] <<Female>>
[Selma] <<Female>>
[Bart] <<Male>>
[Lisa] <<Female>>
[Maggie] <<Female>>
[Ling] <<Male>>
()a1 as " "
()b1 as " "
()b2 as " "
()b3 as " "
Abraham -r- a1
a1 -r- Mona
Mona -r[hidden]- Clancy
a1 -- b2
b1 -r- b2
b2 -r- b3
b1 -- Herb
b3 -- Homer
Herb -r[hidden]- Homer
()p1 as " "
()q1 as " "
()q2 as " "
()q3 as " "
Homer -r- p1
p1 -r- Marge
p1 -- q2
q1 -r- q2
q2 -r- q3
q1 -- Bart
q2 -- Lisa
q3 -- Maggie
()x1 as " "
()y1 as " "
()y2 as " "
()y3 as " "
Clancy -r- x1
x1 -r- Jackeline
b3 -r[hidden]- y1
x1 -- y2
y1 -r- y2
y2 -r- y3
y1 -- Marge
y2 -- Patty
y3 -- Selma
Marge -r[hidden]- Patty
Patty -r[hidden]- Selma
Selma --- Ling
@enduml](_images/plantuml-4d72706bac9acf004e4c7ef660a3296b7b9ff344.svg)
図 13.13 ネットで提案された改善例をPlantUMLで書き直す。#
13.5. KEKの組織図 in PlantUML#
家系図ではないですが、同様の使い方で組織図も描けるのではと試してみます。
KEKの組織図は、https://www.kek.jp/wp-content/uploads/2024/04/orgchart_ja_20240401.pdf に掲載されている。 PlantUMLのWBSのような上から下へのトップダウンとはなっておらず、経営協議会／教育研究評議会／研究所運営会議とかどう取り扱って いいかわからない。 日本的組織とはそういうもんかとも思います。
一方で、PlantUMLのWBSもWBSのように、上から下への流れが定義によってはっきりしているものはよいが、組織図や、家系図といったものを一般的に表すことはできない様に感じます。
結局PlantUMLではコンポーネント図／配置図をベースにして、調整することができました。組織図も家系図の例のように、色々な手段を弄してなるべく近いものにしてみます。 (現状の組織を論理的な図にしてみることで、現状の組織の問題点が浮かびでるということもあるかとおもいます。）
KEKの組織図は組織としての役割と、所長会議の様な会議体が混じっているために、PlantUMLやgraphvizの様な表現に馴染まないような気もします。
とりあえずの試作版です。
![@startuml
scale 0.7
left to right direction
'top to bottom direction
'skinparam linextype ortho
skinparam component{
Style rectangle
}
[監事]
together{
[経営協議会]
[教育研究評議会]
}
component [役員会] {
[機構長]
[理事]
[機構長] -l- [理事]
}
[監事] -r- [機構長]
[経営協議会] -d-- [機構長]
[教育研究評議会] -d-- [機構長]
component [素粒子原子核研究所] {
[素粒子原子核研究所所長]
[役員会] -d- [素粒子原子核研究所]
[素粒子原子核研究所所長] -r- [素粒子原子核研究所副所長]
[素粒子原子核研究所所長] -l- [素粒子原子核研究所技術調整役]
[素粒子原子核研究所所長] -d-- [各研究グループ]
[素粒子原子核研究所所長] -d-- [和光原子核科学センタ]
[素粒子原子核研究所所長] -d-- [理論センタ]
[素粒子原子核研究所所長] -d-- [測定器開発センタ]
}
component [物質構造科学研究所]{
[役員会] -d- [物質構造科学研究所]
[物質構造科学研究所所長] -r- [物質構造科学研究所副所長]
[物質構造科学研究所所長] -l- [物質構造科学研究所技術調整役]
[物質構造科学研究所所長] -d-- [放射光科学第⼀研究系]
[物質構造科学研究所所長] -d-- [放射光科学第⼆研究系]
[物質構造科学研究所所長] -d-- [中性⼦科学研究系]
[物質構造科学研究所所長] -d-- [ミュオン科学研究系]
[物質構造科学研究所所長] -d-- [放射光実験施設]
[物質構造科学研究所所長] -d-- [低速陽電⼦実験施設]
[物質構造科学研究所所長] -d-- [構造⽣物学研究センター]
[物質構造科学研究所所長] -d-- [量⼦ビーム連携研究センター]
[物質構造科学研究所所長] -d-- [新領域開拓室]
}
component [加速器研究施設] {
[加速器研究施設長] -r- [加速器研究施設技術調整役]
[役員会] -d- [加速器研究施設]
[加速器研究施設長] -d-- [加速器第一研究系]
[加速器研究施設長] -d-- [加速器第二研究系]
[加速器研究施設長] -d-- [加速器第三研究系]
[加速器研究施設長] -d-- [加速器第四研究系]
[加速器研究施設長] -d-- [加速器第五研究系]
[加速器研究施設長] -d-- [加速器第六研究系]
[加速器研究施設長] -d-- [応用超伝導加速器イノベーションセンタ]
}
component [加速器・共通基盤研究施設運営会議]
component [J-PARCセンタ] {
[役員会] -d- [J-PARCセンタ]
[J-PARCセンタ長] -r- [副センタ長]
[J-PARCセンタ長] -d-- [安全ディビジョン]
[J-PARCセンタ長] -d-- [加速器ディビジョン]
[J-PARCセンタ長] -d-- [物質・⽣命科学ディビジョン]
[J-PARCセンタ長] -d-- [素粒⼦原⼦核ディビジョン]
[J-PARCセンタ長] -d-- [核変換ディビジョン]
[J-PARCセンタ長] -d-- [業務・運営⽀援ディビジョン]
}
component [量⼦場計測システム国際拠点] {
[役員会] -d- [量⼦場計測システム国際拠点]
[量⼦場計測システム国際拠点⻑] -r- [副拠点⻑]
[量⼦場計測システム国際拠点⻑] -l- [事務部⾨⻑]
[量⼦場計測システム国際拠点⻑] -d-- [研究コア]
[量⼦場計測システム国際拠点⻑] -d-- [システモロジー⽀援セクション]
[量⼦場計測システム国際拠点⻑] -d-- [ＱＵＰ戦略室]
[量⼦場計測システム国際拠点⻑] -d-- [ＱＵＰ事務室]
}
[役員会] -d--- [広報室]
[広報室] -r- [史料室]
[役員会] -d--- [図書室]
[役員会] -d--- [ＩＲ推進室]
[役員会] -d--- [環境安全管理室]
[役員会] -d--- [監査室]
together{
()itemp as " " #black
[役員会] -d-- itemp
itemp -d-- [男⼥共同参画推進室（東海）]
itemp -d-- [男⼥共同参画推進室（つくば）]
itemp -d-- [男⼥共同参画推進者]
}
[役員会] -d--- [ＩＬＣ推進準備室]
[役員会] -d--- [不正防⽌計画推進室]
[役員会] -d--- [ＤＸ推進室]
[役員会] -d--- [加速器科学⽀援センタ]
component [管理局]{
[役員会] -d-- [管理局]
[管理局長] -d-- [総務部]
[総務部] -d-- [総務課]
[総務部] -d-- [⼈事・職員課]
[総務部] -d-- [情報基盤管理課]
[管理局長] -d-- [財務部]
[財務部] -d-- [財務企画課]
[財務部] -d-- [経理課]
[財務部] -d-- [契約課]
[財務部] -d-- [東海契約課]
[管理局長] -d-- [研究協⼒部]
[研究協⼒部] -d-- [研究協⼒課]
[研究協⼒部] -d-- [連携推進課]
[研究協⼒部] -d-- [共同利⽤⽀援課]
[研究協⼒部] -d-- [QUP業務推進室]
[研究協⼒部] -d-- [国際企画課]
[研究協⼒部] -d-- [国際ﾌﾟﾛｼﾞｪｸﾄ推進室]
[管理局長] -d-- [参事役]
[管理局長] -d-- [施設部]
[施設部] -d-- [施設企画課]
[施設部] -d-- [資産ﾏﾈｼﾞﾒﾝﾄ課]
[施設部] -d-- [整備管理課]
}
@enduml](_images/plantuml-4e3f9668e36cac7ab2529490481dd283d747954d.svg)
図 13.14 PlantUMLのコンポーネント図を使い、KEKの組織図を書くことに挑戦#