Mermaid 中文网

Appearance

辅助功能选项 ​

¥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"。这里（一部分）SVG 标签的 HTML，显示自动插入的 aria-roledescription 设置为 "stateDiagram"。（请注意，为了清楚起见，省略了一些 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.)

Ex：accTitle: This is a single line title

请参阅 accTitle 和 accDecr 用法示例 了解如何在图表中使用它以及生成的 HTML。

¥See the accTitle and accDescr usage examples for how this can be used in a diagram and the resulting HTML generated.

无障碍描述 ​

¥accessible description

可访问的描述可以是 1 行（单行）或多行。

¥An accessible description can be 1 line long (a single line) or many lines long.

单行可访问描述是使用 accDecr 关键字指定的，后跟冒号 (:)，然后是描述的字符串值。

¥The single line accessible description is specified with the accDescr keyword, followed by a colon (:), followed by the string value for the description.

Ex：accDescr: This is a single line description.

多行可访问描述在 accDecr 关键字后没有冒号 (:)，并且由大括号 ({}) 包围。

¥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 和 accDecr 用法示例 了解如何在图表中使用它以及生成的 HTML。

¥See the accTitle and accDescr usage examples for how this can be used in a diagram and the resulting HTML generated.

accTitle 和 accDecr 用法示例 ​

¥accTitle and accDescr Usage Examples

  • 具有可访问标题 "重大决定" 和单行可访问描述 "鲍勃汉堡做出重大决策的流程" 的流程图

    ¥Flowchart with the accessible title "Big Decisions" and the single-line accessible description "Bob's Burgers process for making big decisions"

以下是为 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 公司流程。这实际上是一个非常简单的流程：确定重大决定，然后做出重大决定。”

    ¥Flowchart with the accessible title "Bob's Burger's Making Big Decisions" and the multiple line accessible description "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."

以下是为 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

Mermaid 中文网 - 粤ICP备13048890号