mermaid

<img src="https://yellow-cdn.veclightyear.com/835a84d5/1533c430-b796-4ade-aad6-028b878f59d4.svg" height="150"> <h1 align="center"> Mermaid </h1> 从类似 Markdown 的文本生成图表。 <a href="https://www.npmjs.com/package/mermaid"><img src="https://img.shields.io/npm/v/mermaid?color=ff3670&label="></a> <a href="https://mermaid.live/">在线编辑器！</a> <a href="https://mermaid.js.org">📖 文档</a> | <a href="https://mermaid.js.org/intro/">🚀 快速入门</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://discord.gg/AgrbSrBer3" title="Discord 邀请">🙌 加入我们</a> <a href="./README.zh-CN.md">简体中文</a> 尝试未来版本的在线编辑器预览：<a href="https://develop.git.mermaid.live/" title="尝试 develop 分支的 mermaid 版本。">开发版</a> | <a href="https://next.git.mermaid.live/" title="尝试 next 分支的 mermaid 版本。">下一版</a>

:trophy: Mermaid 被提名并获得了 JS 开源奖（2019） "最令人兴奋的技术应用" 类别的奖项！！！

感谢所有参与的人，提交拉取请求的人，回答问题的人！🙏

关于

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

文档腐化是一个 Mermaid 有助于解决的两难困境。

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

Mermaid 甚至允许非程序员通过 Mermaid 在线编辑器轻松创建详细的图表。 有关视频教程，请访问我们的教程页面。在您喜欢的应用程序中使用 Mermaid，查看 Mermaid 的集成和使用列表。

您还可以在 GitHub 以及许多其他喜欢的应用程序中使用 Mermaid——查看 Mermaid 的集成和使用列表。

有关 Mermaid 的更详细介绍及其一些基本用法，请参阅新手指南、使用方法和教程。

