Mermaid

可视化

作者

yangjh

发布日期

2023年7月11日

Mermaid 是一个用于创建图形和图表的 JavaScript 库。它使用一种类似于 Markdown 的语法，使得创建复杂的图形变得相对简单。通过 Mermaid，你可以创建流程图、序列图、甘特图、类图、状态图、时间线、思维导图等等。

Mermaid 使用场景

Mermaid 的主要优势是其语法的简洁性。你不需要手动绘制图形或者使用复杂的绘图软件，只需要编写简单的文本描述，Mermaid 就可以根据你的描述自动生成图形。这使得 Mermaid 非常适合用于文档、Wiki、技术博客等，用于说明复杂的概念或流程。

Mermaid 使用案例

流程图

graph TD
    A-->B
    A-->C
    B-->D
    C-->D

graph TD
    A-->B
    A-->C
    B-->D
    C-->D

这个流程图包含四个节点（A，B，C 和 D），箭头代表从一个节点到另一个节点的方向。

flowchart TB

    A[开始]
    B{是否返校?}
    C[申请返校]
    D{每日核查}
    E[结束]
    F[返校]
    G[班主任确认返校]
    
    A --> B  
    B --- 是 ---> C
    C --> D
    D --修改行程--> B
    D --符合--> F
    F --> G
    G --> E
    D --不符 --> B 
    B -- 否 --> E

序列图

sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    Bob-->>Alice: Not bad, thanks!

sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    Bob-->>Alice: Not bad, thanks!

这个序列图表示 Alice 向 Bob 问候，并且 Bob 回答 Alice。

sequenceDiagram
    participant 笔记
    participant 按钮
    participant 模板
    participant 脚本
    笔记->>按钮: 生成按钮
    按钮->>模板: 调用模板 
    模板->>脚本: 传递参数给脚本
    脚本->>模板: 返回执行结果
    模板->>笔记: 渲染内容到指定地点

甘特图

gantt
    dateFormat  YYYY-MM-DD
    title A Gantt Diagram
    section Section
    Task1           :a1, 2014-01-01, 30d
    Task2           :after a1  , 20d

gantt
    dateFormat  YYYY-MM-DD
    title A Gantt Diagram
    section Section
    Task1           :a1, 2014-01-01, 30d
    Task2           :after a1  , 20d

这个甘特图表示了两个任务的开始日期和持续时间。

其它图

mindmap
    Root
        A
        B
        C

timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter

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: 5: Me

参考文献

回到顶部