关于 Mermaid¶

Mermaid 让你使用文本和代码创建图表和可视化。

它是一个基于 Javascript 的图表工具，可以渲染 Markdown 启发的文本定义，动态地创建和修改图表。

如果你熟悉Markdown，你学习 Mermaid 语法应该没有问题。

banner

Mermaid 的主要目的是帮助实现文档的可视化，并帮助它赶上开发进度。

Documentation-Rot 是 Mermaid 帮助解决的一个难题。

图表和文档花费了开发人员宝贵的时间，并且很快就会过期。然而，没有图表或文档会破坏生产力，阻碍组织的学习。

Mermaid 通过减少创建可修改的图表所需的时间、精力和工具来解决这种 Catch-22 的情况，这反过来又导致了更智能和更可重复使用的内容。作为一个基于文本的绘图工具，Mermaid 天生就易于维护和更新，它也可以作为生产脚本（或其他代码）的一部分，使得文档编写变得更加简单。

Mermaid 是一个适合所有人的图表工具。

即使是非程序员也可以通过 Mermaid 实时编辑器创建图表，请访问教程页面了解实时编辑器的视频教程。

许多编辑器、维基和其他工具也有美人鱼的集成和插件，使之很容易开始使用 mermaid。其中一些在简单开始编辑图中有所描述。

关于 Mermaid 更详细的介绍和它的一些基本用途，请参考初学者概述和用法。

🌐 CDN | 📖 文档 | 🙌 贡献 | 📜 版本日志 | 🔌 插件

🖖保持稳定的脉搏：美人鱼需要更多的合作者，阅读全文。

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

感谢所有参与的人，提交拉取请求的人，回答问题的人，特别感谢帮助我维护项目的 Tyler Long🙏

图表类型¶

流程图 ¶

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

Flowchart

序列图 ¶

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 <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

Sequence diagram

甘特图 ¶

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

Gantt diagram

类图 ¶

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

Class diagram

Git 图 - :exclamation: 实验性¶

gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch

Git graph

实体关系图 - :exclamation: 实验性 ¶

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

ER diagram

用户体验旅程图 ¶

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

Journey diagram

安装¶

深入的指南和例子可以在入门和用法找到。

了解 mermaid 的语法也会有帮助。

CDN¶

https://unpkg.com/mermaid@<version>/dist/

选择一个版本：

用所需的版本号替换 <version>。

部署 Mermaid¶

为了部署 Mermaid：

你将需要安装 node v16，这将有 npm
使用 npm 下载 yarn
输入以下命令：yarn add mermaid
然后你可以使用这个命令将 mermaid 添加为开发依赖项。yarn add --dev mermaid

Mermaid API:¶

要在没有捆绑程序的情况下部署 mermaid，可以在 HTML 中插入一个带有绝对地址和 mermaidAPI 调用的 script 标签，像这样：

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

这样做将命令 mermaid 分析器寻找带有 class="mermaid" 的 <div> 标记。从这些标签中，mermaid 将尝试读取图表/图表的定义，并将它们渲染成 svg 图表。

实例可在 其他实例中找到

同胞项目¶

请求帮助¶

事情堆积如山，我很难跟上。如果我们能组成一个核心的开发者团队，配合 mermaid 的未来发展，那就太好了。

作为这个团队的一部分，你将获得对资源库的写的访问权，并在回答问题和议题时代表项目。

我们可以一起继续开展工作，例如：

增加更多类型的图表，如 mindmaps、ert 图等。
完善现有的图表

如果你想参与进来，不要犹豫，请与我联系！

对于贡献者¶

安装¶

yarn install

构建¶

yarn build:watch

Lint¶

yarn lint

我们使用eslint。我们建议你安装编辑器插件，以获得实时的 lint 结果。

测试¶

yarn test

在浏览器中手动测试：打开 dist/index.html。

发表¶

对于那些有权限的人来说：

更新 package.json 中的版本号。

npm publish

上述命令将文件生成到 dist 文件夹，并将其发布到 npmjs.org。

致谢¶

非常感谢 d3 和 dagre-d3 项目提供的图形布局和绘图库！

还要感谢 js-sequence-diagram 项目对序列图语法的使用。感谢 Jessica Peter 的灵感和甘特图渲染的起点。

Mermaid 是由 Knut Sveidqvist 创建的，以方便记录。

以下是项目贡献者的完整列表。

mermaid 0.0.1 文档