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

本記事のめあて

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

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

• handDrawn

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

図全体のフォント

サイズ

graph LR
%%{init: {'themeVariables': { 'fontSize': '32px'}}}%%
A --> B

フォントファミリー

• serif

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

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

• sans-serif

• monospace

• cursive

• fantasy

• 以下同様なので略
  font-family: system-ui;
  font-family: ui-serif;
  font-family: ui-sans-serif;
  font-family: ui-monospace;
  font-family: ui-rounded;

• emoji

• math

• fangsong

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

• revert

• 略
  font-family: revert-layer;
  font-family: unset;

組合せ例：手書き風

ノードとエッジ

色、枠線

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

フォントサイズとファミリー

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だと出ますがこの環境では出ず

数式

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

HTML

graph
  A["ABC<u>DEF</u>"]

改行

graph
  A[AAA<br/>BBB]

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

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

• blueprint

• crt-***

• materia

• mimeograph

• plain

• sketcy
  • 日本語はつぶれるので空白が必要

@startmindmap
!theme sketchy 
+ Root
++ AAA
++ BBB
++ 日  本  語
+++ cccc
@endmindmap

• reddress-darakblue
  • エラーとなる

向き

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

@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

ノード

色

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

改行

@startmindmap
+ A
++ BCD\nEFG
@endmindmap

Graphviz

図全体

図の大きさ

digraph {
    size=0.8
    A -> B
}

サブグラフ

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
  }
}

ノードとエッジ

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";
  ]

}

rank

• ノードの位置揃え

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

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

digraph {
  rankdir="LR"
  a -> b
  a -> c
  c -> d
  {rank=same a; d;}
};

rank以外の位置合わせ

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

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

これを、整列したいならまず{rank=same}

digraph {
  a -> b -> c
  d -> e -> f
  b -> d
  {rank=same; a; d;}
}

こんな場合は

digraph {
  a -> b -> c
  c -> a
  d -> e -> f
  b -> d
  {rank=same; a; d;}
}

こんな感じ

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;} #同上
}

エッジの始点、終点を変えられる

digraph {
  A -> B
  B:w -> A:w

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

数式、改行

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

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