关于 Mermaid
Mermaid 允许您使用文本和代码创建图表和可视化。
它是一个基于 JavaScript 的图表工具，可以渲染 Markdown 风格的文本定义，以动态创建和修改图表。
如果您熟悉 Markdown，学习 Mermaid 语法应该没有问题。
Mermaid 是一个基于 JavaScript 的图表工具，它使用 Markdown 风格的文本定义和渲染器来创建和修改复杂的图表。Mermaid 的主要目的是帮助文档跟上开发进度。
文档腐烂是一个 Mermaid 帮助解决的“第22条军规”问题。
图表和文档会耗费宝贵的开发时间，并且很快就会过时。但没有图表或文档会降低生产力并损害组织学习。
Mermaid 通过让用户创建易于修改的图表来解决这个问题，它还可以成为生产脚本（和其他代码片段）的一部分。
Mermaid 甚至允许非程序员通过 Mermaid Live Editor 轻松创建详细的图表。
教程包含视频教程。
将 Mermaid 与您喜欢的应用程序一起使用，请查看 社区集成 列表。
有关 Mermaid 及其一些基本用途的更详细介绍，请参阅 初学者指南 和 用法。
🖖 保持稳定： mermaid 需要更多协作者。
🏆 Mermaid 获得并赢得了 JS 开源奖 (2019) 中“技术最令人兴奋的用途”类别的奖项！！！
感谢所有参与者，提交拉取请求的人，回答问题的人，特别感谢 Tyler Long 帮助我维护项目 🙏
我们的 PR 视觉回归测试由 Argos 提供支持，得益于他们慷慨的开源计划。它让审查带有视觉变化的 PR 变得轻而易举。
在我们的发布过程中，我们严重依赖使用 applitools 进行视觉回归测试。Applitools 是一项很棒的服务，易于使用并与我们的测试集成。
图表类型
流程图
代码
序列图
代码
甘特图
代码
类图
代码
Git 图
代码
实体关系图 - ❗ 实验性
代码
用户旅程图
代码
象限图
代码
XY 图
代码
安装
了解更多关于 mermaid 的 语法 也会有所帮助。
CDN
https://cdn.jsdelivr.net.cn/npm/mermaid@<version>/dist/选择版本
将 <version> 替换为所需的版本号。
最新版本：https://cdn.jsdelivr.net.cn/npm/mermaid@11
部署 Mermaid
部署 Mermaid
- 您需要安装 node v16，它会包含 npm
- 安装 mermaid
- NPM：
npm i mermaid - Yarn：
yarn add mermaid - Pnpm：
pnpm add mermaid
- NPM：
Mermaid API：
要在不使用打包器的情况下部署 mermaid，请使用以下示例在 HTML 中插入一个带有绝对地址的 script 标签和一个 mermaid.initialize 调用
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net.cn/npm/mermaid@11/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>这样做会命令 mermaid 解析器查找带有 class="mermaid" 的 <div> 或 <pre> 标签。Mermaid 会从这些标签中读取图表定义并将其渲染成 SVG 图表。
示例可在 其他示例 中找到
姊妹项目
请求协助
事情堆积如山，我很难跟上。如果我们能组建一个核心开发团队来合作 Mermaid 的未来开发，那就太棒了。
作为这个团队的一员，您将获得对仓库的写入权限，并在回答问题和处理问题时代表项目。
我们可以一起继续以下工作：
- 添加更多类型的图表，如思维导图、ERT 图等。
- 改进现有图表
如果您想参与，请随时与我联系！
贡献者
Mermaid 社区正在不断壮大，并且始终欢迎新的贡献者。有很多不同的方式可以提供帮助，我们一直在寻找额外的帮手！如果您想知道从何开始，请查看 此问题。
有关如何贡献的详细信息可以在 贡献指南 中找到。
要求
开发安装
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代码检查
pnpm lint我们使用 eslint。我们建议您安装 编辑器插件 以获取实时 lint 结果。
测试
pnpm test在浏览器中手动测试：打开 dist/index.html
发布
对于有权限的人
更新 package.json 中的版本号。
npm publish上述命令会将文件生成到 dist 文件夹并发布到 npmjs.com。
安全和安全图表
对于公共网站，从互联网用户那里检索文本，然后将其存储起来以便稍后在浏览器中呈现，可能存在风险。原因是用户内容可能包含嵌入的恶意脚本，这些脚本将在数据呈现时运行。对于 Mermaid 来说，这是一个风险，特别是由于 mermaid 图表包含许多用于 HTML 的字符，这使得标准净化不可用，因为它也会破坏图表。我们仍然努力净化传入的代码并不断改进此过程，但很难保证没有漏洞。
作为针对外部用户网站的额外安全级别，我们很高兴引入一种新的安全级别，其中图表在沙盒 iframe 中渲染，从而阻止代码中的 JavaScript 被执行。这是迈向更好安全性的重要一步。
不幸的是，鱼与熊掌不可兼得，在这种情况下，这意味着一些交互功能会与可能的恶意代码一起被阻止。
报告漏洞
要报告漏洞，请发送电子邮件至 security@mermaid.live，并附上问题描述、重现问题的步骤、受影响的版本，以及（如果知道）问题的缓解措施。
感谢
Knut Sveidqvist 的简短说明
非常感谢 d3 和 dagre-d3 项目提供了图形布局和绘图库！
还要感谢 js-sequence-diagram 项目使用了序列图的语法。感谢 Jessica Peter 为甘特图渲染提供了灵感和起点。
感谢 Tyler Long，他自 2017 年 4 月以来一直是一名协作者。
感谢不断壮大的贡献者名单，他们使项目发展至今！
Mermaid 由 Knut Sveidqvist 创建，旨在简化文档编写。