Mermaid是一个基于Javascript的图表绘制工具,它使用基于Markdown的文本定义和渲染器来创建和修改复杂的图表。Mermaid的主要目的是帮助文档跟上开发进度!Mermaid被提名并获得了“最令人兴奋的技术”类别的JS开源奖(2019年)!!!
https://github.com/mermaid-js/mermaid
图表和文档编制耗费了开发人员宝贵的时间,而且很快就过时了。但没有图表或文档会破坏生产力,并损害组织学习。mermaid通过减少创建可修改的图表所需的时间、精力和工具来解决这个问题,从而实现更智能、更可重用的内容。mermaid的文本定义使其易于更新,也可以使其成为生产脚本(和其他代码段)的一部分。也就是说mermaid是为了平衡开发人员时间的一种工具,更具生产力!
下面我们可以查看几个案例
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
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
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
classDiagram
Class01 <|-- AveryLongClass : Cool
<> 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 {
<>
int id
size()
}
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
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
Mermaid是一个非常不错的工具,有效的提升了编写各种图表的效率上,可以将Mermaid看作是一个图表脚本语言,使用Javascript实现,官方具备详细的文档,感兴趣的小伙伴不要错过!
页面更新:2024-04-27
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号