添加新图表/图 📊

示例

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

警告

以下步骤仍在进行中，将很快更新。

步骤 1：语法和解析

步骤 2：渲染

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

将渲染器放在 diagram 文件夹中。

步骤 3：检测新图表类型

下一步是添加检测新图表类型到 diagram-api/detectType.ts 中的 detectType 的功能。检测应返回新图表类型的一个键。此键将用作 aria roledescription，因此它应该是一个清晰描述图表类型的词语。例如，如果您的新图表使用 UML 部署图，则一个好的键将是 "UMLDeploymentDiagram"，因为辅助技术（如屏幕阅读器）会将其语音化为 "U-M-L Deployment diagram"。另一个好的键是 "deploymentDiagram"，因为它将被语音化为 "Deployment Diagram"。一个不好的键是 "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;
    }
    // ...
    `;

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

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

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

添加新图表/图 📊 ​

示例 ​

步骤 1：语法和解析 ​

步骤 2：渲染 ​

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

图表的通用部分 ​

无障碍 ​

aria-roledescription ​

无障碍标题和描述 ​

主题 ​