場景

有一天給研究生上課舆瘪，幾個學(xué)生分別上講臺展示仿真建模作業(yè)。

我打開筆記本電腦红伦，一邊開著仿真工具驗證他們的代碼英古，一邊用思維導(dǎo)圖軟件記錄他們講解中出現(xiàn)的問題。

問題過多的時候昙读，我示意學(xué)生下來召调。走上講臺，插上優(yōu)盤，打開了一個幻燈唠叛≈幌幻燈圖文并茂，針對剛才模型解釋和展示中的問題一一作了反饋艺沼。

學(xué)生們看得目瞪口呆册舞。

倒不是因為我的幻燈做得有多么漂亮，而是他們心里有個大大的疑惑：

“老師障般，這個幻燈您是剛剛現(xiàn)場做的调鲸？”

“對啊⊥斓矗”

“懊晔？定拟！……這么快于微？”

面對學(xué)生將信將疑，我把他們叫到了我的座位那里办素，打開筆記本角雷，給他們看了我的思維導(dǎo)圖。

思維導(dǎo)圖的結(jié)構(gòu)很清晰性穿，我把他們講解中用到的代碼做了截圖勺三，連同一些搜索到的關(guān)聯(lián)材料一起放在了思維導(dǎo)圖中。

看到這里需曾，他們很淡定吗坚。因為現(xiàn)場做個記錄關(guān)鍵點的思維導(dǎo)圖，他們認(rèn)為自己完全能夠勝任呆万。

之后商源，他們就不淡定了。因為我給他們展示了如何一鍵把這個思維導(dǎo)圖變成了漂亮的幻燈片谋减。

痛點

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

許多人都學(xué)會了秘笈——用思維導(dǎo)圖來整理思路出爹。這是做幻燈之前準(zhǔn)備材料的一種高效方式庄吼。

但是傳統(tǒng)軟件之間缺乏必要的溝通渠道。你畫好了思維導(dǎo)圖严就，等到制作幻燈的時候還得重新把導(dǎo)圖里出現(xiàn)的結(jié)構(gòu)和內(nèi)容填入幻燈工具中总寻。

你做了兩遍工作，效率當(dāng)然不夠高梢为。

優(yōu)秀的思維導(dǎo)圖軟件早就看到了用戶這一痛點渐行，因此iMindmap等少數(shù)專業(yè)思維導(dǎo)圖工具都有一個重要功能——把思維導(dǎo)圖用幻燈形式展示轰坊。

但是一來這樣的工具都很貴，二來你只能在思維導(dǎo)圖軟件內(nèi)播放幻燈祟印。

這就給你帶來了很大限制——你無法像攜帶ppt文件一樣肴沫，一個優(yōu)盤帶著隨處走隨處展示。這樣的結(jié)果有時很糟糕蕴忆。想想一下樊零，如果你興沖沖帶著Macbook和HDMI轉(zhuǎn)換插頭跑到會場做準(zhǔn)備，卻發(fā)現(xiàn)人家只提供VGA接口……

你莫非還要當(dāng)場下單買個iMindmap的新許可證不成孽文？

這個痛點困擾了我很長時間驻襟。直到某一天，我突然發(fā)現(xiàn)有些思維導(dǎo)圖工具開始支持一種格式——文本包(textbundle)芋哭。于是我立即找到了解決的辦法沉衣。

本文我先給你介紹如何一鍵把思維導(dǎo)圖轉(zhuǎn)換成幻燈。咱們從配置開始减牺，然后做個實際樣例展示豌习。

如果你對原理感興趣，再往后看相關(guān)的知識介紹拔疚。

好了肥隆，我們開始做配置準(zhǔn)備工作吧。

配置

請注意稚失，因為思維導(dǎo)圖工具M(jìn)indNode僅支持macOS和iOS栋艳，不支持Linux和Windows，所以本文僅展示macOS系統(tǒng)下的操作流程句各。如果后續(xù)發(fā)現(xiàn)支持其他操作系統(tǒng)吸占，且可以生成文本包的思維導(dǎo)圖應(yīng)用，我們會迭代更新本文凿宾。

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

MindNode

首先，你需要下載安裝MindNode初厚。地址在這里件蚕。

點擊頁面上的“Buy”按鈕即可轉(zhuǎn)到App Store購買應(yīng)用。比起iMindmap來产禾，價格還是便宜許多的排作。

唯一需要交費(fèi)的軟件，你已經(jīng)擁有了下愈。后面的工具統(tǒng)統(tǒng)都是免費(fèi)的了纽绍。

Anaconda

?請到這個網(wǎng)址 下載最新版的Anaconda蕾久。下拉頁面势似，找到下載位置拌夏。根據(jù)你目前使用的系統(tǒng)，網(wǎng)站會自動推薦給你適合的版本下載履因。

