如何把思維導圖秒變成幻燈?

如何把思維導圖秒變成幻燈?

場景

有一天給研究生上課,幾個學生分別上講臺展示仿真建模作業。

我打開筆記本電腦,一邊開著仿真工具驗證他們的代碼,一邊用思維導圖軟件記錄他們講解中出現的問題。

問題過多的時候,我示意學生下來。走上講臺,插上優盤,打開了一個幻燈。幻燈圖文並茂,針對剛才模型解釋和展示中的問題一一作了反饋。

學生們看得目瞪口呆。

倒不是因為我的幻燈做得有多麼漂亮,而是他們心裡有個大大的疑惑:

“老師,這個幻燈您是剛剛現場做的?”

“對啊。”

“啊?!……這麼快?”

面對學生將信將疑,我把他們叫到了我的座位那裡,打開筆記本,給他們看了我的思維導圖。

思維導圖的結構很清晰,我把他們講解中用到的代碼做了截圖,連同一些搜索到的關聯材料一起放在了思維導圖中。

看到這裡,他們很淡定。因為現場做個記錄關鍵點的思維導圖,他們認為自己完全能夠勝任。

之後,他們就不淡定了。因為我給他們展示瞭如何一鍵把這個思維導圖變成了漂亮的幻燈片。

痛點

其實不光是老師,各種知識工作者總會遇到需要做幻燈的場景。

許多人都學會了秘笈——用思維導圖來整理思路。這是做幻燈之前準備材料的一種高效方式。

但是傳統軟件之間缺乏必要的溝通渠道。你畫好了思維導圖,等到製作幻燈的時候還得重新把導圖裡出現的結構和內容填入幻燈工具中。

你做了兩遍工作,效率當然不夠高。

優秀的思維導圖軟件早就看到了用戶這一痛點,因此iMindmap等少數專業思維導圖工具都有一個重要功能——把思維導圖用幻燈形式展示。

但是一來這樣的工具都很貴,二來你只能在思維導圖軟件內播放幻燈。

這就給你帶來了很大限制——你無法像攜帶ppt文件一樣,一個優盤帶著隨處走隨處展示。這樣的結果有時很糟糕。想想一下,如果你興沖沖帶著Macbook和HDMI轉換插頭跑到會場做準備,卻發現人家只提供VGA接口……

你莫非還要當場下單買個iMindmap的新許可證不成?

如何把思維導圖秒變成幻燈?

這個痛點困擾了我很長時間。直到某一天,我突然發現有些思維導圖工具開始支持一種格式——文本包(textbundle)。於是我立即找到了解決的辦法。

本文我先給你介紹如何一鍵把思維導圖轉換成幻燈。咱們從配置開始,然後做個實際樣例展示。

如果你對原理感興趣,再往後看相關的知識介紹。

好了,我們開始做配置準備工作吧。

配置

請注意,因為思維導圖工具MindNode僅支持macOS和iOS,不支持Linux和Windows,所以本文僅展示macOS系統下的操作流程。如果後續發現支持其他操作系統,且可以生成文本包的思維導圖應用,我們會迭代更新本文。

我們一共需要安裝4款軟件。

MindNode

首先,你需要下載安裝MindNode。地址在這裡。

如何把思維導圖秒變成幻燈?

點擊頁面上的“Buy”按鈕即可轉到App Store購買應用。比起iMindmap來,價格還是便宜許多的。

唯一需要交費的軟件,你已經擁有了。後面的工具統統都是免費的了。

Anaconda

請到這個網址 下載最新版的Anaconda。下拉頁面,找到下載位置。根據你目前使用的系統,網站會自動推薦給你適合的版本下載。

如何把思維導圖秒變成幻燈?

請注意,下載頁面區隔出左右兩欄,分別對應套件不同的Python語言版本。左側是3.6版,右側是2.7版。請務必選擇2.7版本,不然後面的流程可能會出現報錯。

下載下來的文件是個以pkg作為擴展名的包裹,雙擊它,然後根據提示一步步安裝就好了。全中文界面,非常友好。

如何把思維導圖秒變成幻燈?

Pandoc

請到這個網址下載Pandoc工具。

如何把思維導圖秒變成幻燈?

下載其中的pkg擴展名安裝包。

下載好後雙擊pkg文件安裝,方式與Anaconda大同小異,此處就不重複了。

