在信息爆炸的時(shí)代，整理和高效利用知識(shí)變得尤為重要。思維導(dǎo)圖作為一種強(qiáng)大的知識(shí)梳理工具，其簡潔直觀的特性深受大家喜愛。

在編輯思維導(dǎo)圖時(shí)，有人喜歡用傳統(tǒng)的富文本格式，有人更傾向于采用Markdown格式，Markdown的一大優(yōu)點(diǎn)在于，它是通用的標(biāo)記語言，可在各種設(shè)備或系統(tǒng)上打開，同時(shí)又能廣泛兼容不同的場景和軟件，在導(dǎo)入導(dǎo)出時(shí)都能方便。

然而，當(dāng)我們需要將思維導(dǎo)圖轉(zhuǎn)換為Markdown格式時(shí)，問題就來了。這個(gè)過程可能會(huì)非常繁瑣和耗時(shí)。但是，有了AI工具和插件的幫助，這兩種格式的轉(zhuǎn)換，從此就不再是問題。今天，我將為你分享2款實(shí)用的Markdown思維導(dǎo)圖格式轉(zhuǎn)換工具，讓你輕松實(shí)現(xiàn)思維導(dǎo)圖到Markdown的轉(zhuǎn)換。

Markdown是什么？

Markdown是一種輕量級(jí)標(biāo)記語言，它允許人們使用易讀易寫的純文本格式編寫文檔，然后轉(zhuǎn)換成結(jié)構(gòu)化的HTML（超文本標(biāo)記語言）。它由John Gruber和Aaron Swartz共同創(chuàng)建，目的是為了讓網(wǎng)絡(luò)寫作更加簡單和快捷。

在使用Markdown編輯內(nèi)容時(shí)，只需要使用一些簡單的標(biāo)記符號(hào)，就能為文本設(shè)置對(duì)應(yīng)的樣式，使得編寫和閱讀都非常方便。

不過基于Markdown編輯導(dǎo)圖內(nèi)容，自己使用確實(shí)很方便，但在與他人協(xié)作的場景下，Markdown格式的思維導(dǎo)圖的弊端就暴露出來了，諸如不便于分享、協(xié)作者不了解Markdown語法導(dǎo)致無法編輯等，在這些場景下，就需要對(duì)Markdown格式的思維導(dǎo)圖進(jìn)行轉(zhuǎn)換，下面介紹2種將Markdown一鍵轉(zhuǎn)思維導(dǎo)圖的方法。

01 Markdown一鍵轉(zhuǎn)思維導(dǎo)圖的AI工具-boardmix

boardmix，是一款跨平臺(tái)的在線思維導(dǎo)圖軟件，它內(nèi)置了AI一鍵生成思維導(dǎo)圖、AI提煉Markdown文件生成思維導(dǎo)圖、導(dǎo)入文件生成思維導(dǎo)圖、OCR識(shí)別圖片為思維導(dǎo)圖等功能，其中的「AI提煉Markdown文件」就能實(shí)現(xiàn)Markdown一鍵轉(zhuǎn)思維導(dǎo)圖的目的，全程由AI自動(dòng)完成，無需手動(dòng)操作，格式轉(zhuǎn)換隨心所欲。

使用boardmix將Markdown一鍵轉(zhuǎn)思維導(dǎo)圖的操作如下：

在瀏覽器打開boarmix的首頁，如下圖所示，點(diǎn)擊「新建空白思維導(dǎo)圖」，創(chuàng)建一個(gè)boardmix導(dǎo)圖文件。

在打開的boardmix文件，點(diǎn)擊左上角的「設(shè)置」，選擇「導(dǎo)入 > Markdown」，在打開的窗口，上傳本地的Markdown文件。

此時(shí)會(huì)彈出下圖的浮窗，這里提供了多個(gè)選項(xiàng)，我們想把Markdown文件自動(dòng)轉(zhuǎn)換為思維導(dǎo)圖，因此單擊底部的「生成思維導(dǎo)圖」，boardmix AI就會(huì)讀取分析導(dǎo)入的文件內(nèi)容，并自動(dòng)生成一個(gè)思維導(dǎo)圖。

