mermaidjs-v11

Mermaid.js v11

概要

Mermaid.js v11 の宣言的な構文を使って、テキストベースの図を作成できます。CLI でコードを SVG／PNG／PDF に変換したり、ブラウザーや Markdown ファイルでレンダリングしたりできます。

クイックスタート

基本的な図の構造：

{diagram-type}
  {diagram-content}

よく使われる図の種類：

• flowchart - プロセスフロー、決定木
• sequenceDiagram - アクター間のやり取り、API のフロー
• classDiagram - OOP 構造、データモデル
• stateDiagram - ステートマシン、ワークフロー
• erDiagram - データベースの関係
• gantt - プロジェクトのタイムライン
• journey - ユーザーエクスペリエンスのフロー

構文を含む 24 種類以上のすべての図については、references/diagram-types.md を参照してください。

図の作成

Markdown のインラインコードブロック：

```mermaid
flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]
```

フロントマターによる設定：

```mermaid
---
theme: dark
---
flowchart LR
    A --> B
```

コメント： 1 行コメントには %% のプレフィックスを使用します。

CLI の使い方

.mmd ファイルを画像に変換します：

# Installation
npm install -g @mermaid-js/mermaid-cli

# Basic conversion
mmdc -i diagram.mmd -o diagram.svg

# With theme and background
mmdc -i input.mmd -o output.png -t dark -b transparent

# Custom styling
mmdc -i diagram.mmd --cssFile style.css -o output.svg

Docker、一括処理、高度なワークフローについては、references/cli-usage.md を参照してください。

JavaScript との統合

HTML への埋め込み：

<pre class="mermaid">
  flowchart TD
    A[Client] --> B[Server]
</pre>
<script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
<script>mermaid.initialize({ startOnLoad: true });</script>

Node.js API と高度な統合パターンについては、references/integration.md を参照してください。

設定とテーマ

よく使われるオプション：

• theme：「default」、「dark」、「forest」、「neutral」、「base」
• look：「classic」、「handDrawn」
• fontFamily：カスタムフォントの指定
• securityLevel：「strict」、「loose」、「antiscript」

設定オプション、テーマ、カスタマイズの詳細については、references/configuration.md を参照してください。

実用的なパターン

次の内容については、references/examples.md を読み込んでください：

• アーキテクチャ図
• API ドキュメントのフロー
• データベーススキーマ
• プロジェクトのタイムライン
• ステートマシン
• ユーザージャーニーマップ

リソース

• references/diagram-types.md - 24 種類以上のすべての図の構文
• references/configuration.md - 設定、テーマ、アクセシビリティ
• references/cli-usage.md - CLI コマンドとワークフロー
• references/integration.md - JavaScript API と埋め込み
• references/examples.md - 実用的なパターンとユースケース