985博后最爱的免费开源图表绘制工具，导师夸爆了！

我们写论文的时候，需要用文档编辑器写文本，需要绘图工具制图。一旦文本、图片修改，就需要在不同的工具间切换，专业绘图和编辑文字花费了用户宝贵的时间。

有没有什么工具可以同时完成文档编辑和专业绘图？

有！Mermaid 可以做到，它通过允许用户创建便于修改的图表来解决这一难题。换句话说，Mermaid 就是通过简单的语法绘制出复杂的图形。

笔者使用 Obsidian 写论文、做笔记。当需要专业绘图的时候，直接在文档上输入Mermaid 语法就可以绘制出一张专业图表。 你不需要安装任何插件，只需要用 Obsidian 就可以实现科研绘图。

下图是笔者使用 Obsidian 写笔记的时候，插入 Mermaid 语法，实时实现专业绘图。导师看了都说牛！

Mermaid

Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid诞生的主要目的是让文档的更新能够及时跟上开发进度。

Mermaid 被提名并获得了 JS Open Source Awards (2019) 的 'The most exciting use of technology' 奖项!!!

笔者刚开始使用 Mermaid 的时候，也是豁然开朗，原来科研绘图还能这么玩。

Mermaid 也有一个线上实时编辑器（Live Editor），Live Editor 可以编写语法，实时预览图形，还有样本库，可以导出多种文件，如下图所示。Live Editor 的地址：

https://mermaid.live/edit

大家可以上去 Live Editor 体验一下 Mermaid 的用法。

更多详细用法，请看官方教程：

https://mermaidjs.github.io/mermaid/

Mermaid的专业绘图

Mermaid 支持流程图、时序图、饼图、甘特图、类图、状态图、旅程图等。

下面通过一些示例演示 Mermaid 的用法。

流程图

Mermaid 提供了流程图用法，只需要几行语法就可以实现一个流程图。

下面是一个流程图的示例。在 Obsidian 上输入以下语法，您就可以看到这么个流程图了。

flowchart LRA[Hard] -->|Text| B(Round)B --> C{Decision}C -->|One| D[Result 1]C -->|Two| E[Result 2]

Mermaid 并不复杂，仔细看这段语法，你会发现几个关键点：

· 关键字 flowchart LR，表示从左向右的流程图。同理，如果我们想画从右往左的流程图，那么就用关键字 flowchart RL。

· A[Hard] 表示一个内容为“Hard”方框，名称为 A。

· -->表示连接线方向。

· |Text|表示线上文本。

· B(Round) 表示一个内容为“Round”圆框，名称为 B。

· C{Decision} 表示一个内容为“Decision”菱形，名称为C。

· 定义好几个元素后，就可以通过箭头连接各个元素了。

它的效果是下图这样的。

是不是很神奇？学会使用 Mermaid，还需要什么 VISIO 绘图！ Mermaid会自动帮助我们排版，而我们只需要负责好内容。

时序图

Mermaid 提供了时序图用法。时序图的语法和流程图的语法不同，区别还是挺大的。但是流程图和时序图的工作流程差不多：先写关键字，再写定义元素，最后用箭头连接各个元素。

下面是一个流程图的示例。

sequenceDiagramAlice->>John: Hello John, how are you?loop Healthcheck John->>John: Fight against hypochondriaendNote right of John: Rational thoughts!John-->>Alice: Great!John->>Bob: How about you?Bob-->>John: Jolly good!

它的效果是下图这样的。如果我们用其它工具自己绘制，那么排版就要花费很长时间。

甘特图

Mermaid 提供了甘特图用法，甘特图的语法更加简单一些。

下面是一个甘特图的示例。读者们只需看看下面的例子就能学会了，创建一个自己的甘特图，用于项目、时间、日程管理是非常实用的。

ganttsection Section Completed :done, des1, 2014-01-06,2014-01-08 Active :active, des2, 2014-01-07, 3d Parallel 1 : des3, after des1, 1d Parallel 2 : des4, after des1, 1d Parallel 3 : des5, after des3, 1d    Parallel 4   :         des6, after des4, 1d

它的效果是下图这样的。

类图

Mermaid 提供了类图，这对于涉及到程序开发的用户而言，简直是太棒了。

下面是一个类图的示例。笔者觉得类图的语法有些复杂，看得有些头晕，不如 VISIO 方便。