請注意障簿，下載頁面區(qū)隔出左右兩欄，分別對應(yīng)套件不同的Python語言版本栅迄。左側(cè)是3.6版站故，右側(cè)是2.7版。請務(wù)必選擇2.7版本毅舆，不然后面的流程可能會出現(xiàn)報錯西篓。

?下載下來的文件是個以pkg作為擴(kuò)展名的包裹，雙擊它憋活，然后根據(jù)提示一步步安裝就好了岂津。全中文界面，非常友好悦即。

Pandoc

請到這個網(wǎng)址下載Pandoc工具吮成。

下載其中的pkg擴(kuò)展名安裝包。

下載好后雙擊pkg文件安裝辜梳，方式與Anaconda大同小異粱甫，此處就不重復(fù)了。

mindnode2slide

這是我自己編寫的Python和Automator腳本程序作瞄，請到這個網(wǎng)址下載茶宵。

下載之前，別忘了點擊上方的“Star”按鈕宗挥，鼓勵我一下节预。

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

選擇其中的Download Zip選項属韧。

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

下載后，請把它解壓到系統(tǒng)的“下載”(Downloads)目錄宵喂。請一定要存儲到指定的位置糠赦，并且不要修改目錄名稱。否則后面會報錯锅棕。

可以看到拙泽，目錄下面有一個mindemap2slide文件，在我這里圖標(biāo)是個小機(jī)器人裸燎。把小機(jī)器人拖動到macOS的dock上面顾瞻，成為一個快捷按鈕。

到此為止德绿，準(zhǔn)備工作完全就緒了荷荤。

嘗試

配置好環(huán)境后退渗，我們來動手實際做一張思維導(dǎo)圖，并且轉(zhuǎn)換為幻燈蕴纳。

我們打開MindNode会油，做一個測試樣例。

注意這里的層級古毛，是有講究的翻翩。

思維導(dǎo)圖的根節(jié)點是大標(biāo)題。

一級分支是節(jié)名稱稻薇。一般幻燈內(nèi)容比較多的時候嫂冻，分成幾個節(jié)（部分）來講，會比較清晰塞椎。也容易讓聽眾明白當(dāng)前的進(jìn)度絮吵。

二級分支，是幻燈頁面的標(biāo)題忱屑。

三級分支蹬敲，是幻燈里依次出現(xiàn)的每一條目。

插圖可以放在三級分支上莺戒，就會和文字條目一起依次出現(xiàn)伴嗡。而如果像我這樣放在二級分支上，就會被單獨(dú)做成一張全屏圖片幻燈出現(xiàn)从铲。我比較喜歡后一種方式瘪校，因為這樣圖片展示可以更全面和美觀。

思維導(dǎo)圖做好之后名段，選擇菜單欄里的“導(dǎo)出至”按鈕阱扬。

子菜單中選擇“標(biāo)記”。

這時會出現(xiàn)導(dǎo)出菜單伸辟。

注意勾選“包括圖片”麻惶，然后選擇“導(dǎo)出”。

對話框里面信夫，默認(rèn)保存到文稿窃蹋，名稱和思維導(dǎo)圖根節(jié)點名稱一致。我們就按照默認(rèn)的設(shè)置確認(rèn)即可静稻。

于是“測試幻燈.textbundle”文件就出現(xiàn)在了我們的文稿目錄下警没。

好，下面就是見證奇跡的時刻了振湾。

我們把它拖拽到dock中那個小機(jī)器人圖標(biāo)上杀迹。請參看以下gif動圖。

瀏覽器自動開啟押搪，把轉(zhuǎn)換好之后的幻燈打開了树酪。

點擊F鍵浅碾，進(jìn)入全屏播放模式，可以用鍵盤上的左右方向鍵來控制播放嗅回。

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

很激動吧摧茴？以后你就可以這樣做幻燈了绵载。

內(nèi)容修改全部都可以在思維導(dǎo)圖里完成，改好后重新導(dǎo)出并拖拽苛白，一個更新迭代的幻燈版本就搞好了娃豹。

如果你打算把幻燈攜帶出去，怎么辦购裙？

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

其中的export文件夾就是你的幻燈了感憾。把它整個兒拷到優(yōu)盤上掖疮，帶走就好。

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

瀏覽器我推薦Google Chrome售葡。Firefox和Safari可以作為備選項。其他的瀏覽器我沒有測試過耍贾，歡迎你把測試結(jié)果告訴我阅爽。

魔法

如果你對實現(xiàn)的技術(shù)細(xì)節(jié)不感興趣，可以跳過本節(jié)荐开，直接看“討論”章節(jié)付翁。

