使用 R，DiagrammeR 和 Blogdown 快速画箭头图表

简介

有的时候我们需要在文章中加入类似上面的箭头图表，这可以使用专用画图表工具，如 Visio 或一些在线图表网站等。

下面介绍一种使用 R，DiagrammeR 和 Blogdown 快速绘制这种图表的方法，此方法优点是：

1. 纯文本格式，复用性强，易于保存。这些图表内容可以保存在你的文章正文当中，不用单独外挂一个图形文件。可以随着你的文章一同复制，备份等。

2. 绘制自动化，省事。你只要写一些这样的命令：

   想法 -> 收集 
   收集 -> 整理 
   整理 -> 导出
   想法 -> 导出
   

   图表就自动画出来了，非常简单。

使用方法

1. 安装 R，RStuido，blogdown，DiagrammeR。安装方法请搜索上面各程序的主页，比较简单。R是一个统计用的专业软件，RStuido是IDE，blogdown是利用R的一个静态建站插件，DiagrammeR是R的一个绘制图表的插件。

2. 开始菜单中打开 RStudio 程序

3. 菜单中点击

   
   
   
   
   

   然后在上面输入框中填入新建的项目目录的名称，下面输入框中填入项目的父目录位置，建立新的项目。

4.在左下方 console 位置输入blogdown::new_site()

5. 然后会看见右下方 Files 位置自动生成了很多文件夹和文件
   

   

6. 这时在 Viewer 中也可以看到自动生成的网站
   

   

7. 在Files中找到 Content/Post 目录下的 2015-07-23-r-rmarkdown.html 文件并双击打开
   

   

8. 你会看到左上角已经打开了这个文件。

   
   
   

   在文件末尾添加如下的代码，注意保留 ```符号。

   DiagrammeR::grViz("
   digraph RmarkDown {
   graph [rankdir = LR]
   node [shape=rectangle
     style=filled
     color=orange
     fillcolor=salmon
     fontcolor=white
     arrowcolor=red
     alpha=55
     fontname = '微软雅黑']
   edge [color = grey]
   '想法' -> '收集'
   '收集' -> '整理'
   '整理' -> '导出'
       }
       ", width=600)
   

9. 点击代码块右上角的 > 运行此代码块，可以看见下面渲染出了代码运行结果

   
   
   

   代码运行结果显示在下面
   
   
   

10. Ctrl-S 保存此文件后，在右侧 Viewer 中可以看到渲染后的整个网页。这时可以点击新窗口中查看按钮，在网页浏览器中右键保存图形为 SVG 格式，也可以用截图工具将图片截图后使用。或者如果你直接使用 blogdown 作为建站程序的话，你的网站页面会直接显示出这些图表来。
    

    

    点击查看相应网页
    
    
    

    点击后在系统默认浏览器中打开此网页

总结

这个方法适合在文章中需要大量这种箭头图表的作者使用。如果是偶尔用几个的话，其他方法可能更为简单一些。如果配合 blogdown 建静态网站，这种方法则是利器。

如果配合 VS Code 的 代码块 Snippet 功能，则更为方便。上下文一些固定格式就不用自己手写或手动复制粘贴了。

下面的代码块可以用作模板，使用时只需要改变中间部分即可。

```{R, echo=FALSE }
DiagrammeR::grViz("digraph Template1 {graph [rankdir = LR] node [shape=rectangle style=filled color=orange fillcolor=salmon fontcolor=white arrowcolor=red alpha=55 fontname = '微软雅黑'] edge [color = grey]
########################
'想法' -> '收集'
'收集' -> '整理'
'整理' -> '导出'
'想法' -> '导出'
########################
}", width=400)
```