Graphviz

⌚2019-09-04 13:30

Graphvizとは

↓こんな図がテキストで書けます。

DOT言語とは

Graphvizで図を描くためのDOT言語のコードは、
↓こんな感じです。

digraph G {
  rankdir=LR;
  graph [charset="UTF-8"];

  node [
    shape=box,
    fontname = "VL PGothic",
    fontsize = 10
  ];
  spec1 [label="仕様書1"];
  spec2 [label="仕様書2"];
  spec3 [label="仕様書3"];
  product1 [label="成果物1"];
  product2 [label="成果物2"];

  node [shape=oval];
  process1 [label="プロセス1"];
  process2 [label="プロセス2"];

  spec1 -> process1;
  spec2 -> process1;
  process1 -> product1;

  product1 -> process2;
  spec3 -> process2;
  process2 -> product2;

  overlap=false
  label="プロセスフローダイヤグラム"
  fontsize=12;
  fontname="VL PGothic"
}

Pico CMSへの実装

簡単なプラグインを作ります。

プラグインの内容の説明はめんどくさいので省略。

Markdownファイル内で、先述のDOT言語を、
```dot
{DOTのコード}
```
で囲めば、あとは勝手に図になります。

コメント

Name
Comment