這么有求知欲？好吧晃听，那咱們講講這個“秒變幻燈”的效果是怎么來的胆敞。

剛剛我們提到，MindNode支持了文本包(textbundle)杂伟。說白了移层，文本包就是打包了的Markdown。

這個名字赫粥，就不那么陌生了吧观话？

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

你在甲工具里編輯Markdown晦溪，想全文拷貝到乙軟件做個備份瀑粥，圖沒了。

你寫好了一篇文章三圆，興沖沖發(fā)布到網(wǎng)上狞换，圖沒了。

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

Markdown的插圖修噪，是用語句指定了圖片的位置。如果指定的是本地位置路媚，遠(yuǎn)程就無法正常顯示黄琼。如果指定的是相對位置，哪怕Markdown文件在本機(jī)一挪動整慎，圖片位置也會失效脏款。

面對這一痛點，有聰明人于是想出來一個招數(shù)——打包裤园。就是把圖片和Markdown文本文件捆綁在一起弛矛，打成一個包，形成一種通用格式比然。這樣丈氓，把文章帶走，或者在不同應(yīng)用間轉(zhuǎn)移强法，只需要拷貝或者共享這樣一個包万俗，就可以了。

這個文本包饮怯，英文名稱叫做TextBundle闰歪。人們還專門建立了一個網(wǎng)站，說明目前哪些工具支持該格式蓖墅。

思維導(dǎo)圖軟件MindNode支持文本包库倘，就意味著你在思維導(dǎo)圖里面插入的各種圖片，都可以轉(zhuǎn)移到其他軟件中去论矾。

可是我要做幻燈敖挑妗？Markdown插圖倒來倒去有什么用贪壳？

用處大了饱亿。

因為本文中展示的幻燈，不是PPT，而是漂亮的HTML5文件彪笼。沒錯钻注，你剛才做了個靜態(tài)網(wǎng)頁出來。

我們利用的幻燈工具配猫，叫做Reveal.js幅恋。它可以渲染HTML5文件，把它們用幻燈片的方式一頁頁播放泵肄。

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

可以是這樣零渐。

也可以是這樣窒舟。

可是你會發(fā)現(xiàn)系忙，從Markdown到HTML5，中間好像有個缺失鏈條盎莶颉银还！

沒錯，把Markdown文件轉(zhuǎn)變成HTML5格式洁墙，我們使用了格式轉(zhuǎn)換界的瑞士軍刀了——Pandoc蛹疯。

它可以在數(shù)不清的文件格式之間，輕易轉(zhuǎn)換热监。

看不清捺弦？那就對了，它支持的格式太多了孝扛！

有了Pandoc列吼，我們的轉(zhuǎn)換鏈就補(bǔ)齊了：

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

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

換做是我苦始，恐怕也跑回去用PPT了寞钥。

我們使用電腦，就是要讓它替我們做自己懶得做的事情陌选。否則要它干嘛理郑？

而電腦最善于處理的，恰巧就是這種程序化的瑣碎事務(wù)咨油。

將思維導(dǎo)圖到幻燈的轉(zhuǎn)換流程自動化串接起來您炉，我們用到了Python。

Python如今很火役电。大家都知道它可以用來做爬蟲邻吭、做數(shù)據(jù)分析，甚至是做網(wǎng)站。但是不要忘了囱晴，作為腳本語言膏蚓，它從來都是一種非常好的膠水工具，可以連接各個環(huán)節(jié)畸写，幫我們把流程自動化完成驮瞧。

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

其實千所，它里面只有一句話而已狂魔。

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

如果你對實現(xiàn)的技術(shù)細(xì)節(jié)感興趣最楷，可以查看源代碼。這個腳本陸續(xù)寫了很長時間待错，其中Markdown到幻燈的轉(zhuǎn)換還是我剛學(xué)Python的時候?qū)懙淖阉铩Ｈ绻惆l(fā)現(xiàn)其中有很多蹩腳的代碼，那很正常火俄。我這個懶人實在懶得改了犯建，能湊合著用就好。歡迎你幫我改進(jìn)瓜客。

如果你愿意把它開發(fā)成為更好用的Web服務(wù)适瓦，歡迎在留言區(qū)或者私信跟我聯(lián)系。

討論

你平時是怎么做幻燈的谱仪？這種思維導(dǎo)圖秒變幻燈的方式你喜歡嗎玻熙？你有沒有更高效的幻燈制作方法？歡迎留言芽卿，把你的思考分享給大家揭芍，我們一起交流討論。

如果你對我的文章感興趣卸例，歡迎點贊称杨，并且關(guān)注我的文集《玉樹芝蘭》。

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