|
我们写论文的时候，需要用文档编辑器写文本，需要绘图工具制图。一旦文本、图片修改，就需要在不同的工具间切换，专业绘图和编辑文字花费了用户宝贵的时间。有！Mermaid 可以做到，它通过允许用户创建便于修改的图表来解决这一难题。换句话说，Mermaid 就是通过简单的语法绘制出复杂的图形。笔者使用 Obsidian 写论文、做笔记。当需要专业绘图的时候，直接在文档上输入Mermaid 语法就可以绘制出一张专业图表。 你不需要安装任何插件，只需要用 Obsidian 就可以实现科研绘图。下图是笔者使用 Obsidian 写笔记的时候，插入 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 的用法。https://mermaidjs./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。· 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'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图是 Memarid 的一种实验图，笔者不清楚这个图的用处，但它看上去好像很牛 X。如果你知道这个图是做什么的，那么可以留言告诉我。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
就是一款科研神器。
|
