Skip to main content

概要

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

主な機能

MERMAID_CONVERT

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

認証

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

例: 業務承認フロー

例: シーケンス図

例: 状態図

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

基本構文例

フローチャート

シーケンス図

クラス図

状態図

スタイリングとテーマ

カスタムカラー

ノードスタイリング

ユースケース

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

ベストプラクティス

図のデザイン

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

フォーマット

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

パフォーマンス

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

アクセシビリティ

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

出力形式の推奨

制限事項

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