メインコンテンツへスキップ

​
概要

Mermaidはテキストベースの記法から視覚的な図を生成するダイアグラムとフローチャートツールです。フローチャート、シーケンス図、クラス図、状態図など、さまざまな図のタイプをサポートしています。Mermaidコードから高品質な画像（PNG、SVG、PDF）を生成します。 E2Bサンドボックス環境で実行されるため、ローカル環境にmermaid-cliをインストールする必要はありません。Node.jsとChromiumがプリインストールされた隔離された環境で安全に変換処理が行われます。

​
主な機能

​
MERMAID_CONVERT

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

​
認証

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

​
例: 業務承認フロー

- 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

​
例: シーケンス図

- 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

​
例: 状態図

- 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デザイン、カスタマージャーニー
マインドマップ階層的アイデアブレインストーミング、コンセプトマッピング
タイムラインイベントシーケンス歴史的イベント、ロードマップ

​
基本構文例

​
フローチャート

​
シーケンス図

​
クラス図

​
状態図

​
スタイリングとテーマ

​
カスタムカラー

​
ノードスタイリング

​
ユースケース

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

​
ベストプラクティス

​
図のデザイン

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

​
フォーマット

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

​
パフォーマンス

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

​
アクセシビリティ

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

​
出力形式の推奨

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

​
制限事項

  • 非常に複雑な図はタイムアウト制限に達する可能性があります
  • output-files APIのファイルサイズ制限が適用されます
  • 背景色オプションはPNG形式でのみ機能します
  • 一部の高度なMermaid機能には特定のバージョンが必要な場合があります
完全なMermaid構文リファレンスについては、Mermaidドキュメントをご覧ください。