README

Mermaid


通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。


  



实时编辑器!


 📖 文档 | 🚀 入门 | 🌐 CDN | 🙌 加入我们


English



尝试未来版本的实时编辑器预览: Develop | Next
















:trophy: Mermaid 被提名并获得了 JS Open Source Awards (2019) 的 "The most exciting use of technology" 奖项!!!

感谢所有参与进来提交 PR，解答疑问的人们! 🙏



 关于 Mermaid

   --

Mermaid 是一个基于 JavaScript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。

 Doc-Rot 是 Mermaid 致力于解决的一个难题。

绘图和编写文档花费了开发者宝贵的开发时间，而且随着业务的变更，它很快就会过期。 但是如果缺少了图表或文档，对于生产力和团队新人的业务学习都会产生巨大的阻碍。 
Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。

Mermaid 甚至能让非程序员也能通过 Mermaid Live Editor 轻松创建详细的图表。
你可以访问 教程 来查看 Live Editor 的视频教程，也可以查看 Mermaid 的集成和使用 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。

如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 入门指引, 用法 和 教程.

 --

 示例

下面是一些可以使用 Mermaid 创建的图表示例。点击 语法 查看详情。


 --

 流程图 [文档 - live editor]


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


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


 时序图 [文档 - live editor]


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!


mermaid
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!


 甘特图 [文档 - live editor]


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


mermaid
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


 类图 [文档 - live editor]


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


mermaid
classDiagram
Class01  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()
}


 状态图 [docs - live editor]


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


mermaid
stateDiagram-v2
[] -- Still
Still -- []
Still -- Moving
Moving -- Still
Moving -- Crash
Crash -- []


 饼图 [文档 - live editor]


pie
"

Top issues

Discussions

Latest release

Minor Changes

-   8164 592d0e4 Thanks @filipsajdak! - feat: add the open-arrow and hollow-circle edge markers, so a notation can tell two kinds of flow apart by whether the head is filled

-   8165 5c8aa5d Thanks @filipsajdak! - feat: add the BPMN element shapes - events, gateways, activities, data objects, data stores and text annotations - each reporting where a line meets what is drawn

-   8470 692d22a Thanks @openmindednewby! - feat: flowchart edges accept a step number (e1@{ step: 1 }); a dot travels the edges in step order and loops, hidden under prefers-reduced-motion

-   8478 56aa10