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

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

有！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 LR
A[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 提供了时序图用法。时序图的语法和流程图的语法不同，区别还是挺大的。但是流程图和时序图的工作流程差不多：先写关键字，再写定义元素，最后用箭头连接各个元素。

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

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

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

甘特图

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

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

gantt
section 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 方便。

classDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : Where am I?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
<<service>>
  int id
  size()
}

它的效果是下图这样的。

状态图

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

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

stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]

它的效果是下图这样的。

饼图

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 图的示例。

C4Context
title 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。