主题
辅助功能选项
🌐 Accessibility Options
可访问性
🌐 Accessibility
随着 Mermaid 库的使用范围越来越广，我们已经开始根据社区的反馈，致力于开发更易于使用的功能。
🌐 Now with Mermaid library in much wider use, we have started to work towards more accessible features, based on the feedback from the community.
增加可访问性意味着通过视觉图表传达的丰富信息可以提供给使用辅助技术的人（当然也包括搜索引擎）。 阅读更多关于可访问的丰富互联网应用和 W3 标准的信息。
🌐 Adding accessibility means that the rich information communicated by visual diagrams can be made available to those using assistive technologies (and of course to search engines). Read more about Accessible Rich Internet Applications and the W3 standards.
Mermaid 会自动插入 aria-roledescription，并且如果图表作者在图表文本中提供，还会插入 可访问的标题和描述。
🌐 Mermaid will automatically insert the aria-roledescription and, if provided in the diagram text by the diagram author, the accessible title and description.
aria-roledescription
SVG HTML 元素的 aria-roledescription 设置为图表类型键。（注意，这可能与图表文本中使用的关键字略有不同。）
🌐 The aria-roledescription for the SVG HTML element is set to the diagram type key. (Note this may be slightly different than the keyword used for the diagram in the diagram text.)
例如：状态图的图表类型键是 "stateDiagram"。这里是显示自动插入的 aria-roledescription 设置为 "stateDiagram" 的 SVG 标签（部分）的 HTML。(注意，为了清晰起见，一些 SVG 属性和 SVG 内容被省略)：
🌐 For example: The diagram type key for a state diagram is "stateDiagram". Here (a part of) the HTML of the SVG tag that shows the automatically inserted aria-roledescription set to "stateDiagram". (Note that some of the SVG attributes and the SVG contents are omitted for clarity.):
html
<svg
aria-roledescription="stateDiagram"
class="statediagram"
xmlns="http://www.w3.org/2000/svg"
width="100%"
id="mermaid-1668720491568"
></svg>可访问的标题和描述
🌐 Accessible Title and Description
所有图表类型都支持可访问的标题和描述。我们尽量保持所有图表的关键字和格式一致，以便于理解和维护。
🌐 Support for accessible titles and descriptions is available for all diagrams/chart types. We have tried to keep the same keywords and format for all diagrams so that it is easy to understand and maintain.
可访问的标题和描述将在 SVG 元素内添加 <title> 和 <desc> 元素，并在 SVG 标签中添加 aria-labelledby 和 aria-describedby 属性。
🌐 The accessible title and description will add <title> and <desc> elements within the SVG element and the aria-labelledby and aria-describedby attributes in the SVG tag.
这是生成的 HTML，显示 SVG 元素由可访问标题（id = chart-title-mermaid-1668725057758）标记，并由可访问描述（id = chart-desc-mermaid-1668725057758）描述；以及可访问标题元素（文本 = "这是可访问标题"）和可访问描述元素（文本 = "这是一个可访问的描述"）。
🌐 Here is HTML that is generated, showing that the SVG element is labelled by the accessible title (id = chart-title-mermaid-1668725057758) and described by the accessible description (id = chart-desc-mermaid-1668725057758 ); and the accessible title element (text = "This is the accessible title") and the accessible description element (text = "This is an accessible description").
（请注意，为了清晰起见，省略了一些 SVG 属性和 SVG 内容。）
🌐 (Note that some of the SVG attributes and the SVG contents are omitted for clarity.)
html
<svg
aria-labelledby="chart-title-mermaid-1668725057758"
aria-describedby="chart-desc-mermaid-1668725057758"
xmlns="http://www.w3.org/2000/svg"
width="100%"
id="mermaid-1668725057758"
>
<title id="chart-title-mermaid-1668725057758">This is the accessible title</title>
<desc id="chart-desc-mermaid-1668725057758">This is an accessible description</desc>
</svg>语法的详细信息如下。
🌐 Details for the syntax follow.
可访问标题
🌐 accessible title
可访问标题是通过 accTitle 关键字 指定的，后面跟一个冒号 (:) 和标题的字符串值。 字符串值在行尾结束。（它只能是单行。）
🌐 The accessible title is specified with the accTitle keyword, followed by a colon (:), and the string value for the title. The string value ends at the end of the line. (It can only be a single line.)
例如：accTitle: 这是一个单行标题
🌐 Ex: accTitle: This is a single line title
请参见 accTitle 和 accDescr 的使用示例，了解如何在图表中使用它以及生成的 HTML 结果。
🌐 See the accTitle and accDescr usage examples for how this can be used in a diagram and the resulting HTML generated.
可访问描述
🌐 accessible description
可访问的描述可以只有一行（单行），也可以是多行。
🌐 An accessible description can be 1 line long (a single line) or many lines long.
单行可访问描述 是用 accDescr 关键字 指定的，后面跟一个冒号（:），再跟描述的字符串值。
🌐 The single line accessible description is specified with the accDescr keyword, followed by a colon (:), followed by the string value for the description.
例如：accDescr: 这是一个单行描述。
🌐 Ex: accDescr: This is a single line description.
多行可访问描述 _ 在 accDescr 关键字后没有冒号 (:)_，并且用大括号 ({}) 包围。
🌐 A multiple line accessible description does not have a colon (:) after the accDescr keyword and is surrounded by curly brackets ({}).
例如：
🌐 Ex:
markdown
accDescr {
This is a multiple line accessible description.
It does not have a colon and is surrounded by curly brackets.
}请参见 accTitle 和 accDescr 的使用示例，了解如何在图表中使用它以及生成的 HTML 结果。
🌐 See the accTitle and accDescr usage examples for how this can be used in a diagram and the resulting HTML generated.
accTitle 和 accDescr 使用示例
🌐 accTitle and accDescr Usage Examples
- 具有可访问标题“大决定”的流程图，以及单行可访问描述“鲍勃的汉堡制作重大决策的流程”
这是为 SVG 元素生成的 HTML：(请注意，为了清晰起见，省略了一些 SVG 属性和 SVG 内容。):
🌐 Here is the HTML generated for the SVG element: (Note that some of the SVG attributes and the SVG contents are omitted for clarity.):
html
<svg
aria-labelledby="chart-title-mermaid_382ee221"
aria-describedby="chart-desc-mermaid_382ee221"
aria-roledescription="flowchart-v2"
xmlns="http://www.w3.org/2000/svg"
width="100%"
id="mermaid_382ee221"
>
<title id="chart-title-mermaid_382ee221">Big decisions</title>
<desc id="chart-desc-mermaid_382ee221">Bob's Burgers process for making big decisions</desc>
</svg>- 带有可访问标题“Bob's Burgers做重大决策”的流程图，以及多行可访问描述“用于做出非常非常重大决策的官方Bob's Burgers公司流程。这实际上是一个非常简单的流程：识别重大决策，然后做出重大决策。”
这是为 SVG 元素生成的 HTML：(请注意，为了清晰起见，省略了一些 SVG 属性和 SVG 内容。):
🌐 Here is the HTML generated for the SVG element: (Note that some of the SVG attributes and the SVG contents are omitted for clarity.):
html
<svg
aria-labelledby="chart-title-mermaid_382ee221"
aria-describedby="chart-desc-mermaid_382ee221"
aria-roledescription="flowchart-v2"
xmlns="http://www.w3.org/2000/svg"
width="100%"
id="mermaid_382ee221"
>
<title id="chart-title-mermaid_382ee221">Big decisions</title>
<desc id="chart-desc-mermaid_382ee221">
The official Bob's Burgers corporate processes that are used for making very, very big
decisions. This is actually a very simple flow: identify the big decision and then make the big
decision.
</desc>
</svg>其他图表类型的示例代码片段
🌐 Sample Code Snippets for other diagram types
类图
🌐 Class Diagram
实体关系图
🌐 Entity Relationship Diagram
甘特图
🌐 Gantt Chart
GitGraph
饼图
🌐 Pie Chart
需求图
🌐 Requirement Diagram
时序图
🌐 Sequence Diagram
状态图
🌐 State Diagram
用户旅程图
🌐 User Journey Diagram