mindnode2slide

這是我自己編寫的Python和Automator腳本程序,請到這個網址下載。

如何把思維導圖秒變成幻燈?

下載之前,別忘了點擊上方的“Star”按鈕,鼓勵我一下。

點擊綠色的“Clone or Download”按鈕。

如何把思維導圖秒變成幻燈?

選擇其中的Download Zip選項。

瀏覽器會幫助你下載“mindmap2slide-master.zip”文件。

下載後,請把它解壓到系統的“下載”(Downloads)目錄。請一定要存儲到指定的位置,並且不要修改目錄名稱。否則後面會報錯。

如何把思維導圖秒變成幻燈?

可以看到,目錄下面有一個mindemap2slide文件,在我這裡圖標是個小機器人。把小機器人拖動到macOS的dock上面,成為一個快捷按鈕。

如何把思維導圖秒變成幻燈?

到此為止,準備工作完全就緒了。

嘗試

配置好環境後,我們來動手實際做一張思維導圖,並且轉換為幻燈。

我們打開MindNode,做一個測試樣例。

如何把思維導圖秒變成幻燈?

注意這裡的層級,是有講究的。

思維導圖的根節點是大標題。

一級分支是節名稱。一般幻燈內容比較多的時候,分成幾個節(部分)來講,會比較清晰。也容易讓聽眾明白當前的進度。

二級分支,是幻燈頁面的標題。

三級分支,是幻燈裡依次出現的每一條目。

插圖可以放在三級分支上,就會和文字條目一起依次出現。而如果像我這樣放在二級分支上,就會被單獨做成一張全屏圖片幻燈出現。我比較喜歡後一種方式,因為這樣圖片展示可以更全面和美觀。

思維導圖做好之後,選擇菜單欄裡的“導出至”按鈕。

如何把思維導圖秒變成幻燈?

子菜單中選擇“標記”。

如何把思維導圖秒變成幻燈?

這時會出現導出菜單。

如何把思維導圖秒變成幻燈?

注意勾選“包括圖片”,然後選擇“導出”。

如何把思維導圖秒變成幻燈?

對話框裡面,默認保存到文稿,名稱和思維導圖根節點名稱一致。我們就按照默認的設置確認即可。

於是“測試幻燈.textbundle”文件就出現在了我們的文稿目錄下。

好,下面就是見證奇蹟的時刻了。

我們把它拖拽到dock中那個小機器人圖標上。請參看以下gif動圖。

如何把思維導圖秒變成幻燈?

如果提示權限錯誤,那是因為你的macOS安全設置級別比較高。請打開系統設置->安全性與隱私,裡面會有提示,mindmap2slide來自於“來源不明的開發者”。設置為允許運行即可。

可以看到,瀏覽器自動開啟,把轉換好之後的幻燈打開了。

點擊F鍵,進入全屏播放模式,可以用鍵盤上的左右方向鍵來控制播放。

幻燈第二部分播放的例子請見下面的動圖。

如何把思維導圖秒變成幻燈?

很激動吧?以後你就可以這樣做幻燈了。

內容修改全部都可以在思維導圖裡完成,改好後重新導出並拖拽,一個更新迭代的幻燈版本就搞好了。

如果你打算把幻燈攜帶出去,怎麼辦?

很簡單,回到你的mindmap2slide-master文件夾下面,你會看到比原先多出來了2個文件夾。

如何把思維導圖秒變成幻燈?

其中的export文件夾就是你的幻燈了。把它整個兒拷到優盤上,帶走就好。

到了別的電腦上,只要打開支持HTML5的瀏覽器,把export目錄下的slide.html文件拖入瀏覽器,就可以正常播放了。

瀏覽器我推薦Google Chrome。Firefox和Safari可以作為備選項。其他的瀏覽器我沒有測試過,歡迎你把測試結果告訴我。

魔法

如果你對實現的技術細節不感興趣,可以跳過本節,直接看“討論”章節。

這麼有求知慾?好吧,那咱們講講這個“秒變幻燈”的效果是怎麼來的。

剛剛我們提到,MindNode支持了文本包(textbundle)。說白了,文本包就是打包了的Markdown。

這個名字,就不那麼陌生了吧?

