背景
工作澄惊、生活中有很多寫文檔的需求，如何才能提高寫作效率富雅？選擇合適的工具加恰當(dāng)?shù)姆椒?/strong>掸驱。下面分享一些工具和方法，為你的寫作助力没佑。
寫作工具
對(duì)于我來說MarkDown+思維導(dǎo)圖是一種效率極佳的寫作方式毕贼。思維導(dǎo)圖可以將我的思考清晰的展示，然后按照知識(shí)脈絡(luò)完善文章內(nèi)容蛤奢。文章寫作使用MarkDown 鬼癣，MarkDown 編輯工具很多，經(jīng)過使用比較我最終選擇 Typora + MindNode 啤贩。
Typora 正式版本已經(jīng)開始付費(fèi)待秃，89元買斷機(jī)制，免費(fèi)版可以下載歷史Beta版本痹屹。
文檔格式互轉(zhuǎn)
有的時(shí)候章郁，我們需要做文件的各種轉(zhuǎn)換以滿足展示場(chǎng)景，比如 Markdown轉(zhuǎn)思維導(dǎo)圖志衍。
Mind to Markdown
思維導(dǎo)圖轉(zhuǎn)換為 Markdown 暖庄，MindNode 和 XMind 這兩個(gè)工具直接導(dǎo)出 Markdown格式文件即可。
Markdown to Mind
使用 markmap 可以將 Markdown 轉(zhuǎn)換為可視化楼肪、可交互的 HTML 格式的思維導(dǎo)圖培廓。
本文轉(zhuǎn)換出來的效果如下
方式一：在線轉(zhuǎn)換（https://markmap.js.org/repl）粘貼 markdown 到編輯區(qū)就可以導(dǎo)出Html或SVG。
方式二：在 vscode 中使用淹辞，安裝插件（https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode）
方式三：安裝 markmap-cli 命令工具医舆。
npm install -g markmap-cli
# 轉(zhuǎn)換
markmap index.md -o index.html
萬能轉(zhuǎn)換
一個(gè)強(qiáng)大的命令行工具 Pandoc，用于將文件從一種標(biāo)記語言轉(zhuǎn)換為另一種標(biāo)記語言象缀。常用的標(biāo)記語言包括 Markdown、ReStructuredText爷速、HTML央星、LaTex、ePub 和 Microsoft Word DOCX惫东。
在線轉(zhuǎn)換地址（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, epub
Markdown 轉(zhuǎn) Html
pandoc index.md -o index.html -c Github.css
Markdown 轉(zhuǎn) Word
pandoc index.md -o index.docx -c Github.css
Markdown 轉(zhuǎn) PDF毙石，PDF 轉(zhuǎn)換相對(duì)復(fù)雜一些。轉(zhuǎn)換分兩步驟颓遏，所以需要先安裝TeX Live 或者 MiKTeX 徐矩。
- 第一步， Markdown 文件被轉(zhuǎn)為 LaTeX 源文件叁幢。
- 第二步滤灯，調(diào)用系統(tǒng)的
pdflatex（默認(rèn)使用）,xelatex或者其他 TeX 命令，將.tex文件轉(zhuǎn)換為最終的 PDF 文件曼玩。
brew install texlive
pandoc index.md -o index.pdf
如果內(nèi)容包含中文會(huì)出現(xiàn)如下報(bào)錯(cuò)鳞骤，這是因?yàn)?Pandoc 默認(rèn)使用的 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
如果內(nèi)容需要對(duì)圖表，方程式贬墩，表格和交叉引用進(jìn)行編號(hào)陈症，可以安裝 pandoc-crossref。安裝和語法如下：
brew install pandoc-crossref
-
{#fig:label}: 圖片圖片后{#fig:key_img}標(biāo)記圖片引用Key震糖，然后在需要引用的位置加上[@fig: key_img]录肯。 -
{#eq:label}: 公式$$ math $${#eq:math} -
{#sec:label}: 章節(jié) -
{#tbl:label}: 表格
# 轉(zhuǎn)換 PDF
pandoc -F pandoc-crossref --pdf-engine=xelatex -V CJKmainfont="PingFang SC" index.md -o index.pdf
# 轉(zhuǎn)換 Html
pandoc -F pandoc-crossref index.md -o index.html
Pandoc 還支持 YAML 格式的 header，通過 header 可以指定文章的標(biāo)題吊说，作者论咏，更新時(shí)間等信息，如下：
---
title: "文章標(biāo)題"
author: "lixp"
date: 2022-06-11
---
代碼塊高亮
# 代碼塊高亮
pandoc --list-highlight-styles
# 顯示支持的語言
pandoc --list-highlight-languages
要使用語法高亮颁井，Markdown 文件中的 block code 必須指定語言厅贪，同時(shí)在命令行使用--highlight-style 選項(xiàng)，例如：
pandoc -F pandoc-crossref --pdf-engine=xelatex -V CJKmainfont="PingFang SC" index.md --highlight-style espresso -o index.pdf
各種畫圖
寫文檔時(shí)雅宾，畫圖對(duì)于大多數(shù)人來說都比較痛苦吧养涮。我們可以利用Mermaid 幫我們快速制作出想要的各種圖等。它是一個(gè)基于 Javascript 的圖表繪制工具眉抬，通過解析類 Markdown 的文本語法來實(shí)現(xiàn)圖表的創(chuàng)建和動(dòng)態(tài)修改贯吓。在線嘗試一下。下面介紹一下 Markdown 里面畫各種圖蜀变。
Mermaid詳細(xì)語法可查看：https://mermaid-js.github.io/mermaid
流程圖
橫向流程圖
```mermaid
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[拒絕]
```
標(biāo)準(zhǔn)橫向流程圖
```flow
st=>start: 開始
op=>operation: 審批
cond=>condition: 年齡是否大于18
sub1=>subroutine: 返回審批
io=>inputoutput: 通過
e=>end: 結(jié)束
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
```
標(biāo)準(zhǔn)豎向流程圖
```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
```
時(shí)序圖
```sequence
對(duì)象A->對(duì)象B: 對(duì)象B你好嗎?（請(qǐng)求）
Note right of 對(duì)象B: 對(duì)象B的描述
Note left of 對(duì)象A: 對(duì)象A的描述(提示)
對(duì)象B-->對(duì)象A: 我很好(響應(yīng))
對(duì)象A->對(duì)象B: 你真的好嗎悄谐？
```
復(fù)雜時(shí)序圖
```sequence
Title: 標(biāo)題：復(fù)雜使用
對(duì)象A->對(duì)象B: 對(duì)象B你好嗎?（請(qǐng)求）
Note right of 對(duì)象B: 對(duì)象B的描述
Note left of 對(duì)象A: 對(duì)象A的描述(提示)
對(duì)象B-->對(duì)象A: 我很好(響應(yīng))
對(duì)象B->小三: 你好嗎
小三-->>對(duì)象A: 對(duì)象B找我了
對(duì)象A->對(duì)象B: 你真的好嗎？
Note over 小三,對(duì)象B: 我們是朋友
participant C
Note right of C: 沒人陪我玩
```
UML標(biāo)準(zhǔn)時(shí)序圖：
```mermaid
%% 時(shí)序圖例子,-> 直線库北，-->虛線爬舰，->>實(shí)線箭頭
sequenceDiagram
participant 張三
participant 李四
張三->王五: 王五你好嗎们陆？
loop 健康檢查
王五->王五: 與疾病戰(zhàn)斗
end
Note right of 王五: 合理 食物 <br/>看醫(yī)生...
李四-->>張三: 很好!
王五->李四: 你怎么樣?
李四-->王五: 很好!
```
甘特圖
```mermaid
%% 語法示例
gantt
dateFormat YYYY-MM-DD
title 軟件開發(fā)甘特圖
section 設(shè)計(jì)
需求 :done, des1, 2022-01-06,2014-01-08
原型 :active, des2, 2022-01-09, 3d
UI設(shè)計(jì) : des3, after des2, 5d
未來任務(wù) : des4, after des3, 5d
section 開發(fā)
學(xué)習(xí)準(zhǔn)備理解需求 :crit, done, 2022-01-06,24h
設(shè)計(jì)框架 :crit, done, after des2, 2d
開發(fā) :crit, active, 3d
未來任務(wù) :crit, 5d
耍 :2d
section 測(cè)試
功能測(cè)試 :active, a1, after des3, 3d
壓力測(cè)試 :after a1 , 20h
測(cè)試報(bào)告 : 48h
```
類圖
```mermaid
classDiagram
class Account
Account : +String owner
Account <|-- BankAccount
class BankAccount
BankAccount : +String owner
BankAccount : +Bigdecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawl(amount)
```
狀態(tài)圖
```mermaid
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
```
并圖
```mermaid
pie
"蘋果" : 386
"香蕉" : 85
"菠蘿" : 15
```
用戶體驗(yàn)旅程圖
```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
```
Goat 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支持圖表顯示
我個(gè)人博客是使用 Hugo 創(chuàng)建，所以需要讓它支持圖表顯示情屹。
支持 mermaid
創(chuàng)建 layouts/_default/_markup/render-codeblock-mermaid.html 文件并添加下面代碼：
<div class="mermaid">
{{- .Inner | safeHTML }}
</div>
{{ .Page.Store.Set "hasMermaid" true }}
然后在內(nèi)容模板的底部（在 .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/Diagon/）這個(gè)網(wǎng)站可以快速生成ASCII值坪仇。然后通過hugo渲染，下面是幾個(gè)例子
流程圖
編輯界面
展示項(xiàng)目目錄垃你，安裝 tree椅文，將ASCII粘貼進(jìn)來即可，非常方便
brew install tree
如果上述畫圖不能滿足蜡镶，也可以使用圖說在線制表雾袱，然后導(dǎo)出圖片。
