第4回 エンジニアのためのプレゼン技術研究会「みんなの自由研究発表」と「前佛さんのスライドの作り方」(http://infrapre.connpass.com/event/20313/)の発表資料です。

1. プレゼン用の図を
自動生成する話
4第 回
エンジニアのためのプレゼン技術研究会
@furandon_pig

2. 第4回「エンジニアのためのプレゼン
技術研究会」もさることながら…
「ご注文はうさぎですか？？」の
第1羽 放映開始日
今日は何の日？
http://www.gochiusa.com

3. プレゼンの図を作成する話
スライドを作成する際、以外と図の
作成は手間がかかる
〆切直前駆動でのスライド作成
→ 図の作成は後回しになりがち
→ 箇条書きonlyのスライド爆誕
なんとかラクに図を作成できれば…
本日の発表内容

4. 本日のスライドはSlideShareで公開
しています
このスライドについて
http://www.slideshare.net/furandon_pig/ss-53761102
http://bit.ly/1Qftt1i

5. 図の作成時に時間がかかる項目？
意外と図の位置調整で時間を費やし
てしまう…
例）この線をあと1px細くしたら
見栄えが良くなるかも…
（これが延々とループ）
ラクに図を作成したい(1/2)

6. 図の配置は全部自動で処理する
どうしても気に入らない場合のみ
配置や線の太さ、色などを調整する
図作成用のテキストを解釈して図を
生成する感じにしたい
あと、できればeps形式のような
ベクター形式での図が欲しい
ラクに図を作成したい(2/2)

7. テキストから図を生成するツール
graphviz
http://www.graphviz.org
mermaid
http://knsv.github.io/mermaid/
今回はmermaidを使ってみました
図を自動生成するツール

8. AT&Tベル研究所謹製のツール
DOT言語（データ記述言語）を使用
dotコマンドで図を生成する
graphviz
digraph gochiusa {
"ご注文は" -> "うさぎですか？"
}

9. 独自の記述言語で図を定義する
mermaidAPI.jsを利用すると、Web
ブラウザ上で図が生成できる
mermaid
graph TB
ご注文は-->うさぎですか

10. mermaidAPI.jsのサンプルプログラム
WebブラウザからmermaidAPI.jsを使ってみる
http://furandon_pig.bitbucket.org/sample/officeui/mermaid/
http://bit.ly/1Oqfmcc

11. mermaidAPI.jsで図を作成する
先ほどのサンプルプログラムでは
リアルタイムに図を生成できます
出力されたSVGをInkscape等で編集
eps形式でエクスポート
PowerPointやKeynodeにepsを挿入
mermaidAPI.jsで図作成→スライドに図を挿入
デモを兼ねて上記の手順を試してみます

12. サブグラフも描画できます
ちなみに、サブグラフも描けます
graph TB
subgraph ラビットハウス
ココア
チノ
リゼ
end
subgraph 甘 庵
千夜
end
subgraph フルールドラパン
シャロ
end
subGraph2
フルールドラパン
subGraph1
甘兎庵
ラビットハウス
シャロ
千夜
ココア
チノ
リゼ

13. mermaidAPI.jsで図をラクに作成
SVG生成→Inkscapeで微調整
→eps保存→プレゼンツールに挿入
サンプルプログラム側に少し制限あり
一部文字の入力を弾いている等
mermaidのSVGをInkscape側で
読み込めないケースへの対応
地味に修正していこうと思います
まとめ