新しいダイアグラム/チャートの追加 📊

例

Langiumを使用して新しいダイアグラム文法を追加する方法については、以下のPRを参照してください。

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

警告

以下の手順は現在進行中であり、近日中に更新される予定です。

ステップ1：文法と解析

ステップ2：レンダリング

解析中に見つかったデータに基づいてダイアグラムをレンダリングするレンダラーを作成します。例として、フローチャートレンダラーではなくsequenceRenderer.jsを参照してください。これはより一般的な例です。

レンダラーをdiagramフォルダーに配置します。

ステップ3：新しいダイアグラムタイプの検出

次に、 `diagram-api/detectType.ts` の `detectType` に新しいダイアグラムをタイプに検出する機能を追加します。検出は、新しいダイアグラムタイプのキーを返します。このキーはaria roledescriptionとして使用されます。スクリーンリーダーなどの支援技術がダイアグラムタイプを明確に説明する単語にする必要があります。たとえば、新しいダイアグラムでUMLデプロイメントダイアグラムを使用する場合、適切なキーは「UMLDeploymentDiagram」です。支援技術（スクリーンリーダーなど）はこれを「U-M-Lデプロイメントダイアグラム」と読み上げます。もう1つの適切なキーは「deploymentDiagram」です。これは「デプロイメントダイアグラム」と読み上げられます。不適切なキーは「deployment」です。これはダイアグラムを十分に説明しません。

ダイアグラムタイプキーは、文法用に選択されたダイアグラムキーワードと同じである必要はありませんが、同じであれば便利です。

ダイアグラムの共通部分

さまざまなタイプのダイアグラム間で共通の機能がいくつかあります。エンドユーザーにとって可能な限り類似した動作をするように、ダイアグラムを標準化しようと努めています。共通点は次のとおりです。

• ディレクティブ。ダイアグラムコード内からダイアグラム設定を変更する方法です。
• アクセシビリティ。作成者が、スクリーンリーダーを使用してダイアグラムを含むテキストにアクセスするユーザーに、タイトルや説明などの追加情報を提供する方法です。
• テーマ。Mermaidでは、ダイアグラムのスタイルを変更する一般的な方法があります。
• コメントはmermaidの標準に従う必要があります

これらのさまざまな領域の処理方法について、いくつかのポインターを以下に示します。

アクセシビリティ

Mermaidは、ダイアグラムSVG HTML要素に次のアクセシビリティ情報を自動的に追加します

• aria-roledescription
• アクセス可能なタイトル
• アクセス可能な説明

aria-roledescription

aria-roledescriptionはダイアグラムタイプに自動的に設定され、SVG要素に挿入されます。

アクセシブルなリッチインターネットアプリケーションW3標準のaria-roledescriptionの定義を参照してください。

アクセス可能なタイトルと説明

アクセス可能なタイトルと説明の構文については、アクセシビリティのドキュメントセクションで説明しています。

タイトルと説明を設定するための関数は、共通モジュールによって提供されます。これはflowDb.jsのインポートです

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

アクセス可能なタイトルと説明は、mermaidAPIの `render` 関数でSVG要素に挿入されます。

テーマ設定

Mermaidはテーマをサポートし、テーマエンジンが統合されています。テーマの使用方法の詳細については、ドキュメントを参照してください。

ダイアグラムにテーマを追加する場合、コード内のいくつかの重要な場所が関係します。

スタイリングエンジンのエントリポイントは **src/styles.js** です。 `getStyles` 関数は、スタイルがダイアグラムに適用されているときにMermaidによって呼び出されます。

この関数は、 *新しいダイアグラムに提供する必要がある* 関数を呼び出し、新しいダイアグラムのCSSを返します。ダイアグラム固有の、一般的に `getStyles` とも呼ばれるこの関数は、src/diagramsの下にあるダイアグラムのフォルダーにあり、styles.jsという名前である必要があります。 `getStyles` 関数は、次の例のようにテーマオプションを引数として呼び出されます

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

提供された例のように、**src/styles.js** のテーマオブジェクトに新しい関数を追加することにより、メインの `getStyles` に関数を 제공する必要があることに注意してください

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

色の実際のオプションと値は、 **src/theme/theme-[xyz].js** で定義されています。既存のテーマファイルでダイアグラムに必要なオプションを提供すると、テーマ設定は問題なくスムーズに機能します。