企业官网建设流程全解析

Mermaid 入门示例：一份覆盖从流程图到 XY 图的图表语法速查指南

【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid

Mermaid 的这份官方示例文档（位于 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 class="mermaid">…</pre>标签并调用mermaid.initialize({ startOnLoad: true })触发渲染（部署与使用方式详见 Getting Started 与 Usage）。

图类型总览与基本格式

一个 Mermaid 图定义通常由"首行图类型关键字 + 若干语句行"构成。这份示例文档恰好覆盖了四种叙事形态的图表：

注意两类图的写法差异：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.md）：

• direction 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-DD）；title设置标题；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 commit

gitGraph图把 Git 操作可视化为提交点序列（完整语法见 docs/syntax/gitgraph.md）：commit在当前位置产生一次提交，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 : uses

ER 图目前标注为实验性（完整语法见 docs/syntax/entityRelationshipDiagram.md）。关系行使用鸦爪（crow's 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.md）：

• journey开头，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.md）：

• x-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+ 才支持）。最小可运行示例只需图类型加一个数据系列，例如xychart+line [+1.3, .6, 2.4, -.34]。
• 更细的配置位于config.xyChart（宽度/高度默认 700/500、showTitle、showLegend、chartOrientation: 'vertical' | 'horizontal'、数据标签showDataLabel/showDataLabelOutsideBar等），以及config.xyChart.xAxis/yAxis下属的AxisConfig（showLabel、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