Welcome

カキノタblog

自分の興味あるテーマを中心に、図解多めに記事を作成していきたいと思います。

自動作成

CSVなどのテキストをインポートしてダイアグラムを自動的に作成します。

操作方法

CSVデータ

draw.ioでは、どのようにフォーマットされ、どのように接続されるかを定義するための設定コードを追加することで、CSVデータから自動的にダイアグラムを作成することができます。

id,text,fill,shape,refs
1,Hello,red,rectangle,2
2,World,yellow,rhombus,

上のCSVデータにはシェイプのテキストとfill、形、接続関係が一行ずつ登録されています。これに書式設定を追加してから、インポートすることで自動的にダイアグラムを生成してくれます。

書式設定

シェイプ

# label: %text%

行頭が1つのハッシュ（#）で始まる行は設定情報となります。%で囲まれた部分はCSVのカラム名であり、textカラムのデータを変数として適用します。

CSVデータの1行1行が1つのシェイプとして作成され、ラベルとしてtextカラムの値が適用されます。

上記のCSVデータとこのコードだけをインポートすると次のように作成されます。

自動生成1

## Hello World
# label: %text%

行頭が2つのハッシュ（##）で始まる行はコメント行となります。

シェイプスタイル

# style: shape=%shape%;fillColor=%fill%;

シェイプのスタイルはCSVデータのfill,shapeカラムの値を適用します。

スタイル

コネクタ

# connect: {"from":"refs", "to":"id"}

connect:のfromとtoを指定することで、コネクタ（線・矢印）を追加できます。fromとtoにはCSVのカラムを指定します。

コネクタ

ここまでのソースコード

## Hello World
# label: %text%
# style: shape=%shape%;fillColor=%fill%;
# connect: {"from":"refs", "to":"id"}
id,text,fill,shape,refs
1,Hello,red,rectangle,2
2,World,yellow,rhombus,

#で始まる行が書式設定用のコード、#で始まらない行はCSVデータとして扱われます。CSVデータの最初の行はタイトル列です。これらは構成セクションで変数名として使用され、図には表示されません。

Hello World 2

いろいろな書式を設定した例です。

自動生成2

# label: %text%
# style: shape=%shape%;fillColor=%fill%;
# connect: {"from":"refs", "to":"id"}
# width: auto
# height: auto
# padding: 15
# ignore: shape,fill,stroke,refs
# nodespacing: 30
# levelspacing: 30
# edgespacing: 20
# layout : auto
id,text,fill,shape,refs
1,Hello,red,rectangle,2
2,World,yellow,rhombus,

フローチャート

簡単なフローチャートの作成例です。

フローチャート

# label: %text%
# style: shape=%shape%;fillColor=%fill%;strokeColor=none;
# connect: {"from":"yesLabel", "to":"id", "label": "yes", "invert":true}
# connect: {"from":"noLabel", "to":"id", "label": "no", "invert":true}
# connect: {"from":"refs", "to":"id"}
# padding: 15
# nodespacing: 30
id,text,fill,shape,refs,yesLabel,noLabel
1,分岐,lightblue,ellipse,2,
2,i=1,wheat,rhombus,,
3,処理1,lightcoral,rectangle,,2,
4,処理2,lightcoral,rectangle,,,2

yesと表示するコネクタに関しては1つのカラムを用意しています。ここにidを指定することで、その行のシェイプからidのシェイプへコネクタが追加されます。invertオプションで向きを反転させています。

参考リンク