mermaid

About Mermaid 关于美人鱼

Mermaid lets you create diagrams and visualizations using text and code.
Mermaid允许您使用文本和代码创建图表和可视化效果。

It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
它是一个基于JavaScript的图表工具，可以呈现受Markdown启发的文本定义，以动态创建和修改图表。

If you are familiar with Markdown you should have no problem learning Mermaid's Syntax.
如果你熟悉Markdown，学习Mermaid的语法应该没有问题。

Build CI Status
NPM
npm minified gzipped bundle size
Coverage Status
CDN Status
NPM
Join our Slack!
Twitter Follow

Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator… The first official book on Mermaid is available for purchase. Check it out!

Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.
Mermaid是一个基于JavaScript的图形和图表工具，它使用Markdown启发的文本定义和渲染器来创建和修改复杂的图表。Mermaid的主要目的是帮助文档赶上发展。

Doc-Rot is a Catch-22 that Mermaid helps to solve.
博士腐烂是一个第二十二条军规，美人鱼帮助解决。

Diagramming and documentation costs precious developer time and gets outdated quickly. But not having diagrams or docs ruins productivity and hurts organizational learning.
图表和文档花费了开发人员宝贵的时间，而且很快就会过时。但是没有图表或文档会破坏生产力，损害组织学习。
Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).
Mermaid通过允许用户创建易于修改的图来解决这个问题，它也可以成为生产脚本（和其他代码）的一部分。

Mermaid allows even non-programmers to easily create detailed and diagrams through the Mermaid Live Editor.
Mermaid允许甚至非程序员通过Mermaid Live Editor轻松创建详细的图表。
Tutorials has video tutorials. Use Mermaid with your favorite applications, check out the list of Integrations and Usages of Mermaid.
教程有视频教程。使用美人鱼与您最喜爱的应用程序，检查了美人鱼的集成和使用列表。

For a more detailed introduction to Mermaid and some of its more basic uses, look to the Beginner’s Guide and Usage.
关于美人鱼的更详细的介绍和它的一些更基本的用途，请看初学者指南和用法。

🌐 CDN | 📖 Documentation | 🙌 Contribution | 🔌 Plug-Ins
🌐 内容分发网络|📖文件|🙌贡献|🔌插件

🖖 Keep a steady pulse: mermaid needs more Collaborators, Read More.
🖖 保持脉搏平稳：美人鱼需要更多的合作者，阅读更多.

🏆 Mermaid was nominated and won the JS Open Source Awards (2019) in the category “The most exciting use of technology”!!!
🏆 Mermaid获得提名，并获得JS开源奖（2019）类别“最令人兴奋的技术使用”！！！

Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project 🙏
感谢所有参与者，提交拉取请求的人，回答问题的人，特别感谢泰勒Long帮助我维护项目🙏

In our release process we rely heavily on visual regression tests using applitools. Applitools is a great service which has been easy to use and integrate with our tests.
在我们的发布过程中，我们非常依赖于使用applitools的可视化回归测试。Applitools是一个很棒的服务，它很容易使用，并且可以与我们的测试集成。
Diagram Types 图表类型

Flowchart 流程图

Code:
mermaid

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

A
B
C
D
Sequence diagram 顺序图

Code:
mermaid

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!

AliceBobJohnloop[Healthcheck]Rational thoughts prevail!Hello John, how are you?Fight against hypochondriaGreat!How about you?Jolly good!AliceBob
John
Gantt diagram 甘特图

Code:
mermaid

gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

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

2014-01-072014-01-092014-01-112014-01-132014-01-152014-01-172014-01-192014-01-212014-01-23Completed task Active task Future task Future task2 A section
Adding GANTT diagram to mermaid
Class diagram 类图

Code:
mermaid

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 – Class04
Class05 o-- Class06
Class07 … Class08
Class09 --> C2 : Where am i?
Class09 – C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <–> C2: Cool label

Cool
Where am i?
Cool label
Class01
int chimp
int gorilla
size()
AveryLongClass
Class03
Class04
Class05
Class06
Class07
Object[] elementData
equals()
Class08
Class09
C2
C3
Git graph Git图

Code:
mermaid

gitGraph
   commit
   commit
   branch develop
   commit
   commit
   commit
   checkout main
   commit
   commit

