Confluence、Notion、チームツールでMermaid図を使う

チームコラボレーションツールでのMermaid

GitHubやドキュメントサイト以外にも、チームが日常的に使うツールにMermaidダイアグラムを埋め込むことができます。主要なコラボレーションプラットフォームへの統合方法を紹介します。

Notion

NotionはMermaidをネイティブサポートしています：

1. /codeと入力してコードブロックを挿入
2. 言語ドロップダウンからMermaidを選択
3. Mermaidコードを貼り付け — インラインでレンダリングされます

flowchart LR
    Notion[Notion Page] --> Mermaid[Mermaid Block]
    Mermaid --> Render[Live Preview]

Confluence

ConfluenceはMermaidをネイティブサポートしていません。2つの方法があります：

1. Marketplaceプラグイン — Atlassian Marketplaceから「Mermaid Diagrams for Confluence」をインストール。Mermaid構文をレンダリングするマクロが追加されます。
2. HTMLマクロ — HTMLマクロを使ってMermaid JavaScriptライブラリを埋め込み、クライアントサイドでレンダリング：

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<div class="mermaid">
flowchart TD
    A --> B --> C
</div>
<script>mermaid.initialize({startOnLoad: true});</script>

Jira

Jiraはイシュー説明でMermaidをサポートしていません。回避策：

• SVG画像を添付 — ダイアグラムをSVGに事前レンダリングしてイシューに添付
• ライブエディタへのリンク — エンコードされたダイアグラム付きのmermaid.liveリンクを貼り付け
• Confluenceを使用 — Confluenceページでダイアグラムを作成し、Jiraイシューからリンク

Slack

SlackはMermaidを直接レンダリングできません。代わりに：

1. Mermaidビューアーツールでダイアグラムをレンダリング
2. PNGとしてエクスポート
3. 画像をSlackにアップロード

Microsoft Teams & SharePoint

TeamsはMermaidをレンダリングしませんが、以下が可能です：

• Mermaidライブエディタ URLをタブとして埋め込む
• Power Automateでダイアグラム画像の自動生成

一般的なヒント

• チームごとに1つのアプローチに統一して混乱を避ける
• レンダリング画像を共有する場合も、ダイアグラムソースをバージョン管理に保持する
• チームメンバーが共通のダイアグラムパターンを再利用できるよう共有スニペットライブラリを使用する