作図はテキストで！Mermaid, PlantUML and Graphviz 2 ーサイズ、テーマ、ノードとエッジなどー

# 本記事のめあて

https://qiita.com/aokikenichi/items/cb65c546fced7d89fdfb

では基本機能を紹介したが、サイズ、テーマ、ノードとエッジの機能などを紹介

# Mermaid
## 図全体
### 図の大きさ
- この環境では変化しないがVS CodeのMarkdownでは以下
    - 80%のところを変えると大きさが変化
    - 中央寄せ

```
<style>
  /* mermaid設定 */
  .mermaid svg {
    width: 80%;
    height: auto;
    
    /* 図の中央寄せ */
    display: block;
    margin-left: auto;
    margin-right: auto;0:00
    
  }
</style>
```

### Look

- classic(default)
```
graph LR
%%{init: {'look': 'classic'}}%%
A --> B
```


```mermaid
graph LR
%%{init: {'look': 'classic'}}%%
A --> B
```

- handDrawn
```
graph LR
%%{init: {'look': 'handDrawn'}}%%
A --> B
```

```mermaid
graph LR
%%{init: {'look': 'handDrawn'}}%%
A --> B
```

### 図全体のフォント
#### サイズ
```
graph LR
%%{init: {'themeVariables': { 'fontSize': '32px'}}}%%
A --> B
```

```mermaid
graph LR
%%{init: {'themeVariables': { 'fontSize': '32px'}}}%%
A --> B
```
#### フォントファミリー
- serif
```
graph LR
%%{init: {'themeVariables': {  'fontSize': '24px', 'fontFamily': 'serif'}}}%%
A --> B
```

```mermaid
graph LR
%%{init: {'themeVariables': {  'fontSize': '24px', 'fontFamily': 'serif'}}}%%
A --> B
```

以下同様に 'fontFamily': 'xxxx' を書き換える

- sans-serif
```mermaid
graph LR
%%{init: {'themeVariables': { 'fontSize': '24px', 'fontFamily': 'sans-serif'}}}%%
A --> B
```
- monospace
```mermaid
graph LR
%%{init: {'themeVariables': { 'fontSize': '24px', 'fontFamily': 'monospace'}}}%%
A --> B
```
- cursive
```mermaid
graph LR
%%{init: {'themeVariables': { 'fontSize': '24px', 'fontFamily': 'cursive'}}}%%
A --> B
```
- fantasy
```mermaid
graph LR
%%{init: {'themeVariables': { 'fontSize': '24px', 'fontFamily': 'fantasy'}}}%%
A --> B
```
- 以下同様なので略
font-family: system-ui;
font-family: ui-serif;
font-family: ui-sans-serif;
font-family: ui-monospace;
font-family: ui-rounded;

- emoji
```mermaid
graph LR
%%{init: {'themeVariables': { 'fontSize': '24px', 'fontFamily': 'emoji'}}}%%
A --> B
```
- math
```mermaid
graph LR
%%{init: {'themeVariables': { 'fontSize': '24px', 'fontFamily': 'math'}}}%%
A --> B
```
- fangsong
```mermaid
graph LR
%%{init: {'themeVariables': { 'fontSize': '24px', 'fontFamily': 'fangsong'}}}%%
A --> B
```

- 略
font-family: inherit;
font-family: initial;

- revert
```mermaid
graph LR
%%{init: {'themeVariables': { 'fontSize': '24px', 'fontFamily': 'revert'}}}%%
A --> B
```
- 略
font-family: revert-layer;
font-family: unset;

#### 組合せ例：手書き風
```mermaid
graph LR
%%{init: {'look': 'handDrawn', 'theme': 'neutral', 'themeVariables': { 'fontSize': '24px', 'fontFamily': 'cursive'}}}%%
A[hand drawn] --> B[日本語はダメ]
```

## ノードとエッジ
### 色、枠線
```
flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```

```mermaid
flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```

```
graph LR
  A ~~~ B --- C
  D --> E -.-> F
  G ==> H --o I
  J --x K ---> L
```

```mermaid
graph LR
  A ~~~ B --- C
  D --> E -.-> F
  G ==> H --o I
  J --x K ---> L
```

### フォントサイズとファミリー
```
graph LR
  A[ABC] --> B[XYZ]:::hoge
  style A font-size:24pt, font-family:cursive
  classDef hoge font-size:12pt, font-family:serif
```
```mermaid
graph LR
  A[ABC] --> B[XYZ]:::hoge
  style A font-size:24pt, font-family:cursive
  classDef hoge font-size:12pt, font-family:serif
```

