> ## Documentation Index
> Fetch the complete documentation index at: https://docs.jinba.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Mermaid図

> Mermaid図コードを画像（PNG/SVG/PDF）に変換

## 概要

Mermaidはテキストベースの記法から視覚的な図を生成するダイアグラムとフローチャートツールです。フローチャート、シーケンス図、クラス図、状態図など、さまざまな図のタイプをサポートしています。Mermaidコードから高品質な画像（PNG、SVG、PDF）を生成します。

**E2Bサンドボックス環境で実行**されるため、ローカル環境にmermaid-cliをインストールする必要はありません。Node.jsとChromiumがプリインストールされた隔離された環境で安全に変換処理が行われます。

## 主な機能

### MERMAID\_CONVERT

* Mermaid図コードをPNG、SVG、PDF画像に変換
* **E2Bサンドボックス環境で安全に実行** - ローカルインストール不要
* すべてのMermaid図タイプをサポート
* 背景色オプション: 透明または白（PNGのみ）
* クリーンで高品質な図出力
* 生成された画像をダウンロードできる署名付きURLを返却

## 認証

Mermaidツールには認証は不要です。

## 例: 業務承認フロー

```yaml theme={null}
- id: create_approval_flowchart
  name: create_approval_flowchart
  tool: MERMAID_CONVERT
  input:
    - name: diagram
      value: |
        flowchart TD
            Start([申請開始]) --> A[担当者が申請書を作成]
            A --> B[上長が確認]
            B --> C{確認結果}
            C -->|不備あり| D[差し戻し]
            D --> A
            C -->|承認| E[承認済み]
            E --> F[管理部門に共有]
            F --> G[管理部門が処理]
            G --> End([完了])

            style Start fill:#4a90e2,stroke:#357abd,color:#fff
            style End fill:#4a90e2,stroke:#357abd,color:#fff
            style E fill:#66bb6a,stroke:#4caf50,color:#fff
            style D fill:#ef5350,stroke:#f44336,color:#fff
    - name: outputFormat
      value: "png"
    - name: backgroundColor
      value: "white"

# 結果: {{steps.create_approval_flowchart.result}}
# PNG画像をダウンロードするための署名付きURL
```

## 例: シーケンス図

```yaml theme={null}
- id: create_sequence_diagram
  name: create_sequence_diagram
  tool: MERMAID_CONVERT
  input:
    - name: diagram
      value: |
        sequenceDiagram
            participant ユーザー
            participant API
            participant データベース

            ユーザー->>API: ログイン要求
            activate API
            API->>データベース: 認証情報確認
            activate データベース
            データベース-->>API: ユーザー発見
            deactivate データベース
            API-->>ユーザー: JWTトークン
            deactivate API

            ユーザー->>API: データ取得（トークン付き）
            activate API
            API->>データベース: データ取得
            activate データベース
            データベース-->>API: データ返却
            deactivate データベース
            API-->>ユーザー: JSONレスポンス
            deactivate API
    - name: outputFormat
      value: "svg"

# 結果: {{steps.create_sequence_diagram.result}}
# SVGファイルをダウンロードするための署名付きURL
```

## 例: 状態図

```yaml theme={null}
- id: create_state_diagram
  name: create_state_diagram
  tool: MERMAID_CONVERT
  input:
    - name: diagram
      value: |
        stateDiagram-v2
            [*] --> 下書き
            下書き --> レビュー中: 提出
            レビュー中 --> 承認済み: 承認
            レビュー中 --> 却下: 却下
            却下 --> 下書き: 修正
            承認済み --> 公開済み: 公開
            公開済み --> アーカイブ: アーカイブ
            アーカイブ --> [*]

            note right of レビュー中
                管理者が
                内容を確認
            end note
    - name: outputFormat
      value: "pdf"

# 結果: {{steps.create_state_diagram.result}}
# PDFファイルをダウンロードするための署名付きURL
```

## サポートされている図のタイプ

