Graphviz 加 Jessyink: latex 風格的 prezi 與心智圖簡報替代品

[2012/11/28 更新: 現在我改用 sozi 做簡報, 因為 inkscape + sozi = prezi + 自由開放, 而且 sozi 更加輕薄短小, 超讚!]

如果你覺得 latex 比 writer 好用, 那麼或許你也會覺得 graphviz 和 jessyink 的組合比 impress 好用 -- 如果兩者再改進一下的話。 如果加上一些功能, 讓這個組合勝過 prezi, 那 PowerPoint 就要說拜拜了。 請點圖片, 並且用方向鍵切換 「投影片」。

先是為了畫 網路現象地圖, 稍微學一下 graphviz。 然後想起去年搜尋到的 jessyink 於是拿它來 "後製", 產生上面的 "簡報"。 其實目前這兩者的組合還不太理想, 還不是很實用。 詳情請見我 用英文向開發者下的訂單。 以下簡要說明這份 "簡報" 的製作過程。

首先, 如果單純只是想玩 jessyink, 那麼推薦 Tim Teatro 寫的教學文。 我用 mepis 11 上面的 inkscape 0.48, 但不知為何內建的 jessyink 做出來的圖沒有反應。 把 /usr/share/inkscape/extensions/jessyInk* 刪掉, 再從官網下載 JessyInk-1.5.5.zip、 解壓縮、 把檔案搬到上述目錄, 就 OK 了。

不過以下要挑戰更有趣的事。 先手工打造一個 graphviz 所支援的 dot 檔 net-pheno-map.dot。 (我會不時更新這個 dot 檔, 但不一定會更新以下其他檔案, 所以以下幾個圖的外觀可能會有些不一致; 不過這不影響概念的解釋。) 為了把中英文放進同一個原始檔, 每個 node 的名字都同時包含了中英文字串, 用 "#" 分開。 以下指令刪除英文部分, 交由 graphviz 套件的 dot 指令產生一個初版的 svg 檔, 再用一個小小的 perl 程式 ds2tp 微調輸出檔:

perl -pe 's/"[^"]*#/"/g' net-pheno-map.dot | dot -Tsvg > 1.svg
perl -pe 's#</g>#</g>\n#' 1.svg | perl ds2tp > net-pheno-map.zh_TW.svg

因為 dot 指令所輸出的 svg 檔裡面, edge 的字原本水平印出, 看起來呆呆的; ds2tp 的作用就是把字串改成順著 edge 的曲線印。 (貴哥偶爾也愛玩特效好嗎?) 理想上直接拿這個 ds2tp 處理完的 svg 檔, 用 jessyink 處理一下, 就產生完美的類 prezi 簡報了; 但不知為何, jessyink 處理這個檔案就是無法產生任何特效。 於是只好先將它匯出成 png, 再轉成 jpg, 等一下用來當作背景底圖:

convert -interlace line net-pheno-map.zh_TW.png net-pheno-map.zh_TW.jpg

然後進入 inkscape 操作:

1. 建立新檔案, 並在 "檔案" 的 "文件屬性" 底下, 用 "自訂尺寸" 設定圖片寬度與長度為 800x600 。 (或隨你高興, 反正我們處理的是向量圖)
2. 在 "擴充功能" 底下的 "jessyink" 底下選取 "安裝/更新"。 注意: 這裡所謂的 "安裝" 指的是將 jessyink 的 javascript 和相關程式碼嵌入 目前這個檔案 。 (這樣將來用瀏覽器開啟這個檔案時, 才能用滑鼠與鍵盤互動, 而不再只是一張靜態圖檔) 也就是說, 在每個簡報檔剛建立時, 都要做一次這個動作。
3. 匯入 net-pheno-map.zh_TW.jpg 並將之縮放到與圖片大小一致, 作為背景底圖。 可惜這樣一來, 向量圖放大不失真的好處就沒了...
4. 畫幾個長方形框住你有興趣的區域, 作為播放投影片時的視框 (view)。 可以旋轉一下, 長得歪歪的更有 fu。 等一下將之指定為 view 之後, 在瀏覽器裡面便不會顯示出來; 不過在 inkscape 裡面還是看得到。 所以建議用 "物件" 底下的 "填充與邊框" 將這長方形設定成沒有填充、 醒目的邊框。
5. 在 "擴充功能" 底下的 "jessyink" 底下選取 "view", 然後逐一選取剛剛的長方形並設定出場順序 (order)。 數字不必連續 -- 我對六個 views 分別選用 10, 20, 30, 40, 50, 60。 這樣將來改變主意, 要在兩個 views 之間穿插其他 views 比較方便, 就好像古代在寫 basic 程式時以 10 的倍數設行號一樣。
6. 存檔。 不要離開 inkscape。
7. 用 firefox 或 chrome 打開這個新的 svg 檔。 按方向鍵欣賞你的作品。
8. 如果不滿意, 可以繼續在 inkscape 裡面修改、 存檔; 再回到瀏覽器按 "重新整理"。

目前許多方面效果都還不是很理想; 如果可以除掉一些 bugs、 自動將每個 "group" (inkscape 內建的概念) 視為一個 "view"、 並且以樹狀結構取代線性結構來整理所有的 views, 那就更完美了。 詳見我的 英文 "訂單"。 然後我就要用它來取代 jquery presentation plugin, 美化 我的簡報在雲端!