## 絵文字
```
flowchart TD
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner)
    B-->E(A fa:fa-camera-retro perhaps?)
    X[fa:fa-capsules]
```

VS Codeだと出ますがこの環境では出ず
```mermaid
flowchart TD
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner)
    B-->E(A fa:fa-camera-retro perhaps?)
    X[fa:fa-capsules]
```

## 数式
```
graph
  A[$$数式\int_a^b x dx$$]
```

```mermaid
graph
  A[$$数式\int_a^b x dx$$]
```

## HTML
```
graph
  A["ABC<u>DEF</u>"]
```
```mermaid
graph
  A["ABC<u>DEF</u>"]
```

## 改行
```
graph
  A[AAA<br/>BBB]
```

```mermaid
graph
  A[AAA<br/>BBB]
```

# PlantUML

## 図全体
### 図の大きさ
```
@startmindmap
scale 2
* A
** B
@endmindmap
```

```plantuml
@startmindmap
scale 2
* A
** B
@endmindmap
```
- scale の値を色々変える
    - 1がデフォルト<1で小さく>1で大きく
    - scale 300 height
    - scale 200 width
    - scale 800*600
    - scale max 300 height
    - scale max 200 width
    - scale max 1200*1000

### Theme
- (default)
```
@startmindmap
+ Root
++ AAA
++ BBB
++ CCC
+++ cccc
@endmindmap
```

```plantuml
@startmindmap
+ Root
++ AAA
++ BBB
++ CCC
+++ cccc
@endmindmap
```

以下同様に、!theme xxxx を書き換える

- blueprint
```plantuml
@startmindmap
!theme blueprint 
+ Root
++ AAA
++ BBB
++ CCC
+++ cccc
@endmindmap
```
- crt-***
```plantuml
@startmindmap
!theme crt-green 
+ Root
++ AAA
++ BBB
++ CCC
+++ cccc
@endmindmap
```
- materia
```plantuml
@startmindmap
!theme materia
+ Root
++ AAA
++ BBB
++ CCC
+++ cccc
@endmindmap
```
- mimeograph
```plantuml
@startmindmap
!theme mimeograph 
+ Root
++ AAA
++ BBB
++ CCC
+++ cccc
@endmindmap
```
- plain
```plantuml
@startmindmap
!theme plain
+ Root
++ AAA
++ BBB
++ CCC
+++ cccc
@endmindmap
```
- sketcy
  - 日本語はつぶれるので空白が必要
```
@startmindmap
!theme sketchy 
+ Root
++ AAA
++ BBB
++ 日  本  語
+++ cccc
@endmindmap
```

```plantuml
@startmindmap
!theme sketchy 
+ Root
++ AAA
++ BBB
++ 日  本  語
+++ cccc
@endmindmap
```
- reddress-darakblue
  - エラーとなる
## 向き
```
@startmindmap
+ 1
++ 2
+++ 3
++ 4
-- 5
-- 6
--- 7
@endmindmap
```

```plantuml
@startmindmap
+ 1
++ 2
+++ 3
++ 4
-- 5
-- 6
--- 7
@endmindmap
```

```
@startmindmap
left side
* 1
** 2
*** 4
*** 5
** 3
*** 6
*** 7
@endmindmap
```

```plantuml
@startmindmap
left side
* 1
** 2
*** 4
*** 5
** 3
*** 6
*** 7
@endmindmap
```

```
@startmindmap
top to bottom direction
left side
* 1
** 2
*** 4
*** 5
** 3
*** 6
*** 7
@endmindmap
```

```plantuml
@startmindmap
top to bottom direction
left side
* 1
** 2
*** 4
*** 5
** 3
*** 6
*** 7
@endmindmap
```

## ノード
### 色
```
@startmindmap
+ A
++[#pink] B
+++[#88f] C
+++_ D
@endmindmap
```

```plantuml
@startmindmap
+ A
++[#pink] B
+++[#88f] C
+++_ D
@endmindmap
```

### 改行
```
@startmindmap
+ A
++ BCD\nEFG
@endmindmap
```

```plantuml
@startmindmap
+ A
++ BCD\nEFG
@endmindmap
```

