Tool之mermaid：mermaid的简介、安装和使用方法、案例应用之详细攻略

Tool之mermaid：mermaid的简介、安装和使用方法、案例应用之详细攻略

目录

mermaid的简介

1、Mermaid 特点

mermaid的安装和使用方法

1、mermaid的安装

2、mermaid的使用方法

流程图 (Flowchart)：展示了流程图的创建，包括节点、箭头和决策点

序列图 (Sequence diagram)：展示了序列图的创建，用于描述不同参与者之间的交互过程

甘特图 (Gantt chart)：展示了甘特图的创建，用于项目进度管理

类图 (Class diagram)：展示了类图的创建，用于描述类的结构和关系

状态图 (State diagram)：展示了状态图的创建，用于描述系统的状态转换

饼图 (Pie chart)：展示了饼图的创建，用于数据可视化

Git 图 (Git graph)：展示了 Git 图的创建，用于可视化 Git 仓库的历史记录（实验性功能）

条形图 (Bar chart)：展示了使用甘特图实现条形图的方法

用户旅程图 (User Journey diagram)：展示了用户旅程图的创建，用于描述用户与系统的交互过程

C4 图 (C4 diagram)：展示了 C4 图的创建，用于描述软件系统的架构

mermaid的案例应用

---

mermaid的简介

2014年发布，Mermaid 是一个基于 JavaScript 的图表和绘图工具，它使用类似 Markdown 的文本定义和渲染器来创建和修改复杂的图表。Mermaid 的主要目的是帮助文档跟上开发的步伐，解决文档滞后于开发的问题（Doc-Rot）。图表和文档的创建和维护会占用宝贵的开发时间，并且很快就会过时，但缺少图表或文档又会降低生产力和组织学习能力。Mermaid 通过允许用户创建易于修改的图表来解决这个问题。它还可以被集成到生产脚本和其他代码中。即使是非程序员也可以通过 Mermaid Live Editor 轻松创建详细的图表。

GitHub地址：GitHub - mermaid-js/mermaid: Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown

1、Mermaid 特点

>> 基于文本定义： 使用类似 Markdown 的文本语法定义图表，易于编写和修改。
>> 基于JavaScript： 使用 JavaScript 编写，可以轻松集成到各种 Web 应用中。
>> 多种图表类型支持： 支持流程图、序列图、甘特图、类图、状态图、饼图、Git 图、条形图（使用甘特图实现）、用户旅程图和 C4 图等多种图表类型。
>> 易于使用： 即使是非程序员也可以轻松上手。
>> 可集成性强： 可以集成到各种应用中，包括 GitHub 等。
>> Live Editor： 提供在线编辑器，方便用户预览和测试图表。
>> 安全沙箱： 为了提高安全性，特别是针对公共网站，Mermaid 可以将图表渲染在一个沙盒化的 iframe 中，防止恶意脚本执行。

mermaid的安装和使用方法

1、mermaid的安装

提供的文本中没有详细的安装步骤。 安装方法通常依赖于 npm 或 yarn 等包管理器。 使用方面，需要在 HTML 中引入 Mermaid 的 JavaScript 库，然后使用 Mermaid 的文本语法在 <pre> 标签中定义图表，并使用 mermaid 类来标识该标签。 Mermaid 会自动渲染该文本为对应的图表。

2、mermaid的使用方法

提供的文本中包含多个 Mermaid 图表示例，展示了其在不同场景下的应用。这些示例都提供了对应的文本语法和渲染后的图表，用户可以参考这些示例学习如何使用 Mermaid 创建各种类型的图表。 更详细的使用方法和更多示例可以在 Mermaid 的官方文档和 Live Editor 中找到。

流程图 (Flowchart)：展示了流程图的创建，包括节点、箭头和决策点

flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

序列图 (Sequence diagram)：展示了序列图的创建，用于描述不同参与者之间的交互过程

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!

甘特图 (Gantt chart)：展示了甘特图的创建，用于项目进度管理

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

类图 (Class diagram)：展示了类图的创建，用于描述类的结构和关系

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()
}

状态图 (State diagram)：展示了状态图的创建，用于描述系统的状态转换

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

饼图 (Pie chart)：展示了饼图的创建，用于数据可视化

pie
"Dogs" : 386
"Cats" : 85.9
"Rats" : 15

Git 图 (Git graph)：展示了 Git 图的创建，用于可视化 Git 仓库的历史记录（实验性功能）

条形图 (Bar chart)：展示了使用甘特图实现条形图的方法

gantt
    title Git Issues - days since last update
    dateFormat  X
    axisFormat %s

    section Issue19062
    71   : 0, 71
    section Issue19401
    36   : 0, 36
    section Issue193
    34   : 0, 34
    section Issue7441
    9    : 0, 9
    section Issue1300
    5    : 0, 5

用户旅程图 (User Journey diagram)：展示了用户旅程图的创建，用于描述用户与系统的交互过程

  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 diagram)：展示了 C4 图的创建，用于描述软件系统的架构

C4Context
title System Context diagram for Internet Banking System

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")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")

Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")

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

  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, with personal bank accounts.")
    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")

mermaid的案例应用

持续更新中……