Mermaid 入门示例一份覆盖从流程图到 XY 图的图表语法速查指南【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaidMermaid 的这份官方示例文档位于 packages/mermaid/src/docs/intro/examples.md其渲染结果同时被 packages/mermaid/src/docs/intro/index.md 内嵌展示为你提供了一份最小可用的图类型全集从最常用的流程图、时序图到较新的象限图、XY 图每类都配有一段可直接运行的文本定义。它通常被当作首页示例和用户第一次照猫画虎的模板集使用。读完本文你将掌握 10 类核心图表的声明式语法骨架、每类图表最关键的书写规则以及它们在仓库文档、演示页面与端到端测试用例中的对应位置从而能够直接把示例改造为你的文档或页面中的真实图表。本文以该示例文档为骨架逐例还原其中的代码并补充来自各图类型完整语法文档见 docs/syntax/与仓库源码/测试的关键细节示例中的文本可直接粘贴到任意 Mermaid 渲染环境如 Mermaid Live Editor或配置了mermaid的 HTML 页面运行验证。运行提示所有示例都是纯文本图定义。在 HTML 页面中可将定义写入pre classmermaid…/pre标签并调用mermaid.initialize({ startOnLoad: true })触发渲染部署与使用方式详见 Getting Started 与 Usage。图类型总览与基本格式一个 Mermaid 图定义通常由首行图类型关键字 若干语句行构成。这份示例文档恰好覆盖了四种叙事形态的图表类别图类型首行关键字典型用途流程 / 结构Flowchartgraph TD流程、状态流转、组织关系结构Class diagramclassDiagram面向对象建模交互Sequence diagramsequenceDiagram消息时序交互交互Use case diagramusecase-beta参与者与系统用例规划Gantt diagramgantt甘特排期规划User Journeyjourney用户体验旅程版本Git graphgitGraphGit 分支提交史数据建模ER diagramerDiagram实体关系数据可视化Quadrant chartquadrantChart四象限分析数据可视化XY chartxychart/xychart-beta柱状 / 折线图注意两类图的写法差异XY 图在语法文档中以xychart为主体如 docs/syntax/xyChart.md示例文档则使用了带 Beta 标识的xychart-beta关键字用例图使用单 tokenusecase-beta。若渲染器报未知图类型先核对首行关键字是否与安装版本匹配。Flowchart最常用的图示例graph TD; A--B; A--C; B--D; C--D;要点首行graph或flowchart后的字母表示布局方向TD为自上而下TB同义也可用LR左右、BT自下而上、RL从右到左。后续每行以分号结尾是一种可选的防御性写法分号会被忽略仅作语句分隔。每条A--B即一条从节点 A 指向节点 B 的实线箭头字母本身即节点 id渲染时默认把 id 作为节点文本。节点并不局限于此处的裸文本节点。示例文档还展示了更丰富的节点形态与连线见 docs/syntax/examples.md 的流程图部分A[Square Rect]矩形、B((Circle))圆形、C(Round Rect)圆角矩形、D{Rhombus}菱形以及带文字标签的连线-- Link text --、带br/换行的说明、subgraph子图与虚线-.-、粗线等。完整语法参见 docs/syntax/flowchart.md也可以在 demos/flowchart.html 中交互查看效果仓库 e2e/diagrams/flowchart/ 目录下存有大量渲染回归用例例如 1-should-render-a-simple-flowchart.mmd。Sequence diagram消息时序示例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!这段示例几乎覆盖了时序图的核心语法participant 名字显式声明参与者并决定其从左到右的排列顺序省略声明时参与者按首次出现顺序排布。更完整的语法文档docs/syntax/sequenceDiagram.md还支持actor角色符号人形图标与{…}形式的参与者外观配置。消息箭头由两部分拼成实线-或虚线--加上箭头形状实心箭头、带刺实心箭头、)开放箭头、x叉形箭头等。A-B: 文本表示同步调用消息A--B表示异步返回虚线。loop … end声明循环/消息块alt/opt也类似需要在end处闭合。由于语言解析机制end 作为节点/参与者名字时可能破坏图需用括号、引号或方括号包裹如(end)这一注意点在语法文档中有明确提示。Note right of John: …在参与者旁侧添加备注br/用于强制换行。仓库在 e2e/diagrams/sequence/ 下有 100 个时序图渲染回归样例可作为复杂语法的活字典。Use case diagram参与者与用例示例usecase-beta direction LR actor Customer Checkout(Place order) Customer -- Checkout这是本仓库中较新的用例图实现关键字统一为usecase-beta语法细节见 docs/syntax/usecase.mddirection LR声明布局方向可用TD/TB/BT/LR/RL之一。actor Customer声明参与者裸声明以 id 作为显示标签也可写成actor Admin(Main administrator)提供独立显示标签。Checkout(Place order)声明一个椭圆用例显示文本为Place order标识符为Checkout若写成Report[Generate report]则是矩形用例(…)对应椭圆、[…]对应矩形。关系Customer -- Checkout连接参与者与用例。关系端点可以先出现、后声明最终形状与标签由声明决定没有任何显式声明的端点会被当作椭圆用例而参与者必须显式actor声明不会从关系中推断。示例文档还展示了若干进阶写法同为 usecase 语法页的示例参与者四种变体默认 stick、{ type: hollow }、{ type: awesome }与{ icon: fa:user }图标参与者、business: true业务斜杠标记、stereotype构造型、systemBoundary … end系统边界分组以及:::class与classDef的应用。Gantt 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核心结构完整语法见 docs/syntax/gantt.md头部指令dateFormat定义日期格式默认是YYYY-MM-DDtitle设置标题excludes排除日期weekdays是内置快捷排除项。section 名称把任务分组。任务行格式为任务名 : 状态, id, 开始[, 结束或时长]。状态标记包括done已完成、active进行中缺省为空即未来任务id用于任务间引用开始时间既可以是绝对日期2014-01-06,2014-01-08也可以是相对引用after des2时长可用3d、5d等相对单位。Class 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类图用一行一条关系描述类间语义完整语法见 docs/syntax/classDiagram.md|--泛化继承、*--组合、o--聚合、..依赖、--关联、--*、--|、--双向关联等行尾冒号后可跟关系标签。Class07 : equals()与Class07 : Object[] elementData两种写法分别给类追加方法成员与属性成员。可见性前缀/-/#/~、注解、泛型、命名空间等在语法文档中有完整说明。Git graph分支与提交示例gitGraph commit commit branch develop commit commit commit checkout main commit commitgitGraph图把 Git 操作可视化为提交点序列完整语法见 docs/syntax/gitgraph.mdcommit在当前位置产生一次提交branch name从当前提交创建新分支并切换过去checkout name切回已有分支。此外还支持merge、cherry-pick、reset、带标签/类型的提交如commit id: … tag: …、type: HIGHLIGHT等操作以及头部gitGraph LR:这样的方向选项。仓库在 e2e/diagrams/gitgraph/ 下保存了上百个提交场景的渲染用例。Entity Relationship Diagram实验性示例erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : usesER 图目前标注为实验性完整语法见 docs/syntax/entityRelationshipDiagram.md。关系行使用鸦爪crows foot基数记号||表示恰好一个、o{表示零或多个、|{表示一或多个、..虚线等行末冒号后是关系名。实体声明可带属性块也支持在实体名后追加别名与注释。类型化声明、复合键、多个实体间往返关系等更多细节都收录在语法文档中e2e/diagrams/er-diagram/ 提供了大量渲染用例。User Journey 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用户旅程图用于刻画不同类型用户完成某项任务的具体步骤是现状流程的可视化docs/syntax/userJourney.mdjourney开头title设置整体标题。section 名称把步骤分组对应一个时间区段。每个任务一行的格式为任务名: score: 逗号分隔的参与者列表其中 score 是1 到 5含两端的整数语义上代表任务体验/情绪的得分参与者可以多个用逗号分隔如1: Me, Cat。Quadrant Chart四象限图示例quadrantChart title Reach and engagement of campaigns x-axis Low Reach -- High Reach y-axis Low Engagement -- High Engagement quadrant-1 We should expand quadrant-2 Need to promote quadrant-3 Re-evaluate quadrant-4 May be improved Campaign A: [0.3, 0.6] Campaign B: [0.45, 0.23] Campaign C: [0.57, 0.69] Campaign D: [0.78, 0.34] Campaign E: [0.40, 0.34] Campaign F: [0.35, 0.78]语法要点完整说明见 docs/syntax/quadrantChart.mdx-axis 左侧文本 -- 右侧文本--分隔左右两端文本若只写x-axis 文本则只渲染左侧文本。y-axis 底部文本 -- 顶部文本--分隔底部与顶部文本注意方向与 x 轴相反只写y-axis 文本时只渲染底部。quadrant-1/2/3/4 文本分别给右上、左上、左下、右下四个象限设定显示文本。点用名称: [x, y]表示x 与 y 的取值范围都是 0~1。渲染细节若图中没有任何点轴线文本与象限文本会居中于各自象限有点时 x 轴标签渲染在象限左侧并显示在图底部y 轴标签渲染在对应象限底部象限文本位于象限顶部。该图还支持丰富的配置与主题定制在文档头部 frontmatter 中通过config.quadrantChart控制chartWidth、chartHeight、titlePadding、titleFontSize、quadrantPadding、quadrantLabelFontSize、xAxisPosition默认top、yAxisPosition默认left等布局参数完整参数表见语法文档通过themeVariables下的quadrant1Fill~quadrant4Fill、quadrant1TextFill~quadrant4TextFill、quadrantPointFill、quadrantXAxisTextFill等主题变量分别调整各象限填充色、文字色、点色与轴线色。点也支持直接样式与classDef共享类两种风格方式color、radius、stroke-width、stroke-color优先级为直接样式 类样式 主题样式。仓库 e2e/diagrams/quadrant-chart/ 存有对应渲染用例。XY Chart柱状图与折线图示例xychart-beta title Sales Revenue x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis Revenue (in $) 4000 -- 11000 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]语法要点完整说明见 docs/syntax/xyChart.md标题title …中若包含空格必须用双引号包裹单个词可不加。x 轴既可以是分类轴如x-axis [jan, feb, …]带空格的分类需加引号也可以是数值范围轴x-axis title min -- max。y 轴只能是数值范围y-axis Revenue (in $) 4000 -- 11000指定标题与范围只写y-axis title时范围由数据自动推算。x/y 轴声明都可省略缺省时尝试由数据生成范围。bar [数值数组]画柱状图line [数值数组]画折线图若给系列命名如line series name […]命名系列会自动出现在图例中Legends需要 v11.17.0 才支持。最小可运行示例只需图类型加一个数据系列例如xychartline [1.3, .6, 2.4, -.34]。更细的配置位于config.xyChart宽度/高度默认 700/500、showTitle、showLegend、chartOrientation: vertical | horizontal、数据标签showDataLabel/showDataLabelOutsideBar等以及config.xyChart.xAxis/yAxis下属的AxisConfigshowLabel、showTick、tickLength、labelRotation等。主题色则通过themeVariables.xyChart如titleColor、xAxisLabelColor、plotColorPalette等配置折线与柱子的颜色由plotColorPalette按图元顺序取用。把示例文档当起点继续深入本文是示例文档packages/mermaid/src/docs/intro/examples.md的展开导读。要深入某一类图建议按示例 → 完整语法页 → 配置/主题页 → 源码的顺序查阅仓库资源完整语法每个链接都指向独立语法页如 flowchart、sequenceDiagram、usecase、gantt、classDiagram、gitgraph、entityRelationshipDiagram、userJourney、quadrantChart、xyChart。这些源文档位于 packages/mermaid/src/docs/syntax/。更多混合示例示例文档的姊妹篇 docs/syntax/examples.md 汇集了基本饼图大流程图加样式带注释的时序图等综合示例是临摹不同图风格的好材料。可运行演示与回归用例demos/下每种图类型都有对应的 HTML 演示页如 flowchart.html、sequence.html仓库的端到端测试见 e2e/diagrams/ 下各子目录的.mmd文件覆盖了每类图的边界场景例如数据标签是否在柱内/柱外渲染、象限坐标是否越界、多分支提交的 git 场景等可作为学习什么写法会被渲染成什么效果的事实来源。结合渲染原理来说Mermaid 各图在 packages/mermaid/src/diagrams/ 中各自拥有 parser语法解析、db数据模型与 renderer渲染器三段式实现示例文本先被解析器转化为中间数据再交给布局与绘图模块输出 SVG。因此语法文档里描述的规则、配置表中的默认值都以该目录下的源码与测试为准示例页中的代码则可以随时粘贴验证——这正是把文档与代码对齐对抗 doc-rot的 Mermaid 设计初衷。【免费下载链接】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 入门示例：一份覆盖从流程图到 XY 图的图表语法速查指南
Mermaid 入门示例一份覆盖从流程图到 XY 图的图表语法速查指南【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaidMermaid 的这份官方示例文档位于 packages/mermaid/src/docs/intro/examples.md其渲染结果同时被 packages/mermaid/src/docs/intro/index.md 内嵌展示为你提供了一份最小可用的图类型全集从最常用的流程图、时序图到较新的象限图、XY 图每类都配有一段可直接运行的文本定义。它通常被当作首页示例和用户第一次照猫画虎的模板集使用。读完本文你将掌握 10 类核心图表的声明式语法骨架、每类图表最关键的书写规则以及它们在仓库文档、演示页面与端到端测试用例中的对应位置从而能够直接把示例改造为你的文档或页面中的真实图表。本文以该示例文档为骨架逐例还原其中的代码并补充来自各图类型完整语法文档见 docs/syntax/与仓库源码/测试的关键细节示例中的文本可直接粘贴到任意 Mermaid 渲染环境如 Mermaid Live Editor或配置了mermaid的 HTML 页面运行验证。运行提示所有示例都是纯文本图定义。在 HTML 页面中可将定义写入pre classmermaid…/pre标签并调用mermaid.initialize({ startOnLoad: true })触发渲染部署与使用方式详见 Getting Started 与 Usage。图类型总览与基本格式一个 Mermaid 图定义通常由首行图类型关键字 若干语句行构成。这份示例文档恰好覆盖了四种叙事形态的图表类别图类型首行关键字典型用途流程 / 结构Flowchartgraph TD流程、状态流转、组织关系结构Class diagramclassDiagram面向对象建模交互Sequence diagramsequenceDiagram消息时序交互交互Use case diagramusecase-beta参与者与系统用例规划Gantt diagramgantt甘特排期规划User Journeyjourney用户体验旅程版本Git graphgitGraphGit 分支提交史数据建模ER diagramerDiagram实体关系数据可视化Quadrant chartquadrantChart四象限分析数据可视化XY chartxychart/xychart-beta柱状 / 折线图注意两类图的写法差异XY 图在语法文档中以xychart为主体如 docs/syntax/xyChart.md示例文档则使用了带 Beta 标识的xychart-beta关键字用例图使用单 tokenusecase-beta。若渲染器报未知图类型先核对首行关键字是否与安装版本匹配。Flowchart最常用的图示例graph TD; A--B; A--C; B--D; C--D;要点首行graph或flowchart后的字母表示布局方向TD为自上而下TB同义也可用LR左右、BT自下而上、RL从右到左。后续每行以分号结尾是一种可选的防御性写法分号会被忽略仅作语句分隔。每条A--B即一条从节点 A 指向节点 B 的实线箭头字母本身即节点 id渲染时默认把 id 作为节点文本。节点并不局限于此处的裸文本节点。示例文档还展示了更丰富的节点形态与连线见 docs/syntax/examples.md 的流程图部分A[Square Rect]矩形、B((Circle))圆形、C(Round Rect)圆角矩形、D{Rhombus}菱形以及带文字标签的连线-- Link text --、带br/换行的说明、subgraph子图与虚线-.-、粗线等。完整语法参见 docs/syntax/flowchart.md也可以在 demos/flowchart.html 中交互查看效果仓库 e2e/diagrams/flowchart/ 目录下存有大量渲染回归用例例如 1-should-render-a-simple-flowchart.mmd。Sequence diagram消息时序示例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!这段示例几乎覆盖了时序图的核心语法participant 名字显式声明参与者并决定其从左到右的排列顺序省略声明时参与者按首次出现顺序排布。更完整的语法文档docs/syntax/sequenceDiagram.md还支持actor角色符号人形图标与{…}形式的参与者外观配置。消息箭头由两部分拼成实线-或虚线--加上箭头形状实心箭头、带刺实心箭头、)开放箭头、x叉形箭头等。A-B: 文本表示同步调用消息A--B表示异步返回虚线。loop … end声明循环/消息块alt/opt也类似需要在end处闭合。由于语言解析机制end 作为节点/参与者名字时可能破坏图需用括号、引号或方括号包裹如(end)这一注意点在语法文档中有明确提示。Note right of John: …在参与者旁侧添加备注br/用于强制换行。仓库在 e2e/diagrams/sequence/ 下有 100 个时序图渲染回归样例可作为复杂语法的活字典。Use case diagram参与者与用例示例usecase-beta direction LR actor Customer Checkout(Place order) Customer -- Checkout这是本仓库中较新的用例图实现关键字统一为usecase-beta语法细节见 docs/syntax/usecase.mddirection LR声明布局方向可用TD/TB/BT/LR/RL之一。actor Customer声明参与者裸声明以 id 作为显示标签也可写成actor Admin(Main administrator)提供独立显示标签。Checkout(Place order)声明一个椭圆用例显示文本为Place order标识符为Checkout若写成Report[Generate report]则是矩形用例(…)对应椭圆、[…]对应矩形。关系Customer -- Checkout连接参与者与用例。关系端点可以先出现、后声明最终形状与标签由声明决定没有任何显式声明的端点会被当作椭圆用例而参与者必须显式actor声明不会从关系中推断。示例文档还展示了若干进阶写法同为 usecase 语法页的示例参与者四种变体默认 stick、{ type: hollow }、{ type: awesome }与{ icon: fa:user }图标参与者、business: true业务斜杠标记、stereotype构造型、systemBoundary … end系统边界分组以及:::class与classDef的应用。Gantt 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核心结构完整语法见 docs/syntax/gantt.md头部指令dateFormat定义日期格式默认是YYYY-MM-DDtitle设置标题excludes排除日期weekdays是内置快捷排除项。section 名称把任务分组。任务行格式为任务名 : 状态, id, 开始[, 结束或时长]。状态标记包括done已完成、active进行中缺省为空即未来任务id用于任务间引用开始时间既可以是绝对日期2014-01-06,2014-01-08也可以是相对引用after des2时长可用3d、5d等相对单位。Class 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类图用一行一条关系描述类间语义完整语法见 docs/syntax/classDiagram.md|--泛化继承、*--组合、o--聚合、..依赖、--关联、--*、--|、--双向关联等行尾冒号后可跟关系标签。Class07 : equals()与Class07 : Object[] elementData两种写法分别给类追加方法成员与属性成员。可见性前缀/-/#/~、注解、泛型、命名空间等在语法文档中有完整说明。Git graph分支与提交示例gitGraph commit commit branch develop commit commit commit checkout main commit commitgitGraph图把 Git 操作可视化为提交点序列完整语法见 docs/syntax/gitgraph.mdcommit在当前位置产生一次提交branch name从当前提交创建新分支并切换过去checkout name切回已有分支。此外还支持merge、cherry-pick、reset、带标签/类型的提交如commit id: … tag: …、type: HIGHLIGHT等操作以及头部gitGraph LR:这样的方向选项。仓库在 e2e/diagrams/gitgraph/ 下保存了上百个提交场景的渲染用例。Entity Relationship Diagram实验性示例erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : usesER 图目前标注为实验性完整语法见 docs/syntax/entityRelationshipDiagram.md。关系行使用鸦爪crows foot基数记号||表示恰好一个、o{表示零或多个、|{表示一或多个、..虚线等行末冒号后是关系名。实体声明可带属性块也支持在实体名后追加别名与注释。类型化声明、复合键、多个实体间往返关系等更多细节都收录在语法文档中e2e/diagrams/er-diagram/ 提供了大量渲染用例。User Journey 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用户旅程图用于刻画不同类型用户完成某项任务的具体步骤是现状流程的可视化docs/syntax/userJourney.mdjourney开头title设置整体标题。section 名称把步骤分组对应一个时间区段。每个任务一行的格式为任务名: score: 逗号分隔的参与者列表其中 score 是1 到 5含两端的整数语义上代表任务体验/情绪的得分参与者可以多个用逗号分隔如1: Me, Cat。Quadrant Chart四象限图示例quadrantChart title Reach and engagement of campaigns x-axis Low Reach -- High Reach y-axis Low Engagement -- High Engagement quadrant-1 We should expand quadrant-2 Need to promote quadrant-3 Re-evaluate quadrant-4 May be improved Campaign A: [0.3, 0.6] Campaign B: [0.45, 0.23] Campaign C: [0.57, 0.69] Campaign D: [0.78, 0.34] Campaign E: [0.40, 0.34] Campaign F: [0.35, 0.78]语法要点完整说明见 docs/syntax/quadrantChart.mdx-axis 左侧文本 -- 右侧文本--分隔左右两端文本若只写x-axis 文本则只渲染左侧文本。y-axis 底部文本 -- 顶部文本--分隔底部与顶部文本注意方向与 x 轴相反只写y-axis 文本时只渲染底部。quadrant-1/2/3/4 文本分别给右上、左上、左下、右下四个象限设定显示文本。点用名称: [x, y]表示x 与 y 的取值范围都是 0~1。渲染细节若图中没有任何点轴线文本与象限文本会居中于各自象限有点时 x 轴标签渲染在象限左侧并显示在图底部y 轴标签渲染在对应象限底部象限文本位于象限顶部。该图还支持丰富的配置与主题定制在文档头部 frontmatter 中通过config.quadrantChart控制chartWidth、chartHeight、titlePadding、titleFontSize、quadrantPadding、quadrantLabelFontSize、xAxisPosition默认top、yAxisPosition默认left等布局参数完整参数表见语法文档通过themeVariables下的quadrant1Fill~quadrant4Fill、quadrant1TextFill~quadrant4TextFill、quadrantPointFill、quadrantXAxisTextFill等主题变量分别调整各象限填充色、文字色、点色与轴线色。点也支持直接样式与classDef共享类两种风格方式color、radius、stroke-width、stroke-color优先级为直接样式 类样式 主题样式。仓库 e2e/diagrams/quadrant-chart/ 存有对应渲染用例。XY Chart柱状图与折线图示例xychart-beta title Sales Revenue x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis Revenue (in $) 4000 -- 11000 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]语法要点完整说明见 docs/syntax/xyChart.md标题title …中若包含空格必须用双引号包裹单个词可不加。x 轴既可以是分类轴如x-axis [jan, feb, …]带空格的分类需加引号也可以是数值范围轴x-axis title min -- max。y 轴只能是数值范围y-axis Revenue (in $) 4000 -- 11000指定标题与范围只写y-axis title时范围由数据自动推算。x/y 轴声明都可省略缺省时尝试由数据生成范围。bar [数值数组]画柱状图line [数值数组]画折线图若给系列命名如line series name […]命名系列会自动出现在图例中Legends需要 v11.17.0 才支持。最小可运行示例只需图类型加一个数据系列例如xychartline [1.3, .6, 2.4, -.34]。更细的配置位于config.xyChart宽度/高度默认 700/500、showTitle、showLegend、chartOrientation: vertical | horizontal、数据标签showDataLabel/showDataLabelOutsideBar等以及config.xyChart.xAxis/yAxis下属的AxisConfigshowLabel、showTick、tickLength、labelRotation等。主题色则通过themeVariables.xyChart如titleColor、xAxisLabelColor、plotColorPalette等配置折线与柱子的颜色由plotColorPalette按图元顺序取用。把示例文档当起点继续深入本文是示例文档packages/mermaid/src/docs/intro/examples.md的展开导读。要深入某一类图建议按示例 → 完整语法页 → 配置/主题页 → 源码的顺序查阅仓库资源完整语法每个链接都指向独立语法页如 flowchart、sequenceDiagram、usecase、gantt、classDiagram、gitgraph、entityRelationshipDiagram、userJourney、quadrantChart、xyChart。这些源文档位于 packages/mermaid/src/docs/syntax/。更多混合示例示例文档的姊妹篇 docs/syntax/examples.md 汇集了基本饼图大流程图加样式带注释的时序图等综合示例是临摹不同图风格的好材料。可运行演示与回归用例demos/下每种图类型都有对应的 HTML 演示页如 flowchart.html、sequence.html仓库的端到端测试见 e2e/diagrams/ 下各子目录的.mmd文件覆盖了每类图的边界场景例如数据标签是否在柱内/柱外渲染、象限坐标是否越界、多分支提交的 git 场景等可作为学习什么写法会被渲染成什么效果的事实来源。结合渲染原理来说Mermaid 各图在 packages/mermaid/src/diagrams/ 中各自拥有 parser语法解析、db数据模型与 renderer渲染器三段式实现示例文本先被解析器转化为中间数据再交给布局与绘图模块输出 SVG。因此语法文档里描述的规则、配置表中的默认值都以该目录下的源码与测试为准示例页中的代码则可以随时粘贴验证——这正是把文档与代码对齐对抗 doc-rot的 Mermaid 设计初衷。【免费下载链接】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），仅供参考