classDiagramClass01 <|-- AveryLongClass : Cool<<Interface>> Class01Class09 --> C2 : Where am I?Class09 --* C3Class09 --|> Class07Class07 : equals()Class07 : Object[] elementDataClass01 : size()Class01 : int chimpClass01 : int gorillaclass Class10 {<<service>>  int id  size()}

它的效果是下图这样的。

状态图

Mermaid 支持状态图，语法和流程图、时序图的语法类似。

下面是一个状态图的示例。

stateDiagram-v2[*] --> StillStill --> [*]Still --> MovingMoving --> StillMoving --> CrashCrash --> [*]

它的效果是下图这样的。

饼图

Mermaid 支持饼图，语法应该是最简单的。笔者总结一下它的语法：

· 先写上关键字 pie。

· 再定义元素，即每个标签对应一个数字，用冒号隔开标签和数字。

· 最后生成一个饼图。

下面是一个饼图的示例。

pie'Dogs' : 386'Cats' : 85'Rats' : 15

它的效果是下图这样的。

用户体验旅程图

如果你喜欢写日记，那么用户体验旅程图非常适合你，它可以记录每天的事情和心情。

下面是一个用户体验旅程图的示例，语法很简单：注意缩进和冒号的使用。

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

它的效果是下图这样的。

C4图

C4图是 Memarid 的一种实验图，笔者不清楚这个图的用处，但它看上去好像很牛 X。如果你知道这个图是做什么的，那么可以留言告诉我。

下面是一个 C4 图的示例。

C4Contexttitle System Context diagram for Internet Banking System     Enterprise_Boundary(b0, 'BankBoundary0') {       Person(customerA, 'Banking Customer A', 'A customer of the bank, with personal bank accounts.')       Person(customerB, 'Banking Customer B')       Person_Ext(customerC, 'Banking Customer C', 'desc')       Person(customerD, 'Banking Customer D', 'A customer of the bank, <br/> with personal bank accounts.')       System(SystemAA, 'Internet Banking System', 'Allows customers to view information about their bank accounts, and make payments.')       Enterprise_Boundary(b1, 'BankBoundary') {         SystemDb_Ext(SystemE, 'Mainframe Banking System', 'Stores all of the core banking information about customers, accounts, transactions, etc.')         System_Boundary(b2, 'BankBoundary2') {           System(SystemA, 'Banking System A')           System(SystemB, 'Banking System B', 'A system of the bank, with personal bank accounts. next line.')          }         System_Ext(SystemC, 'E-mail system', 'The internal Microsoft Exchange e-mail system.')         SystemDb(SystemD, 'Banking System D Database', 'A system of the bank, with personal bank accounts.')         Boundary(b3, 'BankBoundary3', 'boundary') {           SystemQueue(SystemF, 'Banking System F Queue', 'A system of the bank.')           SystemQueue_Ext(SystemG, 'Banking System G Queue', 'A system of the bank, with personal bank accounts.')          }        }      }     BiRel(customerA, SystemAA, 'Uses')     BiRel(SystemAA, SystemE, 'Uses')     Rel(SystemAA, SystemC, 'Sends e-mails', 'SMTP')     Rel(SystemC, customerA, 'Sends e-mails to')     UpdateElementStyle(customerA, $fontColor='red', $bgColor='grey', $borderColor='red')     UpdateRelStyle(customerA, SystemAA, $textColor='blue', $lineColor='blue', $offsetX='5')     UpdateRelStyle(SystemAA, SystemE, $textColor='blue', $lineColor='blue', $offsetY='-10')      UpdateRelStyle(SystemAA, SystemC, $textColor='blue', $lineColor='blue', $offsetY='-40', $offsetX='-50')     UpdateRelStyle(SystemC, customerA, $textColor='red', $lineColor='red', $offsetX='-50', $offsetY='20')     UpdateLayoutConfig($c4ShapeInRow='3', $c4BoundaryInRow='1')

它的效果是下图这样的。

写在最后

这个 Mermaid太牛了！Obsidian 的用户不需要安装 Mermaid，就可以在文档上绘制各种图形。如果您有任何关于 Mermaid 的问题，都可以留言给我，我会给大家答疑解惑。

总结一下就是这么个公式：

Obsidian=Word+Visio+Excel+Zotero。

如果您对 Obsidian 感兴趣，可以看看笔者以前的文章，它们介绍了 Obsidian 的各种用法，完全可以 吊打市面上很多收费软件。尤其是做科研的小伙伴，Obsidian 就是一款科研神器。