本文共 2945 字，大约阅读时间需要 9 分钟。

Generation of diagrams and flowcharts from text in a similar manner as markdown.

Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?

This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript. .

Request for contribution

• Contribute to mermaid: 
• Contribute to documentation: 

An example of a flowchart

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

A

B

C

D

An example of a sequence diagram

sequenceDiagram    participant Alice    participant Bob    Alice->John: Hello John, how are you?    loop Healthcheck        John->John: Fight against hypochondria    end    Note right of John: Rational thoughts 
prevail...    John-->Alice: Great!    John->Bob: How about you?    Bob-->John: Jolly good!

AliceBobJohnHello John, how are you?Fight against hypochondrialoop[ Healthcheck ]Rational thoughtsprevail...Great!How about you?Jolly good!AliceBobJohn

An example of a gantt diagram

gantt        dateFormat  YYYY-MM-DD        title Adding GANTT diagram functionality to mermaid        section A section        Completed task            :done,    des1, 2014-01-06,2014-01-08        Active task               :active,  des2, 2014-01-09, 3d        Future task               :         des3, after des2, 5d        Future task2               :         des4, after des3, 5d        section Critical tasks        Completed task in the critical line :crit, done, 2014-01-06,24h        Implement parser and jison          :crit, done, after des1, 2d        Create tests for parser             :crit, active, 3d        Future task in critical line        :crit, 5d        Create tests for renderer           :2d        Add to mermaid                      :1d

2014-01-072014-01-092014-01-112014-01-132014-01-152014-01-172014-01-192014-01-21Completed taskActive taskFuture taskFuture task2Completed task in the critical lineImplement parser and jisonCreate tests for parserFuture task in critical lineCreate tests for rendererAdd to mermaidA sectionCritical tasksAdding GANTT diagram functionality to mermaid

Play with mermaid using this .

Credits

Many thanks to the  and  projects for providing the graphical layout and drawing libraries! Thanks also to the  project for usage of the grammar for the sequence diagrams.

Mermaid was created by Knut Sveidqvist for easier documentation.

Knut has not done all work by himself, here is the full list of the projects .

Downstream projects

Mermaid is supported in a number of publishing systems and editors. Please report if a plugin/editor is missing from the list below:

•  - Markdown editor with extra features

Online live editor

An editor is available for creating diagrams. With it you can quickly start writing mermaid diagrams. It is possible to:

• save the result as a svg
• get a link to a viewer of the diagram

• get a link to edit of the diagram to share a diagram so that someone else can tweak it and send a new link back

转载地址：http://gbtaf.baihongyu.com/