一款免费清爽的markdown软件vnote的完全配置手册-无忧配置Graphviz、plantuml、mathjax

markdown的使用越来越频繁了，就连有道云中都有了（但有道云不能实现免费图床，也不能直接粘贴识别表格，这是我放弃有道云markdown的原因），CSDN中也一老早就支持了，只是随便惯了，就一直么有统一使用。今天开始我的CSDN博客就开始全盘统一使用markdown来记录了，希望能够给小伙伴们带来更好的阅读体验。
同时，我们在自己的电脑上开始用markdown编写文档，第一个markdown软件就是这款开源免费的vnote，不仅如此，软件的作者还会在GitHub很及时的回答使用方面遇到的问题（中国广东的作者，汉语直接提问即可），但使用前我们需要给它配置好几个必备工具插件，如：Graphviz与plantuml、mathjax（如果你的网络可以访问外网，基本不需要配置直接可以使用）。
要配置好vnote的plantuml与mathjax，需要首先安装java环境，java下载一个安装即可。但需要配置好运行环境。如果你不会，那么就整一个批处理文件，运行以下即可。

1、安装下载vnote

最新版vnote3.13
稳定版vnote2.7
一般下载下来解压到任意目录就可以用了。不过会产生一些配置文件在你的Appdata目录下，尤其自带的插件。

2、利用批处理完成java环境的配置

代码如下：
该批处理文件转自：https://www.yzlfxy.com/jiaocheng/java/361299.html

@echo off
set regpath=HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager\Environment
set javahome=C:\Program Files (x86)\Java\jre1.8.0_291
rem LPY
echo.
echo ************************************************************
echo * *
echo * Set JDK system environment var*
echo * *
echo ************************************************************
echo.
echo === 准备设置环境变量: JAVA_HOME=%javahome%

echo === 注意: 如果JAVA_HOME存在,会被覆盖,此操作不可逆的,请仔细检查确认!! ===
echo.
echo === 准备设置环境变量(后面有个.): classPath=%%JAVA_HOME%%\lib\tools.jar;%%JAVA_HOME%%\lib\dt.jar;.
echo === 注意: 如果classPath存在,会被覆盖,此操作不可逆的,请仔细检查确认!! ===
echo.
echo === 准备设置环境变量: PATH=%%JAVA_HOME%%\bin
echo === 注意: PATH会追加在最前面,
echo.
set /P EN=cofirm and press Enter!
echo.
echo.
echo.
echo.
echo === Add envirment var JAVA_HOME=%javahome%
setx "JAVA_HOME" "%javahome%" -M
echo.
echo.
echo === Add envirment var classPath=%%JAVA_HOME%%\lib\tools.jar;%%JAVA_HOME%%%\lib\dt.jar;.
setx "classPath" "%%JAVA_HOME%%\lib\tools.jar;%%JAVA_HOME%%%\lib\dt.jar;." -m
echo.
echo.
echo === 新追加环境变量(追加到最前面) PATH=%%JAVA_HOME%%\bin
for /f "tokens=1,* delims=:" %%a in ('reg QUERY "%regpath%" /v "path"') do (
set "L=%%a"
set "P=%%b"
)
set "Y=%L:~-1%:%P%"
setx path "%%JAVA_HOME%%\bin;%Y%" -m
echo.
echo.
rem LPY Zeus http://write.blog.csdn.net/postedit/9822439
echo === Press any key to quit!
pause>nul

3、下载Graphviz和plantuml

Graphviz-download

Plantuml-download

4、配置vnote

1. 将上述所得的plantuml.jar拷贝到一个合适的地方，记下路径。

2. 将上述所得的Graphviz.exe运行安装，记下安装路径
   

3. 打开vnote的配置对话框（setting）
   将上面两歩的路径记下来，填写在Markdown对应的文本框里（vnote2.7）的配置
   
   以下是最新版vnote3.13的配置方法（不过注意，graphviz新版本3.0其安装目录下是没有gvedit需要下载的，需要的去2.38中去找）
   

分别点击一下边上的Test按钮，如果弹出对话框success，那就表示你配置成功了。

这个时候不要着急在vnote中检验效果，重新启动vnote后才会真正有效。

5、其他常用插件mermaid\Flowchart\MathJax的配置

vnote2.7配置三个插件

mermaid\Flowchart\MathJax这三个插件在菜单MarkDown下的extensions下直接选择打勾即可，如下图：

vnote3.0以上配置三个插件

下载mathjax3.2
下载后建议在vnote目录里新建一个目录（名字随意），这里我们比方叫做plugin，然后把下载好的mathjax解压到这个目录，然后在配置mathjax里输入它的路径，注意vnote的本质是html显示渲染，所以对本地文件的调用路径采用html的写法，file://d:/vnote/plugin/mathjax3.0/tex-svg.js
需要强调的是无论你解压mathjax的文件夹是mathjax3.2还是mathjax3.0，路径中的文件夹只有mathjax3.0才有效。
如：

6、渲染效果

输入代码

```puml
VNote -> Markdown : Hi Markdown, I am VNote

泳道图

plantuml效果如下：

开图使用puml和plantuml一样都可以。

状态图

graphviz效果如下：

```graphviz
	digraph 
    G {
    main -> parse -> execute;
    main -> init;
    main -> cleanup;
    execute -> make_string;
    execute -> phsntf;
    init -> make_string;
    main -> printf;
    execute -> compare;
    }

'''dot
digraph 
    xxxaa{
     A -> {B C};
      label = <<B>graphviz演示</B>>;
     }
'''

其实这里用dot和graphviz开始都可以！

绘制脑图

流程图效果

绘制饼图

公式

代码高亮

7、关于vnote的各种快键键和功能的配置

有关vnote的配置根据官方的说法都在vnotex.json文件里面（vnote初次运行自动生成），通过vnote菜单可以直接打开，你也可以在C:\Users\Administrator\AppData\Roaming\vnote中找到它。
如果你的vnote出现异常，你可以直接删除它，让vnote再生成一个新的即可。
本文使用的vnote2.7,高版本的3.10以上我试过几个，貌似不太稳定，或许是我没有掌握其特点。

8、导出

3.0后的导出在工具栏中，如下图

导出html无须配置，直接可以导出，但导出pdf需要安装wkhtmltopdf，这也是个开源项目，可以在这里下载wkhtmltopdf

9、感谢作者

再次感谢作者tamlok的无私付出！如果你支持免费，支持国货，那就支持他吧！