maindevelop0-f26e1991-dc0772c2-1d532983-a658b0f4-2ba93b05-d28417a
6-0925731
Entity Relationship Diagram - ❗ experimental
实体关系图-实验

Code:
mermaid

erDiagram
CUSTOMER ||–o{ ORDER : places
ORDER ||–|{ LINE-ITEM : contains
CUSTOMER }|…|{ DELIVERY-ADDRESS : uses

CUSTOMERORDERLINE-ITEMDELIVERY-ADDRESSplacescontains
uses
User Journey Diagram
用户历程图

Code:
mermaid

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

CatMe
Go to work
Go to work
Make tea
Make tea
Go upstairs
Go upstairs
Do work
Do work
Go home
Go home
Go downstairs
Go downstairs
Sit down
Sit downMy working day
Installation 安装

In depth guides and examples can be found at Getting Started and Usage.
深入的指南和示例可以在入门和用法中找到。

It would also be helpful to learn more about mermaid’s Syntax.
这也将有助于了解更多关于美人鱼的句法。
CDN

https://cdn.jsdelivr.net/npm@/dist/

To select a version: 要选择版本：

Replace with the desired version number.
将 替换为所需的版本号。

Latest Version: https://cdn.jsdelivr.net/npm/mermaid@9 最新版本： https://cdn.jsdelivr.net/npm/mermaid@9
Deploying Mermaid 部署美人鱼

To Deploy Mermaid: 要部署Mermaid：

You will need to install node v16, which would have npm
您将需要安装节点v16，该节点将具有npm
Install mermaid  安装美人鱼
    NPM: npm i mermaid 国家预防机制： npm i mermaid
    Yarn: yarn add mermaid 纱线： yarn add mermaid
    Pnpm: pnpm add mermaid Pnpm：编号0# 

Mermaid API: Mermaid API：

To deploy mermaid without a bundler, one can insert a script tag with an absolute address and a mermaid.initialize call into the HTML like so:
要在不使用捆绑器的情况下部署mermaid，可以在HTML中插入一个带有绝对地址的script标记和mermaid.initialize调用，如下所示： script 要在没有捆绑器的情况下部署mermaid，可以在HTML中插入一个带有绝对地址的script标记和一个mermaid.initialize调用，如下所示： mermaid.initialize 要在没有捆绑器的情况下部署mermaid，可以在HTML中插入一个带有绝对地址的script标记和mermaid.initialize调用，如下所示：
html

Doing so will command the mermaid parser to look for the

or

 tags with class=“mermaid”. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.

这样做将命令mermaid解析器查找 
  
  

   
   或
   
   
带有class ="mermaid"的标签。mermaid将尝试从这些标记中读取图/图表定义并将它们呈现为SVG图表。 
    
    

     
      这样做将命令mermaid解析器查找 
     
     

      
      或
      
      
带有class ="mermaid"的标签。mermaid将尝试从这些标记中读取图/图表定义并将它们呈现为SVG图表。 
 这样做将命令mermaid解析器查找 
        
        

         
         或
         
         
带有class ="mermaid"的标签。mermaid将尝试从这些标记中读取图/图表定义并将它们呈现为SVG图表。 class=“mermaid” 这样做将命令mermaid解析器查找 
          
          

           
           或
           
           
带有class ="mermaid"的标签。mermaid将尝试从这些标记中读取图/图表定义并将它们呈现为SVG图表。
          
          
        
        
     
     
    
    
  
  

Examples can be found at Other examples
示例见其他示例
Sibling projects 同级项目

Mermaid Live Editor  美人鱼生活编辑器
Mermaid CLI  美人鱼CLI
Mermaid Webpack Demo  美人鱼Webpack演示
Mermaid Parcel Demo  美人鱼包裹演示 

Request for Assistance 请求协助

Things are piling up and I have a hard time keeping up. It would be great if we could form a core team of developers to cooperate with the future development of mermaid.
事情越积越多，我很难跟上。如果我们能组成一个核心的开发者团队，共同合作美人鱼未来的开发，那就太好了。

As part of this team you would get write access to the repository and would represent the project when answering questions and issues.
作为这个团队的一员，您将获得对存储库的写访问权限，并在回答问题时代表项目。

Together we could continue the work with things like:
我们可以一起继续工作，例如：

Adding more types of diagrams like mindmaps, ert diagrams, etc.
添加更多类型的图，如思维导图、ert图等。
Improving existing diagrams 改进现有图表

Don’t hesitate to contact me if you want to get involved!
如果你想参与进来，请不要犹豫，与我联系!
For contributors 对于贡献者

Requirements 所需经费

volta to manage node versions.
volta管理节点版本。
Node.js. volta install node
节点. js volta install node
pnpm package manager. volta install pnpm
pnpm包管理器。 volta install pnpm 

Development Installation 开发安装

bash

git clone git@github.com:mermaid-js/mermaid.git
cd mermaid

npx is required for first install as volta support for pnpm is not added yet.

npx pnpm install
pnpm test

Lint

sh

pnpm lint

We use eslint. We recommend you to install editor plugins to get real time lint result.
我们用埃斯林特。我们建议您安装编辑器插件，以获得真实的的lint结果。
Test

sh

pnpm test

Manual test in browser: open dist/index.html
在浏览器中手动测试：打开 dist/index.html
Release

For those who have the permission to do so:
对于获得许可的人员：

Update version number in package.json.
更新 package.json 中的版本号。
sh

npm publish

The above command generates files into the dist folder and publishes them to <npmjs.org>.
上述命令会在 dist 文件夹中生成文件，并将其发布到。<npmjs.org>.
Related projects 相关项目

Command Line Interface  命令行界面
Live Editor  实时编辑器
HTTP Server  HTTP服务器 

Contributors Good first issue Contributors Commits
参与者 Good first issue Contributors Commits

Mermaid is a growing community and is always accepting new contributors. There’s a lot of different ways to help out and we’re always looking for extra hands! Look at
美人鱼是一个不断发展的社区，总是接受新的贡献者。有很多不同的方式来帮助我们，我们总是在寻找额外的手!你看
this issue 本期
if you want to know where to start helping out.
如果你想知道从哪里开始帮忙。

Detailed information about how to contribute can be found in the contribution guide
有关如何投稿的详细信息，请参阅投稿指南
Security and safe diagrams 安全图

For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitize the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
对于公共网站来说，从互联网上的用户那里检索文本，并将内容存储起来以便在稍后阶段在浏览器中显示，这可能是不稳定的。原因是用户内容可能包含嵌入式恶意脚本，这些脚本将在数据呈现时运行。对于美人鱼来说，这是一个风险，特别是因为美人鱼图表包含了许多html中使用的字符，这使得标准的卫生设施无法使用，因为它也打破了图表。我们仍然努力净化传入的代码，并不断改进过程，但很难保证没有漏洞。

As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing JavaScript in the code from being executed. This is a great step forward for better security.
作为针对外部用户的站点的额外安全级别，我们很高兴引入一个新的安全级别，在该级别中，图表在沙箱iframe中呈现，以防止代码中的JavaScript被执行。这是在加强安全方面向前迈出的一大步。

Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code.
不幸的是，你不能有一个蛋糕，吃它在同一时间，这在这种情况下意味着一些互动功能得到阻止沿着可能的恶意代码。
Reporting vulnerabilities 报告漏洞

To report a vulnerability, please e-mail security@mermaid.live with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.
要报告漏洞，请发送电子邮件至security@mermaid.live，其中包含问题描述、创建问题所采取的步骤、受影响的版本以及问题的缓解措施（如果已知）。
Appreciation 欣赏

A quick note from Knut Sveidqvist:
Knut Sveidqvist的简短说明：

Many thanks to the d3 and dagre-d3 projects for providing the graphical layout and drawing libraries!
非常感谢d3和dagre-d3项目提供了图形布局和绘图库！

Thanks also to the js-sequence-diagram project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering.
还要感谢js-sequence-diagram项目为序列图使用了语法。感谢Jessica Peter为甘特渲染提供的灵感和起点。

Thank you to Tyler Long who has been a collaborator since April 2017.
感谢泰勒Long，他自2017年4月以来一直是我们的合作者。

Thank you to the ever-growing list of contributors that brought the project this far!
感谢不断增长的贡献者名单，他们将项目带到了今天！

Mermaid was created by Knut Sveidqvist for easier documentation.
Mermaid是由Knut Sveidqvist创建的，以便于记录。