在我们的发布过程中，我们严重依赖使用 applitools 进行视觉回归测试。Applitools 是一项出色的服务，易于使用并与我们的测试集成。 <a href="https://applitools.com/"> <svg width="170" height="32" viewBox="0 0 170 32" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" maskUnits="userSpaceOnUse" x="27" y="0" width="143" height="32"><path fill-rule="evenodd" clip-rule="evenodd" d="M27.732.227h141.391v31.19H27.733V.227z" fill="#fff"></path></mask><g mask="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M153.851 22.562l1.971-3.298c1.291 1.219 3.837 2.402 5.988 2.402 1.971 0 2.903-.753 2.903-1.829 0-2.832-10.253-.502-10.253-7.313 0-2.904 2.51-5.45 7.099-5.45 2.904 0 5.234 1.004 6.955 2.367l-1.829 3.226c-1.039-1.075-3.011-2.008-5.126-2.008-1.65 0-2.725.717-2.725 1.685 0 2.546 10.289.395 10.289 7.386 0 3.19-2.724 5.52-7.528 5.52-3.012 0-5.916-1.003-7.744-2.688zm-5.7 2.259h4.553V.908h-4.553v23.913zm-6.273-8.676c0-2.689-1.578-5.02-4.446-5.02-2.832 0-4.409 2.331-4.409 5.02 0 2.724 1.577 5.055 4.409 5.055 2.868 0 4.446-2.33 4.446-5.055zm-13.588 0c0-4.912 3.442-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.7 0-9.142-4.195-9.142-9.106zm-5.628 0c0-2.689-1.577-5.02-4.445-5.02-2.832 0-4.41 2.331-4.41 5.02 0 2.724 1.578 5.055 4.41 5.055 2.868 0 4.445-2.33 4.445-5.055zm-13.587 0c0-4.912 3.441-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.701 0-9.142-4.195-9.142-9.106zm-8.425 4.338v-8.999h-2.868v-3.98h2.868V2.773h4.553v4.733h3.514v3.979h-3.514v7.78c0 1.111.574 1.936 1.578 1.936.681 0 1.326-.251 1.577-.538l.968 3.478c-.681.609-1.9 1.11-3.8 1.11-3.191 0-4.876-1.648-4.876-4.767zm-8.962 4.338h4.553V7.505h-4.553V24.82zm-.43-21.905a2.685 2.685 0 012.688-2.69c1.506 0 2.725 1.184 2.725 2.69a2.724 2.724 0 01-2.725 2.724c-1.47 0-2.688-1.219-2.688-2.724zM84.482 24.82h4.553V.908h-4.553v23.913zm-6.165-8.676c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82h-4.553V7.504H70v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.907-.86-5.342-2.653zm-10.718-6.453c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82H46.41V7.504h4.553v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.908-.86-5.342-2.653zm-11.758-1.936V18.51c-.753-1.004-2.187-1.542-3.657-1.542-1.793 0-3.263.968-3.263 2.617 0 1.65 1.47 2.582 3.263 2.582 1.47 0 2.904-.502 3.657-1.506zm0 4.159v-1.829c-1.183 1.434-3.227 2.259-5.485 2.259-2.761 0-5.988-1.864-5.988-5.736 0-4.087 3.227-5.593 5.988-5.593 2.33 0 4.337.753 5.485 2.115V13.85c0-1.756-1.506-2.904-3.8-2.904-1.829 0-3.55.717-4.984 2.044L28.63 9.8c2.115-1.901 4.84-2.726 7.564-2.726 3.98 0 7.6 1.578 7.6 6.561v11.186h-4.588z" fill="#00A298"></path></g><path fill-rule="evenodd" clip-rule="evenodd" d="M14.934 16.177c0 1.287-.136 2.541-.391 3.752-1.666-1.039-3.87-2.288-6.777-3.752 2.907-1.465 5.11-2.714 6.777-3.753.255 1.211.39 2.466.39 3.753m4.6-7.666V4.486a78.064 78.064 0 01-4.336 3.567c-1.551-2.367-3.533-4.038-6.14-5.207C11.1 4.658 12.504 6.7 13.564 9.262 5.35 15.155 0 16.177 0 16.177s5.35 1.021 13.564 6.915c-1.06 2.563-2.463 4.603-4.507 6.415 2.607-1.169 4.589-2.84 6.14-5.207a77.978 77.978 0 014.336 3.568v-4.025s-.492-.82-2.846-2.492c.6-1.611.93-3.354.93-5.174a14.8 14.8 0 00-.93-5.174c2.354-1.673 2.846-2.492 2.846-2.492" fill="#00A298"></path></svg> </a>

示例

以下是使用 Mermaid 可以制作的一些图表、流程图和图形的示例。点击此处跳转到文本语法。

流程图 [<a href="https://mermaid.js.org/syntax/flowchart.html">文档</a> - <a href="https://mermaid.live/edit#pako:eNpNkMtqwzAQRX9FzKqFJK7t1km8KDQP6KJQSLOLvZhIY1tgS0GWmgbb_165IaFaiXvOFTPqgGtBkEJR6zOv0Fj2scsU8-ft8I5G5Gw6fe339GN7tnrYaafE45WvRsLW3Ya4bKVWwzVe_xU-FfVsc9hR62rLwvw_2591z7Y3FuUwgYZMg1L4ObrRzMBW1FAGqb8KKtCLGWRq8Ko7CbS0FdJqA2mBdUsTQGf110VxSK1xdJM2EkuDzd2qNQrypQ7s5TQuXcrW-ie5VoUsx9yZ2seVtac2DYIRz0ppK3eccd0ErRTjD1XfyyRIomSBUUzJPMaXOBb8GC4XRfQcFmL-FEYIwzD8AggvcHE">在线编辑器</a>]

flowchart LR

A[硬] -->|文本| B(圆)
B --> C{决策}
C -->|一| D[结果 1]
C -->|二| E[结果 2]

flowchart LR

A[硬] -->|文本| B(圆)
B --> C{决策}
C -->|一| D[结果 1]
C -->|二| E[结果 2]

