Mermaid 详解用类 Markdown 文本生成图表的 JavaScript 绘图工具——API、语法与安全机制解析【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaidMermaid 是一个基于 JavaScript 的图表与图表绘制工具使用受 Markdown 启发的文本定义加渲染器来创建和修改复杂图表。它的核心目标是“让文档跟上开发的速度”解决图表文档制作成本高、易过时的 Doc-Rot 困境。本文基于仓库根目录的 README 展开并结合 核心入口源码、配置类型定义 与 安全实现 等仓库内容完整讲解 Mermaid 支持的全部示例图表语法、可编程 API 的调用流程、四级安全级别securityLevel的沙箱机制以及从源码构建到发布 npm 包的操作流程。解决什么问题让文档与代码同步Mermaid 要解决的核心矛盾在 README 的 About 部分被明确点出Doc-Rot is a Catch-22 that Mermaid helps to solve.文档腐化是一个 Mermaid 帮助解决的困境。图表与文档需要消耗宝贵的开发者时间而且很快就会过时但缺少图表和文档又会损害生产力、伤害组织学习。Mermaid 的应对方式是图表以纯文本存在图表定义就是代码可以纳入版本控制diff 和代码评审天然可用README Features 中列为 “Version-Control Friendly”文本易于修改修改一行文本即可更新图表无需重新打开设计工具可纳入生产脚本图表生成可以嵌入自动化流程与其他代码对非程序员友好可以通过 Mermaid Live Editor 直接创建详细图表。README 还列出了项目的十项特性Features包括 20 种图表类型、类 Markdown 语法、无需设计工具、版本控制友好、GitHub 原生渲染、主题与布局可定制、内置消毒与沙箱渲染的安全机制、轻量级依赖以及 MIT 开源协议。其中“Security First”与“Highly Customizable”两项在后文中结合源码展开。支持的图表类型与完整语法示例README 的 Examples 一节给出了十种代表性图表的完整定义文本。以下逐一继承这些示例并对应到仓库中的语法文档与实现目录。所有图表的完整语法文档位于docs/syntax/目录每种图表在源码中的解析与渲染实现位于packages/mermaid/src/diagrams/下的对应子目录如flowchart/、sequence/、gantt/每个图表都遵循 “detector类型检测 db数据模型 renderer渲染器” 的结构。流程图Flowchart定义与 流程图文档 对应实现位于packages/mermaid/src/diagrams/flowchart/第一行flowchart LR中的LR指定布局方向从左到右可选TB从上到下等。A[Hard]是矩形节点B(Round)是圆角节点C{Decision}是菱形判断节点--|Text|表示带标签的箭头。序列图Sequence diagram对应 序列图文档 与packages/mermaid/src/diagrams/sequence/实现-是实心实线消息--是虚线返回消息loop ... end是循环片段Note right of John为参与者右侧添加注释。甘特图Gantt chart对应 甘特图文档 与packages/mermaid/src/diagrams/gantt/实现任务行格式为任务名 : 状态, 任务id, 开始时间, 持续时间。done、active是内置状态after des1表示依赖前置任务3d、1d是相对时长起止日期则使用绝对日期。类图Class diagram对应 类图文档 与packages/mermaid/src/diagrams/class/实现|--是继承实现关系--*是组合关系--|是聚合关系Interface是构造型stereotype标注类成员可以逐行用类名 : 成员追加也可以用class Class10 { ... }的代码块语法整体定义。状态图State diagram对应 状态图文档 与packages/mermaid/src/diagrams/state/实现[*]表示初始态与终止态箭头描述状态迁移。饼图Pie chart对应 饼图文档 与packages/mermaid/src/diagrams/pie/实现Git 分支图Git graph对应 Git 图文档 与packages/mermaid/src/diagrams/git/实现README 中标注为 experimental语法模拟 Git 操作commit、branch、checkout、merge按时间顺序逐行描述仓库历史。用甘特图模拟柱状图Bar chartREADME 演示了一个技巧利用甘特图的dateFormat XUnix 时间戳模式配合axisFormat %s把各 section 中同一起点不同终点的任务渲染成横向柱状图用户旅程图User Journey diagram对应 用户旅程文档 与packages/mermaid/src/diagrams/user-journey/实现旅程按section分段每段内任务: 满意度评分(1-5): 参与者的形式描述体验步骤。C4 图C4 diagram对应 C4 文档 与packages/mermaid/src/diagrams/c4/实现。C4 上下文图示例展示了人物、系统、外部系统、数据库、消息队列以及嵌套边界等元素Person/System/SystemDb/SystemQueue分别表示人、系统、数据库与队列后缀_Ext表示外部元素Rel是带方向关系BiRel是双向关系可附加协议等技术细节如SMTPEnterprise_Boundary、System_Boundary、Boundary支持嵌套分组。除上述十例外仓库packages/mermaid/src/diagrams/目录还包含 mindmap、timeline、sankey、quadrant-chart、radar、requirement、packet、treemap、wardley、xychart、venn、railroadABNF/EBNF/PEG、architecture、block、er、kanban、ishikawa、cynefin、swimlanes、eventmodeling、usecase 等图表类型的完整实现每种类型都有对应的语法文档位于docs/syntax/目录如 思维导图、ER 图、桑基图、时间线。可编程 APIinitialize、run、parse 与 render 的工作流程README 的 About 部分强调 Mermaid 可以“成为生产脚本和其他代码的一部分”。结合 入口模块 的源码核心 API 的工作流程如下。run扫描页面并渲染所有图表run函数见 mermaid.ts遍历文档中匹配查询选择器默认.mermaid的元素并逐个渲染。从源码实现可以确认几个关键行为防重复处理每个渲染过的元素会被打上data-processed属性已标记的元素直接跳过mermaid.ts因此run可以被安全地多次触发文本预处理元素的innerHTML会先做 HTML 实体解码、dedent去缩进YAML 前置配置解析需要、去除首尾空白并归一化br标签mermaid.ts错误策略RunOptions支持suppressErrorsmermaid.ts为true时错误只写日志不抛出否则收集错误并在最后抛出第一个同时回调mermaid.parseError。RunOptions的完整字段为querySelector默认.mermaid、nodes直接传入节点集合时忽略 querySelector、postRenderCallback每张图渲染完成后的回调、suppressErrors。startOnLoad默认为true模块加载时会注册window.addEventListener(load, contentLoaded, false)页面加载完成后自动调用mermaid.run()mermaid.ts。initialize配置必须先于渲染initialize是所有配置的唯一入口mermaid.ts它透传给内部mermaidAPI.initialize。配置类型定义在 config.type.ts除全局主题、logLevel、securityLevel、startOnLoad、secure等外每种图表还有专属配置段。配置 JSON Schema 位于 config.schema.yaml由此生成的 TypeScript 类型保证了配置的静态可校验性文档侧的配置说明见 配置文档 与 默认配置说明。注意源码中init已标记为deprecatedmermaid.ts官方建议一律使用initializerun的组合。parse 与 render细粒度控制除了整页扫描还有两个可单独调用的异步 API二者都通过内部执行队列串行化避免并发渲染冲突mermaid.ts// 1. 校验语法 console.log(await mermaid.parse(flowchart \n a -- b)); // { diagramType: flowchart-v2 } console.log(await mermaid.parse(wrong \n a -- b, { suppressErrors: true })); // false console.log(await mermaid.parse(wrong \n a -- b, { suppressErrors: false })); // throws Error// 2. 渲染单张图 const element document.querySelector(#graphDiv); const graphDefinition graph TB\na--b; const { svg, bindFunctions } await mermaid.render(graphDiv, graphDefinition); element.innerHTML svg; bindFunctions?.(element);这两个用法示例直接来自 mermaid.ts 与 mermaid.ts 中的 JSDoc 注释。parse的suppressErrors选项决定解析失败时返回false还是抛出异常适合在 Live Editor 类场景中做“即时语法校验”render返回svg字符串与可选的bindFunctions用于绑定点击事件等交互功能是自定义渲染管线的推荐入口。此外registerExternalDiagrams允许注册外部图表类型支持懒加载detectType可从文本自动识别图表类型getRegisteredDiagramsMetadata返回已注册图表的元数据mermaid.ts。仓库内也有配套的外部图表扩展包 mermaid-example-diagram可作为扩展开发的参考。安全机制四级 securityLevel 与沙箱 iframeREADME 的 “Security and safe diagrams” 一节指出对公网站点而言存储用户文本并在浏览器中稍后呈现是有风险的因为用户内容可能内嵌恶意脚本而 Mermaid 图表本身包含大量 HTML 字符标准消毒方案会破坏图表因此官方持续完善消毒流程同时提供沙箱级别作为额外安全层。从源码可以确认这对应 config.type.ts 中定义的四个级别/** * Level of trust for parsed diagram */ securityLevel?: strict | loose | antiscript | sandbox;strict默认级别禁止图表内联脚本执行依赖消毒依赖 dompurify 等loose允许用户脚本执行仅适用于完全信任图表来源的私有环境antiscript允许交互功能但阻止脚本执行sandbox图表在沙箱化 iframe 中渲染彻底阻止 JavaScript 执行。sandbox级别的具体实现在 mermaidAPI.ts 中渲染前检查config.securityLevel sandboxmermaidAPI.ts随后通过sandboxedIframe函数mermaidAPI.ts创建一个带sandbox属性的 iframemermaidAPI.ts将图表的 HTML 编码为 base64 后以srcdata:text/html;charsetUTF-8;base64,...方式载入从而让图表代码与宿主页面完全隔离。README 对此有明确的权衡说明沙箱模式会连同恶意代码一起屏蔽掉部分交互功能——“你不能既拥有蛋糕又吃掉它”。此外config.type.ts 中的secure配置项列出了哪些配置键被视为“安全关键”只能通过mermaid.initialize修改防止恶意图表指令覆盖站点默认安全设置这是防御链的第二道。端到端测试对点击事件的安全行为做了多场景覆盖测试页面见 click_security_sandbox.html、click_security_strict.html、click_security_loose.html以及大量 XSS 测试页面 xss.html 至xss25.html。漏洞报告渠道见 README向 securitymermaid.live 发邮件描述问题、复现步骤、受影响版本与已知缓解措施。构建、发布与仓库结构发布流程README 的 Release 一节给出了面向发布者的最简流程更新package.json中的版本号执行npm publish。README 说明该命令会生成dist目录下的产物并发布到 npm。从仓库根 package.json 的 scripts 可以看出当前仓库实际的完整发布链路更完整仓库使用 pnpm changesets 管理pnpm build先执行pnpm build:esbuild基于.esbuild/build.ts打包再执行build:types生成类型声明changeset:version/changeset:publish由 changesets 驱动版本升级、文档构建与 npm 发布其中changeset:publish会先把README.*复制到 packages/mermaid 再发布产物入口packages/mermaid/package.json声明module/exports指向./dist/mermaid.core.mjsfiles字段包含dist/与README.md即 npm 上分发的就是构建产物。本地开发相关命令pnpm devesbuild 开发服务器、pnpm testlint vitest、pnpm playwrightPlaywright 端到端测试、pnpm coverage单测 e2e 覆盖率合并。视觉回归测试方面README 说明 PR 的视觉回归由 Argos 开源计划支持发布流程依赖 Applitools 的视觉回归测试对应脚本见 argos-upload-sheets.tse2e 快照辅助工具见 mmd-snapshots.ts。仓库结构根目录是 pnpm workspace monorepopnpm-workspace.yaml 定义了工作空间成员。核心包结构如下包路径职责mermaidpackages/mermaid主包所有图表的解析、布局与 SVG 渲染版本 11.17.0MIT 协议mermaid-js/parserpackages/parser独立的 Langium 解析器包主包通过workspace:^依赖它mermaid-layout-elkpackages/mermaid-layout-elk基于 ELK 的可选布局引擎mermaid-layout-tidy-treepackages/mermaid-layout-tidy-tree基于 tidy-tree 的布局算法包mermaid-local-editorpackages/mermaid-local-editor随包分发的本地示例编辑器静态页面mermaid-zenumlpackages/mermaid-zenumlZenUML 图表扩展examplespackages/examples各图表类型的用法示例集合主包的关键运行时依赖见 packages/mermaid/package.json与 README 致谢Appreciation一一对应d3与dagre-d3-es提供图形布局与绘制Knut Sveidqvist 在致谢中点名感谢 d3 与 dagre-d3 项目、dompurify负责消毒、roughjs提供手绘风格、katex负责数学公式、chevrotain与mermaid-js/parser负责词法/语法分析、marked处理 Markdown 标签、cytoscape系列用于部分图表布局。致谢部分还提及序列图语法借鉴了 js-sequence-diagram 项目甘特图渲染受 Jessica Peter 工作启发。参与贡献README 的 Contributors 一节说明 Mermaid 社区持续接受新贡献者详细贡献指南见 contributing.md新图表开发可参考 新增图表指南 与 基于 jison 的新图表指南。仓库使用 husky lint-staged 做提交前检查pre-commit并配置了 ESLint Prettier cspell 的代码规范见 eslint.config.js 与 cspell.config.yaml。小结Mermaid 将“画图”从设计工具迁移到了文本世界十种以上图表类型都以数行文本定义配合initializerun的页面级 API 或parse/render的细粒度 API 嵌入任意前端流程securityLevel四级信任模型与 sandbox iframe 隔离则为公网站点呈现用户生成的图表提供了安全保障。仓库中 README 给出宏观定位与全部语法示例docs/syntax 提供逐图表的完整语法参考packages/mermaid/src 则是每个细节的最终实现依据。【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Mermaid 详解：用类 Markdown 文本生成图表的 JavaScript 绘图工具——API、语法与安全机制解析
Mermaid 详解用类 Markdown 文本生成图表的 JavaScript 绘图工具——API、语法与安全机制解析【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaidMermaid 是一个基于 JavaScript 的图表与图表绘制工具使用受 Markdown 启发的文本定义加渲染器来创建和修改复杂图表。它的核心目标是“让文档跟上开发的速度”解决图表文档制作成本高、易过时的 Doc-Rot 困境。本文基于仓库根目录的 README 展开并结合 核心入口源码、配置类型定义 与 安全实现 等仓库内容完整讲解 Mermaid 支持的全部示例图表语法、可编程 API 的调用流程、四级安全级别securityLevel的沙箱机制以及从源码构建到发布 npm 包的操作流程。解决什么问题让文档与代码同步Mermaid 要解决的核心矛盾在 README 的 About 部分被明确点出Doc-Rot is a Catch-22 that Mermaid helps to solve.文档腐化是一个 Mermaid 帮助解决的困境。图表与文档需要消耗宝贵的开发者时间而且很快就会过时但缺少图表和文档又会损害生产力、伤害组织学习。Mermaid 的应对方式是图表以纯文本存在图表定义就是代码可以纳入版本控制diff 和代码评审天然可用README Features 中列为 “Version-Control Friendly”文本易于修改修改一行文本即可更新图表无需重新打开设计工具可纳入生产脚本图表生成可以嵌入自动化流程与其他代码对非程序员友好可以通过 Mermaid Live Editor 直接创建详细图表。README 还列出了项目的十项特性Features包括 20 种图表类型、类 Markdown 语法、无需设计工具、版本控制友好、GitHub 原生渲染、主题与布局可定制、内置消毒与沙箱渲染的安全机制、轻量级依赖以及 MIT 开源协议。其中“Security First”与“Highly Customizable”两项在后文中结合源码展开。支持的图表类型与完整语法示例README 的 Examples 一节给出了十种代表性图表的完整定义文本。以下逐一继承这些示例并对应到仓库中的语法文档与实现目录。所有图表的完整语法文档位于docs/syntax/目录每种图表在源码中的解析与渲染实现位于packages/mermaid/src/diagrams/下的对应子目录如flowchart/、sequence/、gantt/每个图表都遵循 “detector类型检测 db数据模型 renderer渲染器” 的结构。流程图Flowchart定义与 流程图文档 对应实现位于packages/mermaid/src/diagrams/flowchart/第一行flowchart LR中的LR指定布局方向从左到右可选TB从上到下等。A[Hard]是矩形节点B(Round)是圆角节点C{Decision}是菱形判断节点--|Text|表示带标签的箭头。序列图Sequence diagram对应 序列图文档 与packages/mermaid/src/diagrams/sequence/实现-是实心实线消息--是虚线返回消息loop ... end是循环片段Note right of John为参与者右侧添加注释。甘特图Gantt chart对应 甘特图文档 与packages/mermaid/src/diagrams/gantt/实现任务行格式为任务名 : 状态, 任务id, 开始时间, 持续时间。done、active是内置状态after des1表示依赖前置任务3d、1d是相对时长起止日期则使用绝对日期。类图Class diagram对应 类图文档 与packages/mermaid/src/diagrams/class/实现|--是继承实现关系--*是组合关系--|是聚合关系Interface是构造型stereotype标注类成员可以逐行用类名 : 成员追加也可以用class Class10 { ... }的代码块语法整体定义。状态图State diagram对应 状态图文档 与packages/mermaid/src/diagrams/state/实现[*]表示初始态与终止态箭头描述状态迁移。饼图Pie chart对应 饼图文档 与packages/mermaid/src/diagrams/pie/实现Git 分支图Git graph对应 Git 图文档 与packages/mermaid/src/diagrams/git/实现README 中标注为 experimental语法模拟 Git 操作commit、branch、checkout、merge按时间顺序逐行描述仓库历史。用甘特图模拟柱状图Bar chartREADME 演示了一个技巧利用甘特图的dateFormat XUnix 时间戳模式配合axisFormat %s把各 section 中同一起点不同终点的任务渲染成横向柱状图用户旅程图User Journey diagram对应 用户旅程文档 与packages/mermaid/src/diagrams/user-journey/实现旅程按section分段每段内任务: 满意度评分(1-5): 参与者的形式描述体验步骤。C4 图C4 diagram对应 C4 文档 与packages/mermaid/src/diagrams/c4/实现。C4 上下文图示例展示了人物、系统、外部系统、数据库、消息队列以及嵌套边界等元素Person/System/SystemDb/SystemQueue分别表示人、系统、数据库与队列后缀_Ext表示外部元素Rel是带方向关系BiRel是双向关系可附加协议等技术细节如SMTPEnterprise_Boundary、System_Boundary、Boundary支持嵌套分组。除上述十例外仓库packages/mermaid/src/diagrams/目录还包含 mindmap、timeline、sankey、quadrant-chart、radar、requirement、packet、treemap、wardley、xychart、venn、railroadABNF/EBNF/PEG、architecture、block、er、kanban、ishikawa、cynefin、swimlanes、eventmodeling、usecase 等图表类型的完整实现每种类型都有对应的语法文档位于docs/syntax/目录如 思维导图、ER 图、桑基图、时间线。可编程 APIinitialize、run、parse 与 render 的工作流程README 的 About 部分强调 Mermaid 可以“成为生产脚本和其他代码的一部分”。结合 入口模块 的源码核心 API 的工作流程如下。run扫描页面并渲染所有图表run函数见 mermaid.ts遍历文档中匹配查询选择器默认.mermaid的元素并逐个渲染。从源码实现可以确认几个关键行为防重复处理每个渲染过的元素会被打上data-processed属性已标记的元素直接跳过mermaid.ts因此run可以被安全地多次触发文本预处理元素的innerHTML会先做 HTML 实体解码、dedent去缩进YAML 前置配置解析需要、去除首尾空白并归一化br标签mermaid.ts错误策略RunOptions支持suppressErrorsmermaid.ts为true时错误只写日志不抛出否则收集错误并在最后抛出第一个同时回调mermaid.parseError。RunOptions的完整字段为querySelector默认.mermaid、nodes直接传入节点集合时忽略 querySelector、postRenderCallback每张图渲染完成后的回调、suppressErrors。startOnLoad默认为true模块加载时会注册window.addEventListener(load, contentLoaded, false)页面加载完成后自动调用mermaid.run()mermaid.ts。initialize配置必须先于渲染initialize是所有配置的唯一入口mermaid.ts它透传给内部mermaidAPI.initialize。配置类型定义在 config.type.ts除全局主题、logLevel、securityLevel、startOnLoad、secure等外每种图表还有专属配置段。配置 JSON Schema 位于 config.schema.yaml由此生成的 TypeScript 类型保证了配置的静态可校验性文档侧的配置说明见 配置文档 与 默认配置说明。注意源码中init已标记为deprecatedmermaid.ts官方建议一律使用initializerun的组合。parse 与 render细粒度控制除了整页扫描还有两个可单独调用的异步 API二者都通过内部执行队列串行化避免并发渲染冲突mermaid.ts// 1. 校验语法 console.log(await mermaid.parse(flowchart \n a -- b)); // { diagramType: flowchart-v2 } console.log(await mermaid.parse(wrong \n a -- b, { suppressErrors: true })); // false console.log(await mermaid.parse(wrong \n a -- b, { suppressErrors: false })); // throws Error// 2. 渲染单张图 const element document.querySelector(#graphDiv); const graphDefinition graph TB\na--b; const { svg, bindFunctions } await mermaid.render(graphDiv, graphDefinition); element.innerHTML svg; bindFunctions?.(element);这两个用法示例直接来自 mermaid.ts 与 mermaid.ts 中的 JSDoc 注释。parse的suppressErrors选项决定解析失败时返回false还是抛出异常适合在 Live Editor 类场景中做“即时语法校验”render返回svg字符串与可选的bindFunctions用于绑定点击事件等交互功能是自定义渲染管线的推荐入口。此外registerExternalDiagrams允许注册外部图表类型支持懒加载detectType可从文本自动识别图表类型getRegisteredDiagramsMetadata返回已注册图表的元数据mermaid.ts。仓库内也有配套的外部图表扩展包 mermaid-example-diagram可作为扩展开发的参考。安全机制四级 securityLevel 与沙箱 iframeREADME 的 “Security and safe diagrams” 一节指出对公网站点而言存储用户文本并在浏览器中稍后呈现是有风险的因为用户内容可能内嵌恶意脚本而 Mermaid 图表本身包含大量 HTML 字符标准消毒方案会破坏图表因此官方持续完善消毒流程同时提供沙箱级别作为额外安全层。从源码可以确认这对应 config.type.ts 中定义的四个级别/** * Level of trust for parsed diagram */ securityLevel?: strict | loose | antiscript | sandbox;strict默认级别禁止图表内联脚本执行依赖消毒依赖 dompurify 等loose允许用户脚本执行仅适用于完全信任图表来源的私有环境antiscript允许交互功能但阻止脚本执行sandbox图表在沙箱化 iframe 中渲染彻底阻止 JavaScript 执行。sandbox级别的具体实现在 mermaidAPI.ts 中渲染前检查config.securityLevel sandboxmermaidAPI.ts随后通过sandboxedIframe函数mermaidAPI.ts创建一个带sandbox属性的 iframemermaidAPI.ts将图表的 HTML 编码为 base64 后以srcdata:text/html;charsetUTF-8;base64,...方式载入从而让图表代码与宿主页面完全隔离。README 对此有明确的权衡说明沙箱模式会连同恶意代码一起屏蔽掉部分交互功能——“你不能既拥有蛋糕又吃掉它”。此外config.type.ts 中的secure配置项列出了哪些配置键被视为“安全关键”只能通过mermaid.initialize修改防止恶意图表指令覆盖站点默认安全设置这是防御链的第二道。端到端测试对点击事件的安全行为做了多场景覆盖测试页面见 click_security_sandbox.html、click_security_strict.html、click_security_loose.html以及大量 XSS 测试页面 xss.html 至xss25.html。漏洞报告渠道见 README向 securitymermaid.live 发邮件描述问题、复现步骤、受影响版本与已知缓解措施。构建、发布与仓库结构发布流程README 的 Release 一节给出了面向发布者的最简流程更新package.json中的版本号执行npm publish。README 说明该命令会生成dist目录下的产物并发布到 npm。从仓库根 package.json 的 scripts 可以看出当前仓库实际的完整发布链路更完整仓库使用 pnpm changesets 管理pnpm build先执行pnpm build:esbuild基于.esbuild/build.ts打包再执行build:types生成类型声明changeset:version/changeset:publish由 changesets 驱动版本升级、文档构建与 npm 发布其中changeset:publish会先把README.*复制到 packages/mermaid 再发布产物入口packages/mermaid/package.json声明module/exports指向./dist/mermaid.core.mjsfiles字段包含dist/与README.md即 npm 上分发的就是构建产物。本地开发相关命令pnpm devesbuild 开发服务器、pnpm testlint vitest、pnpm playwrightPlaywright 端到端测试、pnpm coverage单测 e2e 覆盖率合并。视觉回归测试方面README 说明 PR 的视觉回归由 Argos 开源计划支持发布流程依赖 Applitools 的视觉回归测试对应脚本见 argos-upload-sheets.tse2e 快照辅助工具见 mmd-snapshots.ts。仓库结构根目录是 pnpm workspace monorepopnpm-workspace.yaml 定义了工作空间成员。核心包结构如下包路径职责mermaidpackages/mermaid主包所有图表的解析、布局与 SVG 渲染版本 11.17.0MIT 协议mermaid-js/parserpackages/parser独立的 Langium 解析器包主包通过workspace:^依赖它mermaid-layout-elkpackages/mermaid-layout-elk基于 ELK 的可选布局引擎mermaid-layout-tidy-treepackages/mermaid-layout-tidy-tree基于 tidy-tree 的布局算法包mermaid-local-editorpackages/mermaid-local-editor随包分发的本地示例编辑器静态页面mermaid-zenumlpackages/mermaid-zenumlZenUML 图表扩展examplespackages/examples各图表类型的用法示例集合主包的关键运行时依赖见 packages/mermaid/package.json与 README 致谢Appreciation一一对应d3与dagre-d3-es提供图形布局与绘制Knut Sveidqvist 在致谢中点名感谢 d3 与 dagre-d3 项目、dompurify负责消毒、roughjs提供手绘风格、katex负责数学公式、chevrotain与mermaid-js/parser负责词法/语法分析、marked处理 Markdown 标签、cytoscape系列用于部分图表布局。致谢部分还提及序列图语法借鉴了 js-sequence-diagram 项目甘特图渲染受 Jessica Peter 工作启发。参与贡献README 的 Contributors 一节说明 Mermaid 社区持续接受新贡献者详细贡献指南见 contributing.md新图表开发可参考 新增图表指南 与 基于 jison 的新图表指南。仓库使用 husky lint-staged 做提交前检查pre-commit并配置了 ESLint Prettier cspell 的代码规范见 eslint.config.js 与 cspell.config.yaml。小结Mermaid 将“画图”从设计工具迁移到了文本世界十种以上图表类型都以数行文本定义配合initializerun的页面级 API 或parse/render的细粒度 API 嵌入任意前端流程securityLevel四级信任模型与 sandbox iframe 隔离则为公网站点呈现用户生成的图表提供了安全保障。仓库中 README 给出宏观定位与全部语法示例docs/syntax 提供逐图表的完整语法参考packages/mermaid/src 则是每个细节的最终实现依据。【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考