概要
Mermaid は、Markdown風テキストから ダイアグラム を生成するJavaScriptツールです。 ドキュメント作成 と開発の同期を支援し、簡単に図を修正・更新することが可能です。 非プログラマーでも Live Editor で視覚的に操作できます。 多彩な 統合・連携 があり、GitHubなど様々なアプリで利用可能です。 セキュリティ面も考慮し、 サンドボックス 描画など安全対策を実装しています。
Mermaid: Markdown風テキストからダイアグラムを生成するツール
Mermaidの概要
- JavaScriptベース で動作するダイアグラム・チャート生成ツール
- Markdown風テキスト 記法とレンダラーを利用すること
- ドキュメントと開発の 同期遅延（Doc-Rot） 問題を解消すること
- 図やドキュメントの 作成・更新コスト削減 を実現すること
- 非プログラマー でもLive Editorで直感的に図を作成・編集できること
主な特徴・用途
- Flowchart、Sequence diagram、Gantt chart、Class diagram など多様なダイアグラムをサポートすること
- 例: フローチャート、シーケンス図、ガントチャート、クラス図、状態遷移図、円グラフ、Gitグラフ、バーグラフ、ユーザージャーニー図、C4図
- Live Editor でリアルタイム編集・プレビューが可能であること
- GitHub や他アプリケーションとの 統合 が容易であること
- 生産性向上 や組織内ナレッジ共有を促進すること
利用方法・導入
- CDN やnpm経由で簡単に導入できること
- Markdown ファイル内でコードブロックとして記述・管理すること
- Live Editor やCLI、HTTPサーバーなど多様な利用方法があること
- GitHub などのプラットフォームでそのまま利用可能であること
コミュニティ・貢献
- オープンソース であり、貢献者を常時募集していること
- 貢献ガイド やIssueを通じて参加・支援が可能であること
- Argos や applitools によるPRのビジュアルリグレッションテストを導入すること
- AI Bot によるサポート（コード例、インストールガイド、デバッグ支援など）を提供すること
セキュリティ対策
- ユーザー入力による 悪意あるスクリプト 混入リスクを認識・対策すること
- サンドボックス化iframe による安全なレンダリング方式を採用すること
- 一部インタラクティブ機能は制限されるが、 セキュリティ優先 を徹底すること
- 脆弱性報告 は security@mermaid.live へのメールで受付すること
感謝・謝辞
- d3、dagre-d3、js-sequence-diagram など外部プロジェクトへの感謝を表明すること
- 貢献者 全員への謝意を示すこと
- 開発者 Knut Sveidqvist による ドキュメントの簡易化 目的での創設を伝えること
参考・ドキュメント
- 公式ドキュメント やチュートリアル、初心者ガイドを参照すること
- Integrations and Usages リストで対応アプリケーションを確認すること
- リリース手順 やバージョン管理、npm publish方法を確認すること