时序图 [<a href="https://mermaid.js.org/syntax/sequenceDiagram.html">文档</a> - <a href="https://mermaid.live/edit#pako:eNo9kMluwjAQhl_F-AykQMuSA1WrbuLQQ3v1ZbAnsVXHkzrjVhHi3etQwKfRv4w-z0FqMihL2eF3wqDxyUEdoVHhwTuNk-12RzaU4g29JzHMY2HpV0BE0VO6V8ETtdkGz1Zb1F8qiPyG5LX84mrLAmpwoWNh-5a0pWCiAxUwGBXeiVHEU4oq8V_6AHYUwAu2lLLTjVQ4bc1rT2yleI0IfJG320faZ9ABbk-Jz3hZnFxBduR9L2oiM5Jj2WBswJn8-cMArSRbbFDJMo8GK0ielVThmKOpNcD4bBxTlGUFvsOxhMT02QctS44JL6HzAS-iJzCYOwfJfTscunYd542aQuXqQU_RZ9kyt11ZFIM9rR3btJ9qaorOGQuR7c9mWSznyzXMF7hcLeBusTB6P9usq_ntrDKrm9kc5PF4_AMJE56Z">在线编辑器</a>]

sequenceDiagram
Alice->>John: 你好 John，你好吗？
loop 健康检查
    John->>John: 与疑病症作斗争
end
Note right of John: 理性思考！
John-->>Alice: 很好！
John->>Bob: 你呢？
Bob-->>John: 好极了！

sequenceDiagram
Alice->>John: 你好 John，你好吗？
loop 健康检查
    John->>John: 与疑病症作斗争
end
Note right of John: 理性思考！
John-->>Alice: 很好！
John->>Bob: 你呢？
Bob-->>John: 好极了！

甘特图 [<a href="https://mermaid.js.org/syntax/gantt.html">文档</a> - <a href="https://mermaid.live/edit#pako:eNp90cGOgyAQBuBXIZxtFbG29bbZ3fsmvXKZylhJEAyOTZrGd1_sto3xsHMBhu-HBO689hp5xS_giJQbsCbjHTv9jcp9-q63SKhZpb3DhMXSOIiE5ZkoNpnYZGXynh6U-4jBK7JnVfBYJo9QvgjtEya1cj8QwFq0TMz4lZqxTBg0hOF5m1jifI2Lf7Bc490CyxUu1rhc4GLGPOEdhg6Mjq92V44xxanFDhWv4lRjA6MlxZWbIh17DYTf2pAPvGrADphwGMmfbq7mFYURX-jLwCVA91bWg8YYunO69Y8vMgPFI2vvGnOZ-2Owsd0S9UOVpvP29mKoHc_b2nfpYHQLgdrrsUzLvDxALrHcS9hJqeuzOB6avBCN3mciBz5N0y_wxZ0J">在线编辑器</a>]

gantt
    section 部分
    已完成 :done,    des1, 2014-01-06,2014-01-08
    进行中        :active,  des2, 2014-01-07, 3d
    并行 1   :         des3, after des1, 1d
    并行 2   :         des4, after des1, 1d
    并行 3   :         des5, after des3, 1d
    并行 4   :         des6, after des4, 1d

gantt
    section 部分
    已完成 :done,    des1, 2014-01-06,2014-01-08
    进行中        :active,  des2, 2014-01-07, 3d
    并行 1   :         des3, after des1, 1d
    并行 2   :         des4, after des1, 1d
    并行 3   :         des5, after des3, 1d
    并行 4   :         des6, after des4, 1d

类图 [<a href="https://mermaid.js.org/syntax/classDiagram.html">文档</a> - <a href="https://mermaid.live/edit#pako:eNpdkTFPwzAQhf-K5QlQ2zQJJG1UBaGWDYmBgYEwXO1LYuTEwXYqlZL_jt02asXm--690zvfgTLFkWaUSTBmI6DS0BTt2lfzkKx-p1PytEO9f1FtdaQkI2ulZNGuVqK1qEtgmOfk7BitSzKdOhg59XuNGgk0RDxed-_IOr6uf8cZ6UhTZ8bvHqS5ub1mr9svZPbjk6DEBlu7AQuXyBkx4gcvDk9cUMJq0XT_YaW0kNK5j-ufAoRzcihaQvLcoN4Jv50vvVxw_xrnD3RCG9QNCO4-8OgpqK1dpoJm7smxhF7agp6kfcfB4jMXVmmalW4tnFDorXrbt4xmVvc4is53GKFUwNF5DtTuO3-sShjrJjLVlqLyvNfS4drazmRB4NuzSti6386YagIjeA3a1rtlEiRRsoAoxiSN4SGOOduGy0UZ3YclT-dhBHQYhj8dc6_I">在线编辑器</a>]