# Graphviz
## 図全体
### 図の大きさ
```graphviz
digraph {
    size=0.8
    A -> B
}
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116049/3ca7b973-202d-3bec-9571-11dbffdaae3c.png" width=50 />




### サブグラフ

```graphviz
digraph node_sample {
  a -> b
  subgraph cluster_1 {
    label = "clu1";
    labelloc = "t";
    labeljust = "l";
    color="white";
    #style="invis";

    nu [label = "nu", shape = "trapezium"];
    xi [label = "xi", shape = "trapezium"];

    nu -> xi;

    subgraph cluster_2 {
      label = "clu2";
      labelloc = "t";
      labeljust = "l";
      style="dashed";
      color="red";
      nu2 [label = "nu2", shape = "trapezium"];
      xi2 [label = "xi2", shape = "trapezium"];

      nu2 -> xi2;

     subgraph cluster_3 {
        label = "clu3";
        labelloc = "t";
        labeljust = "l";
        style="filled";
        color="blue";
        fillcolor = "#888888";

        nu3 [label = "nu3", shape = "trapezium"];
        xi3 [label = "xi3", shape = "trapezium"];

        nu3 -> xi3;
      }
    }

    nu -> nu2
  }
}

```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116049/186a6a71-8fa8-91ac-b9ac-5b1452ed6e1d.png" width=400 />

## ノードとエッジ
```graphviz
digraph {
  a -> b [
    label = "a to b";
    headlabel = "to";
    taillabel = "from";
  ]
  b -> c [
    style = "dashed";
    penwidth = 5;
  ]
  c -> d [
    color = "red";
    dir = "back";
  ]
  d -> e [
    dir = "both";
  ]
  d -> f [
    weight = 1;
    dir = "none";
  ]
  a [
    color = "#ff0000";
    fillcolor = "#0000ff";
    fontcolor = "#00ff00";
    style = "dotted,filled"
  ]
  b [
    fontsize = 24;
    shape = "box";
    style = "dotted";
    width = 2;
    shape = "oval";
  ]
  c [
    shape = "triangle";
    label = "日本語";
    fontname = "Meiryo";
  ]
  d [
    shape = "diamond";
    penwidth = 3;
  ]
  e [
    shape = "underline";
  ]
  f [
    shape = "none";
  ]

}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116049/72c842db-c636-b0be-8485-76e1a2ef17e1.png" width=200 />

## rank
- ノードの位置揃え

```graphviz
digraph {
  a -> b
  a -> c
  c -> d
};
```


```graphviz
digraph {
  a -> b
  a -> c
  c -> d
  {rank=same a; d;}
};
```

```graphviz
digraph {
  rankdir="LR"
  a -> b
  a -> c
  c -> d
  {rank=same a; d;}
};
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116049/a1120df3-06c8-6732-8b3b-9a75a92b4c62.png" width=200 />


## rank以外の位置合わせ
位置合わせはrank=sameも使えるがエッジでつなげ非表示する手もある

```graphviz
digraph {
  a -> b -> c
  d -> e -> f
  b -> d
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116049/f2c1301f-3dc7-b8d5-e518-cf8bf6f3ac7f.png" width=200 />

これを、整列したいならまず{rank=same}
```graphviz
digraph {
  a -> b -> c
  d -> e -> f
  b -> d
  {rank=same; a; d;}
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116049/bfb9efa1-e06c-3ee4-41ee-6cd44dd304c8.png" width=200 />


こんな場合は
```graphviz
digraph {
  a -> b -> c
  c -> a
  d -> e -> f
  b -> d
  {rank=same; a; d;}
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116049/b847d0db-c832-0cda-2c78-d0d96aa93c80.png" width=200 />

こんな感じ
```graphviz
digraph {
  rankdir="LR"; #整列の縦横を転置

  a -> b
  b -> c
  a -> c [dir="back";] # a, b, cの順番を崩さないため見た目の向きだけ変える

  d -> e -> f

  a -> e [style="invis"] # aとdの位置を揃えるダミー
  b -> d

  {rank=same; a; b; c;} #縦をそろえる
  {rank=same; d; e; f;} #同上
}
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116049/53a62299-79ba-eb8a-7db3-4c62bb50d2dc.png" width=200 />

### エッジの始点、終点を変えられる
```graphviz
digraph {
  A -> B
  B:w -> A:w

  C:s -> D:n
  D:s -> C:n
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116049/f92f25ff-3183-e532-590f-ddf62608696f.png" width=200 />

## 数式、改行
```graphviz
digraph {
  label="数式は難しいが\n上付き、\n下付きなどなら"
  labelloc="t"
  A [label=<x<sup>2</sup>+a<sub>1</sub>>]
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116049/d9d709ee-46ba-0e94-4ea7-e8550a163da1.png" width=200 />

```graphviz
digraph {
  A [label="ABC\nDEF"]
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116049/9efe11d5-768b-f5ce-e771-a040c3ec26c2.png" width=200 />