背景

工作、生存中有很多写文档的需要，如何能力进步写作效率？抉择适合的工具加失当的办法。上面分享一些工具和办法，为你的写作助力。

写作工具

对于我来说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, epub

Markdown 转 Html

pandoc index.md -o index.html -c Github.css

Markdown 转 Word

pandoc index.md -o index.docx -c Github.css

Markdown 转 PDF，PDF 转换绝对简单一些。转换分两步骤，所以须要先装置TeX Live 或者 MiKTeX 。

  • 第一步， Markdown 文件被转为 LaTeX 源文件。
  • 第二步，调用零碎的 pdflatex （默认应用）, xelatex 或者其余 TeX 命令，将 .tex 文件转换为最终的 PDF 文件。
brew install texlivepandoc 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}: 图片 ![img](img.png){#fig:key_img} 标记图片援用Key，而后在须要援用的地位加上[@fig: key_img]。
  • {#eq:label}: 公式 $$ math $${#eq:math}
  • {#sec:label}: 章节
  • {#tbl:label}: 表格
# 转换 PDFpandoc -F pandoc-crossref --pdf-engine=xelatex -V CJKmainfont="PingFang SC" index.md -o index.pdf# 转换 Htmlpandoc -F pandoc-crossref index.md -o index.html

Pandoc 还反对 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/...

流程图

横向流程图

```mermaidgraph LRA[开始] -->B(审批)    B --> C{年龄?}    C -->|年龄>=18| D[通过]    C -->|年龄<18| E[回绝]```
graph LRA[开始] -->B(审批)    B --> C{年龄?}    C -->|年龄>=18| D[通过]    C -->|年龄<18| E[回绝]

竖向流程图

```mermaidgraph TDA[开始] -->B(审批)    B --> C{年龄?}    C -->|年龄>=18| D[通过]    C -->|年龄<18| E[回绝]```
graph TDA[开始] -->B(审批)    B --> C{年龄?}    C -->|年龄>=18| D[通过]    C -->|年龄<18| E[回绝]

规范横向流程图

```flowst=>start: 开始op=>operation: 审批cond=>condition: 年龄是否大于18sub1=>subroutine: 返回审批io=>inputoutput: 通过e=>end: 完结st(right)->op(right)->condcond(yes)->io(bottom)->econd(no)->sub1(right)->op```

规范竖向流程图

```flowst=>start: 开始框op=>operation: 解决框cond=>condition: 判断框(是或否?)sub1=>subroutine: 子流程io=>inputoutput: 输入输出框e=>end: 通过st->op->condcond(yes)->io->econd(no)->sub1(right)->op```

时序图

```sequence对象A->对象B: 对象B你好吗?（申请）Note right of 对象B: 对象B的形容Note left of 对象A: 对象A的形容(提醒)对象B-->对象A: 我很好(响应)对象A->对象B: 你真的好吗？```

简单时序图

```sequenceTitle: 题目：简单应用对象A->对象B: 对象B你好吗?（申请）Note right of 对象B: 对象B的形容Note left of 对象A: 对象A的形容(提醒)对象B-->对象A: 我很好(响应)对象B->小三: 你好吗小三-->>对象A: 对象B找我了对象A->对象B: 你真的好吗？Note over 小三,对象B: 咱们是敌人participant CNote 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

类图

```mermaidclassDiagram        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)

状态图

```mermaidstateDiagram-v2    [*] --> First    state First {        [*] --> second        second --> [*]    }```
stateDiagram-v2    [*] --> First    state First {        [*] --> second        second --> [*]    }

并图

```mermaidpie"苹果" : 386"香蕉" : 85"菠萝" : 15```
pie"苹果" : 386"香蕉" : 85"菠萝" : 15

用户体验旅程图

```mermaidjourney    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: 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反对图表显示

我集体博客是应用 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

如果上述画图不能满足，也能够应用图说在线制表，而后导出图片。