classDiagram
Class01 <|-- AveryLongClass : 酷
<<Interface>> Class01
Class09 --> C2 : 我在哪里？
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <<service>>
  int id
  size()
}

classDiagram
Class01 <|-- AveryLongClass : 酷
<<接口>> Class01
Class09 --> C2 : 我在哪？
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <<服务>>
  int id
  size()
}

状态图 [<a href="https://mermaid.js.org/syntax/stateDiagram.html">文档</a> - <a href="https://mermaid.live/edit#pako:eNpdkEFvgzAMhf8K8nEqpYSNthx22Xbcqcexg0sCiZQQlDhIFeK_L8A6TfXp6fOz9ewJGssFVOAJSbwr7ByadGR1n8T6evpO0vQ1uZDSekOrXGFsPqJPO6q-2-imH8f_0TeHXm50lfelsAMjnEHFY6xpMdRAUhhRQxUlFy0GTTXU_RytYeAx-AdXZB1ULWovdoCB7OXWN1CRC-Ju-r3uz6UtchGHJqDbsPygU57iysb2reoWHpyOWBINvsqypb3vFMlw3TfWZF5xiY7keC6zkpUnZIUojwW-FAVvrvn51LLnvOXHQ84Q5nn-AVtLcwk">在线编辑器</a>]

stateDiagram-v2
[*] --> 静止
静止 --> [*]
静止 --> 移动
移动 --> 静止
移动 --> 碰撞
碰撞 --> [*]

stateDiagram-v2
[*] --> 静止
静止 --> [*]
静止 --> 移动
移动 --> 静止
移动 --> 碰撞
碰撞 --> [*]

饼图 [<a href="https://mermaid.js.org/syntax/pie.html">文档</a> - <a href="https://mermaid.live/edit#pako:eNo9jsFugzAMhl8F-VzBgEEh13Uv0F1zcYkTIpEEBadShXj3BU3dzf_n77e8wxQUgYDVkvQSbsFsEgpRtEN_5i_kvzx05XiC-xvUHVzAUXRoVe7v0heFBJ7JkQSRR0Ua08ISpD-ymlaFTN_KcoggNC4bXQATh5-Xn0BwTPSWbhZNRPdvLQEV5dIO_FrPZ43dOJ-cgtfWnDzFJeOZed1EVZ3r0lie06Ocgqs2q2aMPD_HvuqbfsCmpf7aYte2anrU46Cbz1qr60fdIBzH8QvW9lkl">在线编辑器</a>]

pie
"狗" : 386
"猫" : 85.9
"老鼠" : 15

pie
"狗" : 386
"猫" : 85.9
"老鼠" : 15

Git图 [实验性 - <a href="https://mermaid.live/edit#pako:eNqNkMFugzAMhl8F-VyVAR1tOW_aA-zKxSSGRCMJCk6lCvHuNZPKZdM0n-zf3_8r8QIqaIIGMqnB8kfEybQ--y4VnLP8-9RF9Mpkmm40hmlnDKmvkPiH_kfS7nFo_VN0FAf6XwocQGgxa_nGsm1bYEOOWmik1dRjGrmF1q-Cpkkj07u2HCI0PY4zHQATh8-7V9BwTPSE3iwOEd1OjQE1iWkBvk_bzQY7s0Sq4Hs7bHqKo8iGeZqbPN_WR7mpSd1RHpvPVhuMbG7XOq_L-oJlRfW5wteq0qorrpe-PBW9Pr8UJcK6rg-BLYPQ">在线编辑器</a>]

