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")