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

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

有！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 的地址：

大家可以上去 Live Editor 体验一下 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。