条形图（使用甘特图） [<a href="https://mermaid.js.org/syntax/gantt.html">文档</a> - <a href="https://mermaid.live/edit#pako:eNptkU1vhCAQhv8KIenNugiI4rkf6bmXpvEyFVxJFDYyNt1u9r8X63Z7WQ9m5pknLzieaBeMpQ3dg0dsPUkPOhwteXZIXmJcbCT3xMAxkuh8Z8kIEclyMIB209fqKcwTICFvG4IvFy_oLrZ-g9F26ILfQgvNFN94VaRXQ1iWqpumZBcu1J8p1E1TXDx59eQNr5LyEqjJn6hv5QnGNlxevZJmdLLpy5xJSzut45biYCfb0iaVxvawjNjS1p-TCguG16PvaIPzYjO67e3BwX6GiTY9jPFKH43DMF_hGMDY1J4oHg-_f8hFTJFd8L3br3yZx4QHxENsdrt1nO8dDstH3oVpF50ZYMbhU6ud4qoGLqyqBJRCmO6j0HXPZdGbihUc6Pmc0QP49xD-b5X69ZQv2gjO81IwzWqhC1lKrjJ6pA3nVS7SMiVjrKirWlYp5fs3osgrWeo00lorLWvOzz8JVbXm">在线编辑器</a>]

gantt
    title Git问题 - 距离上次更新的天数
    dateFormat  X
    axisFormat %s

    section 问题19062
    71   : 0, 71
    section 问题19401
    36   : 0, 36
    section 问题193
    34   : 0, 34
    section 问题7441
    9    : 0, 9
    section 问题1300
    5    : 0, 5

gantt
    title Git问题 - 距离上次更新的天数
    dateFormat  X
    axisFormat %s

    section 问题19062
    71   : 0, 71
    section 问题19401
    36   : 0, 36
    section 问题193
    34   : 0, 34
    section 问题7441
    9    : 0, 9
    section 问题1300
    5    : 0, 5

用户旅程图 [<a href="https://mermaid.js.org/syntax/userJourney.html">文档</a> - <a href="https://mermaid.live/edit#pako:eNplkMFuwjAQRH9l5TMiTVIC-FqqnjhxzWWJN4khsSN7XRSh_HsdKBVt97R6Mzsj-yoqq0hIAXCywRkaSwNxWHNHsB_hYt1ZmwYUfiueKtbWwIcFtjf5zgH2eCZgQgkrCXt64GgMg2fUzkvIn5Xd_V5COtMFvCH_62ht_5yk7MU8sn61HDTfxD8VYiF6cj1qFd94nWkpuKWYKWRcFdUYOi5FaaZoDYNCpnel2Toha-w8LQQGtofRVEKyC_Qw7TQ2DvsfV2dRUTy6Ch6H-UMb7TlGVtbUupl5cF3ELfPgZZLM8rLR3IbjsrJ94rVq0XH7uS2SIis2mOVUrHNc5bmqjul2U2evaa3WL2mGYpqmL2BGiho">在线编辑器</a>]

  journey
    title 我的工作日
    section 去上班
      泡茶: 5: 我
      上楼: 3: 我
      工作: 1: 我, 猫
    section 回家
      下楼: 5: 我
      坐下: 3: 我

  journey
    title 我的工作日
    section 去上班
      泡茶: 5: 我
      上楼: 3: 我
      工作: 1: 我, 猫
    section 回家
      下楼: 5: 我
      坐下: 3: 我

C4图 [<a href="https://mermaid.js.org/syntax/c4.html">文档</a>]

C4Context
title 互联网银行系统的系统上下文图

Person(customerA, "银行客户A", "银行的客户，拥有个人银行账户。")
Person(customerB, "银行客户B")
Person_Ext(customerC, "银行客户C")
System(SystemAA, "互联网银行系统", "允许客户查看他们的银行账户信息，并进行支付。")

Person(customerD, "银行客户D", "银行的客户，<br/>拥有个人银行账户。")

