純文字圖案 | 懶人出圖工具

MacauYeah ・2024-09-20

早前，筆者就介紹過 Markdown / mdbook 等說明檔編寫工具，也分享過用於制於遊戲攻略時，如何加上插圖的情況。那怕是教學、說明、遊戲攻略，使用圖表的方式表達，的確有助於讀者理解。 在Markdown的技術上，圖文並茂是可以的，只是不太方便而已。以制作及修改的成本來講，出【圖】可能都不算最難，更麻煩的是管理。 怎樣教對？點開圖檔整個閱讀？。怎樣搜尋圖片，可以加附註嗎？更新後名字該怎樣取？ 老實講，如果可以，有些【圖】，直接經文字轉譯成圖表就最好。 mermaid Markdown 轉成圖，其實坊間早就有一些免費的工具，筆者選擇了 Github 也預設支援的 mermaid 。廢話不多說，直接送出 web 版的編輯工具。 https://mermaid.live/ mermaid 官網 使用它的好處 Github markdown 直接支援，mdbook經插件也可以使用。 易於編寫，也易於閱讀 有支援IT其他範疇的圖表，例如ER，State。 有支援更多其他範疇的圖表，例如gantt，mindmap。 使用它的問題 不支援手動調整位置，全部靠自動調整 ascii chart 若想要更多的位置掌控，其實我們可以回到過去BBS的年代，用文字方塊來砌圖。這個方法很有局限，但也不是完全不能用。 廢話不多說，直接送出 web 版的編輯工具。 https://asciiflow.com/#/ https://kirilllive.github.io/ASCII_Art_Paint/ascii_paint.html 可以選擇中文字符 使用它的好處 任意手繪圖表 使用它的問題 使用中文等字元，還要考慮是否等寛字型問題。 修改文字長度，邊界要重畫。 筆者有試過用來制作遊戲簡略地圖說明，這是比不斷截圖來要得更直觀。但限制就是不要在圖中加入文字，加入英數等符號就算了，再於其他地方加以解釋。如果我們必需在圖中使文字，我們就要控制輸出字型為等寛字型，例如使用【細明體】，就無問題了。不然就要全部使用中文字元(全型符號)，不要混合英數。 .-=. .:*%%+.:. :#%%%%%+#. :#%%%%%%%%%%*. .*%%%%%%%%%%%%%%%*+-.. .-%%%%%%%%%%%%%%%%%%%%%%*:. .-%%%%%%%%%%%%%%%%%%%%%%%%%%-. .=%%%%%%*=-::::::::::::::-=#%%#: :#%%*-:::::::::::::::::::::::-*%+. .*#=-:::::::::::--=========-::::-#+. .=#==-::::-=*%%%%%%%%%%%%%%%%%%=::-#-. .#*==--#%%%%%%%%%%%%%%%#..#%%%%%+::**. :#+==#%%%=.+%%%%%%%%%#-:**::+%%%#-:=--*= .-+#*=+%%#.=%+.+%%%%%%%#--====*%%%#-::::-*. :*====+%%%%#.-%%%%%%%%%%%%-:+%%%%%*::::-*: .*=====#%%%%%%%%%####%%%%%%%%%%%%*::-%+. .:##==#%%%%+-:::::::::::--===-::::##. .##====-::::::::::::=#-:::::::-##. .*%*====---==+**#*+=::::::::+%+. .-#%#+====-:-----::::::-+%%#:. :#%%%%#*+===---+*%%%%%*. ..:=#%%%%%%%%%%%%%+:. ..::---:...