經(jīng)由boardmix AI提煉后，導(dǎo)入的Markdown文件自動(dòng)轉(zhuǎn)換為下圖所示的思維導(dǎo)圖，Markdown的一級(jí)、二級(jí)、三級(jí)標(biāo)題，依次對(duì)應(yīng)思維導(dǎo)圖各個(gè)層級(jí)的節(jié)點(diǎn)。

除了提煉Markdown文件生成思維導(dǎo)圖之外，我們還可以在編輯導(dǎo)圖內(nèi)容的過程中，選中任意一個(gè)導(dǎo)圖節(jié)點(diǎn)，隨時(shí)隨地調(diào)用boardmix AI助手，提供的選項(xiàng)非常多，可根據(jù)需要進(jìn)行選擇——

繼續(xù)生成思維導(dǎo)圖、提煉概要、智能注釋、拓展問題、拓展想法、生成演示文稿（PPT）、頭腦風(fēng)暴、解釋說明、SWOT分析、翻譯、改變語氣、AI智能問答

02 Markdown一鍵轉(zhuǎn)思維導(dǎo)圖的插件-Markmap

除了boardmix AI，如果你是一個(gè)喜歡使用VS Code來編輯文本內(nèi)容的極客，這里還有另外一種將Markdown快速轉(zhuǎn)換為思維導(dǎo)圖的方法，那就是借助一個(gè)VSCode插件Markmap。

使用Markmap插件將Markdown轉(zhuǎn)換為思維導(dǎo)圖的操作要點(diǎn)，可以看下邊的思維導(dǎo)圖，感興趣的朋友可以按照指引進(jìn)行操作。

以上就是本次想和各位分享的Markdown轉(zhuǎn)思維導(dǎo)圖的2種方法，不知道你更喜歡哪一種呢？如果你還知道其他方法，歡迎在下方的評(píng)論區(qū)留言，與大家一同分享。

碼字不易，如果對(duì)你有幫助的話，請(qǐng)別忘了賞個(gè)【三連】或是【關(guān)注】我哦，關(guān)注不迷路，那我們下次再見咯。

文已經(jīng)過原作者 Katherine Peterson 授權(quán)翻譯。

VSCode 之所以是如此出色的代碼編輯器，其原因之一是由社區(qū)創(chuàng)建的龐大的插件庫，從而提高了開發(fā)人員的工作效率。以下是一些我最喜歡的VSCode 插件。

1. Rainbow Brackets

地址：https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets

這個(gè)插件讓我們的括號(hào)變成五顏六色，這樣很容易就能找到匹配的對(duì)。

2. Auto Rename Tag

地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

重命名一個(gè)HTML / XML標(biāo)簽時(shí)，自動(dòng)重命名配對(duì)的HTML / XML標(biāo)簽。

3. Relative Path

地址：https://marketplace.visualstudio.com/items?itemName=jakob101.RelativePath

此插件節(jié)省了我很多時(shí)間來編寫導(dǎo)入語句。使用簡單的鍵盤快捷鍵即可輕松獲取工作區(qū)中任何文件的相對(duì)路徑。

4. Prettier

地址：https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

和esLint不同在于，ESLint只是一個(gè)代碼質(zhì)量工具(確保沒有未使用的變量、沒有全局變量，等等)。而 Prettier 只關(guān)心格式化文件(最大長度、混合標(biāo)簽和空格、引用樣式等)。可見，代碼格式統(tǒng)一的問題，交給 Prettirer 再合適不過了。和 Eslint 配合使用，風(fēng)味更佳。

5. htmltagwrap

地址：https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap

可以在選中HTML標(biāo)簽中外面套一層標(biāo)簽。

6. Markdown Preview Enhanced

地址：ttps://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced

如果你寫過markdown文件，有一個(gè)實(shí)時(shí)預(yù)覽是非常有用的。

7. Polacode

地址：https://marketplace.visualstudio.com/items?itemName=pnp.polacode

這個(gè)插件可以將你的代碼保存成圖片分享給別人！

8. Random Everything

地址：https://marketplace.visualstudio.com/items?itemName=helixquar.randomeverything

這個(gè)插件可以根據(jù)數(shù)據(jù)類型自動(dòng)生成隨機(jī)數(shù)據(jù)，特別適合生成測試數(shù)據(jù)。

9. CSS Peek

地址：https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

CSS Peek插件擴(kuò)展了HTML和ejs代碼編輯功能，支持在源代碼中的字符串中找到css/scss/less(類和id)。這在很大程度上是受方括號(hào)中稱為CSS內(nèi)聯(lián)編輯器的類似功能的啟發(fā)。

10. Turbo Console Log

地址：https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log

快捷添加 console.log，一鍵 注釋 / 啟用 / 刪除 所有 console.log。

簡單說下這個(gè)插件要用到的快捷鍵:

ctrl + alt + l 選中變量之后，使用這個(gè)快捷鍵生成 console.log
alt + shift + c 注釋所有 console.log
alt + shift + u 啟用所有 console.log
alt + shift + d 刪除所有 console.log

11. Simple React Snippets

地址：https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets

快速生成 React 模板片段~

12. Snippet Creator

地址:ttps://marketplace.visualstudio.com/items?itemName=ryanolsonx.snippet-creator

有許多代碼段擴(kuò)展，如上面的React，但有時(shí)我們可能想要制作自己的自定義代碼段，這個(gè)插件可以讓你輕松做到這一點(diǎn)。

~完，我是小智，我要去刷碗了~

原者：Katherine Peterson 譯者：前端小智 來源：dev

原文：https://dev.to/katherinecodes/my-12-favorite-vscode-extensions-cld

lpha2phi.·3分鐘閱讀

使用Visual Studio代碼進(jìn)行圖表和演示。

概述

除了寫作代碼外，Visual Studio代碼以及各種可用擴(kuò)展，也是寫作，圖解和演示的重要工具。

Diagrams.net（以前的draw.io）

這絕對(duì)是我最喜歡的圖表工具之一。Diagrams.1.1.1.1.1.1.10.11.101.101.NET基于瀏覽器的最終用戶圖表軟件。

電子中有一個(gè)桌面版本。但是，如今我通常使用非官方擴(kuò)展程序在vsode內(nèi)使用它。

Diagrams.net擁有專業(yè)示意工具所需的一切，并與云存儲(chǔ)提供商（Onedrive，Google Drive，Dropbox）和平臺(tái)相結(jié)合，如GitHub或Gitlab。

Marp：Markdown演示生態(tài)系統(tǒng)

Marp增強(qiáng)了vscode的Markdown預(yù)覽窗格，以支持寫您的漂亮演示文稿。

由于它使用Markdown，因此非常容易開始創(chuàng)建演示幻燈片。

它還支持圖像，數(shù)字排版，自動(dòng)縮放等的其他指令和語法。

您可以使用Pandoc的Markdown樣式顯示數(shù)學(xué)方程式。

您可以使用Markdown來顯示圖像。

有內(nèi)置主題，您可以使用CSS輕松創(chuàng)建和自定義自己的主題。

隨著幻燈片準(zhǔn)備后，您可以將它們導(dǎo)出為PDF，HTML，PowerPoint或JPEG。

vscode-reveal

vscode-reveal允許您直接從vsode創(chuàng)建和查看EVENION.JS演示文稿。

由于演示文稿是用reveve.js進(jìn)行的，因此您可以在Web上進(jìn)行的任何東西，您可以在演示文稿中進(jìn)行。

您可以使用CSS更改樣式，使用包含外部網(wǎng)頁，或使用Apply.js JavaScript API添加您自己的自定義行為。

還有嵌套幻燈片等功能，Markdown支持，自動(dòng)動(dòng)畫，PDF導(dǎo)出，揚(yáng)聲器筆記，乳膠支持和語法突出顯示代碼。

創(chuàng)建演示文稿標(biāo)記文件后，您可以將它們導(dǎo)出為PDF或HTML。然后，HTML演示文稿幻燈片可以在線托管以進(jìn)行查看。例如，您可以通過GitHub頁面瀏覽示例演示。

概括

對(duì)于vscode，emacs或vim / neovim等代碼編輯器感到舒適的開發(fā)人員，有可用的插件或擴(kuò)展可幫助您除編碼之外可以做更多的事物。

(本文由聞數(shù)起舞翻譯自Beautiful Mathematics In Movies的文章《VSCode for Diagramming and Presentation》，轉(zhuǎn)載請(qǐng)注明出處，原文鏈接：https://alpha2phi.medium.com/vscode-for-diagramming-and-presentation-b3c1dfb57aad)