添加新图表/图表 📊 ​

示例 ​

请参考以下PRs了解如何使用Langium添加新的图表语法。

• https://github.com/mermaid-js/mermaid/pull/4839
• https://github.com/mermaid-js/mermaid/pull/4751

步骤 1: 语法 & 解析 ​

步骤2：渲染 ​

编写一个渲染器，根据解析过程中找到的数据渲染图表。要查看示例，请查看sequenceRenderer.js而不是流程图渲染器，因为这是一个更通用的示例。

将渲染器放置在图表文件夹中。

步骤3：检测新图表类型 ​

第二件事是添加检测新图表类型的能力到diagram-api/detectType.ts中的detectType。检测应返回新图表类型的键。此键将用作aria roledescription，因此它应该是一个能清楚描述图表类型的词。例如，如果你的新图表使用UML部署图，一个好的键是"UMLDeploymentDiagram"，因为辅助技术如屏幕阅读器会将其读作"U-M-L 部署图"。另一个好的键是"deploymentDiagram"，因为它会被读作"部署图"。一个不好的键是"deployment"，因为它不能充分描述图表。

请注意，图表类型键不必与为语法选择的图表关键字相同，但如果它们相同会更有帮助。

图表的常见部分 ​

不同类型的图表之间有一些共同的特征。我们尝试标准化这些图表，使其对最终用户尽可能相似。这些共同点包括：

• 指令，一种从图表代码内部修改图表配置的方式。
• 可访问性，作者为使用屏幕阅读器访问带有图表的文本的人提供额外信息（如标题和描述）的一种方式。
• 主题，有一种常见的方法可以修改Mermaid中图表的样式。
• 注释应遵循mermaid标准

以下是一些关于如何处理这些不同领域的提示。

可访问性 ​

Mermaid 自动为图表 SVG HTML 元素添加以下可访问性信息：

• aria-roledescription
• 可访问的标题
• 可访问的描述

aria-roledescription ​

aria-roledescription 自动设置为 图表类型 并插入到 SVG 元素中。

请参阅aria-roledescription的定义在可访问的富互联网应用W3标准中。

可访问的标题和描述 ​

可访问标题和描述的语法在可访问性文档部分中进行了描述。

设置标题和描述的函数由一个公共模块提供。这是在flowDb.js中的导入：

import {
  setAccTitle,
  getAccTitle,
  getAccDescription,
  setAccDescription,
  clear as commonClear,
} from '../../commonDb';

可访问性标题和描述被插入到mermaidAPI中render函数的SVG元素中。

主题 ​

Mermaid 支持主题并集成了主题引擎。您可以阅读更多关于如何使用主题的信息 在文档中。

当向图表添加主题时，代码中有几个重要的位置需要注意。

样式引擎的入口点在src/styles.js中。当样式被应用到图表时，Mermaid将调用getStyles函数。

此函数将依次调用一个函数你的图表应提供返回新图表的CSS。图表特定的，通常也称为getStyles，位于src/diagrams下你的图表文件夹中，应命名为styles.js。getStyles函数将使用主题选项作为参数调用，如下例所示：

const getStyles = (options) =>
  `
    .line {
      stroke-width: 1;
      stroke: ${options.lineColor};
      stroke-dasharray: 2;
    }
    // ...
    `;

请注意，您需要通过将您的函数添加到src/styles.js中的themes对象中，将其提供给主getStyles，如提供的示例中的xyzDiagram所示：

const themes = {
  flowchart,
  'flowchart-v2': flowchart,
  sequence,
  xyzDiagram,
  //...
};

颜色的实际选项和值在src/theme/theme-[xyz].js中定义。如果您在现有的主题文件中提供了图表所需的选项，那么主题化将顺利进行，不会出现任何问题。