之前開(kāi)源的思維導(dǎo)圖庫(kù)blink-mind的框架基本上寫完了。正所謂輪子搞定了樊诺,不造出輛車出來(lái)溜溜彎道怎么行呢仗考,不然怎么知道這輪子是否好使呢。
于是做了這么個(gè)vscode的思維導(dǎo)圖擴(kuò)展词爬,驗(yàn)證下這個(gè)庫(kù)的可用性秃嗜,另外確實(shí)工作中也會(huì)用的到這個(gè)擴(kuò)展。
話不多說(shuō)顿膨,先上圖
界面介紹
主界面:
圖太大需要點(diǎn)擊查看才能看的更清楚一些
主題選擇界面
內(nèi)置五種主題锅锨。并且對(duì)于每個(gè)節(jié)點(diǎn)的樣式也可以通過(guò)右側(cè)的樣式編輯器進(jìn)行微調(diào)。
樣式編輯界面
支持對(duì)邊框恋沃、背景必搞、連接線樣式的編輯。
支持對(duì)文字樣式(字號(hào)囊咏、行間距顾画、顏色)的編輯。
備注編輯界面
支持對(duì)任意節(jié)點(diǎn)添加備注
備注的編輯器支持富文本編輯
匆笤,支持插入代碼
研侣。選中要編輯的文本會(huì)彈出編輯工具欄阅茶,編輯體驗(yàn)類似于Medium 網(wǎng)站菩混。
操作介紹
新建導(dǎo)圖
Ctrl+Shif+P
打開(kāi)命令面板
墩邀,輸入Mind
選擇Create new mindmap
新建思維導(dǎo)圖
輸入新建思維導(dǎo)圖的名稱, 比方說(shuō)我想在當(dāng)前工作區(qū)根目錄下的react 子文件夾下新建一個(gè)名叫new-mind的思維導(dǎo)圖稚补,輸入完成之后敲回車瘦材。
系統(tǒng)默認(rèn)思維導(dǎo)圖文件以.blinkmind作為后綴名阁猜。接下來(lái)文件會(huì)創(chuàng)建好拷恨,并自動(dòng)打開(kāi)編輯器超陆。
編輯導(dǎo)圖
右鍵任意節(jié)點(diǎn)會(huì)彈出菜單
也可通過(guò)快捷鍵來(lái)進(jìn)行操作,
另外拖拽操作也是支持的书蚪。
聚焦模式
在任意節(jié)點(diǎn)的右鍵菜單中選擇點(diǎn)擊set as editor root
菜單項(xiàng), 會(huì)對(duì)該節(jié)點(diǎn)進(jìn)入聚焦模式進(jìn)行編輯喇澡。并且在導(dǎo)圖的左上角會(huì)出現(xiàn)導(dǎo)航欄,通過(guò)導(dǎo)航欄可以返回到任意父節(jié)點(diǎn)殊校。
保存導(dǎo)圖
點(diǎn)擊工具欄上的最左側(cè)的保存按鈕晴玖,會(huì)將緩沖區(qū)內(nèi)容寫入硬盤。
下載鏈接
https://github.com/awehook/vscode-blink-mind/releases
其他
什么時(shí)候publish到vscode extention market
目前icon還沒(méi)有設(shè)計(jì)好,非常歡迎有興趣的同學(xué)貢獻(xiàn)個(gè)icon~~~~~我目前還不怎么會(huì)用設(shè)計(jì)軟件呕屎,不過(guò)也正在摸索让簿,等icon 搞定之后會(huì)上傳vscode extention market
我自己創(chuàng)建的思維導(dǎo)圖
我自己學(xué)習(xí)過(guò)程中創(chuàng)建的思維導(dǎo)圖都會(huì)放在這個(gè)倉(cāng)庫(kù)下面
https://github.com/awehook/mindmap