對,如今使用Markdown來寫作的人,可是越來越多了。但如果你用Markdown寫作,可能也會遭遇過痛點——圖片。

你在甲工具裡編輯Markdown,想全文拷貝到乙軟件做個備份,圖沒了。

你寫好了一篇文章,興沖沖發佈到網上,圖沒了。

你把寫好的文章共享拷貝給朋友,圖又沒了……

Markdown的插圖,是用語句指定了圖片的位置。如果指定的是本地位置,遠程就無法正常顯示。如果指定的是相對位置,哪怕Markdown文件在本機一挪動,圖片位置也會失效。

面對這一痛點,有聰明人於是想出來一個招數——打包。就是把圖片和Markdown文本文件捆綁在一起,打成一個包,形成一種通用格式。這樣,把文章帶走,或者在不同應用間轉移,只需要拷貝或者共享這樣一個包,就可以了。

這個文本包,英文名稱叫做TextBundle。人們還專門建立了一個網站,說明目前哪些工具支持該格式。

如何把思維導圖秒變成幻燈?

思維導圖軟件MindNode支持文本包,就意味著你在思維導圖裡面插入的各種圖片,都可以轉移到其他軟件中去。

可是我要做幻燈啊?Markdown插圖倒來倒去有什麼用?

用處大了。

因為本文中展示的幻燈,不是PPT,而是漂亮的HTML5文件。沒錯,你剛才做了個靜態網頁出來。

我們利用的幻燈工具,叫做Reveal.js。它可以渲染HTML5文件,把它們用幻燈片的方式一頁頁播放。

如何把思維導圖秒變成幻燈?

你可以隨心所欲更換自己喜歡的主題。只需要修改一個字符串,幻燈的樣子就大不相同。

可以是這樣。

如何把思維導圖秒變成幻燈?

也可以是這樣。

如何把思維導圖秒變成幻燈?

可是你會發現,從Markdown到HTML5,中間好像有個缺失鏈條啊!

沒錯,把Markdown文件轉變成HTML5格式,我們使用了格式轉換界的瑞士軍刀了——Pandoc。

它可以在數不清的文件格式之間,輕易轉換。

如何把思維導圖秒變成幻燈?

看不清?那就對了,它支持的格式太多了!

有了Pandoc,我們的轉換鏈就補齊了:

MindNode -> textbundle (Markdown) -> Pandoc -> HTML5 -> Reveal.js幻燈

看著都頭暈吧?每次要是都讓你這樣做一遍……

換做是我,恐怕也跑回去用PPT了。

我們使用電腦,就是要讓它替我們做自己懶得做的事情。否則要它幹嘛?

而電腦最善於處理的,恰巧就是這種程序化的瑣碎事務。

將思維導圖到幻燈的轉換流程自動化串接起來,我們用到了Python。

Python如今很火。大家都知道它可以用來做爬蟲、做數據分析,甚至是做網站。但是不要忘了,作為腳本語言,它從來都是一種非常好的膠水工具,可以連接各個環節,幫我們把流程自動化完成。

只是即便一行命令就可以完成自動化過程,許多人恐怕還是不願意跑到命令行下面敲字兒。所以我又在Python腳本上面,包裝了macOS自帶的Automator腳本。

其實,它裡面只有一句話而已。

如何把思維導圖秒變成幻燈?

這就是為什麼你不能在安裝的時候選擇其他的目錄。否則傻乎乎的Automator小機器人根本就找不到Python腳本了。

如果你對實現的技術細節感興趣,可以查看源代碼。這個腳本陸續寫了很長時間,其中Markdown到幻燈的轉換還是我剛學Python的時候寫的。如果你發現其中有很多蹩腳的代碼,那很正常。我這個懶人實在懶得改了,能湊合著用就好。歡迎你幫我改進。

如果你願意把它開發成為更好用的Web服務,歡迎在留言區或者私信跟我聯繫。

討論

讀過本文之後,你有什麼心得要分享給大家嗎?有沒有不同的意見或看法?歡迎留言,記錄下你的思考,我們一起交流討論。

如果你對我的文章感興趣,歡迎點贊,並且關注我的專欄,以便收到後續作品更新通知。

如果本文可能對你身邊的親友有幫助,也歡迎你把本文通過微博或朋友圈分享給他們。讓他們一起參與到我們的討論中來。


分享到:


相關文章: