Mermaid

外观

与团队成员在Mermaid Chart中实时绘制图表

关于 Mermaid ​

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

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

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

构建CI状态NPMnpm最小化压缩包大小覆盖率状态CDN状态NPM加入我们的Discord！Twitter关注

深入探索Mermaid.js，包含真实世界的示例、创作者的技巧与窍门... 第一本关于Mermaid的官方书籍现已上市。快来查看吧！

Mermaid 是一个基于 JavaScript 的图表和绘图工具，它使用受 Markdown 启发的文本定义和渲染器来创建和修改复杂的图表。Mermaid 的主要目的是帮助文档跟上开发的步伐。

文档腐烂是一个Mermaid帮助解决的Catch-22问题。

绘制图表和编写文档消耗了宝贵的开发者时间，并且很快就会过时。但没有图表或文档会降低生产力并损害组织学习。
Mermaid 通过使用户能够创建易于修改的图表来解决这个问题，它还可以成为生产脚本（和其他代码片段）的一部分。

Mermaid 甚至允许非程序员通过 Mermaid Live Editor 轻松创建详细的图表。
教程 提供了视频教程。

使用Mermaid与您喜欢的应用程序，查看社区集成列表。

有关Mermaid的更详细介绍及其一些更基本的用法，请参阅初学者指南和使用指南。

🌐 CDN | 📖 文档 | 🙌 贡献 | 🔌 插件

🖖 保持稳定的节奏：mermaid 需要更多的合作者，阅读更多。

🏆 Mermaid 被提名并赢得了 JS 开源奖 (2019) 的“最具技术兴奋感”类别！！！

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

我们的PR视觉回归测试由Argos提供支持，他们慷慨的开源计划使得审查带有视觉变化的PR过程变得轻而易举。

由Argos视觉测试覆盖

在我们的发布过程中，我们大量依赖使用applitools进行的视觉回归测试。Applitools 是一个很棒的服务，易于使用并与我们的测试集成。

图表类型 ​

流程图 ​

序列图 ​

甘特图 ​

类图 ​

Git 图表 ​

实体关系图 - ❗ 实验性 ​

用户旅程图 ​

象限图 ​

XY 图表 ​

安装 ​

深入指南和示例可以在 Getting Started 和 Usage 中找到。

了解更多关于mermaid的语法也会很有帮助。

CDN ​

https://cdn.jsdelivr.net/npm/mermaid@<version>/dist/

选择版本：

将 替换为所需的版本号。

最新版本: https://cdn.jsdelivr.net/npm/mermaid@11

部署 Mermaid ​

部署Mermaid：

  1. 你需要安装 node v16，它将包含 npm
  2. 安装 mermaid
    • NPM: npm i mermaid
    • Yarn: yarn add mermaid
    • Pnpm: pnpm add mermaid

Mermaid API: ​

要在不使用打包工具的情况下部署mermaid，请使用以下示例将带有绝对地址的script标签和mermaid.initialize调用插入到HTML中：

html
<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

这样做会命令mermaid解析器寻找带有

或
标签的class="mermaid"。从这些标签中，mermaid尝试读取图表/图表定义并将它们渲染成SVG图表。
示例可以在 其他示例 中找到
兄弟项目 ​
请求帮助 ​
事情堆积如山，我很难跟上。如果我们能组建一个核心开发团队来配合mermaid的未来发展，那就太好了。
作为这个团队的一部分，您将获得对仓库的写权限，并在回答问题和处理问题时代表项目。
我们可以一起继续做以下工作：
  • 添加更多类型的图表，如思维导图、ERT图等。
  • 改进现有图表
如果你想参与，请不要犹豫联系我！
贡献者 ​
Good first issue贡献者提交
Mermaid 是一个不断发展的社区，并且始终欢迎新的贡献者。有很多不同的方式可以帮助我们，我们一直在寻找额外的帮手！如果你想了解从哪里开始帮忙，请查看 这个问题。
有关如何贡献的详细信息可以在贡献指南中找到。
需求 ​
  • volta 用于管理 node 版本。
  • Node.js. volta install node
  • pnpm 包管理器。 volta install pnpm
开发安装 ​
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
代码检查 ​
sh
pnpm lint
我们使用 eslint。我们建议您安装 编辑器插件 以获取实时的 lint 结果。
测试 ​
sh
pnpm test
在浏览器中手动测试：打开 dist/index.html
发布 ​
对于那些有权限这样做的人：
更新package.json中的版本号。
sh
npm publish
上述命令将生成文件到 dist 文件夹，并将它们发布到 npmjs.com。
安全与安全图表 ​
对于公共网站来说，从互联网上的用户那里检索文本并在稍后阶段存储这些内容以在浏览器中展示可能会存在风险。原因是用户内容可能包含嵌入的恶意脚本，这些脚本在数据展示时会运行。对于Mermaid来说，这是一个风险，特别是因为Mermaid图表包含许多在HTML中使用的字符，这使得标准的消毒方法无法使用，因为它也会破坏图表。我们仍然努力对传入的代码进行消毒，并不断改进这一过程，但很难保证没有漏洞。
为了为具有外部用户的网站提供额外的安全级别，我们很高兴引入一个新的安全级别，其中图表在沙盒化的iframe中呈现，防止代码中的JavaScript被执行。这是提高安全性的一大进步。
不幸的是，你不能同时拥有蛋糕并吃掉它，在这种情况下，这意味着一些交互功能与可能的恶意代码一起被阻止。
报告漏洞 ​
要报告漏洞，请发送电子邮件至security@mermaid.live，并提供问题的描述、创建问题的步骤、受影响的版本以及已知的缓解措施。
感谢 ​
来自Knut Sveidqvist的简短说明：
非常感谢d3和dagre-d3项目提供了图形布局和绘图库！
同时感谢js-sequence-diagram项目使用了序列图的语法。感谢Jessica Peter为甘特图渲染提供的灵感和起点。
感谢自2017年4月以来一直合作的Tyler Long。
感谢不断增长的贡献者名单，他们使项目取得了如此大的进展！
Mermaid 是由 Knut Sveidqvist 创建的，旨在简化文档编写。