背景
工作、生活中有很多寫文件的需求，如何才能提高寫作效率？選擇合適的工具加恰當的方法。下面分享一些工具和方法，為你的寫作助力。
寫作工具
對於我來說MarkDown+思維導圖是一種效率極佳的寫作方式。思維導圖可以將我的思考清晰的展示，然後按照知識脈絡完善文章內容。文章寫作使用MarkDown ，MarkDown 編輯工具很多，經過使用比較我最終選擇 Typora + MindNode 。
Typora 正式版本已經開始付費，89元買斷機制，免費版可以下載歷史Beta版本。
文件格式互轉
有的時候，我們需要做檔案的各種轉換以滿足展示場景，比如 Markdown轉思維導圖。
Mind to Markdown
思維導圖轉換為 Markdown ，MindNode 和 XMind 這兩個工具直接匯出 Markdown格式檔案即可。
Markdown to Mind
使用 markmap 可以將 Markdown 轉換為視覺化、可互動的 HTML 格式的思維導圖。
本文轉換出來的效果如下
方式一：線上轉換（https://markmap.js.org/repl）貼上 markdown 到編輯區就可以匯出Html或SVG。
方式二：在 vscode 中使用，安裝外掛（https://marketplace.visualstu...）
方式三：安裝 markmap-cli 命令工具。
npm install -g markmap-cli
# 轉換
markmap index.md -o index.html萬能轉換
一個強大的命令列工具 Pandoc，用於將檔案從一種標記語言轉換為另一種標記語言。常用的標記語言包括 Markdown、ReStructuredText、HTML、LaTex、ePub 和 Microsoft Word DOCX。
線上轉換地址（https://pandoc.org/try）。
Mac上直接使用 brew 安裝
brew install pandoc支援格式如下：
Input formats: native, json, markdown, markdown+lhs, rst, rst+lhs, docbook,
textile, html, latex, latex+lhs
Output formats: native, json, html, html5, html+lhs, html5+lhs, s5, slidy,
slideous, dzslides, docbook, opendocument, latex, latex+lhs,
beamer, beamer+lhs, context, texinfo, man, markdown,
markdown+lhs, plain, rst, rst+lhs, mediawiki, textile, rtf, org,
asciidoc, odt, docx, epubMarkdown 轉 Html
pandoc index.md -o index.html -c Github.cssMarkdown 轉 Word
pandoc index.md -o index.docx -c Github.cssMarkdown 轉 PDF，PDF 轉換相對複雜一些。轉換分兩步驟，所以需要先安裝TeX Live 或者 MiKTeX 。
- 第一步， Markdown 檔案被轉為 LaTeX 原始檔。
- 第二步，呼叫系統的
pdflatex（預設使用）,xelatex或者其他 TeX 命令，將.tex檔案轉換為最終的 PDF 檔案。
brew install texlive
pandoc index.md -o index.pdf如果內容包含中文會出現如下報錯，這是因為 Pandoc 預設使用的 pdflatex 命令無法處理 Unicode 字元，我們需要使用 xelatex ，並通過 CJKmainfont 指定中文字型。可以通過 fc-list :lang=zh 命令查詢支援的中文字型。
Error producing PDF.
! LaTeX Error: Unicode character 大 (U+5927)
not set up for use with LaTeX.Macos 下面我們選擇 PingFang SC。
pandoc --pdf-engine=xelatex -V CJKmainfont="PingFang SC" index.md -o index.pdf如果內容需要對圖表，方程式，表格和交叉引用進行編號，可以安裝 pandoc-crossref。安裝和語法如下：
brew install pandoc-crossref{#fig:label}: 圖片{#fig:key_img}標記圖片引用Key，然後在需要引用的位置加上[@fig: key_img]。{#eq:label}: 公式$$ math $${#eq:math}{#sec:label}: 章節{#tbl:label}: 表格
# 轉換 PDF
pandoc -F pandoc-crossref --pdf-engine=xelatex -V CJKmainfont="PingFang SC" index.md -o index.pdf
# 轉換 Html
pandoc -F pandoc-crossref index.md -o index.htmlPandoc 還支援 YAML 格式的 header，通過 header 可以指定文章的標題，作者，更新時間等資訊，如下：
---
title: "文章標題"
author: "lixp"
date: 2022-06-11
---程式碼塊高亮
# 程式碼塊高亮
pandoc --list-highlight-styles
# 顯示支援的語言
pandoc --list-highlight-languages要使用語法高亮，Markdown 檔案中的 block code 必須指定語言，同時在命令列使用--highlight-style 選項，例如：
pandoc -F pandoc-crossref --pdf-engine=xelatex -V CJKmainfont="PingFang SC" index.md --highlight-style espresso -o index.pdf各種畫圖
寫文件時，畫圖對於大多數人來說都比較痛苦吧。我們可以利用Mermaid 幫我們快速製作出想要的各種圖等。它是一個基於 Javascript 的圖表繪製工具，通過解析類 Markdown 的文字語法來實現圖表的建立和動態修改。線上嘗試一下。下面介紹一下 Markdown 裡面畫各種圖。
Mermaid詳細語法可檢視：https://mermaid-js.github.io/...
流程圖
橫向流程圖
```mermaid
graph LR
A[開始] -->B(審批)
B --> C{年齡?}
C -->|年齡>=18| D[通過]
C -->|年齡<18| E[拒絕]
```graph LR
A[開始] -->B(審批)
B --> C{年齡?}
C -->|年齡>=18| D[通過]
C -->|年齡<18| E[拒絕]豎向流程圖
```mermaid
graph TD
A[開始] -->B(審批)
B --> C{年齡?}
C -->|年齡>=18| D[通過]
C -->|年齡<18| E[拒絕]
```graph TD
A[開始] -->B(審批)
B --> C{年齡?}
C -->|年齡>=18| D[通過]
C -->|年齡<18| E[拒絕]標準橫向流程圖
```flow
st=>start: 開始
op=>operation: 審批
cond=>condition: 年齡是否大於18
sub1=>subroutine: 返回審批
io=>inputoutput: 通過
e=>end: 結束
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
```
標準豎向流程圖
```flow
st=>start: 開始框
op=>operation: 處理框
cond=>condition: 判斷框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 輸入輸出框
e=>end: 通過
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
```
時序圖
```sequence
物件A->物件B: 物件B你好嗎?（請求）
Note right of 物件B: 物件B的描述
Note left of 物件A: 物件A的描述(提示)
物件B-->物件A: 我很好(響應)
物件A->物件B: 你真的好嗎？
```
複雜時序圖
```sequence
Title: 標題：複雜使用
物件A->物件B: 物件B你好嗎?（請求）
Note right of 物件B: 物件B的描述
Note left of 物件A: 物件A的描述(提示)
物件B-->物件A: 我很好(響應)
物件B->小三: 你好嗎
小三-->>物件A: 物件B找我了
物件A->物件B: 你真的好嗎？
Note over 小三,物件B: 我們是朋友
participant C
Note right of C: 沒人陪我玩
```
UML標準時序圖：
```mermaid
%% 時序圖例子,-> 直線，-->虛線，->>實線箭頭
sequenceDiagram
participant 張三
participant 李四
張三->王五: 王五你好嗎？
loop 健康檢查
王五->王五: 與疾病戰鬥
end
Note right of 王五: 合理 食物 <br/>看醫生...
李四-->>張三: 很好!
王五->李四: 你怎麼樣?
李四-->王五: 很好!
```%% 時序圖例子,-> 直線，-->虛線，->>實線箭頭
sequenceDiagram
participant 張三
participant 李四
張三->王五: 王五你好嗎？
loop 健康檢查
王五->王五: 與疾病戰鬥
end
Note right of 王五: 合理 食物 <br/>看醫生...
李四-->>張三: 很好!
王五->李四: 你怎麼樣?
李四-->王五: 很好!甘特圖
```mermaid
%% 語法示例
gantt
dateFormat YYYY-MM-DD
title 軟體開發甘特圖
section 設計
需求 :done, des1, 2022-01-06,2014-01-08
原型 :active, des2, 2022-01-09, 3d
UI設計 : des3, after des2, 5d
未來任務 : des4, after des3, 5d
section 開發
學習準備理解需求 :crit, done, 2022-01-06,24h
設計框架 :crit, done, after des2, 2d
開發 :crit, active, 3d
未來任務 :crit, 5d
耍 :2d
section 測試
功能測試 :active, a1, after des3, 3d
壓力測試 :after a1 , 20h
測試報告 : 48h
``` gantt
dateFormat YYYY-MM-DD
title 軟體開發甘特圖
section 設計
需求 :done, des1, 2022-01-06,2014-01-08
原型 :active, des2, 2022-01-09, 3d
UI設計 : des3, after des2, 5d
未來任務 : des4, after des3, 5d
section 開發
學習準備理解需求 :crit, done, 2022-01-06,24h
設計框架 :crit, done, after des2, 2d
開發 :crit, active, 3d
未來任務 :crit, 5d
耍 :2d
section 測試
功能測試 :active, a1, after des3, 3d
壓力測試 :after a1 , 20h
測試報告 : 48h類圖
```mermaid
classDiagram
class Account
Account : +String owner
Account <|-- BankAccount
class BankAccount
BankAccount : +String owner
BankAccount : +Bigdecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawl(amount)
```classDiagram
class Account
Account : +String owner
Account <|-- BankAccount
class BankAccount
BankAccount : +String owner
BankAccount : +Bigdecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawl(amount)
狀態圖
```mermaid
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
```stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}並圖
```mermaid
pie
"蘋果" : 386
"香蕉" : 85
"菠蘿" : 15
```pie
"蘋果" : 386
"香蕉" : 85
"菠蘿" : 15使用者體驗旅程圖
```mermaid
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 3: Me
``` journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 3: MeGoat Ascii 圖
Goat 可以將 ASCII 渲染成 SVG
```goat
+-------------------+ ^ .---.
| A Box |__.--.__ __.--> | .-. | |
| | '--' v | * |<--- | |
+-------------------+ '-' | |
Round *---(-. |
.-----------------. .-------. .----------. .-------. | | |
| Mixed Rounded | | | / Diagonals \ | | | | | |
| & Square Corners | '--. .--' / \ |---+---| '-)-' .--------.
'--+------------+-' .--. | '-------+--------' | | | | / Search /
| | | | '---. | '-------' | '-+------'
|<---------->| | | | v Interior | ^
' <---' '----' .-----------. ---. .--- v |
.------------------. Diag line | .-------. +---. \ / . |
| if (a > b) +---. .--->| | | | | Curved line \ / / \ |
| obj->fcn() | \ / | '-------' |<--' + / \ |
'------------------' '--' '--+--------' .--. .--. | .-. +Done?+-'
.---+-----. | ^ |\ | | /| .--+ | | \ /
| | | Join \|/ | | Curved | \| |/ | | \ | \ /
| | +----> o --o-- '-' Vertical '--' '--' '-- '--' + .---.
<--+---+-----' | /|\ | | 3 |
v not:line 'quotes' .-' '---'
.-. .---+--------. / A || B *bold* | ^
| | | Not a dot | <---+---<-- A dash--is not a line v |
'-' '---------+--' / Nor/is this. ---
```
讓Hugo支援圖表顯示
我個人部落格是使用 Hugo 建立，所以需要讓它支援圖表顯示。
支援 mermaid
建立 layouts/_default/_markup/render-codeblock-mermaid.html 檔案並新增下面程式碼：
<div class="mermaid">
{{- .Inner | safeHTML }}
</div>
{{ .Page.Store.Set "hasMermaid" true }}然後在內容模板的底部（在 .Content 下方）新增下面程式碼：
{{ if .Page.Store.Get "hasMermaid" }}
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({ startOnLoad: true });
</script>
{{ end }}自定義Goat
通過（https://arthursonzogni.com/Di...）這個網站可以快速生成ASCII值。然後通過hugo渲染，下面是幾個例子
流程圖
編輯介面
展示專案目錄，安裝 tree，將ASCII貼上進來即可，非常方便
brew install tree
如果上述畫圖不能滿足，也可以使用圖說線上製表，然後匯出圖片。