Enterprise_Boundary(b1, "银行边界") {

  SystemDb_Ext(SystemE, "大型机银行系统", "存储所有核心银行信息，包括客户、账户、交易等。")

  System_Boundary(b2, "银行边界2") {
    System(SystemA, "银行系统A")
    System(SystemB, "银行系统B", "银行的一个系统，包含个人银行账户。")
  }

  System_Ext(SystemC, "电子邮件系统", "内部Microsoft Exchange电子邮件系统。")
  SystemDb(SystemD, "银行系统D数据库", "银行的一个系统，包含个人银行账户。")

  Boundary(b3, "银行边界3", "边界") {
    SystemQueue(SystemF, "银行系统F队列", "银行的一个系统，包含个人银行账户。")
    SystemQueue_Ext(SystemG, "银行系统G队列", "银行的一个系统，包含个人银行账户。")
  }
}

BiRel(customerA, SystemAA, "使用")
BiRel(SystemAA, SystemE, "使用")
Rel(SystemAA, SystemC, "发送电子邮件", "SMTP")
Rel(SystemC, customerA, "发送电子邮件给")

C4Context
title 互联网银行系统的系统上下文图

Person(customerA, "银行客户A", "银行的客户，拥有个人银行账户。")
Person(customerB, "银行客户B")
Person_Ext(customerC, "银行客户C")
System(SystemAA, "互联网银行系统", "允许客户查看他们的银行账户信息，并进行支付。")

Person(customerD, "银行客户D", "银行的客户，<br/>拥有个人银行账户。")

Enterprise_Boundary(b1, "银行边界") {

  SystemDb_Ext(SystemE, "大型机银行系统", "存储所有核心银行信息，包括客户、账户、交易等。")

  System_Boundary(b2, "银行边界2") {
    System(SystemA, "银行系统A")
    System(SystemB, "银行系统B", "银行的一个系统，包含个人银行账户。")
  }

  System_Ext(SystemC, "电子邮件系统", "内部Microsoft Exchange电子邮件系统。")
  SystemDb(SystemD, "银行系统D数据库", "银行的一个系统，包含个人银行账户。")

  Boundary(b3, "银行边界3", "边界") {
    SystemQueue(SystemF, "银行系统F队列", "银行的一个系统，包含个人银行账户。")
    SystemQueue_Ext(SystemG, "银行系统G队列", "银行的一个系统，包含个人银行账户。")
  }
}

BiRel(customerA, SystemAA, "使用")
BiRel(SystemAA, SystemE, "使用")
Rel(SystemAA, SystemC, "发送电子邮件", "SMTP")
Rel(SystemC, customerA, "发送电子邮件给")

发布

对于有权限的人：

更新package.json中的版本号。

npm publish

上述命令会生成文件到dist文件夹并将它们发布到https://www.npmjs.com。

贡献者

Mermaid是一个不断发展的社区，我们随时欢迎新的贡献者。有很多不同的方式可以提供帮助，我们一直在寻找更多的帮手！如果你想知道从哪里开始帮忙，可以看看这个问题。

关于如何贡献的详细信息可以在贡献指南中找到。

安全性和安全图表

对于公共网站来说，从互联网上的用户那里获取文本，并将其存储以便稍后在浏览器中展示可能是危险的。原因是用户内容可能包含嵌入的恶意脚本，这些脚本会在数据被展示时运行。对于Mermaid来说，这是一个风险，特别是因为mermaid图表包含许多在html中使用的字符，这使得标准的清理方法无法使用，因为它也会破坏图表。我们仍然努力清理incoming代码并不断完善这个过程，但很难保证没有漏洞。

作为对有外部用户的网站的额外安全级别，我们很高兴引入一个新的安全级别，在这个级别中，图表在沙盒化的iframe中渲染，防止代码中的JavaScript被执行。这是安全性提升的一大步。

不幸的是，你不能鱼和熊掌兼得，在这种情况下，这意味着一些交互功能会被阻止，同时也阻止了可能的恶意代码。

报告漏洞

要报告漏洞，请发送电子邮件至security@mermaid.live，描述问题、你采取的创建问题的步骤、受影响的版本，如果知道的话，还有问题的缓解措施。

感谢

Knut Sveidqvist的简短说明：

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

也要感谢js-sequence-diagram项目，我们使用了它的序列图语法。感谢Jessica Peter为甘特图渲染提供的灵感和起点。

感谢Tyler Long，他自2017年4月以来一直是合作者。

感谢不断增长的贡献者列表，是他们将项目带到了这一步！