我们写论文的时候，需要用文档编辑器写文本，需要绘图工具制图。一旦文本、图片修改，就需要在不同的工具间切换，专业绘图和编辑文字花费了用户宝贵的时间。
有没有什么工具可以同时完成文档编辑和专业绘图？
有！Mermaid 可以做到，它通过允许用户创建便于修改的图表来解决这一难题。换句话说，Mermaid 就是通过简单的语法绘制出复杂的图形。
笔者使用 Obsidian 写论文、做笔记。当需要专业绘图的时候，直接在文档上输入Mermaid 语法就可以绘制出一张专业图表。 你不需要安装任何插件，只需要用 Obsidian 就可以实现科研绘图。
下图是笔者使用 Obsidian 写笔记的时候，插入 Mermaid 语法，实时实现专业绘图。导师看了都说牛！
MermaidMermaid 是一个基于 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 提供了流程图用法，只需要几行语法就可以实现一个流程图。
下面是一个流程图的示例。在 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。