| タイプ       | 説明               | ユースケース                 |
| --------- | ---------------- | ---------------------- |
| フローチャート   | プロセスフローと決定木      | 業務プロセス、ワークフロー          |
| シーケンス図    | エンティティ間のインタラクション | APIフロー、通信プロトコル         |
| クラス図      | UMLクラス関係         | ソフトウェアアーキテクチャ、データモデル   |
| 状態図       | 状態遷移             | アプリケーション状態、ステータスワークフロー |
| ER図       | データベース関係         | データベース設計、データモデリング      |
| ガントチャート   | プロジェクトタイムライン     | プロジェクト計画、スケジュール        |
| 円グラフ      | データの割合           | 統計、レポート                |
| Gitグラフ    | バージョン管理フロー       | リリースプロセス、ブランチ戦略        |
| ユーザージャーニー | ユーザー体験フロー        | UXデザイン、カスタマージャーニー      |
| マインドマップ   | 階層的アイデア          | ブレインストーミング、コンセプトマッピング  |
| タイムライン    | イベントシーケンス        | 歴史的イベント、ロードマップ         |

## 基本構文例

### フローチャート

```mermaid theme={null}
flowchart LR
    A[開始] --> B{判断}
    B -->|はい| C[アクション1]
    B -->|いいえ| D[アクション2]
```

### シーケンス図

```mermaid theme={null}
sequenceDiagram
    Alice->>Bob: こんにちはBob!
    Bob-->>Alice: やあAlice!
```

### クラス図

```mermaid theme={null}
classDiagram
    動物 <|-- 犬
    動物 <|-- 猫
    動物: +String 名前
    動物: +鳴く()
```

### 状態図

```mermaid theme={null}
stateDiagram-v2
    [*] --> アクティブ
    アクティブ --> 非アクティブ
    非アクティブ --> アクティブ
```

## スタイリングとテーマ

### カスタムカラー

```mermaid theme={null}
%%{ init: { 'theme': 'base', 'themeVariables': { 'primaryColor': '#ff6600' } } }%%
flowchart TD
    A[スタイル付きノード]
```

### ノードスタイリング

```mermaid theme={null}
flowchart TD
    A[通常]
    B[重要]
    C[成功]

    style B fill:#ff6600,stroke:#ff4400,color:#fff
    style C fill:#66bb6a,stroke:#4caf50,color:#fff
```

## ユースケース

* **業務プロセス文書化**: 承認ワークフロー、運用手順
* **システムアーキテクチャ**: APIインタラクション、マイクロサービス通信
* **データベース設計**: ER図、スキーマ関係
* **プロジェクト計画**: ガントチャート、タイムライン
* **技術文書**: クラス図、状態機械
* **ユーザー体験**: ユーザージャーニー、インタラクションフロー
* **バージョン管理**: Gitブランチ戦略、リリースプロセス

## ベストプラクティス

### 図のデザイン

* 図を焦点を絞り、複雑すぎないようにする
* 明確で説明的なラベルを使用
* 一貫したスタイリングを適用
* 重要なコンテキストにはノートを追加
* ユースケースに適した図のタイプを使用

### フォーマット

* 可読性のために適切なインデントを使用
* 関連する要素をグループ化
* 複雑なロジックを説明するコメントを使用
* 本番使用前に図をテスト

### パフォーマンス

* 大きな図はより長いタイムアウトが必要になる場合があります
* 非常に複雑な図は分割を検討
* Web表示にはSVGを使用（ファイルサイズが小さい）
* ドキュメントやプレゼンテーションにはPNG/PDFを使用

### アクセシビリティ

* ハイコントラストの色を使用
* 説明的なラベルを含める
* 代替テキスト説明を提供
* フォントサイズが読みやすいことを確認

## 出力形式の推奨

| 形式  | 最適な用途                | 利点                    |
| --- | -------------------- | --------------------- |
| PNG | ドキュメント、プレゼンテーション、Web | 汎用サポート、透過背景           |
| SVG | Web表示、スケーラブルグラフィックス  | 小さなファイルサイズ、無限スケーリング   |
| PDF | 印刷、ドキュメント            | プロフェッショナルな出力、埋め込みフォント |

## 制限事項

* 非常に複雑な図はタイムアウト制限に達する可能性があります
* output-files APIのファイルサイズ制限が適用されます
* 背景色オプションはPNG形式でのみ機能します
* 一部の高度なMermaid機能には特定のバージョンが必要な場合があります

完全なMermaid構文リファレンスについては、[Mermaidドキュメント](https://mermaid.js.org/)をご覧ください。